r4sas/webogram-i2p
1
0
Fork 0
Code Issues Releases Wiki Activity

New design for desktop

Browse Source 
Added external google fonts [temp]
This commit is contained in:
Igor Zhukov 2014-12-28 15:38:48 +01:00
parent 3fe287ebba
commit 24534d29b7
17 changed files with 837 additions and 565 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

364
app/css/app.css
View File

@ -2,30 +2,27 @@
html {
display: none;
background: #dee4e9 url(../img/bg_tile.png) 0 0 repeat;
background: #e7ebf0;
overflow: visible;
}
body {
color: #000;
background: none;
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Verdana, sans-serif;
font: 12px/18px 'Open Sans', "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif;
overflow: visible;
}
.font-light {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Light", Helvetica, Arial , Verdana, sans-serif;
font-weight: 300;
}
body.non_osx,
.non_osx .font-light {
font: 13px/18px Tahoma, sans-serif, Arial, Helvetica;
font-weight: normal;
}
h1, h2, h3, h4, h5 {
color: #222;
}
.non_osx h4 {
font-size: 17px;
}
.noselect {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
a {
cursor: pointer;
}
@ -186,59 +183,6 @@ input[type="number"] {
background: #fbe7e6;
}
.tg_page_head .navbar-quick-nav,
.tg_page_head .navbar-toggle {
display: none;
}
.tg_page_head .container {
display: block;
width: auto;
padding-left: 0;
padding-right: 0;
}
.tg_page_head .container .navbar-header {
margin: 0;
}
.tg_page_head .navbar-inverse {
border: 0;
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.11);
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.11);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.11);
margin: 0;
}
.ios_standalone .tg_page_head .navbar > .container {
margin-top: 20px;
}
.ios_standalone .modal.mobile_modal {
border-top: 20px solid #497495;
}
.tg_page_head .navbar > .container .navbar-brand {
padding: 8px 15px;
opacity: 0.9;
margin-left: 0;
margin-right: 20px;
-webkit-transition: opacity swing .9s;
display: block;
line-height: 0;
height: auto;
}
.tg_page_head .navbar > .container .navbar-brand:hover {
opacity: 1;
}
.tg_head_logo {
background: url(../img/T_LogoM.png) 0 0 no-repeat;
background-size: 143px 30px;
display: inline-block;
width: 143px;
height: 30px;
vertical-align: text-top;
}
.is_1x .tg_head_logo {
background-image: url(../img/T_LogoM_1x.png);
}
.navbar_offline .navbar-header,
@ -258,36 +202,6 @@ input[type="number"] {
line-height: 20px;
}
.tg_page_head .navbar-menu .navbar-nav.navbar-right {
margin-right: 0;
}
.tg_page_head .navbar-inverse .navbar-nav > li > a {
padding-top: 13px;
padding-bottom: 13px;
color: #b9cfe3;
font-size: 13px;
}
.tg_page_head .navbar-inverse .navbar-nav > li > a:hover {
color: #FFF;
}
.tg_page_head .navbar-inverse .navbar-toggle {
border-color: #497495;
outline: 0;
border: 0;
}
.tg_page_head .navbar-inverse .navbar-collapse,
.tg_page_head .navbar-inverse .navbar-form {
border-color: #497495;
}
.tg_page_head .navbar-inverse .navbar-toggle:hover,
.tg_page_head .navbar-inverse .navbar-toggle:active,
.tg_page_head .navbar-inverse .navbar-toggle:focus {
background-color: rgba(255,255,255,0.1);
}
.tg_progress {
height: 12px;
@ -468,6 +382,7 @@ input[type="number"] {
margin-top: 0;
margin-bottom: 38px;
text-align: left;
font-weight: bold;
}
.md_simple_form_description {
color: #777;
@ -897,9 +812,6 @@ img.welcome_logo {
.im_dialogs_search {
position: relative;
}
.im_page_split .im_dialogs_search {
margin-right: 48px;
}
.im_dialogs_search_field {
font-size: 12px;
line-height: normal;
@ -1056,15 +968,6 @@ a.im_dialog_selected .im_dialog_message_text {
.active a.im_dialog .im_dialog_message {
color: #FFF;
}
.im_dialog_photo {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 2px;
overflow: hidden;
margin: 0 10px 0 0;
}
.im_dialog_peer {
color: #222;
font-weight: bold;
@ -1190,26 +1093,6 @@ a.im_dialog_selected .im_dialog_date {
position: relative;
}
.im_history_typing_wrap {
line-height: 18px;
width: 100%;
height: 49px;
padding: 13px 0 18px;
overflow: hidden;
-webkit-user-select: none;
}
.im_history_typing {
font-size: 11px;
color: #999;
max-width: 526px;
margin: 0 auto;
padding: 0 77px 0 77px;
}
.im_history_typing a.im_history_typing_author {
color: #999;
font-weight: bold;
}
.im_message_unread_split {
background: #f0f4f7;
@ -1235,19 +1118,19 @@ a.im_dialog_selected .im_dialog_date {
.im_message_from_photo,
.im_message_contact_photo,
.im_message_fwd_photo {
width: 36px;
height: 36px;
width: 42px;
height: 42px;
border-radius: 50%;
overflow: hidden;
}
.im_message_from_photo .peer_initials,
.im_message_contact_photo .peer_initials,
.im_message_fwd_photo .peer_initials {
line-height: 36px;
line-height: 42px;
}
a.im_message_from_photo,
a.im_message_contact_photo {
margin: 0 12px 0 0;
margin: 0 15px 0 0;
}
.non_osx .im_message_contact_name {
font-size: 12px;
@ -1415,50 +1298,48 @@ div.im_message_video_thumb {
float: left;
width: 42px;
height: 42px;
border-radius: 0;
border-radius: 50%;
margin-right: 10px;
}
.im_message_file_button_icon {
display: inline-block;
line-height: 0;
/*#dae4ea 50%*/
background: url(../img/icons/IconsetW.png) -15px -953px no-repeat;
background-size: 42px 1171px;
background: url(../img/icons/General.png) no-repeat -14px -509px;
background-size: 40px 678px;
width: 12px;
height: 20px;
margin: 11px 15px;
height: 18px;
margin: 12px 15px;
}
.is_1x .im_message_file_button_icon {
background-image: url(../img/icons/IconsetW_1x.png);
background-image: url(../img/icons/General_1x.png);
}
.im_message_file_button_dl_doc .im_message_file_button_icon {
background-position: -13px -983px;
background-position: -12px -561px;
width: 16px;
height: 18px;
margin: 12px 13px;
margin: 13px 13px;
}
.im_message_file_button_dl_audio {
background: #6490b1;
border-radius: 2px;
border-radius: 50%;
}
.im_message_file_button_dl_audio .im_message_file_button_icon {
display: block;
width: 15px;
height: 18px;
background: url(../img/icons/IconsetW.png) -15px -897px no-repeat;
background-size: 42px 1171px;
margin: 12px 13.5px;
width: 14px;
height: 16px;
background: url(../img/icons/General.png) no-repeat -13px -611px;
background-size: 40px 678px;;
margin: 13px 16px;
}
.is_1x .im_message_file_button_dl_audio .im_message_file_button_icon {
background-image: url(../img/icons/IconsetW_1x.png);
background-position: -15px -899px;
background-image: url(../img/icons/General_1x.png);
}
.im_message_file_button_dl_audio .audio_player_btn_icon_pause,
.is_1x .im_message_file_button_dl_audio .audio_player_btn_icon_pause {
width: 12px;
height: 16px;
background-position: -15px -927px;
margin: 13px 15px;
height: 14px;
background-position: -14px -587px;
margin: 14px 15px;
}
.im_message_selected .icon-document,
@ -1566,19 +1447,11 @@ img.im_message_document_thumb {
width: 200px;
}
.audio_player_seek_slider .tg_slider_wrap {
height: 16px;
line-height: 16px;
}
.audio_player_seek_slider .tg_slider_thumb {
background: #6490b1;
width: 4px;
height: 16px;
line-height: 16px;
margin-top: 0;
border-radius: 0;
height: 18px;
line-height: 18px;
}
.audio_player_seek_slider .tg_slider_track {
margin: 6px 0;
margin: 7px 0;
background: rgba(218,228,234,0.50);
height: 4px;
border-radius: 0;
@ -1594,14 +1467,14 @@ img.im_message_document_thumb {
float: left;
}
.audio_player_volume_slider .tg_slider_wrap {
height: 16px;
line-height: 16px;
height: 18px;
line-height: 18px;
}
.audio_player_volume_slider .tg_slider_thumb {
display: none;
background: #6490b1;
width: 4px;
height: 8px;
height: 10px;
line-height: 16px;
margin-top: 4px;
border-radius: 0;
@ -1610,7 +1483,7 @@ img.im_message_document_thumb {
display: block;
}
.audio_player_volume_slider .tg_slider_track {
margin: 6px 0;
margin: 7px 0;
background: rgba(218,228,234,0.50);
height: 4px;
}
@ -1713,10 +1586,6 @@ img.im_message_document_thumb {
}
.im_content_message_wrap {
margin: 8px 0px 8px 16px
}
.im_message_date,
.im_message_fwd_date {
color: #adadad;
@ -1741,6 +1610,7 @@ a.im_message_fwd_photo {
.im_message_text {
word-wrap: break-word;
line-height: 150%;
}
span.emoji {
@ -1800,7 +1670,7 @@ span.emoji {
.im_send_panel_wrap {
margin: 0 auto;
padding: 10px 15px 22px 15px;
padding: 10px 15px 30px 15px;
}
.im_send_form_wrap {
position: relative;
@ -1810,6 +1680,19 @@ span.emoji {
position: absolute;
bottom: 0;
}
.im_attach_input,
.im_media_attach_input {
cursor: pointer;
font-size: 120px !important;
opacity: 0.01;
position: absolute;
z-index: 100;
margin: 0;
padding: 0;
top: 0;
right: 0;
}
.im_send_dropbox_wrap {
background: #FFF;
@ -1830,115 +1713,6 @@ textarea.im_message_field {
height: 50px;
resize: none;
}
.im_attach {
cursor: pointer;
display: block;
overflow: hidden;
position: relative;
padding: 0 2px;
width: 23px;
height: 24px;
margin-top: 4px;
margin-left: 20px;
}
.icon-paperclip {
display: inline-block;
width: 19px;
height: 23px;
vertical-align: text-top;
background: url(../img/icons/IconsetW.png) -12px -68px no-repeat;
background-size: 42px 1171px;
opacity: 0.8;
}
.is_1x .icon-paperclip {
background-image: url(../img/icons/IconsetW_1x.png);
}
.im_attach:hover .icon-paperclip {
opacity: 1;
}
.im_attach:active .icon-paperclip {
background-position: -12px -100px;
opacity: 1;
}
.im_emoji_btn {
cursor: pointer;
padding: 0;
width: 23px;
height: 23px;
margin-top: 4px;
}
.icon-emoji {
display: inline-block;
width: 23px;
height: 23px;
vertical-align: text-top;
background: url(../img/icons/IconsetW.png) -10px -4px no-repeat;
background-size: 42px 1171px;
opacity: 0.8;
}
.is_1x .icon-emoji {
background-image: url(../img/icons/IconsetW_1x.png);
}
.im_emoji_btn:hover .icon-emoji {
opacity: 1;
}
.im_emoji_btn:active .icon-emoji,
.im_emoji_btn.on .icon-emoji {
background-position: -10px -36px;
opacity: 1;
}
.im_attach_input,
.im_media_attach_input {
cursor: pointer;
font-size: 120px !important;
opacity: 0.01;
position: absolute;
z-index: 100;
margin: 0;
padding: 0;
top: 0;
right: 0;
}
.im_media_attach {
cursor: pointer;
display: block;
overflow: hidden;
position: relative;
padding: 0;
width: 24px;
height: 22px;
margin-top: 5px;
margin-left: 20px;
}
.icon-camera {
display: inline-block;
width: 25px;
height: 21px;
vertical-align: text-top;
background: url(../img/icons/IconsetW.png) -9px -132px no-repeat;
background-size: 42px 1171px;
opacity: 0.8;
}
.is_1x .icon-camera {
background-image: url(../img/icons/IconsetW_1x.png);
}
.im_media_attach:hover .icon-camera {
opacity: 1;
}
.im_media_attach:active .icon-camera {
background-position: -9px -162px;
opacity: 1;
}
.icon-online {
@ -2032,7 +1806,7 @@ img.img_fullsize {
font-size: 12px;
margin-bottom: 10px;
padding: 6px;
min-height: 36px;
min-height: 38px;
height: auto;
width: auto;
max-height: 284px;
@ -2077,14 +1851,14 @@ img.img_fullsize {
padding: 5px 2px 5px 5px;
}
.emoji-items-wrap1 .emoji-menu-tabs {
width: 100%;
margin-bottom: 8px;
margin-top: 3px;
width: 100%;
margin-bottom: 8px;
margin-top: 3px;
}
.emoji-items-wrap1 .emoji-menu-tabs td {
text-align: center;
color: white;
line-height: 0;
text-align: center;
color: white;
line-height: 0;
}
.emoji-menu-tabs .emoji-menu-tab {
display: inline-block;
@ -2465,10 +2239,6 @@ img.chat_modal_participant_photo {
/* Messages edit panel */
.im_edit_panel_wrap {
padding: 10px 0 34px;
margin: 0 24px 0 12px;
}
.im_edit_panel_border {
display: block;
margin: 0 0 34px 3px;
@ -2508,18 +2278,6 @@ img.chat_modal_participant_photo {
color: #899daf;
}
.icon-select-tick {
display: none;
width: 26px;
height: 26px;
margin: 13px 0 0 40px;
background: url(../img/icons/IconsetW.png) -9px -516px no-repeat;
background-size: 42px 1171px;
}
.is_1x .icon-select-tick {
background-image: url(../img/icons/IconsetW_1x.png);
}
/* Colorized user names
@ -2882,7 +2640,7 @@ a.peer_photo_init:focus {
color: #999;
cursor: pointer;
display: block;
font-size: 12px;
font-size: 13px;
margin: 0;
padding: 0;
z-index: 1;

630
app/css/desktop.css
View File

@ -1,16 +1,262 @@
.navbar-nav > li {
.tg_head_wrap {
}
.tg_head_split {
max-width: 1010px;
margin: 0 auto;
height: 48px;
background: #517b9b;
}
.tg_head_logo_wrap {
float: left;
width: 31%;
}
.tg_head_main_wrap {
float: left;
width: 69%;
white-space: nowrap;
}
.tg_head_btn {
display: block;
padding: 16px 19px;
color: #b9cfe3;
font-size: 13px;
line-height: 16px;
}
.dropdown.open .tg_head_btn,
.tg_head_btn:hover {
color: #FFF;
text-decoration: none;
background: #3f6c8c;
}
.tg_head_logo_dropdown .dropdown-toggle {
color: #FFF;
padding: 17px 20px 15px 22px;
display: block;
font-size: 14px;
line-height: 14px;
vertical-align: top;
}
.tg_head_logo_dropdown .dropdown-toggle:hover,
.tg_head_logo_dropdown .dropdown-toggle:focus,
.tg_head_logo_dropdown .dropdown-toggle:active {
text-decoration: none;
}
.tg_head_logo_dropdown .dropdown-toggle .tg_head_logo_text {
display: inline-block;
vertical-align: top;
}
.icon-hamburger-wrap {
display: inline-block;
width: 18px;
height: 14px;
}
.tg_head_logo_dropdown .icon-hamburger-wrap {
margin: 0 40px 0 0;
}
.icon-hamburger-wrap .icon-bar {
background: #fff;
display: block;
height: 2px;
margin-bottom: 4px;
}
.icon-hamburger-wrap .icon-bar:last-child {
margin-bottom: 0;
}
.tg_head_logo_dropdown .dropdown-menu {
border-radius: 0;
padding: 9px 0 7px;
margin: -1px 0 0;
float: none;
right: 0;
border: 1px solid rgba(15, 60, 96, 0.2);
-webkit-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
-moz-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
}
.tg_head_logo_dropdown .dropdown-menu > li > a {
font-size: 12px;
line-height: 21px;
padding: 11px 19px 10px 21px;
color: #42749b;
}
.tg_head_logo_dropdown .dropdown-menu > li > a:hover {
background: #f2f6fa;
}
.tg_head_logo_dropdown .dropdown-menu > li > a span {
vertical-align: top;
}
.icon-new-group {
width: 20px;
height: 14px;
margin-right: 38px;
display: inline-block;
background: url(../img/icons/General.png) no-repeat -10px -111px;
background-size: 40px 678px;
vertical-align: top;
margin-top: 3px;
}
.icon-contacts {
width: 18px;
height: 18px;
margin-right: 40px;
margin-top: 2px;
display: inline-block;
vertical-align: top;
background: url(../img/icons/General.png) no-repeat -11px -135px;
background-size: 40px 678px;
}
.icon-settings {
width: 20px;
height: 20px;
margin-right: 38px;
margin-top: 1px;
display: inline-block;
vertical-align: top;
background: url(../img/icons/General.png) no-repeat -10px -163px;
background-size: 40px 678px;
}
.icon-faq {
width: 20px;
height: 20px;
margin-right: 38px;
margin-top: 1px;
display: inline-block;
vertical-align: top;
background: url(../img/icons/General.png) no-repeat -10px -637px;
background-size: 40px 678px;
}
.icon-about {
width: 21px;
height: 21px;
margin-right: 37px;
display: inline-block;
vertical-align: top;
background: url(../img/icons/General.png) no-repeat -10px -193px;
background-size: 40px 678px;
}
.tg_head_connecting_text {
color: #b9cfe3;
padding: 14px 15px;
font-size: 13px;
display: block;
line-height: 20px;
float: left;
}
.tg_page_head .navbar > .container .navbar-brand {
margin-right: 0;
}
.navbar-header {
.tg_head_connecting_wrap .tg_head_btn {
float: left;
}
.navbar-right {
.tg_head_peer_dropdown {
float: right;
margin: 0;
}
.tg_head_peer_dropdown .dropdown-menu {
max-width: 100%;
border-radius: 0;
padding: 9px 0;
margin: -1px 0 0 0;
border: 1px solid rgba(15, 60, 96, 0.2);
-webkit-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
-moz-box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
box-shadow: 0px 1px 3px 0px rgba(60,75,87,0.27);
}
.tg_head_peer_more_dropdown .dropdown-menu {
left: auto;
right: 0;
}
.tg_head_peer_dropdown .dropdown-menu > li > a {
font-size: 12px;
line-height: 15px;
padding: 11px 18px 11px 18px;
color: #52719a;
}
.tg_head_peer_dropdown .dropdown-menu > li > a:hover {
background: #f3f6fa;
}
.tg_head_peer_return_btn {
float: right;
}
.tg_head_peer_return_count {
color: #FFF;
margin-left: 3px;
}
.tg_head_peer_title_wrap {
overflow: hidden;
}
.tg_head_peer_title_wrap .tg_head_btn {
padding: 15px 19px 15px;
line-height: 18px;
}
.tg_head_peer_title_wrap .tg_head_btn .tg_head_peer_info {
display: block;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.tg_head_peer_title {
display: inline-block;
color: #fff;
margin-right: 3px;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
max-width: 180px;
overflow: hidden;
vertical-align: top;
}
.tg_head_peer_media {
padding: 14px 19px;
color: #FFF;
font-size: 13px;
line-height: 20px;
float: left;
}
.icon-filter-photos,
.icon-filter-video,
.icon-filter-documents,
.icon-filter-audio {
display: inline-block;
background: url(../img/icons/General.png) no-repeat 0 0;
background-size: 40px 678px;
margin-right: 12px;
vertical-align: top;
}
.icon-filter-photos {
width: 18px;
height: 18px;
background-position: -11px -223px;
margin-top: 1px;
}
.icon-filter-video {
width: 16px;
height: 18px;
background-position: -12px -278px;
margin-top: 1px;
}
.icon-filter-documents {
width: 18px;
height: 17px;
background-position: -11px -251px;
margin-top: 1px;
}
.icon-filter-audio {
width: 14px;
height: 19px;
background-position: -13px -306px;
margin-top: 0;
}
/** initial setup **/
.nano {
@ -102,15 +348,19 @@
.im_page_wrap {
background: #FFF;
max-width: 1000px;
max-width: 1010px;
min-width: 300px;
margin: 0 auto;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 1px 0 #dfe5ec;
-moz-box-shadow: 0px 1px 0 #dfe5ec;
box-shadow: 0px 1px 0 #dfe5ec;
border-radius: 0 0 3px 3px;
border-left: 1px solid #dfe5ec;
border-right: 1px solid #dfe5ec;
border-bottom: 1px solid #d2dbe3;
overflow: hidden;
}
@ -121,6 +371,9 @@
color: #9cacb9;
line-height: 40px;
}
.footer_empty {
height: 23px;
}
.footer_brand {
color: #9cacb9;
font-weight: bold;
@ -240,67 +493,7 @@ a.footer_link.active:active {
}
.im_history_panel_wrap {
margin: 0 23px 0 15px;
cursor: pointer;
position: relative;
-webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.12);
position: relative;
z-index: 2;
min-height: 44px;
}
.im_history_panel {
padding: 10px 4px 0;
}
.im_history_panel_title h4 {
font-size: 17px;
line-height: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
margin: 8px 0 6px;
}
.im_history_panel_title h4 small {
color: #999;
font-size: 13px;
margin-left: 5px;
}
.im_history_panel_info_link,
.im_history_panel_edit_link,
.im_history_panel_return_link,
.im_history_panel_media_dropdown .dropdown-toggle {
font-size: 13px;
font-weight: normal;
padding-top: 5px;
line-height: 1;
}
.im_history_panel_media_dropdown {
padding-top: 2px;
}
.im_history_panel_edit_link,
.im_history_panel_return_link,
.im_history_panel_media_dropdown {
font-size: 13px;
margin-right: 20px;
}
.im_history_panel_media_dropdown,
.im_history_panel_return_count {
margin-left: 5px;
}
.im_history_panel_media_dropdown .dropdown-menu {
border-radius: 2px;
right: auto;
left: -15px;
margin-top: 11px;
padding: 0;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.175);
}
.im_history_no_dialogs_wrap {
margin: 122px 170px 60px;
@ -315,6 +508,26 @@ a.footer_link.active:active {
transition: all ease-in-out 0.2s;
}
.im_history_typing_wrap {
line-height: 18px;
width: 100%;
height: 49px;
padding: 13px 0 18px;
overflow: hidden;
-webkit-user-select: none;
}
.im_history_typing {
font-size: 11px;
color: #999;
max-width: 526px;
margin: 0 auto;
padding: 0 77px 0 71px;
}
.im_history_typing a.im_history_typing_author {
color: #999;
font-weight: bold;
}
/* Contacts modal */
.contacts_modal_window .modal-dialog {
max-width: 420px;
@ -346,7 +559,7 @@ a.footer_link.active:active {
border-radius: 7px;
position: absolute;
margin-left: -26px;
margin-top: 13px;
margin-top: 16px;
opacity: 0;
}
.im_message_unread .icon-message-status {
@ -369,7 +582,10 @@ a.footer_link.active:active {
opacity: 1;
}
.im_edit_panel_wrap {
padding: 15px 0 38px;
margin: 0 24px 0 12px;
}
.im_edit_flush_link,
.im_edit_cancel_link {
display: block;
@ -391,11 +607,19 @@ a.footer_link.active:active {
}
.im_submit {
padding: 6px 13px;
color: #4e92ca;
font-size: 13px;
line-height: 17px;
min-width: 60px;
border-radius: 2px;
line-height: 18px;
height: 18px;
border-radius: 0;
float: right;
min-width: 0;
width: auto;
padding: 0;
}
.im_submit:hover {
color: #2c78b6;
background: inherit;
}
.im_message_selected .im_message_date,
@ -415,10 +639,24 @@ a.footer_link.active:active {
display: none;
cursor: pointer;
position: absolute;
width: 112px;
height: 52px;
margin: -8px 0 0 -112px;
-webkit-user-select: text;
width: 99px;
height: 58px;
margin: -8px 0 0 -99px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.icon-select-tick {
display: none;
width: 26px;
height: 26px;
margin: 16px 0 0 40px;
background: url(../img/icons/IconsetW.png) -9px -516px no-repeat;
background-size: 42px 1171px;
}
.is_1x .icon-select-tick {
background-image: url(../img/icons/IconsetW_1x.png);
}
@media (min-width: 1024px) {
.im_content_message_select_area {
@ -471,7 +709,15 @@ a.footer_link.active:active {
vertical-align: bottom;
}
@media (max-height: 600px) {
@media (max-height: 600px), (max-width: 1010px) {
.im_page_wrap {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-bottom: 0;
border-radius: 0;
}
.footer_wrap {
display: none;
}
@ -512,42 +758,45 @@ a.footer_link.active:active {
}
}
.im_message_fwd_author_wrap {
margin: 1px 0 4px;
display: inline-block;
}
.im_message_fwd_author {
margin-right: 5px;
}
.im_message_fwd .im_message_fwd_author_wrap,
.im_message_fwd .im_message_text,
.im_message_fwd .im_message_media {
margin-left: 42px;
margin-left: 52px;
}
.im_send_panel_wrap {
max-width: 526px;
max-width: 554px;
}
.im_send_form {
max-width: 389px;
left: 62px;
right: 62px;
max-width: 382px;
left: 70px;
right: 72px;
}
.im_panel_peer_photo,
.im_panel_own_photo {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 25px;
width: 52px;
height: 52px;
line-height: 52px;
border-radius: 24px;
overflow: hidden;
}
div.im_panel_peer_photo,
a.im_panel_peer_photo {
cursor: pointer;
margin-left: 12px;
margin-left: 20px;
height: 55px;
}
a.im_panel_own_photo {
display: block;
margin-right: 12px;
margin-right: 18px;
}
a.im_panel_own_photo .peer_initials,
div.im_panel_peer_photo .peer_initials,
@ -568,9 +817,126 @@ a.im_panel_peer_photo .peer_initials {
margin-top: -12px;
margin-left: 36px;
}
.im_emoji_btn {
position: absolute;
right: 3px;
top: 2px;
cursor: pointer;
padding: 0;
width: 22px;
height: 22px;
margin-top: 1px;
}
.icon-emoji {
display: inline-block;
width: 22px;
height: 22px;
vertical-align: top;
background: url(../img/icons/General.png) no-repeat -9px -335px;
background-size: 40px 678px;
opacity: 0.8;
}
.is_1x .icon-emoji {
background-image: url(../img/icons/IconsetW_1x.png);
}
.im_emoji_btn:hover .icon-emoji {
opacity: 1;
}
.im_emoji_btn:active .icon-emoji,
.im_emoji_btn.on .icon-emoji {
background-position: -9px -367px;
opacity: 1;
}
.im_send_field_wrap {
margin-bottom: 20px;
}
.emoji-wysiwyg-editor,
.im_message_field {
border-radius: 0;
border: 0;
box-shadow: none;
outline: none;
box-shadow: 0 1px 0 0 #e8e8e8;
padding: 1px 30px 1px 0;
margin: 0;
min-height: 50px;
line-height: 20px;
height: auto;
}
.emoji-wysiwyg-editor:focus,
.im_message_field:focus {
box-shadow: none;
outline: none;
box-shadow: 0 2px 0 0 #77b7e4;
}
.im_attach {
cursor: pointer;
display: block;
overflow: hidden;
position: relative;
width: 18px;
height: 17px;
margin-right: 28px;
margin-top: 1px;
}
.icon-paperclip {
display: inline-block;
width: 18px;
height: 17px;
vertical-align: top;
background: url(../img/icons/General.png) no-repeat -11px -455px;
background-size: 40px 678px;
opacity: 0.8;
margin: 0;
}
.is_1x .icon-paperclip {
background-image: url(../img/icons/IconsetW_1x.png);
}
.im_attach:hover .icon-paperclip {
opacity: 1;
}
.im_attach:active .icon-paperclip {
background-position: -11px -482px;
opacity: 1;
}
.im_media_attach {
cursor: pointer;
display: block;
overflow: hidden;
position: relative;
padding: 0;
width: 20px;
height: 18px;
}
.icon-camera {
display: inline-block;
width: 20px;
height: 18px;
vertical-align: top;
background: url(../img/icons/General.png) no-repeat -10px -399px;
background-size: 40px 678px;
opacity: 0.8;
}
.is_1x .icon-camera {
background-image: url(../img/icons/IconsetW_1x.png);
}
.im_media_attach:hover .icon-camera {
opacity: 1;
}
.im_media_attach:active .icon-camera {
background-position: -10px -427px;
opacity: 1;
}
/* Peer modals */
@ -873,20 +1239,29 @@ a.im_panel_peer_photo .peer_initials {
}
.im_message_wrap {
max-width: 526px;
padding: 0 15px;
max-width: 560px;
padding: 0 15px 0 15px;
margin: 0 auto;
}
.im_message_wrap {
position: static;
}
.im_content_message_wrap {
margin: 8px 10px 8px 16px
}
.im_grouped_short .im_content_message_wrap {
margin: 6px 10px 6px 16px
}
@media (min-width: 901px) {
.im_message_wrap {
position: relative;
}
}
.im_message_author {
margin: 1px 0 4px;
display: inline-block;
}
/* Groupings */
.im_message_fwd_from {
margin-top: 5px;
@ -912,18 +1287,31 @@ a.im_panel_peer_photo .peer_initials {
.im_grouped .im_message_body,
.im_grouped_fwd .im_message_body,
.im_grouped_fwd_short .im_message_body {
margin-left: 46px;
margin-left: 57px;
}
.im_grouped_short .im_content_message_select_area,
.im_grouped .im_content_message_select_area {
height: 34px;
height: 50px;
}
.im_message_fwd .im_content_message_select_area {
margin-top: -4px;
}
.im_grouped_fwd .im_message_fwd .im_content_message_select_area,
.im_grouped_fwd_short .im_message_fwd .im_content_message_select_area {
margin-top: -8px;
}
.im_history_appending .im_content_message_select_area {
height: 52px;
}
.im_grouped_short .icon-select-tick,
.im_message_fwd .icon-select-tick {
margin-top: 12px;
}
.im_grouped_short .icon-select-tick {
margin-top: 4px;
}
.im_grouped_fwd_short .icon-select-tick {
margin-top: 5px;
margin-top: 2px;
}
.im_grouped_short .icon-message-status,
.im_grouped_fwd_short .icon-message-status {
@ -958,35 +1346,6 @@ a.im_panel_peer_photo .peer_initials {
opacity: 0.8;
}
.im_dialogs_panel_dropdown {
margin-left: 8px;
}
.im_dialogs_panel_dropdown .dropdown-toggle {
background: #F2F2F2;
display: block;
border-radius: 2px;
overflow: hidden;
padding: 11px 12px;
width: 38px;
height: 34px;
}
.im_dialogs_panel_dropdown .dropdown-toggle .icon-bar {
background: #b3b3b3;
display: block;
height: 2px;
margin-bottom: 3px;
}
.im_dialogs_panel_dropdown .dropdown-toggle .icon-bar:last-child {
margin-bottom: 0;
}
.im_dialogs_panel_dropdown.open .dropdown-toggle {
background: #6690b0;
}
.im_dialogs_panel_dropdown.open .dropdown-toggle .icon-bar {
background: #fff;
}
.im_dialogs_scrollable_wrap a.im_dialog {
padding: 7px 16px;
}
@ -999,9 +1358,10 @@ a.im_panel_peer_photo .peer_initials {
height: 48px;
line-height: 48px;
border-radius: 50%;
overflow: hidden;
}
div.im_dialog_photo {
margin-right: 12px;
margin-right: 15px;
}
div.im_dialog_photo .peer_initials {
line-height: 48px;
@ -1010,6 +1370,10 @@ div.im_dialog_photo .peer_initials {
.im_dialog_message {
margin-top: 5px;
}
.im_dialog_peer {
margin-top: 3px;
margin-bottom: 3px;
}
.active .im_dialog_date,
.active a.im_dialog:hover .im_dialog_date,
.active a.im_dialog_selected .im_dialog_date {

97
app/css/mobile.css
View File

@ -3,6 +3,7 @@ html {
}
.dropdown-menu {
border-radius: 0;
}
@ -14,6 +15,89 @@ html {
margin: 0;
}
.tg_page_head .navbar-quick-nav,
.tg_page_head .navbar-toggle {
display: none;
}
.tg_page_head .container {
display: block;
width: auto;
padding-left: 0;
padding-right: 0;
}
.tg_page_head .container .navbar-header {
margin: 0;
}
.tg_page_head .navbar-inverse {
border: 0;
-webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.11);
-moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.11);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.11);
margin: 0;
}
.ios_standalone .tg_page_head .navbar > .container {
margin-top: 20px;
}
.ios_standalone .modal.mobile_modal {
border-top: 20px solid #497495;
}
.tg_page_head .navbar > .container .navbar-brand {
padding: 8px 15px;
opacity: 0.9;
margin-left: 0;
margin-right: 20px;
-webkit-transition: opacity swing .9s;
display: block;
line-height: 0;
height: auto;
}
.tg_page_head .navbar > .container .navbar-brand:hover {
opacity: 1;
}
.tg_head_logo {
background: url(../img/T_LogoM.png) 0 0 no-repeat;
background-size: 143px 30px;
display: inline-block;
width: 143px;
height: 30px;
vertical-align: text-top;
}
.is_1x .tg_head_logo {
background-image: url(../img/T_LogoM_1x.png);
}
.tg_page_head .navbar-menu .navbar-nav.navbar-right {
margin-right: 0;
}
.tg_page_head .navbar-inverse .navbar-nav > li > a {
padding-top: 13px;
padding-bottom: 13px;
color: #b9cfe3;
font-size: 13px;
}
.tg_page_head .navbar-inverse .navbar-nav > li > a:hover {
color: #FFF;
}
.tg_page_head .navbar-inverse .navbar-toggle {
border-color: #497495;
outline: 0;
border: 0;
}
.tg_page_head .navbar-inverse .navbar-collapse,
.tg_page_head .navbar-inverse .navbar-form {
border-color: #497495;
}
.tg_page_head .navbar-inverse .navbar-toggle:hover,
.tg_page_head .navbar-inverse .navbar-toggle:active,
.tg_page_head .navbar-inverse .navbar-toggle:focus {
background-color: rgba(255,255,255,0.1);
}
.tg_page_head .navbar > .container .navbar-brand {
padding-left: 9px;
@ -505,8 +589,7 @@ img.im_message_video_thumb,
font-size: 15px;
float: left;
position: relative;
margin-left: 0;
margin-right: 0;
margin: 8px 0 8px;
max-width: 100%;
}
.im_message_out.im_content_message_wrap {
@ -727,8 +810,11 @@ a.im_message_from_photo {
.im_dialog_photo {
width: 54px;
height: 54px;
border-radius: 27px;
margin-right: 12px;
border-radius: 50%;
overflow: hidden;
}
div.im_dialog_photo {
margin: 0 12px 0 0;
}
.im_dialog_peer,
@ -984,6 +1070,9 @@ a.mobile_modal_action .tg_checkbox_label {
}
.im_attach {
cursor: pointer;
display: block;
overflow: hidden;
position: absolute;
right: 0;
top: 0;

BIN
app/img/icons/General.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
app/img/icons/General_1x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

1
app/index.html
View File

@ -13,6 +13,7 @@
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="css/app.css"/>
<!-- endbuild -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600&amp;subset=cyrillic,latin" rel="stylesheet" type="text/css">
<link rel="icon" href="favicon.ico" type="image/x-icon" />

26
app/js/controllers.js
View File

@ -336,7 +336,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
$scope.search = {};
$scope.historyFilter = {mediaType: false};
$scope.historyPeer = {};
$scope.historyState = {selectActions: false, typing: []};
$scope.historyState = {selectActions: false, typing: [], missedCount: 0};
$scope.openSettings = function () {
$modal.open({
@ -344,7 +344,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
controller: 'SettingsModalController',
windowClass: 'settings_modal_window mobile_modal'
});
}
};
$scope.openContacts = function () {
ContactsSelectService.selectContact().then(function (userID) {
@ -399,6 +399,10 @@ angular.module('myApp.controllers', ['myApp.i18n'])
})
};
$scope.openChangelog = function () {
ChangelogNotifyService.showChangelog(false);
}
$scope.showPeerInfo = function () {
if ($scope.curDialog.peerID > 0) {
AppUsersManager.openUser($scope.curDialog.peerID)
@ -515,6 +519,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
offset++;
}
$scope.dialogs.unshift(wrappedDialog);
delete $scope.isEmpty.dialogs;
if (!peersInDialogs[dialog.peerID]) {
peersInDialogs[dialog.peerID] = true;
@ -784,7 +789,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
$scope.selectedMsgs = {};
$scope.selectedCount = 0;
$scope.historyState.selectActions = false;
$scope.missedCount = 0;
$scope.historyState.missedCount = 0;
$scope.state = {};
$scope.toggleMessage = toggleMessage;
@ -1041,7 +1046,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
};
function loadHistory (forceRecent) {
$scope.missedCount = 0;
$scope.historyState.missedCount = 0;
hasMore = false;
$scope.skippedHistory = hasLess = false;
@ -1293,7 +1298,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
if (addedMessage.my) {
returnToRecent();
} else {
$scope.missedCount++;
$scope.historyState.missedCount++;
}
return;
}
@ -2508,7 +2513,16 @@ angular.module('myApp.controllers', ['myApp.i18n'])
$scope.openChangelog = function () {
ChangelogNotifyService.showChangelog(false);
}
};
$scope.logOut = function () {
ErrorService.confirm({type: 'LOGOUT'}).then(function () {
MtpApiManager.logOut().then(function () {
location.hash = '/login';
AppRuntimeManager.reload();
});
})
};
})
.controller('ChangelogModalController', function ($scope, $modal) {

3
app/js/directives.js
View File

@ -746,7 +746,6 @@ angular.module('myApp.directives', ['myApp.filters'])
historyEl = $('.im_history', element)[0],
scrollableWrap = $('.im_history_scrollable_wrap', element)[0],
scrollable = $('.im_history_scrollable', element)[0],
panelWrap = $('.im_history_panel_wrap', element)[0],
bottomPanelWrap = $('.im_bottom_panel_wrap', element)[0],
sendFormWrap = $('.im_send_form_wrap', element)[0],
headWrap = $('.tg_page_head')[0],
@ -1001,7 +1000,7 @@ angular.module('myApp.directives', ['myApp.filters'])
if (!footer || !footer.offsetHeight) {
footer = $('.footer_wrap')[0];
}
var historyH = $($window).height() - panelWrap.offsetHeight - bottomPanelWrap.offsetHeight - (headWrap ? headWrap.offsetHeight : 44) - (footer ? footer.offsetHeight : 0);
var historyH = $($window).height() - bottomPanelWrap.offsetHeight - (headWrap ? headWrap.offsetHeight : 44) - (footer ? footer.offsetHeight : 0);
$(historyWrap).css({
height: historyH
});

4
app/js/lib/ng_utils.js
View File

@ -392,7 +392,7 @@ angular.module('izhukov.utils', [])
function saveFileBase64(db, fileName, blob) {
try {
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.readAsDataURL(blob);
} catch (e) {
storageIsAvailable = false;
return $q.reject();
@ -615,7 +615,7 @@ angular.module('izhukov.utils', [])
}
};
if (Config.Modes.nacl &&
if (Config.Modes.nacl &&
navigator.mimeTypes &&
navigator.mimeTypes['application/x-pnacl'] !== undefined) {
var listener = $('<div id="nacl_listener"><embed id="mtproto_crypto" width="0" height="0" src="nacl/mtproto_crypto.nmf" type="application/x-pnacl" /></div>').appendTo($('body'))[0];

5
app/js/locales/en-us.json
View File

@ -252,13 +252,15 @@
"error_modal_multiple_open_tabs": "Please close other Telegram app tabs.",
"head_telegram": "Telegram",
"head_new_group": "New Group",
"head_new_contact": "New Contact",
"head_contacts": "Contacts",
"head_contacts_title": "Contacts",
"im_found_title": "Global search",
"head_telegram_faq": "Telegram FAQ",
"head_settings": "Settings",
"head_log_out": "Log Out",
"head_peer_more": "More",
"head_edit_messages": "Edit messages",
"head_media_photos": "Photos",
"head_media_video": "Videos",
@ -285,6 +287,7 @@
"im_contacts_title": "Contacts",
"im_settings": "Settings",
"im_conversations": "Conversations",
"im_found_title": "Global search",
"im_messages": "Messages",
"im_no_contacts": "No contacts yet",
"im_get_started_long": "Get started by adding a contact to chat with",

111
app/partials/desktop/head.html
View File

@ -1,28 +1,101 @@
<div class="tg_page_head">
<div class="navbar navbar-static-top navbar-inverse" role="navigation" ng-class="{navbar_peer_not_selected: !curDialog.peer, navbar_offline: offline, navbar_history_select: historyState.selectActions}">
<div class="container">
<div class="tg_page_head tg_head_wrap noselect">
<div class="tg_head_split clearfix">
<div class="navbar-header">
<a class="navbar-brand" href="{{isLoggedIn ? '#/im' : '#/'}}"><span class="tg_head_logo"></span></a>
<div class="tg_head_logo_wrap">
<div class="tg_head_logo_dropdown dropdown" dropdown>
<a class="tg_head_btn dropdown-toggle" dropdown-toggle>
<div class="icon-hamburger-wrap">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div><span class="tg_head_logo_text" my-i18n="head_telegram"></span>
</a>
<ul class="dropdown-menu" ng-switch="isLoggedIn">
<li ng-switch-when="true"><a ng-click="openGroup()">
<i class="icon icon-new-group"></i><span my-i18n="im_new_group"></span>
</a></li>
<li ng-switch-when="true" ng-if="!isEmpty.contacts"><a ng-click="openContacts()">
<i class="icon icon-contacts"></i><span my-i18n="im_contacts"></span>
</a></li>
<li ng-switch-when="true"><a ng-click="openSettings()">
<i class="icon icon-settings"></i><span my-i18n="im_settings"></span>
</a></li>
<li><a href="https://telegram.org/faq" target="_blank">
<i class="icon icon-faq"></i><span my-i18n="head_telegram_faq"></span>
</a></li>
<li><a href="" ng-click="openChangelog()">
<i class="icon icon-about"></i><span my-i18n="head_about"></span>
</a></li>
</ul>
</div>
</div>
<div class="tg_head_main_wrap" ng-switch="offline">
<div ng-switch-when="true" class="tg_head_connecting_wrap" ng-switch="offlineConnecting">
<span ng-switch-default class="tg_head_connecting_text"><my-i18n msgid="head_waiting_for_network"></my-i18n><span my-loading-dots></span></span>
<a ng-switch-default class="tg_head_btn" ng-click="retryOnline()" my-i18n="head_retry"></a>
<span ng-switch-when="true" class="tg_head_connecting_text"><my-i18n msgid="head_connecting"></my-i18n><span my-loading-dots></span></span>
</div>
<div class="navbar-menu" ng-switch="offline">
<div ng-switch-default class="tg_head_main_peer_wrap">
<ul ng-switch-when="true" class="nav navbar-nav navbar-offline">
<li ng-show="!offlineConnecting"><span class="navbar-offline-text"><my-i18n msgid="head_waiting_for_network"></my-i18n><span my-loading-dots></span></span></li>
<li ng-show="!offlineConnecting"><a href="" ng-click="retryOnline()" my-i18n="head_retry"></a></li>
<li ng-show="offlineConnecting"><span class="navbar-offline-text"><my-i18n msgid="head_connecting"></my-i18n><span my-loading-dots></span></span></li>
</ul>
<div class="tg_head_peer_dropdown tg_head_peer_more_dropdown dropdown" dropdown>
<a class="tg_head_btn dropdown-toggle" dropdown-toggle my-i18n="head_peer_more"></a>
<ul class="dropdown-menu">
<li><a ng-click="toggleEdit()" my-i18n="head_edit_messages"></a></li>
<li><a ng-click="selectedFlush()" my-i18n="head_clear_all"></a></li>
</ul>
</div>
<ul ng-switch-default class="nav navbar-nav navbar-right">
<li ng-if="isLoggedIn &amp;&amp; !isEmpty.contacts"><a href="" ng-click="openContacts()" my-i18n="head_contacts"></a></li>
<li ng-if="isLoggedIn"><a href="" ng-click="openSettings()" my-i18n="head_settings"></a></li>
<li ng-if="isLoggedIn"><a href="" ng-click="logOut()" my-i18n="head_log_out"></a></li>
<li ng-if="!isLoggedIn"><a href="https://github.com/zhukov/webogram" target="_blank" my-i18n="head_about"></a></li>
</ul>
<div class="tg_head_peer_dropdown tg_head_peer_media_dropdown dropdown" dropdown>
<a class="tg_head_btn dropdown-toggle" dropdown-toggle my-i18n="im_media"></a>
<ul class="dropdown-menu">
<li><a ng-click="toggleMedia('photos')" my-i18n="head_media_photos"></a></li>
<li><a ng-click="toggleMedia('video')" my-i18n="head_media_video"></a></li>
<li><a ng-click="toggleMedia('documents')" my-i18n="head_media_documents"></a></li>
<li><a ng-click="toggleMedia('audio')" my-i18n="head_media_audio"></a></li>
</ul>
</div>
<a class="tg_head_btn tg_head_peer_return_btn" ng-show="historyFilter.mediaType.length || skippedHistory" ng-click="returnToRecent()" ng-switch="skippedHistory">
<span ng-switch-when="true" my-i18n="im_show_recent_messages"></span>
<span ng-switch-default my-i18n="im_show_all_messages"></span>
<strong class="tg_head_peer_return_count" ng-show="historyState.missedCount > 0" ng-bind="'+' + historyState.missedCount"></strong>
</a>
<div class="tg_head_peer_title_wrap" ng-switch="historyFilter.mediaType">
<div class="tg_head_peer_media" ng-switch-when="photos">
<i class="icon icon-filter-photos"></i><span my-i18n="im_media_photos"></span>
</div>
<div class="tg_head_peer_media" ng-switch-when="video">
<i class="icon icon-filter-video"></i><span my-i18n="im_media_video"></span>
</div>
<div class="tg_head_peer_media" ng-switch-when="documents">
<i class="icon icon-filter-documents"></i><span my-i18n="im_media_documents"></span>
</div>
<div class="tg_head_peer_media" ng-switch-when="audio">
<i class="icon icon-filter-audio"></i><span my-i18n="im_media_audio"></span>
</div>
<a class="tg_head_btn" ng-switch-default ng-switch="historyPeer.id > 0" ng-click="showPeerInfo()">
<div class="tg_head_peer_info" ng-switch-when="true">
<span class="tg_head_peer_title" ng-bind-html="historyPeer.data.rFullName"></span>
<span class="tg_head_peer_status" my-user-status="historyPeer.id"></span>
</div>
<div class="tg_head_peer_info" ng-switch-default>
<span class="tg_head_peer_title" ng-bind-html="historyPeer.data.rTitle"></span>
<span class="tg_head_peer_status">
<ng-pluralize count="historyPeer.data.participants_count"
when="im_pluralize_participants">
</ng-pluralize>
</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>

93
app/partials/desktop/im.html
View File

@ -6,19 +6,6 @@
<div class="im_dialogs_col_wrap" ng-controller="AppImDialogsController" my-dialogs has-tabs="{{search.query.length > 0}}">
<div class="im_dialogs_panel">
<div class="dropdown im_dialogs_panel_dropdown pull-right" dropdown>
<a class="dropdown-toggle" dropdown-toggle>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<ul class="dropdown-menu">
<li><a ng-click="openGroup()" my-i18n="im_new_group"></a></li>
<li><a ng-click="importContact()" my-i18n="im_new_contact"></a></li>
<li ng-if="!isEmpty.contacts"><a ng-click="openContacts()" my-i18n="im_contacts"></a></li>
<li><a ng-click="openSettings()" my-i18n="im_settings"></a></li>
</ul>
</div>
<div class="im_dialogs_search">
<input class="form-control im_dialogs_search_field no_outline" type="search" placeholder="{{'modal_search' | i18n}}" ng-model="search.query"/>
<a class="im_dialogs_search_clear" ng-click="searchClear()" ng-show="search.query.length">
@ -117,57 +104,6 @@
<div ng-show="state.loaded">
<div my-history class="im_history_col">
<div class="im_history_panel_wrap">
<div class="im_history_panel clearfix" ng-controller="AppImPanelController">
<div class="im_history_panel_title">
<a class="im_history_panel_info_link pull-right" ng-click="showPeerInfo()" my-i18n="im_info"></a>
<a class="im_history_panel_edit_link pull-right" ng-click="toggleEdit()" my-i18n="im_edit"></a>
<div class="dropdown im_history_panel_media_dropdown pull-right" dropdown>
<a class="dropdown-toggle" dropdown-toggle><my-i18n msgid="im_media"></my-i18n><i class="icon icon-caret"></i></a>
<ul class="dropdown-menu">
<li><a ng-click="toggleMedia('photos')" my-i18n="im_media_photos"></a></li>
<li><a ng-click="toggleMedia('video')" my-i18n="im_media_video"></a></li>
<li><a ng-click="toggleMedia('documents')" my-i18n="im_media_documents"></a></li>
<li><a ng-click="toggleMedia('audio')" my-i18n="im_media_audio"></a></li>
</ul>
</div>
<a ng-show="historyFilter.mediaType.length || skippedHistory" class="im_history_panel_return_link pull-right" ng-click="returnToRecent()" ng-switch="skippedHistory">
<span ng-switch-when="true" my-i18n="im_show_recent_messages"></span>
<span ng-switch-default my-i18n="im_show_all_messages"></span>
<strong class="im_history_panel_return_count" ng-show="missedCount > 0" ng-bind="'+' + missedCount"></strong>
</a>
<div ng-switch="historyFilter.mediaType">
<h4 ng-switch-when="photos" my-i18n="im_media_photos"></h4>
<h4 ng-switch-when="video" my-i18n="im_media_video"></h4>
<h4 ng-switch-when="documents" my-i18n="im_media_documents"></h4>
<h4 ng-switch-when="audio" my-i18n="im_media_audio"></h4>
<h4 ng-switch-default ng-switch="historyPeer.id > 0" ng-click="showPeerInfo()">
<div ng-switch-when="true">
<span ng-bind-html="historyPeer.data.rFullName"></span>
<small class="im_peer_online" my-user-status="historyPeer.id"></small>
</div>
<div ng-switch-default>
<span ng-bind-html="historyPeer.data.rTitle"></span>
<small class="im_chat_users">
<ng-pluralize count="historyPeer.data.participants_count"
when="im_pluralize_participants">
</ng-pluralize>
</small>
</div>
</h4>
</div>
</div>
</div>
</div>
<div class="im_history_wrap nano">
<div class="im_history_scrollable_wrap nano-content">
@ -238,27 +174,26 @@
<form my-send-form draft-message="draftMessage" class="im_send_form" ng-class="{im_send_form_empty: !draftMessage.text.length}">
<div class="im_send_field_wrap">
<div class="im_emoji_btn pull-right" title="{{'im_emoji_btn_title' | i18n}}">
<i class="icon icon-emoji"></i>
</div>
<div class="im_send_dropbox_wrap" my-i18n="im_photos_drop_text"></div>
<textarea ng-model="draftMessage.text" placeholder="{{'im_message_field_placeholder' | i18n}}" class="form-control im_message_field no_outline"></textarea>
</div>
<div class="im_media_attach pull-right">
<input type="file" class="im_media_attach_input" size="28" multiple="true" accept="image/*, video/*, audio/*" title="{{'im_media_attach_title' | i18n}}"/>
<i class="icon icon-camera"></i>
</div>
<div class="clearfix">
<div class="im_attach pull-left">
<input type="file" class="im_attach_input" size="28" multiple="true" title="{{'im_attach_file_title' | i18n}}" />
<i class="icon icon-paperclip"></i>
</div>
<div class="im_attach pull-right">
<input type="file" class="im_attach_input" size="28" multiple="true" title="{{'im_attach_file_title' | i18n}}" />
<i class="icon icon-paperclip"></i>
</div>
<div class="im_media_attach pull-left">
<input type="file" class="im_media_attach_input" size="28" multiple="true" accept="image/*, video/*, audio/*" title="{{'im_media_attach_title' | i18n}}"/>
<i class="icon icon-camera"></i>
</div>
<div class="im_emoji_btn pull-right" title="{{'im_emoji_btn_title' | i18n}}">
<i class="icon icon-emoji"></i>
<button type="submit" class="btn btn-md im_submit" my-i18n="im_submit_message"></button>
</div>
<button type="submit" class="btn btn-success im_submit">
<span class="im_submit_text" my-i18n="im_submit_message"></span>
</button>
</form>
</div>
@ -277,4 +212,4 @@
</div>
<div my-footer></div>
<div class="footer_wrap footer_empty"></div>

4
app/partials/desktop/settings_modal.html
View File

@ -33,7 +33,7 @@
</div>
<div class="md_modal_body">
<div class="md_modal_iconed_section_wrap md_modal_iconed_section_number">
<i class="md_modal_section_icon md_modal_section_icon_phone"></i>
@ -108,7 +108,7 @@
</div>
<div class="md_modal_section_link_wrap">
<a class="md_modal_section_link" ng-click="openChangelog()" my-i18n="settings_modal_about"></a>
<a class="md_modal_section_link" ng-click="logOut()" my-i18n="head_log_out"></a>
</div>
</div>

2
app/partials/mobile/head.html
View File

@ -32,7 +32,7 @@
<li ng-if="!historyFilter.mediaType"><a ng-click="toggleMedia('audio')" my-i18n="head_media_audio"></a></li>
</ul>
<ul ng-if="!isLoggedIn" class="dropdown-menu">
<li><a href="https://github.com/zhukov/webogram" target="_blank" my-i18n="head_about"></a></li>
<li><a href="https://telegram.org" target="_blank" my-i18n="head_about"></a></li>
</ul>
</div>

2
app/webogram.appcache
View File

@ -1,6 +1,6 @@
CACHE MANIFEST
# 43
# 44
NETWORK:
*

25
gulpfile.js
View File

@ -4,6 +4,9 @@ var pj = require('./package.json');
var $ = require('gulp-load-plugins')();
var concat = require('gulp-concat');
var path = require('path');
var http = require('http');
var livereload = require('gulp-livereload');
var st = require('st');
// The generated file is being created at src
// so it can be fetched by usemin.
@ -203,6 +206,28 @@ gulp.task('package-dev', function() {
);
});
gulp.task('watchcss', function() {
gulp.src('app/css/*.css')
.pipe(livereload());
});
gulp.task('watchhtml', function() {
gulp.src('app/partials/**/*.html')
.pipe(livereload());
});
gulp.task('watch', ['server'], function() {
livereload.listen({ basePath: 'app' });
gulp.watch('app/css/*.css', ['watchcss']);
gulp.watch('app/partials/**/*.html', ['watchhtml']);
});
gulp.task('server', function(done) {
http.createServer(
st({ path: __dirname, index: 'index.html', cache: false })
).listen(8000, done);
});
gulp.task('clean', function() {
return gulp.src(['dist/*', 'app/js/templates.js', '!dist/.git']).pipe($.clean());

35
package.json
View File

@ -30,25 +30,36 @@
"bugs": {
"url": "https://github.com/zhukov/webogram/issues"
},
"locales": ["en-us", "es-es", "de-de", "it-it", "ru-ru", "nl-nl", "pt-br"],
"locales": [
"en-us",
"es-es",
"de-de",
"it-it",
"ru-ru",
"nl-nl",
"pt-br"
],
"homepage": "http://zhukov.github.io/webogram",
"devDependencies": {
"event-stream": "^3.1.0",
"gulp": "~3.5.5",
"gulp-angular-templatecache": "^1.1.0",
"gulp-load-plugins": "^0.4.0",
"gulp-usemin": "^0.3.8",
"gulp-uglify": "^1.0.2",
"gulp-rev": "^1.1.0",
"gulp-minify-css": "^0.3.0",
"gulp-minify-html": "^0.1.1",
"gulp-imagemin": "^0.1.5",
"gulp-clean": "^0.2.4",
"gulp-replace": "^0.2.0",
"gulp-concat": "^2.1.7",
"gulp-grep-stream": "0.0.2",
"event-stream": "^3.1.0",
"gulp-zip": "^0.1.2",
"gulp-imagemin": "^0.1.5",
"gulp-livereload": "^3.0.2",
"gulp-load-plugins": "^0.4.0",
"gulp-manifest": "0.0.3",
"gulp-ng-annotate": "~0.3.3"
"gulp-minify-css": "^0.3.0",
"gulp-minify-html": "^0.1.1",
"gulp-ng-annotate": "~0.3.3",
"gulp-replace": "^0.2.0",
"gulp-rev": "^1.1.0",
"gulp-uglify": "^1.0.2",
"gulp-usemin": "^0.3.8",
"gulp-zip": "^0.1.2",
"http": "0.0.0",
"st": "^0.5.2"
}
}