Igor Zhukov
10 years ago
80 changed files with 3273 additions and 1643 deletions
@ -0,0 +1,834 @@
@@ -0,0 +1,834 @@
|
||||
/** initial setup **/ |
||||
.nano { |
||||
position : relative; |
||||
width : 100%; |
||||
height : 100%; |
||||
overflow : hidden; |
||||
} |
||||
.nano > .nano-content { |
||||
position : absolute; |
||||
overflow : scroll; |
||||
overflow-x : hidden; |
||||
top : 0; |
||||
right : 0; |
||||
bottom : 0; |
||||
left : 0; |
||||
} |
||||
.nano > .nano-content:focus { |
||||
outline: thin dotted; |
||||
} |
||||
.nano > .nano-content::-webkit-scrollbar { |
||||
display: none; |
||||
} |
||||
.has-scrollbar > .nano-content::-webkit-scrollbar { |
||||
display: block; |
||||
} |
||||
.nano > .nano-pane { |
||||
background : rgba(0,0,0,.25); |
||||
position : absolute; |
||||
width : 10px; |
||||
right : 0; |
||||
top : 0; |
||||
bottom : 0; |
||||
visibility : hidden\9; /* Target only IE7 and IE8 with this hack */ |
||||
opacity : .01; |
||||
-webkit-transition : .2s; |
||||
-moz-transition : .2s; |
||||
-o-transition : .2s; |
||||
transition : .2s; |
||||
-moz-border-radius : 5px; |
||||
-webkit-border-radius : 5px; |
||||
border-radius : 5px; |
||||
} |
||||
.nano > .nano-pane > .nano-slider { |
||||
background: #444; |
||||
background: rgba(0,0,0,.5); |
||||
position : relative; |
||||
margin : 0 1px; |
||||
-moz-border-radius : 3px; |
||||
-webkit-border-radius : 3px; |
||||
border-radius : 3px; |
||||
} |
||||
.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed { |
||||
visibility : visible\9; /* Target only IE7 and IE8 with this hack */ |
||||
opacity : 0.99; |
||||
} |
||||
|
||||
.emoji-menu .nano > .nano-pane { |
||||
background : rgba(255,255,255,0.0); |
||||
right: -2px; |
||||
} |
||||
.emoji-menu .nano > .nano-pane > .nano-slider { |
||||
background: #d1d1d1; |
||||
margin: 0 3px 0 4px; |
||||
} |
||||
|
||||
.countries_modal_col .nano > .nano-pane { |
||||
background : rgba(3,36,64,0.08); |
||||
width : 3px; |
||||
right: 6px; |
||||
top: 0; |
||||
-webkit-transition : .2s; |
||||
-moz-transition : .2s; |
||||
-o-transition : .2s; |
||||
transition : .2s; |
||||
-moz-border-radius : 0; |
||||
-webkit-border-radius : 0; |
||||
border-radius : 0; |
||||
} |
||||
.countries_modal_col .nano > .nano-pane > .nano-slider { |
||||
background : rgba(3,46,79,0.22); |
||||
margin: 0; |
||||
-moz-border-radius : 0; |
||||
-webkit-border-radius : 0; |
||||
border-radius : 0; |
||||
} |
||||
|
||||
|
||||
|
||||
.im_page_wrap { |
||||
background: #FFF; |
||||
max-width: 1000px; |
||||
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); |
||||
|
||||
border-radius: 0 0 3px 3px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
|
||||
.im_page_footer { |
||||
font-size: 11px; |
||||
text-align: center; |
||||
color: #9cacb9; |
||||
line-height: 40px; |
||||
} |
||||
.im_page_footer_brand { |
||||
color: #9cacb9; |
||||
font-weight: bold; |
||||
} |
||||
.im_page_footer_brand:hover, |
||||
.im_page_footer_brand:active { |
||||
color: #8499aa; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.im_dialogs_col { |
||||
margin-right: -7px; |
||||
} |
||||
.im_dialogs_col_wrap { |
||||
float: left; |
||||
width: 31%; |
||||
border-right: 2px solid #E9EBED; |
||||
padding-bottom: 10px; |
||||
} |
||||
.im_dialogs_scrollable_wrap { |
||||
padding: 0 19px 0 12px; |
||||
} |
||||
.im_dialogs_col .nano > .nano-pane { |
||||
background : rgba(0,0,0,0.0); |
||||
width : 12px; |
||||
right: 0px; |
||||
-moz-border-radius : 0; |
||||
-webkit-border-radius : 0; |
||||
border-radius : 0; |
||||
-webkit-transition : none; |
||||
-moz-transition : none; |
||||
-o-transition : none; |
||||
transition : none; |
||||
} |
||||
.im_dialogs_col .nano > .nano-pane > .nano-slider { |
||||
background: #A5B1B9; |
||||
margin: 0 5px; |
||||
-moz-border-radius : 0; |
||||
-webkit-border-radius : 0; |
||||
border-radius : 0; |
||||
} |
||||
|
||||
.im_history_col_wrap { |
||||
float: left; |
||||
width: 69%; |
||||
} |
||||
.im_history_col .nano > .nano-pane, |
||||
.contacts_modal_col .nano > .nano-pane, |
||||
.im_dialogs_modal_col .nano > .nano-pane { |
||||
background : rgba(3,36,64,0.08); |
||||
width : 9px; |
||||
right: 0; |
||||
top: 0; |
||||
-moz-border-radius : 2px; |
||||
-webkit-border-radius : 2px; |
||||
border-radius : 2px; |
||||
|
||||
-webkit-transition : none; |
||||
-moz-transition : none; |
||||
-o-transition : none; |
||||
transition : none; |
||||
} |
||||
.contacts_modal_col .nano > .nano-pane { |
||||
width: 6px; |
||||
right: 7px; |
||||
} |
||||
|
||||
.im_dialogs_modal_col .nano > .nano-pane { |
||||
width: 6px; |
||||
right: 2px; |
||||
} |
||||
.im_dialogs_modal_col .im_dialogs_scrollable_wrap { |
||||
padding: 0 12px 0 12px; |
||||
} |
||||
.contacts_modal_col { |
||||
margin-right: -17px; |
||||
} |
||||
.contacts_scrollable_wrap { |
||||
padding: 0 17px 0 0; |
||||
} |
||||
|
||||
.im_history_col .nano > .nano-pane { |
||||
top: 10px; |
||||
right: 8px; |
||||
} |
||||
.im_history_col .nano > .nano-pane > .nano-slider, |
||||
.contacts_modal_col .nano > .nano-pane > .nano-slider, |
||||
.im_dialogs_modal_col .nano > .nano-pane > .nano-slider { |
||||
background : rgba(3,46,79,0.22); |
||||
margin: 0; |
||||
-moz-border-radius : 2px; |
||||
-webkit-border-radius : 2px; |
||||
border-radius : 2px; |
||||
} |
||||
|
||||
|
||||
.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; |
||||
text-align: center; |
||||
} |
||||
|
||||
.im_history_appending { |
||||
-webkit-transition: all ease-in-out 0.2s; |
||||
-moz-transition: all ease-in-out 0.2s; |
||||
-ms-transition: all ease-in-out 0.2s; |
||||
-o-transition: all ease-in-out 0.2s; |
||||
transition: all ease-in-out 0.2s; |
||||
} |
||||
|
||||
/* Contacts modal */ |
||||
.contacts_modal_window .modal-dialog { |
||||
max-width: 456px; |
||||
} |
||||
.contacts_modal_header { |
||||
padding: 6px 0 18px; |
||||
} |
||||
.contacts_modal_edit_wrap { |
||||
position: absolute; |
||||
margin-top: -1px; |
||||
} |
||||
.contacts_modal_edit_link { |
||||
font-size: 14px; |
||||
padding: 5px 7px; |
||||
} |
||||
.contacts_modal_title { |
||||
font-size: 14px; |
||||
margin: 0; |
||||
text-align: center; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.icon-message-status { |
||||
background: #43A4DB; |
||||
border: 0; |
||||
display: block; |
||||
width: 10px; |
||||
height: 10px; |
||||
border-radius: 7px; |
||||
position: absolute; |
||||
margin-left: -26px; |
||||
margin-top: 13px; |
||||
opacity: 0; |
||||
} |
||||
.im_message_unread .icon-message-status { |
||||
opacity: 1.0; |
||||
} |
||||
.im_message_pending .icon-message-status { |
||||
opacity: 0.5; |
||||
} |
||||
.im_message_error_btn { |
||||
display: none; |
||||
} |
||||
.im_message_error .im_message_error_btn { |
||||
display: inline; |
||||
} |
||||
.im_message_error_btn .icon-message-status { |
||||
background: #da564d; |
||||
opacity: 0.85; |
||||
} |
||||
.im_message_error_btn .icon-message-status:hover { |
||||
opacity: 1; |
||||
} |
||||
|
||||
|
||||
.im_edit_flush_link, |
||||
.im_edit_cancel_link { |
||||
display: block; |
||||
padding: 6px 17px; |
||||
border-radius: 2px; |
||||
overflow: hidden; |
||||
margin: 6px 6px; |
||||
} |
||||
.im_edit_cancel_link { |
||||
float: left; |
||||
} |
||||
.im_edit_flush_link { |
||||
float: right; |
||||
} |
||||
.im_edit_flush_link:hover, |
||||
.im_edit_cancel_link:hover { |
||||
background: #f2f6fa; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
.im_submit { |
||||
padding: 6px 13px; |
||||
font-size: 13px; |
||||
line-height: 17px; |
||||
min-width: 60px; |
||||
} |
||||
|
||||
.im_message_selected .im_message_date, |
||||
.im_message_selected .im_message_document_size, |
||||
.im_message_selected .im_message_audio_duration, |
||||
.im_message_selected .im_message_audio_size, |
||||
.im_message_selected .im_message_fwd_date, |
||||
.im_history_selectable .im_message_outer_wrap:hover .im_message_date, |
||||
.im_history_selectable .im_message_outer_wrap:hover .im_message_document_size, |
||||
.im_history_selectable .im_message_outer_wrap:hover .im_message_audio_duration, |
||||
.im_history_selectable .im_message_outer_wrap:hover .im_message_audio_size, |
||||
.im_history_selectable .im_message_outer_wrap:hover .im_message_fwd_date { |
||||
color: #68839c; |
||||
} |
||||
|
||||
.im_content_message_select_area { |
||||
display: none; |
||||
cursor: pointer; |
||||
position: absolute; |
||||
width: 112px; |
||||
height: 52px; |
||||
margin: -8px 0 0 -112px; |
||||
-webkit-user-select: text; |
||||
} |
||||
@media (min-width: 1024px) { |
||||
.im_content_message_select_area { |
||||
display: block; |
||||
} |
||||
.im_message_wrap { |
||||
position: relative; |
||||
} |
||||
} |
||||
|
||||
.im_history_selectable .icon-select-tick, |
||||
.im_content_message_select_area:hover .icon-select-tick { |
||||
display: inline-block; |
||||
} |
||||
.im_message_selected .icon-select-tick, |
||||
.im_history_selectable .im_message_outer_wrap:hover .icon-select-tick, |
||||
.im_content_message_select_area:hover .icon-select-tick { |
||||
background-position: -9px -481px; |
||||
opacity: 0.5; |
||||
} |
||||
.im_message_selected .icon-select-tick { |
||||
opacity: 1 !important; |
||||
} |
||||
|
||||
/* Dialogs modal */ |
||||
.peer_select_window .modal-dialog { |
||||
max-width: 506px; |
||||
} |
||||
.peer_select_modal_wrap .modal-body { |
||||
padding: 0 2px 14px; |
||||
} |
||||
|
||||
|
||||
@media (max-width: 900px) { |
||||
|
||||
/* Status ticks */ |
||||
.icon-message-status, |
||||
.im_message_error_btn, |
||||
.icon-message-status-tick { |
||||
display: none; |
||||
} |
||||
.im_message_out .icon-message-status-tick { |
||||
display: inline-block; |
||||
width: 16px; |
||||
height: 10px; |
||||
background: url(../img/icons/Checks2_2x.png); |
||||
background-size: 16px 10px; |
||||
top: 2px; |
||||
position: relative; |
||||
} |
||||
.is_1x .im_message_out .icon-message-status-tick { |
||||
background-image: url(../img/icons/Checks2_1x.png); |
||||
} |
||||
.im_message_pending .icon-message-status-tick { |
||||
display: none; |
||||
} |
||||
.im_message_unread .icon-message-status-tick { |
||||
background: url(../img/icons/Checks1_2x.png); |
||||
background-size: 16px 10px; |
||||
} |
||||
.is_1x .im_message_unread .icon-message-status-tick { |
||||
background-image: url(../img/icons/Checks1_1x.png); |
||||
} |
||||
.im_message_date { |
||||
padding: 0; |
||||
} |
||||
} |
||||
|
||||
|
||||
.im_message_fwd .im_message_fwd_author_wrap, |
||||
.im_message_fwd .im_message_text, |
||||
.im_message_fwd .im_message_media { |
||||
margin-left: 42px; |
||||
} |
||||
|
||||
.im_send_panel_wrap { |
||||
max-width: 526px; |
||||
} |
||||
.im_send_form { |
||||
max-width: 389px; |
||||
left: 62px; |
||||
right: 62px; |
||||
} |
||||
|
||||
.im_panel_peer_photo, |
||||
.im_panel_own_photo { |
||||
width: 50px; |
||||
height: 50px; |
||||
border-radius: 3px; |
||||
overflow: hidden; |
||||
} |
||||
div.im_panel_peer_photo { |
||||
cursor: pointer; |
||||
margin-left: 12px; |
||||
height: 55px; |
||||
} |
||||
div.im_panel_own_photo { |
||||
margin-right: 12px; |
||||
} |
||||
|
||||
.im_panel_peer_online { |
||||
background: #6DBF69; |
||||
border: 1px solid #FFF; |
||||
display: block; |
||||
width: 11px; |
||||
height: 11px; |
||||
border-radius: 6px; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
margin-top: -7px; |
||||
margin-left: 43px; |
||||
} |
||||
|
||||
/* Peer modals */ |
||||
.user_modal_window .modal-dialog { |
||||
max-width: 506px; |
||||
} |
||||
.user_modal_photo_profile_wrap { |
||||
padding: 13px 12px; |
||||
margin-bottom: 15px; |
||||
} |
||||
.user_modal_image_wrap { |
||||
display: block; |
||||
width: 100px; |
||||
margin-right: 22px; |
||||
overflow: hidden; |
||||
border-radius: 3px; |
||||
} |
||||
.user_modal_image { |
||||
width: 100px; |
||||
height: 100px; |
||||
} |
||||
.user_modal_header { |
||||
font-weight: bold; |
||||
margin: 2px 0 7px; |
||||
} |
||||
.user_modal_status { |
||||
color: #999; |
||||
margin-bottom: 16px; |
||||
} |
||||
|
||||
.user_modal_main_btn { |
||||
border: 0; |
||||
font-size: 12px; |
||||
padding-left: 16px; |
||||
padding-right: 16px; |
||||
margin: 8px 10px 0 0; |
||||
float: left; |
||||
} |
||||
.user_modal_other_btn { |
||||
margin: 8px 0 0 0; |
||||
float: left; |
||||
} |
||||
.user_modal_other_btn .dropdown-toggle { |
||||
border: 0; |
||||
font-size: 12px; |
||||
} |
||||
.user_modal_other_btn .dropdown-menu { |
||||
margin-left: -3px; |
||||
} |
||||
|
||||
.user_modal_settings_wrap { |
||||
margin-top: 25px; |
||||
} |
||||
.user_modal_notifications { |
||||
font-weight: bold; |
||||
} |
||||
.user_modal_clear { |
||||
margin-top: 20px; |
||||
} |
||||
|
||||
|
||||
.chat_modal_window .modal-dialog { |
||||
max-width: 506px; |
||||
} |
||||
|
||||
.chat_modal_header { |
||||
font-weight: bold; |
||||
margin: 0 0 10px; |
||||
} |
||||
.chat_modal_members_count { |
||||
color: #999; |
||||
margin-bottom: 16px; |
||||
} |
||||
|
||||
.chat_modal_actions_wrap { |
||||
position: relative; |
||||
} |
||||
|
||||
.chat_modal_main_btn { |
||||
border: 0; |
||||
font-size: 12px; |
||||
padding-left: 16px; |
||||
padding-right: 16px; |
||||
float: left; |
||||
position: relative; |
||||
overflow: hidden; |
||||
margin-right: 10px; |
||||
margin-top: 8px; |
||||
} |
||||
.chat_modal_invite_btn { |
||||
border: 0; |
||||
font-size: 12px; |
||||
padding-left: 16px; |
||||
padding-right: 16px; |
||||
float: left; |
||||
position: relative; |
||||
margin-right: 10px; |
||||
margin-top: 8px; |
||||
} |
||||
.chat_modal_delete_btn { |
||||
border: 0; |
||||
font-size: 12px; |
||||
padding-left: 16px; |
||||
padding-right: 16px; |
||||
float: left; |
||||
margin-right: 10px; |
||||
margin-top: 8px; |
||||
} |
||||
.chat_modal_other_btn { |
||||
margin-top: 8px; |
||||
float: left; |
||||
} |
||||
.chat_modal_other_btn .dropdown-toggle { |
||||
border: 0; |
||||
font-size: 12px; |
||||
} |
||||
.chat_modal_other_btn .dropdown-menu { |
||||
margin-left: -3px; |
||||
} |
||||
|
||||
.chat_modal_photo_update_link { |
||||
display: block; |
||||
padding: 5px 14px; |
||||
clear: both; |
||||
font-weight: normal; |
||||
line-height: 1.428571429; |
||||
color: #333333; |
||||
white-space: nowrap; |
||||
font-size: 13px; |
||||
overflow: hidden; |
||||
position: relative; |
||||
} |
||||
.chat_modal_photo_update_link:hover { |
||||
text-decoration: none; |
||||
color: #262626; |
||||
background-color: #f5f5f5; |
||||
} |
||||
|
||||
.chat_modal_settings_wrap { |
||||
margin-top: 10px; |
||||
} |
||||
|
||||
.settings_modal_window .modal-dialog { |
||||
max-width: 482px; |
||||
} |
||||
.settings_modal_settings { |
||||
padding: 4px 0; |
||||
margin: 0; |
||||
} |
||||
.settings_modal_wrap .user_modal_main_btn { |
||||
position: relative; |
||||
overflow: hidden; |
||||
} |
||||
.settings_profile_edit_form { |
||||
margin-bottom: 15px; |
||||
} |
||||
.settings_profile_image_wrap { |
||||
float: left; |
||||
width: 120px; |
||||
margin-right: 22px; |
||||
} |
||||
.settings_profile_first_name, |
||||
.settings_profile_last_name { |
||||
width: 180px; |
||||
float: left; |
||||
margin-bottom: 0; |
||||
} |
||||
.settings_profile_first_name label, |
||||
.settings_profile_last_name label { |
||||
margin-bottom: 3px; |
||||
} |
||||
.settings_profile_first_name { |
||||
margin-right: 22px; |
||||
margin-bottom: 10px; |
||||
} |
||||
.settings_profile_last_name { |
||||
margin-right: 10px; |
||||
margin-bottom: 15px; |
||||
} |
||||
.settings_profile_save { |
||||
padding-top: 21px; |
||||
float: left; |
||||
} |
||||
.settings_profile_save_btn { |
||||
width: 50px; |
||||
} |
||||
|
||||
.settings_profile_edit_form { |
||||
margin-bottom: 0; |
||||
} |
||||
.settings_profile_edit_form input { |
||||
font-size: 12px; |
||||
line-height: normal; |
||||
background: #F2F2F2; |
||||
border: 1px solid #F2F2F2; |
||||
border-radius: 0; |
||||
padding: 6px 6px 6px 6px; |
||||
margin-bottom: 0; |
||||
margin: 0; |
||||
} |
||||
.settings_profile_edit_form input:focus, |
||||
.settings_profile_edit_form input:active { |
||||
background-color: #FFF; |
||||
} |
||||
|
||||
.settings_send_choose_form input { |
||||
margin-top: 2px; |
||||
} |
||||
.settings_send_choose_form { |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
.settings_user_phone, |
||||
.settings_version { |
||||
color: #999; |
||||
} |
||||
.icon-volume-outer { |
||||
display: inline-block; |
||||
background: #c7c7c7; |
||||
border-radius: 10px; |
||||
overflow: hidden; |
||||
height: 18px; |
||||
padding: 5px 8px; |
||||
margin: 0 9px 0 0; |
||||
width: 32px; |
||||
} |
||||
.icon-volume-inner { |
||||
display: block; |
||||
background: #fff; |
||||
float: left; |
||||
width: 2px; |
||||
vertical-align: bottom; |
||||
margin: 0 1px 0; |
||||
height: 8px; |
||||
} |
||||
.icon-volume-inner1 { |
||||
height: 2px; |
||||
margin-top: 6px; |
||||
} |
||||
.icon-volume-inner2 { |
||||
height: 4px; |
||||
margin-top: 4px; |
||||
} |
||||
.icon-volume-inner3 { |
||||
height: 6px; |
||||
margin-top: 2px; |
||||
} |
||||
|
||||
.icon-volume-outer1 .icon-volume-inner2, |
||||
.icon-volume-outer1 .icon-volume-inner3, |
||||
.icon-volume-outer1 .icon-volume-inner4, |
||||
.icon-volume-outer2 .icon-volume-inner3, |
||||
.icon-volume-outer2 .icon-volume-inner4, |
||||
.icon-volume-outer3 .icon-volume-inner4 { |
||||
display: none; |
||||
} |
||||
|
||||
|
||||
.im_message_selected .im_message_outer_wrap, |
||||
.im_message_focus .im_message_outer_wrap { |
||||
background: #f2f6fa; |
||||
} |
||||
.im_history_selectable .im_message_outer_wrap { |
||||
cursor: pointer; |
||||
} |
||||
.im_history_selectable .im_message_outer_wrap:hover { |
||||
background: #f2f6fa; |
||||
} |
||||
|
||||
.im_message_wrap { |
||||
max-width: 526px; |
||||
padding: 0 15px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.im_message_wrap { |
||||
position: static; |
||||
} |
||||
@media (min-width: 901px) { |
||||
.im_message_wrap { |
||||
position: relative; |
||||
} |
||||
} |
||||
|
||||
.tooltip-inner { |
||||
background: rgba(0,0,0, 0.8); |
||||
} |
||||
.tooltip-arrow { |
||||
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; |
||||
} |
||||
|
||||
/* Import contact modal */ |
||||
.import_contact_modal_window .modal-dialog { |
||||
max-width: 480px; |
||||
} |
||||
|
||||
.modal-content-animated { |
||||
-webkit-transition: margin-top linear 0.2s; |
||||
transition: margin-top linear 0.2s; |
||||
} |
||||
|
||||
.countries_modal_col { |
||||
max-height: 350px; |
||||
} |
||||
|
||||
.changelog_modal_window .modal-dialog { |
||||
max-width: 506px; |
||||
} |
||||
@ -0,0 +1,433 @@
@@ -0,0 +1,433 @@
|
||||
/*! |
||||
* Webogram v0.3.0 - messaging web application for MTProto |
||||
* https://github.com/zhukov/webogram
|
||||
* Copyright (C) 2014 Igor Zhukov <igor.beatle@gmail.com> |
||||
* https://github.com/zhukov/webogram/blob/master/LICENSE
|
||||
*/ |
||||
|
||||
'use strict'; |
||||
|
||||
/* Directives */ |
||||
|
||||
|
||||
angular.module('myApp.directives') |
||||
|
||||
.directive('myDialogsListMobile', function($window, $timeout) { |
||||
|
||||
return { |
||||
link: link |
||||
}; |
||||
|
||||
|
||||
function link ($scope, element, attrs) { |
||||
var dialogsColWrap = $('.im_dialogs_col_wrap')[0], |
||||
scrollableWrap = element[0], |
||||
headWrap = $('.tg_page_head')[0], |
||||
panelWrapSelector = attrs.modal |
||||
? '.mobile_modal_body .im_dialogs_panel' |
||||
: '.im_dialogs_panel', |
||||
panelWrap = $(panelWrapSelector)[0], |
||||
hasTabs = false, |
||||
moreNotified = false; |
||||
|
||||
$scope.$on('ui_dialogs_tabs', function (e, newHasTabs) { |
||||
hasTabs = newHasTabs; |
||||
updateSizes(); |
||||
}); |
||||
$scope.$on('ui_dialogs_search', updateSizes); |
||||
$scope.$on('ui_dialogs_update', updateSizes); |
||||
|
||||
|
||||
$scope.$on('ui_dialogs_append', function () { |
||||
onContentLoaded(function () { |
||||
moreNotified = false; |
||||
|
||||
$timeout(function () { |
||||
$(scrollableWrap).trigger('scroll'); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
$scope.$on('ui_dialogs_change', function () { |
||||
onContentLoaded(function () { |
||||
moreNotified = false; |
||||
|
||||
$timeout(function () { |
||||
$(scrollableWrap).trigger('scroll'); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
$(scrollableWrap).on('scroll', function (e) { |
||||
if (!element.is(':visible')) return; |
||||
if (!moreNotified && scrollableWrap.scrollTop >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight - 300) { |
||||
$scope.$emit('dialogs_need_more'); |
||||
moreNotified = true; |
||||
} |
||||
}); |
||||
|
||||
|
||||
function updateSizes () { |
||||
if (!panelWrap || !panelWrap.offsetHeight) { |
||||
panelWrap = $(panelWrapSelector)[0]; |
||||
} |
||||
|
||||
if (attrs.modal) { |
||||
$(element).css({ |
||||
height: $($window).height() - |
||||
(panelWrap ? panelWrap.offsetHeight : 58) - 46 |
||||
}); |
||||
return; |
||||
} |
||||
|
||||
if (!headWrap || !headWrap.offsetHeight) { |
||||
headWrap = $('.tg_page_head')[0]; |
||||
} |
||||
|
||||
if (!dialogsColWrap || !dialogsColWrap.offsetHeight) { |
||||
dialogsColWrap = $('.im_dialogs_col_wrap')[0]; |
||||
} |
||||
$(element).css({ |
||||
height: $($window).height() - |
||||
(headWrap ? headWrap.offsetHeight : 46) - |
||||
(panelWrap ? panelWrap.offsetHeight : 58) - |
||||
parseInt($(dialogsColWrap).css('paddingBottom') || 0) |
||||
}); |
||||
} |
||||
|
||||
$($window).on('resize', updateSizes); |
||||
|
||||
updateSizes(); |
||||
setTimeout(updateSizes, 1000); |
||||
}; |
||||
|
||||
}) |
||||
|
||||
.directive('myHistoryMobile', function ($window, $timeout, $rootScope, $transition) { |
||||
|
||||
return { |
||||
link: link |
||||
}; |
||||
|
||||
function link ($scope, element, attrs) { |
||||
var historyWrap = $('.im_history_wrap', element)[0], |
||||
historyMessagesEl = $('.im_history_messages', element)[0], |
||||
scrollableWrap = $('.im_history_scrollable_wrap', element)[0], |
||||
scrollable = $('.im_history_scrollable', element)[0], |
||||
bottomPanelWrap = $('.im_bottom_panel_wrap', element)[0], |
||||
sendFormWrap = $('.im_send_form_wrap', element)[0], |
||||
headWrap = $('.tg_page_head')[0], |
||||
sendForm = $('.im_send_form', element)[0], |
||||
moreNotified = false, |
||||
lessNotified = false; |
||||
|
||||
onContentLoaded(function () { |
||||
scrollableWrap.scrollTop = scrollableWrap.scrollHeight; |
||||
}); |
||||
|
||||
$scope.$on('ui_history_append_new', function (e, options) { |
||||
if (!atBottom && !options.my) { |
||||
return; |
||||
} |
||||
|
||||
var pr = parseInt($(scrollableWrap).css('paddingRight')) |
||||
$(scrollableWrap).addClass('im_history_to_bottom'); |
||||
$(scrollable).css({bottom: 0, marginLeft: -Math.ceil(pr / 2)}); |
||||
|
||||
onContentLoaded(function () { |
||||
$(scrollableWrap).removeClass('im_history_to_bottom'); |
||||
$(scrollable).css({bottom: '', marginLeft: ''}); |
||||
scrollableWrap.scrollTop = scrollableWrap.scrollHeight; |
||||
updateBottomizer(); |
||||
}); |
||||
}); |
||||
|
||||
function changeScroll () { |
||||
var unreadSplit, focusMessage; |
||||
|
||||
// console.trace('change scroll');
|
||||
if (focusMessage = $('.im_message_focus:visible', scrollableWrap)[0]) { |
||||
var ch = scrollableWrap.clientHeight, |
||||
st = scrollableWrap.scrollTop, |
||||
ot = focusMessage.offsetTop, |
||||
h = focusMessage.clientHeight; |
||||
if (!st || st + ch < ot || st > ot + h) { |
||||
scrollableWrap.scrollTop = Math.max(0, ot - Math.floor(ch / 2) + 26); |
||||
} |
||||
atBottom = false; |
||||
} else if (unreadSplit = $('.im_message_unread_split:visible', scrollableWrap)[0]) { |
||||
// console.log('change scroll unread', unreadSplit.offsetTop);
|
||||
scrollableWrap.scrollTop = Math.max(0, unreadSplit.offsetTop - 52); |
||||
atBottom = false; |
||||
} else { |
||||
// console.log('change scroll bottom');
|
||||
scrollableWrap.scrollTop = scrollableWrap.scrollHeight; |
||||
atBottom = true; |
||||
} |
||||
$timeout(function () { |
||||
$(scrollableWrap).trigger('scroll'); |
||||
scrollTopInitial = scrollableWrap.scrollTop; |
||||
}); |
||||
}; |
||||
|
||||
$scope.$on('ui_history_change', function () { |
||||
var pr = parseInt($(scrollableWrap).css('paddingRight')) |
||||
$(scrollableWrap).addClass('im_history_to_bottom'); |
||||
$(scrollable).css({bottom: 0, marginLeft: -Math.ceil(pr / 2)}); |
||||
onContentLoaded(function () { |
||||
$(scrollableWrap).removeClass('im_history_to_bottom'); |
||||
$(scrollable).css({bottom: '', marginLeft: ''}); |
||||
updateSizes(true); |
||||
moreNotified = false; |
||||
lessNotified = false; |
||||
changeScroll(); |
||||
}); |
||||
}); |
||||
|
||||
$scope.$on('ui_history_change_scroll', function () { |
||||
onContentLoaded(changeScroll) |
||||
}); |
||||
|
||||
$scope.$on('ui_history_focus', function () { |
||||
if (!atBottom) { |
||||
scrollableWrap.scrollTop = scrollableWrap.scrollHeight; |
||||
atBottom = true; |
||||
} |
||||
}); |
||||
|
||||
$scope.$on('ui_history_prepend', function () { |
||||
var sh = scrollableWrap.scrollHeight, |
||||
st = scrollableWrap.scrollTop, |
||||
pr = parseInt($(scrollableWrap).css('paddingRight')), |
||||
ch = scrollableWrap.clientHeight; |
||||
|
||||
$(scrollable).css({marginBottom: -(sh - st - ch - 4), marginLeft: -Math.ceil(pr / 2)}); |
||||
$(scrollableWrap).addClass('im_history_to_bottom'); |
||||
|
||||
|
||||
var upd = function () { |
||||
$(scrollableWrap).removeClass('im_history_to_bottom'); |
||||
$(scrollable).css({marginBottom: '', marginLeft: ''}); |
||||
if (scrollTopInitial >= 0) { |
||||
changeScroll(); |
||||
} else { |
||||
scrollableWrap.scrollTop = st + scrollableWrap.scrollHeight - sh; |
||||
} |
||||
|
||||
updateBottomizer(); |
||||
moreNotified = false; |
||||
|
||||
$timeout(function () { |
||||
if (scrollableWrap.scrollHeight != sh) { |
||||
$(scrollableWrap).trigger('scroll'); |
||||
} |
||||
}); |
||||
|
||||
clearTimeout(timer); |
||||
unreg(); |
||||
}, |
||||
timer = setTimeout(upd, 0), |
||||
unreg = $scope.$on('$viewContentLoaded', upd); |
||||
}); |
||||
|
||||
$scope.$on('ui_history_append', function () { |
||||
var sh = scrollableWrap.scrollHeight; |
||||
onContentLoaded(function () { |
||||
atBottom = false; |
||||
updateBottomizer(); |
||||
lessNotified = false; |
||||
|
||||
if (scrollTopInitial >= 0) { |
||||
changeScroll(); |
||||
} |
||||
|
||||
$timeout(function () { |
||||
if (scrollableWrap.scrollHeight != sh) { |
||||
$(scrollableWrap).trigger('scroll'); |
||||
} |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
$scope.$on('ui_panel_update', function () { |
||||
onContentLoaded(function () { |
||||
updateSizes(); |
||||
$scope.$broadcast('ui_message_send'); |
||||
|
||||
$timeout(function () { |
||||
$(scrollableWrap).trigger('scroll'); |
||||
}); |
||||
}); |
||||
}); |
||||
|
||||
$scope.$on('ui_selection_clear', function () { |
||||
if (window.getSelection) { |
||||
if (window.getSelection().empty) { // Chrome
|
||||
window.getSelection().empty(); |
||||
} else if (window.getSelection().removeAllRanges) { // Firefox
|
||||
window.getSelection().removeAllRanges(); |
||||
} |
||||
} else if (document.selection) { // IE?
|
||||
document.selection.empty(); |
||||
} |
||||
}); |
||||
|
||||
$scope.$on('ui_editor_resize', updateSizes); |
||||
$scope.$on('ui_height', function () { |
||||
onContentLoaded(updateSizes); |
||||
}); |
||||
|
||||
var atBottom = true, |
||||
scrollTopInitial = -1; |
||||
$(scrollableWrap).on('scroll', function (e) { |
||||
if (!element.is(':visible') || |
||||
$(scrollableWrap).hasClass('im_history_to_bottom')) { |
||||
return; |
||||
} |
||||
var st = scrollableWrap.scrollTop; |
||||
atBottom = st >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight; |
||||
if (scrollTopInitial >= 0 && scrollTopInitial != st) { |
||||
scrollTopInitial = -1; |
||||
} |
||||
|
||||
if (!moreNotified && st <= 300) { |
||||
moreNotified = true; |
||||
$scope.$emit('history_need_more'); |
||||
} |
||||
else if (!lessNotified && st >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight - 300) { |
||||
lessNotified = true; |
||||
$scope.$emit('history_need_less'); |
||||
} |
||||
}); |
||||
|
||||
function updateSizes (heightOnly) { |
||||
if (!element.is(':visible') && !$(element[0].parentNode.parentNode).is(':visible')) { |
||||
return; |
||||
} |
||||
if ($(sendFormWrap).is(':visible')) { |
||||
$(sendFormWrap).css({ |
||||
height: $(sendForm).height() |
||||
}); |
||||
} |
||||
|
||||
if (!headWrap || !headWrap.offsetHeight) { |
||||
headWrap = $('.tg_page_head')[0]; |
||||
} |
||||
var historyH = $($window).height() - bottomPanelWrap.offsetHeight - (headWrap ? headWrap.offsetHeight : 46); |
||||
$(historyWrap).css({ |
||||
height: historyH |
||||
}); |
||||
|
||||
updateBottomizer(); |
||||
|
||||
|
||||
if (heightOnly === true) return; |
||||
if (atBottom) { |
||||
onContentLoaded(function () { |
||||
scrollableWrap.scrollTop = scrollableWrap.scrollHeight; |
||||
}); |
||||
} |
||||
} |
||||
|
||||
function updateBottomizer () { |
||||
return; |
||||
$(historyMessagesEl).css({marginTop: 0}); |
||||
var marginTop = scrollableWrap.offsetHeight |
||||
- historyMessagesEl.offsetHeight |
||||
- 20; |
||||
|
||||
if (historyMessagesEl.offsetHeight > 0 && marginTop > 0) { |
||||
$(historyMessagesEl).css({marginTop: marginTop}); |
||||
} |
||||
} |
||||
|
||||
$($window).on('resize', updateSizes); |
||||
|
||||
updateSizes(); |
||||
onContentLoaded(updateSizes); |
||||
} |
||||
|
||||
}) |
||||
|
||||
.directive('myContactsListMobile', function($window, $timeout) { |
||||
|
||||
return { |
||||
link: link |
||||
}; |
||||
|
||||
function link ($scope, element, attrs) { |
||||
var searchWrap = $('.contacts_modal_search')[0], |
||||
panelWrap = $('.contacts_modal_panel')[0]; |
||||
|
||||
function updateSizes () { |
||||
$(element).css({ |
||||
height: $($window).height() - |
||||
(panelWrap && panelWrap.offsetHeight || 0) - |
||||
(searchWrap && searchWrap.offsetHeight || 0) - |
||||
64 |
||||
}); |
||||
} |
||||
|
||||
$($window).on('resize', updateSizes); |
||||
$scope.$on('contacts_change', function () { |
||||
onContentLoaded(updateSizes) |
||||
}); |
||||
onContentLoaded(updateSizes); |
||||
}; |
||||
|
||||
}) |
||||
|
||||
.directive('myCountriesListMobile', function($window, $timeout) { |
||||
|
||||
return { |
||||
link: link |
||||
}; |
||||
|
||||
function link ($scope, element, attrs) { |
||||
var searchWrap = $('.countries_modal_search')[0], |
||||
panelWrap = $('.countries_modal_panel')[0]; |
||||
|
||||
function updateSizes () { |
||||
$(element).css({ |
||||
height: $($window).height() |
||||
- (panelWrap && panelWrap.offsetHeight || 0) |
||||
- (searchWrap && searchWrap.offsetHeight || 0) |
||||
- (46 + 18) |
||||
}); |
||||
} |
||||
|
||||
$($window).on('resize', updateSizes); |
||||
onContentLoaded(updateSizes); |
||||
}; |
||||
|
||||
}) |
||||
|
||||
.directive('myInfiniteScrollerMobile', function () { |
||||
|
||||
return { |
||||
link: link, |
||||
scope: true |
||||
}; |
||||
|
||||
function link($scope, element, attrs) { |
||||
|
||||
var scrollableWrap = element[0], |
||||
moreNotified = false; |
||||
|
||||
$(scrollableWrap).on('scroll', function (e) { |
||||
if (!element.is(':visible')) return; |
||||
if (!moreNotified && |
||||
scrollableWrap.scrollTop >= scrollableWrap.scrollHeight - scrollableWrap.clientHeight - 300) { |
||||
moreNotified = true; |
||||
$scope.$apply(function () { |
||||
$scope.slice.limit += ($scope.slice.limitDelta || 20); |
||||
}); |
||||
|
||||
onContentLoaded(function () { |
||||
moreNotified = false; |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
}; |
||||
}) |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,28 @@
@@ -0,0 +1,28 @@
|
||||
<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="navbar-header"> |
||||
<a class="navbar-brand" href="{{isLoggedIn ? '#/im' : '#/'}}"><span class="tg_head_logo"></span></a> |
||||
</div> |
||||
|
||||
<div class="navbar-menu" ng-switch="offline"> |
||||
|
||||
<ul ng-switch-when="true" class="nav navbar-nav navbar-offline"> |
||||
<li ng-show="!offlineConnecting"><span class="navbar-offline-text">Waiting for network<span my-loading-dots></span></span></li> |
||||
<li ng-show="!offlineConnecting" class="hidden-xs"><a href="" ng-click="retryOnline()">Retry</a></li> |
||||
<li ng-show="offlineConnecting"><span class="navbar-offline-text">Connecting<span my-loading-dots></span></span></li> |
||||
</ul> |
||||
|
||||
<ul ng-switch-default class="nav navbar-nav navbar-right"> |
||||
<li ng-if="isLoggedIn && !isEmpty.contacts"><a href="" ng-click="openContacts()">Contacts</a></li> |
||||
<li ng-if="isLoggedIn"><a href="" ng-click="openSettings()">Settings</a></li> |
||||
<li ng-if="isLoggedIn"><a href="" ng-click="logOut()">Log Out</a></li> |
||||
<li ng-if="!isLoggedIn"><a href="https://github.com/zhukov/webogram" target="_blank">About</a></li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,199 @@
@@ -0,0 +1,199 @@
|
||||
<div class="changelog_modal_wrap"> |
||||
|
||||
<a class="modal-close-button" ng-click="$close()"><i></i></a> |
||||
|
||||
<div class="modal-body"> |
||||
|
||||
<div class="changelog_card_wrap" ng-switch="lastVersion === false"> |
||||
<div ng-switch-when="true"> |
||||
<div class="changelog_card"></div> |
||||
<h2 class="changelog_header">Recent updates in <strong>Telegram Web</strong></h2> |
||||
</div> |
||||
<div ng-switch-default> |
||||
<div class="changelog_card"></div> |
||||
<h2 class="changelog_header"><strong>Telegram Web</strong> has been updated!</h2> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="changelog_versions_wrap"> |
||||
|
||||
<div class="modal_section changelog_version_wrap"> |
||||
<h3 class="modal_section_header changelog_version_title"> |
||||
<span class="pull-right">current version</span> |
||||
Version 0.3.0 |
||||
</h3> |
||||
<div class="modal_section_body changelog_version_changes"> |
||||
<ul class="list-unstyled changelog_version_changes_list"> |
||||
<li>Added online statuses automatic update</li> |
||||
<li>Fixed scrollbar invalid width bug</li> |
||||
<li>[Desktop] Added phone country detection</li> |
||||
<li>[FirefoxOS] Improved PUSH-notifications for <= 1.1</li> |
||||
<li>[FirefoxOS] Fixed emoji in notifications</li> |
||||
<li>[FirefoxOS] Fixed attachment bug for <= 1.1</li> |
||||
<li>[FirefoxOS] Added phonebook permissions handling</li> |
||||
<li>[FirefoxOS] Added ability to share Gallery photos in Telegram</li> |
||||
<li>Supported international hashtags in messages</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal_section changelog_version_wrap"> |
||||
<h3 class="modal_section_header changelog_version_title"> |
||||
Version 0.2.9 |
||||
</h3> |
||||
<div class="modal_section_body changelog_version_changes"> |
||||
<ul class="list-unstyled changelog_version_changes_list"> |
||||
<li>Updated mobile layout</li> |
||||
<li>Bugfixes</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal_section changelog_version_wrap"> |
||||
<h3 class="modal_section_header changelog_version_title"> |
||||
Version 0.2.5 |
||||
</h3> |
||||
<div class="modal_section_body changelog_version_changes"> |
||||
<ul class="list-unstyled changelog_version_changes_list"> |
||||
<li>Updated mobile layout</li> |
||||
<li>Improved performance</li> |
||||
<li>Improved messages grouping</li> |
||||
<li>[FirefoxOS] Fixed notifications for <= 1.1</li> |
||||
<li>[FirefoxOS] Fixed phonebook import</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal_section changelog_version_wrap"> |
||||
<h3 class="modal_section_header changelog_version_title"> |
||||
Version 0.2.1 |
||||
</h3> |
||||
<div class="modal_section_body changelog_version_changes"> |
||||
<ul class="list-unstyled changelog_version_changes_list"> |
||||
<li>Improved key generation performance on slow devices</li> |
||||
<li>Added network sleep for mobile devices</li> |
||||
<li>[FirefoxOS] Added support of PUSH notifications</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal_section changelog_version_wrap"> |
||||
<h3 class="modal_section_header changelog_version_title"> |
||||
Version 0.2 |
||||
</h3> |
||||
<div class="modal_section_body changelog_version_changes"> |
||||
<ul class="list-unstyled changelog_version_changes_list"> |
||||
<li>Updated contacts list, added edit mode</li> |
||||
<li>First Firefox OS release. See <a href="https://marketplace.firefox.com/app/telegram" target="_blank">Firefox Marketplace</a></li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal_section changelog_version_wrap" ng-show="canShowVersion('0.1.9')"> |
||||
<h3 class="modal_section_header changelog_version_title"> |
||||
Version 0.1.9 |
||||
</h3> |
||||
<div class="modal_section_body changelog_version_changes"> |
||||
<ul class="list-unstyled changelog_version_changes_list"> |
||||
<li>Improvements of performance</li> |
||||
<li>Bugfixes</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal_section changelog_version_wrap" ng-show="canShowVersion('0.1.8')"> |
||||
<h3 class="modal_section_header changelog_version_title"> |
||||
Version 0.1.8 |
||||
</h3> |
||||
<div class="modal_section_body changelog_version_changes"> |
||||
<ul class="list-unstyled changelog_version_changes_list"> |
||||
<li>Improved mobile layout</li> |
||||
<li>Bugfixes</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal_section changelog_version_wrap" ng-show="canShowVersion('0.1.7')"> |
||||
<h3 class="modal_section_header changelog_version_title"> |
||||
Version 0.1.7 |
||||
</h3> |
||||
<div class="modal_section_body changelog_version_changes"> |
||||
<ul class="list-unstyled changelog_version_changes_list"> |
||||
<li>Improved mobile layout</li> |
||||
<li>Added file cache for Firefox and Android</li> |
||||
<li>New design for forwarded messages</li> |
||||
<li>Hash-tags support</li> |
||||
<li>Messaging bugfixes</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal_section changelog_version_wrap" ng-show="canShowVersion('0.1.6')"> |
||||
<h3 class="modal_section_header changelog_version_title"> |
||||
Version 0.1.6 |
||||
</h3> |
||||
<div class="modal_section_body changelog_version_changes"> |
||||
<ul class="list-unstyled changelog_version_changes_list"> |
||||
<li>Added search of messages</li> |
||||
<li>Improved performance of chats with lots of unread messages</li> |
||||
<li>Bugfixes</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal_section changelog_version_wrap" ng-show="canShowVersion('0.1.5')"> |
||||
<h3 class="modal_section_header changelog_version_title"> |
||||
Version 0.1.5 |
||||
</h3> |
||||
<div class="modal_section_body changelog_version_changes"> |
||||
<ul class="list-unstyled changelog_version_changes_list"> |
||||
<li>Added registration</li> |
||||
<li>Improved experience for newly registered users</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal_section changelog_version_wrap" ng-show="canShowVersion('0.1.4')"> |
||||
<h3 class="modal_section_header changelog_version_title"> |
||||
Version 0.1.4 |
||||
</h3> |
||||
<div class="modal_section_body changelog_version_changes"> |
||||
<ul class="list-unstyled changelog_version_changes_list"> |
||||
<li>Browse userpic history (click on the photo in user info)</li> |
||||
<li>New <a href="https://github.com/zhukov/webogram" target="_blank" title="Source code on GitHub">GitHub</a>, <a href="https://twitter.com/telegram_web" target="_blank" title="Follow us on Twitter!">Twitter</a> buttons in Settings</li> |
||||
<li>Updated keyboard shortcuts:</li> |
||||
<ul> |
||||
<li><strong>Alt+Home</strong> - switch to first (most recent) conversation</li> |
||||
<li>Removed <strong>Alt+1, 2, 3..</strong> shortcuts due to conflicts in different browsers</li> |
||||
</ul> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal_section changelog_version_wrap" ng-show="canShowVersion('0.1.3')"> |
||||
<h3 class="modal_section_header changelog_version_title"> |
||||
Version 0.1.3 |
||||
</h3> |
||||
<div class="modal_section_body changelog_version_changes"> |
||||
<ul class="list-unstyled changelog_version_changes_list"> |
||||
<li>Added version history to welcome screen</li> |
||||
<li>Added keyboard shortcuts:</li> |
||||
<ul> |
||||
<li><strong>Tab</strong> - set focus to message field</li> |
||||
<li><strong>Esc</strong> or <strong>Shift+Tab</strong> - set focus to search field</li> |
||||
<li><strong>Up/Down</strong> (while in search field) - move between conversations</li> |
||||
<li><strong>Enter</strong> (while in search field) - open selected or first conversation</li> |
||||
<li><strong>Alt+Up/Down</strong> - move to previous/next conversation</li> |
||||
</ul> |
||||
<li>Improved grouping for messages</li> |
||||
<li>Fixed video modal positioning bug</li> |
||||
<li>Fixed focusing issues on mobile</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
@ -0,0 +1,43 @@
@@ -0,0 +1,43 @@
|
||||
<div class="contacts_modal_wrap"> |
||||
|
||||
<div class="tg_page_head tg_modal_head"> |
||||
<div class="navbar navbar-static-top navbar-inverse"> |
||||
<div class="container"> |
||||
|
||||
<div class="navbar-header"> |
||||
|
||||
<ul class="nav navbar-nav navbar-quick-nav"> |
||||
<li class="navbar-quick-right"> |
||||
<a ng-class="{disabled: group.creating}" ng-click="createGroup()" ng-bind="group.creating ? 'Creating...' : 'OK'" ng-disabled="group.creating"></a> |
||||
</li> |
||||
<li> |
||||
<a ng-click="$dismiss()" class="navbar-quick-media-back"> |
||||
<i class="icon icon-back"></i> |
||||
<div class="navbar-quick-back-title"> |
||||
<h4> |
||||
Create Group |
||||
</h4> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal-body"> |
||||
|
||||
<form class="modal_simple_form" ng-submit="createGroup()" my-vertical-position="0.25"> |
||||
|
||||
<div class="form-group"> |
||||
<input class="form-control input-lg" my-focused type="text" placeholder="Group name" ng-model="group.name"/> |
||||
</div> |
||||
|
||||
</form> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
@ -0,0 +1,43 @@
@@ -0,0 +1,43 @@
|
||||
<div class="contacts_modal_wrap"> |
||||
|
||||
<div class="tg_page_head tg_modal_head"> |
||||
<div class="navbar navbar-static-top navbar-inverse"> |
||||
<div class="container"> |
||||
|
||||
<div class="navbar-header"> |
||||
|
||||
<ul class="nav navbar-nav navbar-quick-nav"> |
||||
<li class="navbar-quick-right"> |
||||
<a ng-class="{disabled: group.updating}" ng-click="updateGroup()" ng-bind="group.updating ? 'Saving...' : 'Save'" ng-disabled="group.updating"></a> |
||||
</li> |
||||
<li> |
||||
<a ng-click="$dismiss()" class="navbar-quick-media-back"> |
||||
<i class="icon icon-back"></i> |
||||
<div class="navbar-quick-back-title"> |
||||
<h4> |
||||
Edit Group |
||||
</h4> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal-body"> |
||||
|
||||
<form class="modal_simple_form" ng-submit="updateGroup()" my-vertical-position="0.25"> |
||||
|
||||
<div class="form-group"> |
||||
<input class="form-control input-lg" my-focused type="text" placeholder="Group name" ng-model="group.name"/> |
||||
</div> |
||||
|
||||
</form> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
@ -0,0 +1,65 @@
@@ -0,0 +1,65 @@
|
||||
<div class="confirm_modal_wrap" my-modal-position> |
||||
|
||||
<a class="modal-close-button" ng-click="$dismiss()"><i></i></a> |
||||
|
||||
<div class="modal-body"> |
||||
|
||||
<div class="confirm_modal_description" ng-switch="type"> |
||||
<span ng-switch-when="LOGOUT">Are you sure you want to log out?</span> |
||||
<span ng-switch-when="WEBOGRAM_UPDATED_RELOAD">A new version of Webogram has been downloaded. Launch it?</span> |
||||
<span ng-switch-when="HISTORY_FLUSH">Are you sure? This can not be undone!</span> |
||||
<span ng-switch-when="TERMINATE_SESSIONS">Are you sure you want to log out all devices except for the current one?</span> |
||||
<span ng-switch-when="HTTPS_MIXED_FAIL"> |
||||
Your browser <a href="http://mzl.la/13jCUSU" target="_blank">does not support</a> mixed content which is neccessary for MTProto support on https. <a href="https://github.com/zhukov/webogram/issues/237" target="_blank">Learn more »</a><br/><br/> |
||||
Would you like use http-version instead? |
||||
</span> |
||||
|
||||
<span ng-switch-when="FILES_CLIPBOARD_PASTE"> |
||||
<ng-pluralize count="files.length" |
||||
when="{'one': 'Are you sure to send file from clipboard?', 'other': 'Are you sure to send {} files from clipboard?'}"> |
||||
</ng-pluralize> |
||||
</span> |
||||
<span ng-switch-when="FILE_CLIPBOARD_PASTE">Are you sure to send file(s) from clipboard?</span> |
||||
<span ng-switch-when="MESSAGE_DELETE">Are you sure you want to delete the message?</span> |
||||
<span ng-switch-when="CONTACTS_IMPORT_PERFORM">Telegram will now sync your contacts in order to find your friends.</span> |
||||
<div ng-switch-when="LOGIN_PHONE_CORRECT"> |
||||
Is this phone number correct? |
||||
<div class="confirm_phone_number"> <span ng-bind="country_code"></span> <span ng-bind="phone_number"></span> </div> |
||||
</div> |
||||
<span ng-switch-when="FORWARD_PEER">Forward to <strong ng-switch="peer_id > 0"> |
||||
<span ng-switch-when="true" ng-bind-html="peer_data.rFullName"></span> |
||||
<span ng-switch-default ng-bind-html="peer_data.rTitle"></span> |
||||
</strong>?</span> |
||||
<span ng-switch-when="SHARE_CONTACT_PEER">Send to <strong ng-switch="peer_id > 0"> |
||||
<span ng-switch-when="true" ng-bind-html="peer_data.rFullName"></span> |
||||
<span ng-switch-default ng-bind-html="peer_data.rTitle"></span> |
||||
</strong>?</span> |
||||
<span ng-switch-when="EXT_SHARE_PEER">Share with <strong ng-switch="peer_id > 0"> |
||||
<span ng-switch-when="true" ng-bind-html="peer_data.rFullName"></span> |
||||
<span ng-switch-default ng-bind-html="peer_data.rTitle"></span> |
||||
</strong>?</span> |
||||
<span ng-switch-default ng-bind="message || 'Are you sure?'"></span> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div class="modal-footer"> |
||||
<a class="btn btn-link" ng-click="$dismiss()" ng-switch="type"> |
||||
<span ng-switch-default>Cancel</span> |
||||
</a> |
||||
<button type="button" class="btn btn-primary" ng-switch="type" ng-click="$close()" my-focused> |
||||
<span ng-switch-when="LOGOUT">Log Out</span> |
||||
<span ng-switch-when="HISTORY_FLUSH">Delete Chat</span> |
||||
<span ng-switch-when="FILES_CLIPBOARD_PASTE">Send</span> |
||||
<span ng-switch-when="FILE_CLIPBOARD_PASTE">Send</span> |
||||
<span ng-switch-when="MESSAGE_DELETE">Delete</span> |
||||
<span ng-switch-when="FORWARD_PEER">Forward message</span> |
||||
<span ng-switch-when="PHOTO_SHARE_PEER">Forward photo</span> |
||||
<span ng-switch-when="VIDEO_SHARE_PEER">Forward video</span> |
||||
<span ng-switch-when="SHARE_CONTACT_PEER">Send contact</span> |
||||
<span ng-switch-when="EXT_SHARE_PEER">Share file</span> |
||||
<span ng-switch-default>OK</span> |
||||
</button> |
||||
</div> |
||||
|
||||
</div> |
||||
@ -0,0 +1,89 @@
@@ -0,0 +1,89 @@
|
||||
<a class="im_dialog" ng-click="dialogSelect(dialogMessage.peerString, search.messages && dialogMessage.id)"> |
||||
|
||||
<div class="im_dialog_meta pull-right text-right"> |
||||
<div class="im_dialog_date" ng-bind="dialogMessage.dateText"></div> |
||||
<span |
||||
class="im_dialog_badge badge" |
||||
ng-show="dialogMessage.unreadCount > 0 && !dialogMessage.out" |
||||
ng-bind="dialogMessage.unreadCount" |
||||
></span> |
||||
<i |
||||
class="im_dialog_unread" |
||||
ng-show="dialogMessage.out && dialogMessage.unread" |
||||
></i> |
||||
</div> |
||||
|
||||
<div class="im_dialog_photo pull-left"> |
||||
<img |
||||
class="im_dialog_photo" |
||||
my-load-thumb |
||||
watch="true" |
||||
thumb="dialogMessage.peerPhoto" |
||||
/> |
||||
</div> |
||||
|
||||
<div class="im_dialog_message_wrap"> |
||||
|
||||
<div class="im_dialog_peer" ng-switch="dialogMessage.peerID > 0"> |
||||
<span class="im_dialog_user" ng-switch-when="true" ng-bind-html="dialogMessage.peerData.rFullName"></span> |
||||
<span class="im_dialog_chat" ng-switch-default> |
||||
<span ng-bind-html="dialogMessage.peerData.rTitle"></span> |
||||
</span> |
||||
</div> |
||||
|
||||
<div ng-switch="dialogMessage.deleted"> |
||||
<div ng-switch-when="true" class="im_dialog_message"> |
||||
<span class="im_dialog_message_text">deleted message</span> |
||||
</div> |
||||
<div ng-switch-default class="im_dialog_message"> |
||||
<span class="im_dialog_chat_from_wrap"> |
||||
<span |
||||
class="im_dialog_chat_from" |
||||
ng-if="!dialogMessage.out && dialogMessage.chatID" |
||||
ng-bind-html="dialogMessage.fromUser.rFirstName" |
||||
></span><span |
||||
class="im_dialog_chat_from" |
||||
ng-if="dialogMessage.out" |
||||
>You</span>{{((dialogMessage.out || dialogMessage.peerID < 0) && (dialogMessage.message.length || dialogMessage.media && dialogMessage.media._ != 'messageMediaEmpty')) ? ':' : ''}} |
||||
</span> |
||||
|
||||
<span class="im_dialog_message_media" ng-if="dialogMessage.media && dialogMessage.media._ != 'messageMediaEmpty'" ng-switch="dialogMessage.media._"> |
||||
<span ng-switch-when="messageMediaPhoto">Photo</span> |
||||
<span ng-switch-when="messageMediaVideo">Video</span> |
||||
<span ng-switch-when="messageMediaDocument">Document</span> |
||||
<span ng-switch-when="messageMediaAudio">Audio</span> |
||||
<span ng-switch-when="messageMediaGeo">Location</span> |
||||
<span ng-switch-when="messageMediaContact">Contact</span> |
||||
</span> |
||||
|
||||
<span class="im_dialog_message_service" ng-if="dialogMessage._ == 'messageService'" ng-switch="dialogMessage.action._"> |
||||
<span ng-switch-when="messageActionChatCreate">created the group</span> |
||||
<span ng-switch-when="messageActionChatEditTitle">changed group name</span> |
||||
<span ng-switch-when="messageActionChatEditPhoto">changed group photo</span> |
||||
<span ng-switch-when="messageActionChatDeletePhoto">removed group photo</span> |
||||
|
||||
<span ng-switch-when="messageActionChatAddUser" ng-switch="dialogMessage.from_id == dialogMessage.action.user_id"> |
||||
<span ng-switch-when="true"> |
||||
returned to group |
||||
</span> |
||||
<span ng-switch-default> |
||||
invited <span ng-bind-html="dialogMessage.action.user.rFullName"></span> |
||||
</span> |
||||
</span> |
||||
|
||||
<span ng-switch-when="messageActionChatDeleteUser" ng-switch="dialogMessage.from_id == dialogMessage.action.user_id"> |
||||
<span ng-switch-when="true"> |
||||
left group |
||||
</span> |
||||
<span ng-switch-default> |
||||
kicked <span ng-bind-html="dialogMessage.action.user.rFullName"></span> |
||||
</span> |
||||
</span> |
||||
</span> |
||||
|
||||
<span class="im_dialog_message_text" ng-if="dialogMessage.message.length" ng-bind-html="dialogMessage.richMessage"></span> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</a> |
||||
@ -0,0 +1,49 @@
@@ -0,0 +1,49 @@
|
||||
<div class="import_modal_wrap"> |
||||
|
||||
<div class="tg_page_head tg_modal_head"> |
||||
<div class="navbar navbar-static-top navbar-inverse"> |
||||
<div class="container"> |
||||
|
||||
<div class="navbar-header"> |
||||
|
||||
<ul class="nav navbar-nav navbar-quick-nav"> |
||||
<li class="navbar-quick-right"> |
||||
<a ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'Saving...' : 'Save'" ng-disabled="progress.enabled"></a> |
||||
</li> |
||||
<li> |
||||
<a ng-click="$dismiss()" class="navbar-quick-media-back"> |
||||
<i class="icon icon-back"></i> |
||||
<div class="navbar-quick-back-title"> |
||||
<h4> |
||||
Edit contact |
||||
</h4> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal-body"> |
||||
|
||||
<form class="modal_simple_form" ng-submit="doImport()" my-vertical-position="0.3"> |
||||
|
||||
<div class="form-group"> |
||||
<span class="form-control uneditable_input input-lg disabled" disabled my-focused type="text" ng-bind="importContact.phone | phoneNumber"></span> |
||||
</div> |
||||
<div class="form-group"> |
||||
<input class="form-control input-lg" type="text" placeholder="First name" ng-model="importContact.first_name"/> |
||||
</div> |
||||
<div class="form-group"> |
||||
<input class="form-control input-lg" type="text" placeholder="Last name" ng-model="importContact.last_name"/> |
||||
</div> |
||||
|
||||
</form> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
@ -0,0 +1,87 @@
@@ -0,0 +1,87 @@
|
||||
<div class="error_modal_wrap" my-modal-position> |
||||
|
||||
<a class="modal-close-button" ng-click="$close()"><i></i></a> |
||||
|
||||
<div class="modal-body"> |
||||
|
||||
<h4 ng-if="error" class="modal_simple_header" ng-switch="error.type"> |
||||
<span ng-switch-when="ACCOUNT_REQUIRED">No account</span> |
||||
<span ng-switch-default ng-switch="error.code"> |
||||
<span ng-switch-when="400">Error</span> |
||||
<span ng-switch-when="401">Unauthorized</span> |
||||
<span ng-switch-when="403">Access denied</span> |
||||
<span ng-switch-when="404">Not found</span> |
||||
<span ng-switch-when="406">Network error</span> |
||||
<span ng-switch-when="420">Too fast</span> |
||||
<span ng-switch-default>Server error</span> |
||||
</span> |
||||
</h4> |
||||
<h4 ng-if="!error" class="modal_simple_header" ng-bind="title || 'Alert'"></h4> |
||||
|
||||
<div ng-if="error" class="error_modal_description" ng-switch="error.type"> |
||||
<span ng-switch-when="NETWORK_BAD_REQUEST"> |
||||
Please check your internet connection. |
||||
</span> |
||||
<span ng-switch-when="NETWORK_BAD_RESPONSE"> |
||||
Please check your internet connection. |
||||
</span> |
||||
<span ng-switch-when="FIRSTNAME_INVALID"> |
||||
The first name you entered is invalid. |
||||
</span> |
||||
<span ng-switch-when="LASTNAME_INVALID"> |
||||
The last name you entered is invalid. |
||||
</span> |
||||
<span ng-switch-when="PHONE_NUMBER_INVALID"> |
||||
The phone number you entered is invalid. |
||||
</span> |
||||
<span ng-switch-when="USERS_TOO_MUCH"> |
||||
You have selected too much users. |
||||
</span> |
||||
<span ng-switch-when="PHOTO_INVALID_DIMENSIONS"> |
||||
The photo dimensions are invalid, please select another file. |
||||
</span> |
||||
<span ng-switch-when="VIDEO_EXT_INVALID"> |
||||
The video file extension is invalid or unsupported, please select another file. |
||||
</span> |
||||
<span ng-switch-when="PHOTO_CROP_SIZE_SMALL"> |
||||
The photo you provided is too small. |
||||
</span> |
||||
<span ng-switch-when="ACCOUNT_REQUIRED"> |
||||
Sorry, there is no <strong>Telegram</strong> account for {{phone | phoneNumber}}<br/><br/> |
||||
Please <strong>sign up</strong> using our mobile apps for <a href="https://telegram.org/" target="_blank">iOS</a> or <a href="https://telegram.org/" target="_blank">Android</a>. |
||||
</span> |
||||
<span ng-switch-when="USER_NOT_USING_TELEGRAM"> |
||||
Sorry, there is no <strong>Telegram</strong> account with the phone number you provided. |
||||
</span> |
||||
<span ng-switch-when="USERS_NOT_USING_TELEGRAM"> |
||||
Sorry, there are no <strong>Telegram</strong> accounts with the phone numbers you provided. |
||||
</span> |
||||
<span ng-switch-when="PHONEBOOK_GET_CONTACTS_FAILED"> |
||||
Telegram needs access to phonebook to import contacts. |
||||
</span> |
||||
|
||||
<div ng-switch-default ng-switch="error.code"> |
||||
<span ng-switch-when="400">One of the params is missing or invalid.</span> |
||||
<span ng-switch-when="401">This action requires authorization access. Please <a href="#/login">log in</a>.</span> |
||||
<span ng-switch-when="403">You are not allowed for this action.</span> |
||||
<span ng-switch-when="404">The page was not found.</span> |
||||
<span ng-switch-when="420">You are performing too many actions. Please try again later.</span> |
||||
<span ng-switch-default>Internal server error occured. Please try again later.</span> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div ng-if="error" class="error_modal_details" ng-switch="error.detailsShown"> |
||||
<textarea ng-switch-when="true" rows="3" onclick="this.select()">Method: {{error.input || 'N/A'}} |
||||
Result: {{error.originalError ? error.originalError : (error.stack ? (error.name || '') + ' ' + (error.description || error.message) : error)}} |
||||
Stack: {{error.stack}}</textarea> |
||||
<div ng-switch-default> |
||||
<a href="" ng-click="error.detailsShown = true">Technical details here</a> |
||||
</div> |
||||
</div> |
||||
|
||||
<div ng-if="!error" class="error_modal_description" ng-bind="description"></div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
@ -0,0 +1,25 @@
@@ -0,0 +1,25 @@
|
||||
<a class="img_gif_with_progress_wrap" ng-click="toggle()"> |
||||
|
||||
<div class="img_gif_image_wrap" ng-switch="document.url && isActive"> |
||||
|
||||
<img ng-switch-when="true" class="img_gif_image" ng-src="{{document.url}}" /> |
||||
<img ng-switch-default class="img_gif_thumb" my-load-thumb thumb="document.thumb" /> |
||||
|
||||
</div> |
||||
|
||||
<div ng-show="!isActive" ng-switch="document.progress.enabled"> |
||||
|
||||
<div ng-switch-when="true" class="img_gif_progress_wrap"> |
||||
<div class="img_gif_progress progress tg_progress"> |
||||
<div class="progress-bar progress-bar-success" ng-style="{width: document.progress.percent + '%'}"></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div ng-switch-default class="img_gif_info_wrap"> |
||||
<div class="img_gif_label pull-left">GIF</div> |
||||
<div ng-if="!document.url" class="img_gif_size pull-right" ng-bind="::document.size | formatSize"></div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</a> |
||||
@ -0,0 +1,19 @@
@@ -0,0 +1,19 @@
|
||||
<div class="img_fullsize_with_progress_wrap"> |
||||
<div class="img_fullsize_progress_overlay" ng-show="progress.enabled"> |
||||
<div class="img_fullsize_progress_wrap"> |
||||
<div class="img_fullsize_progress progress tg_progress" ng-show="progress.percent > 0"> |
||||
<div class="progress-bar progress-bar-success" ng-style="{width: progress.percent + '%'}"> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="photo_full_wrap"> |
||||
<a class="photo_modal_image"> |
||||
<img class="photo_modal_image"/> |
||||
</a> |
||||
</div> |
||||
<div class="photo_modal_error_wrap" ng-if="error"> |
||||
<div class="photo_modal_error" ng-if="error.html" ng-bind-html="error.html"></div> |
||||
<div class="photo_modal_error" ng-if="error.text" ng-bind="error.text"></div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,26 @@
@@ -0,0 +1,26 @@
|
||||
<div class="img_fullsize_with_progress_wrap" ng-style="{width: video.full.width + 'px', height: video.full.height + 'px'}"> |
||||
<div class="img_fullsize_progress_overlay" ng-show="progress.enabled"> |
||||
<div class="img_fullsize_progress_wrap" ng-style="{width: video.full.width + 'px', height: video.full.height + 'px'}"> |
||||
<div class="img_fullsize_progress progress tg_progress"> |
||||
<div class="progress-bar progress-bar-success" style="width: {{progress.percent}}%"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="img_fullsize_wrap" ng-if="!player.src"> |
||||
<img |
||||
class="img_fullsize" |
||||
my-load-thumb |
||||
thumb="video.fullThumb" |
||||
/> |
||||
</div> |
||||
<div class="video_full_player" ng-if="player.src"> |
||||
<embed ng-src="{{player.src}}" width="{{video.full.width}}" height="{{video.full.height}}" autoplay="true" CONTROLLER="TRUE" SHOWCONTROLS="TRUE" controller="true" loop="false" pluginspace="http://www.apple.com/quicktime/" ng-if="player.quicktime"/> |
||||
<video width="{{video.full.width}}" height="{{video.full.height}}" controls autoplay ng-if="!player.quicktime"> |
||||
<source ng-src="{{player.src}}" type="video/mp4"> |
||||
</video> |
||||
</div> |
||||
<div class="video_full_error_wrap" ng-if="error"> |
||||
<div class="video_full_error" ng-if="error.html" ng-bind-html="error.html"></div> |
||||
<div class="video_full_error" ng-if="error.text" ng-bind="error.text"></div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,153 @@
@@ -0,0 +1,153 @@
|
||||
<div my-head></div> |
||||
|
||||
<div class="im_page_wrap" ng-class="{im_page_peer_not_selected: !curDialog.peer}"> |
||||
|
||||
<div class="im_page_split clearfix"> |
||||
|
||||
<div ng-controller="AppImDialogsController" my-dialogs has-tabs="{{search.query.length > 0}}" class="im_dialogs_col_wrap"> |
||||
<div class="im_dialogs_panel"> |
||||
<div class="im_dialogs_search"> |
||||
<input class="form-control im_dialogs_search_field no_outline" type="search" placeholder="Search" ng-model="search.query"/> |
||||
<a class="im_dialogs_search_clear" ng-click="searchClear()" ng-show="search.query.length"></a> |
||||
</div> |
||||
|
||||
<div class="im_dialogs_tabs_wrap"> |
||||
<div class="im_dialogs_tabs clearfix"> |
||||
<a href="" class="im_dialogs_tab" ng-class="{active: !search.messages}" ng-click="search.messages = false">Conversations</a> |
||||
<a href="" class="im_dialogs_tab" ng-class="{active: search.messages}" ng-click="search.messages = true">Messages</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div my-dialogs-list-mobile class="im_dialogs_col im_dialogs_scrollable_wrap mobile_scrollable_wrap"> |
||||
|
||||
<div class="im_dialogs_empty_wrap" ng-if="isEmpty.contacts" my-vertical-position="0.4"> |
||||
<h3 class="im_dialogs_empty_header">No contacts yet</h3> |
||||
<p class="im_dialogs_empty_lead">Get started by adding a contact to chat with</p> |
||||
<button type="button" class="btn btn-primary btn-block im_dialogs_add_contact" ng-click="importContact()"> |
||||
Add contact |
||||
</button> |
||||
<button ng-if="phonebookAvailable" type="button" class="btn btn-primary btn-block im_dialogs_import_phonebook" ng-click="importPhonebook()"> |
||||
Import phonebook |
||||
</button> |
||||
</div> |
||||
|
||||
<div ng-switch="search.messages"> |
||||
<ul ng-switch-when="true" class="nav nav-pills nav-stacked"> |
||||
<li class="im_dialog_wrap" my-dialog dialog-message="dialogMessage" ng-repeat="dialogMessage in dialogs track by dialogMessage.id" ng-class="{active: curDialog.peerID == dialogMessage.peerID && curDialog.messageID == dialogMessage.id}"></li> |
||||
</ul> |
||||
<ul ng-switch-default class="nav nav-pills nav-stacked"> |
||||
<li class="im_dialog_wrap" my-dialog dialog-message="dialogMessage" ng-repeat="dialogMessage in dialogs track by dialogMessage.peerID" ng-class="{active: curDialog.peerID == dialogMessage.peerID}"></li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<div class="im_dialogs_contacts_wrap" ng-show="!search.messages && contacts.length > 0"> |
||||
<h5>Contacts</h5> |
||||
<ul class="nav nav-pills nav-stacked"> |
||||
<li class="im_dialog_wrap" ng-repeat="contact in contacts | orderBy:'user.sortName' track by contact.userID" ng-class="{active: curDialog.peerID == contact.userID}"> |
||||
<a class="im_dialog" ng-click="dialogSelect(contact.peerString)"> |
||||
<div class="im_dialog_photo pull-left"> |
||||
<img |
||||
class="im_dialog_photo" |
||||
my-load-thumb |
||||
thumb="contact.userPhoto" |
||||
/> |
||||
</div> |
||||
<div class="im_dialog_message_wrap"> |
||||
<div class="im_dialog_peer"> |
||||
<span class="im_dialog_user" ng-bind-html="contact.user.rFullName"></span> |
||||
</div> |
||||
<div class="im_dialog_message"> |
||||
<span class="im_dialog_message_text" my-user-status="::contact.userID"></span> |
||||
</div> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="im_history_col_wrap" ng-controller="AppImHistoryController"> |
||||
<div ng-show="!state.notSelected && !state.loaded" class="im_history_not_selected" my-vertical-position="0.35" padding="true"> |
||||
Loading history<span my-loading-dots></span> |
||||
</div> |
||||
|
||||
<div ng-show="state.loaded"> |
||||
<div my-history-mobile class="im_history_col"> |
||||
|
||||
<div class="im_history_wrap im_history_scrollable_wrap mobile_scrollable_wrap"> |
||||
|
||||
<div class="im_history_scrollable"> |
||||
<div class="im_history" ng-class="{im_history_selectable: historyState.selectActions}"> |
||||
<div ng-if="state.empty" class="im_history_empty" ng-switch="state.mayBeHasMore" my-vertical-position="0.25" padding="true"> |
||||
<span ng-switch-when="true">Loading history<span my-loading-dots></span></span> |
||||
<span ng-switch-default>No messages here yet...</span> |
||||
</div> |
||||
|
||||
<div class="im_history_messages" ng-class="{im_history_messages_group: historyPeer.id < 0}"> |
||||
<div class="im_history_messages_peer" ng-show="peerHistory.peerID == historyPeer.id" ng-repeat="peerHistory in peerHistories"> |
||||
<div class="im_history_message_wrap" my-message ng-repeat="historyMessage in peerHistory.messages"></div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
<div class="im_bottom_panel_wrap"> |
||||
|
||||
<div class="im_edit_panel_wrap clearfix" ng-show="historyState.selectActions"> |
||||
<div class="im_edit_selected_actions"> |
||||
<a class="btn btn-primary im_edit_forward_btn" ng-click="selectedForward()" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount"> |
||||
Forward <strong class="im_selected_count" ng-show="selectedCount > 0" ng-bind="selectedCount"></strong> |
||||
</a><a class="btn btn-danger im_edit_delete_btn" ng-click="selectedDelete()" ng-class="{disabled: !selectedCount}" ng-disabled="!selectedCount"> |
||||
Delete <strong class="im_selected_count" ng-show="selectedCount > 0" ng-bind="selectedCount"></strong> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="im_send_panel_wrap" ng-hide="historyState.selectActions"> |
||||
|
||||
<div class="im_send_form_wrap1"> |
||||
|
||||
<div class="im_send_form_wrap clearfix" ng-controller="AppImSendController"> |
||||
<form my-send-form draft-message="draftMessage" class="im_send_form" ng-class="{im_send_form_empty: !draftMessage.text.length}" ng-submit="sendMessage($event)"> |
||||
|
||||
<div class="im_send_field_wrap"> |
||||
<div class="im_send_dropbox_wrap"> Drop photos here to send </div> |
||||
<textarea ng-model="draftMessage.text" placeholder="Write a message..." class="form-control im_message_field no_outline"></textarea> |
||||
</div> |
||||
|
||||
<div class="im_attach pull-right"> |
||||
<input type="file" class="im_attach_input" size="28" multiple="true" title="Send file" /> |
||||
<i class="icon icon-paperclip"></i> |
||||
</div> |
||||
|
||||
<div class="im_emoji_btn pull-right" title="Insert emoticon"> |
||||
<i class="icon icon-emoji"></i> |
||||
</div> |
||||
|
||||
<button type="submit" class="btn btn-success im_submit"></button> |
||||
</form> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
|
||||
<div id="notify_sound"></div> |
||||
@ -0,0 +1,53 @@
@@ -0,0 +1,53 @@
|
||||
<div class="import_modal_wrap"> |
||||
|
||||
<div class="tg_page_head tg_modal_head"> |
||||
<div class="navbar navbar-static-top navbar-inverse"> |
||||
<div class="container"> |
||||
|
||||
<div class="navbar-header"> |
||||
|
||||
<ul class="nav navbar-nav navbar-quick-nav"> |
||||
<li class="navbar-quick-right"> |
||||
<a ng-class="{disabled: progress.enabled}" ng-click="doImport()" ng-bind="progress.enabled ? 'Importing...' : 'Save'" ng-disabled="progress.enabled"></a> |
||||
</li> |
||||
<li> |
||||
<a ng-click="$dismiss()" class="navbar-quick-media-back"> |
||||
<i class="icon icon-back"></i> |
||||
<div class="navbar-quick-back-title"> |
||||
<h4> |
||||
Add new contact |
||||
</h4> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal-body"> |
||||
|
||||
<form class="modal_simple_form" ng-submit="doImport()" my-vertical-position="0.3"> |
||||
|
||||
<div class="form-group"> |
||||
<input class="form-control input-lg" my-focused type="text" placeholder="Phone number" ng-model="importContact.phone"/> |
||||
</div> |
||||
<div class="form-group"> |
||||
<input class="form-control input-lg" type="text" placeholder="First name" ng-model="importContact.first_name"/> |
||||
</div> |
||||
<div class="form-group"> |
||||
<input class="form-control input-lg" type="text" placeholder="Last name" ng-model="importContact.last_name"/> |
||||
</div> |
||||
|
||||
</form> |
||||
|
||||
</div> |
||||
|
||||
<div class="modal-footer" ng-if="phonebookAvailable"> |
||||
<a class="btn btn-link" ng-click="importPhonebook()">Phonebook</a> |
||||
</div> |
||||
|
||||
</div> |
||||
@ -0,0 +1,84 @@
@@ -0,0 +1,84 @@
|
||||
<div my-head></div> |
||||
|
||||
|
||||
<div class="login_form_wrap" my-vertical-position="0.3"> |
||||
<div class="error" ng-if="error.message" ng-bind="error.message"></div> |
||||
|
||||
<form name="mySendCodeForm" ng-if="!credentials.phone_code_hash" ng-submit="sendCode()"> |
||||
<h3 class="login_form_head">Sign in</h3> |
||||
<p class="login_form_lead">Please choose your country and enter your full phone number.</p> |
||||
|
||||
<div class="login_country_selector" ng-click="chooseCountry()"> |
||||
<span ng-bind="credentials.phone_country_name"></span> |
||||
<i class="icon icon-caret pull-right"></i> |
||||
</div> |
||||
|
||||
<div class="form-group" ng-class="{'has-error': error.field == 'phone'}"> |
||||
<label class="control-label" ng-if="error.field == 'phone'">Incorrect phone number</label> |
||||
<div class="clearfix"> |
||||
<input type="tel" autocomplete="off" class="form-control input-lg pull-left login_phone_country" my-focused name="phone_country" ng-model="credentials.phone_country"> |
||||
<input type="tel" autocomplete="off" class="form-control input-lg pull-left login_phone_number" my-focus-on="country_selected" name="phone_number" ng-model="credentials.phone_number" placeholder="Enter your phone" required> |
||||
</div> |
||||
</div> |
||||
<button class="btn btn-primary btn-block" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled" type="submit" ng-switch="progress.enabled"> |
||||
<span ng-switch-when="true">Generating keys<span my-loading-dots></span></span> |
||||
<span ng-switch-default>Next</span> |
||||
</button> |
||||
<div class="login_form_messaging" ng-show="progress.enabled">Keys are only generated once. This can take a few minutes on slower devices, please be patient.</div> |
||||
</form> |
||||
|
||||
<form name="myLoginForm" ng-if="credentials.phone_code_hash && !credentials.phone_code_valid" ng-submit="logIn()"> |
||||
<h3 class="login_form_head"><span ng-bind="credentials.phone_country"></span> <span ng-bind="credentials.phone_number"></span></h3> |
||||
<div class="login_edit_phone"><a ng-click="editPhone()">Edit phone number</a></div> |
||||
<div ng-switch="credentials.viaApp"> |
||||
<div ng-switch-when="true"> |
||||
<p class="login_form_lead"> |
||||
Please enter the code you've just received in your other <strong>Telegram</strong> app |
||||
</p> |
||||
<p class="login_form_lead"> |
||||
<a ng-click="sendSms()">Haven't received the code?</a> |
||||
</p> |
||||
</div> |
||||
<div ng-switch-default> |
||||
<p class="login_form_lead">We have sent you a code via SMS.<br/>Please enter it below.</p> |
||||
|
||||
<p class="login_form_lead"> |
||||
<span ng-show="callPending.remaining > 0">Telegram will call you in {{callPending.remaining | duration}}</span> |
||||
<span ng-show="!callPending.remaining && !callPending.success">Telegram is calling you</span> |
||||
<span ng-show="!callPending.remaining && callPending.success">Telegram dialed your number</span> |
||||
</p> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="form-group" ng-class="{'has-error': error.field == 'phone_code'}"> |
||||
<label class="control-label" for="phone_code" ng-if="error.field == 'phone_code'">Incorrect SMS code</label> |
||||
<input type="number" my-focused class="form-control login_phone_code" name="phone_code" ng-model="credentials.phone_code" placeholder="Enter your code" autocomplete="off" required> |
||||
</div> |
||||
|
||||
<button class="btn btn-primary btn-block" type="submit" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled" ng-switch="progress.enabled"> |
||||
<span ng-switch-when="true">Checking code<span my-loading-dots></span></span> |
||||
<span ng-switch-default>Next</span> |
||||
</button> |
||||
</form> |
||||
|
||||
<form name="myFullNameForm" ng-if="credentials.phone_code_valid && credentials.phone_unoccupied" ng-submit="logIn(true)"> |
||||
<h3 class="login_form_head">Your info</h3> |
||||
<p class="login_form_lead">Please enter your full name to set up a Telegram account.</p> |
||||
|
||||
<div class="form-group login_first_name_wrap" ng-class="{'has-error': error.field == 'first_name'}"> |
||||
<label class="control-label" for="first_name" ng-if="error.field == 'first_name'">Incorrect first name</label> |
||||
<input my-focused class="form-control" name="first_name" ng-model="credentials.first_name" placeholder="First name" autocomplete="off" required> |
||||
</div> |
||||
|
||||
<div class="form-group" ng-class="{'has-error': error.field == 'last_name'}"> |
||||
<label class="control-label" for="last_name" ng-if="error.field == 'last_name'">Incorrect last name</label> |
||||
<input class="form-control" name="last_name" ng-model="credentials.last_name" placeholder="Last name" autocomplete="off"> |
||||
</div> |
||||
|
||||
<button class="btn btn-primary btn-block" ng-class="{disabled: progress.enabled}" ng-disabled="progress.enabled" type="submit" ng-switch="progress.enabled"> |
||||
<span ng-switch-when="true">Signing up<span my-loading-dots></span></span> |
||||
<span ng-switch-default>Sign up</span> |
||||
</button> |
||||
</form> |
||||
|
||||
</div> |
||||
@ -0,0 +1,63 @@
@@ -0,0 +1,63 @@
|
||||
<div class="im_message_outer_wrap" ng-click="toggleMessage(historyMessage.id, $event)"> |
||||
|
||||
|
||||
<div class="im_message_wrap clearfix"> |
||||
|
||||
<div class="im_service_message_wrap" ng-if="::historyMessage._ == 'messageService'"> |
||||
<div class="im_service_message"> |
||||
<a class="im_message_author" my-user-link="historyMessage.from_id" short="!historyMessage.to_id.chat_id" color="historyMessage.to_id.chat_id > 0"></a> |
||||
<span class="im_message_service" my-service-message></span> |
||||
</div> |
||||
|
||||
<a ng-if="::historyMessage.action._ == 'messageActionChatEditPhoto'" class="im_service_message_photo_thumb" href="" ng-click="openPhoto(historyMessage.action.photo.id)"> |
||||
<img |
||||
class="im_service_message_photo_thumb" |
||||
my-load-thumb |
||||
thumb="historyMessage.action.photo.thumb" |
||||
/> |
||||
</a> |
||||
|
||||
</div> |
||||
|
||||
<div ng-if="::historyMessage._ != 'messageService'" class="im_content_message_wrap" ng-class="::[historyMessage.out ? 'im_message_out' : 'im_message_in', historyMessage._ == 'messageForwarded' ? 'im_message_fwd' : '']"> |
||||
<i ng-if="::historyMessage.unread || historyMessage.pending || false" class="icon-message-status" ng-class="{'icon-message-status-unread': historyMessage.unread, 'icon-message-status-pending': historyMessage.pending}" ng-show="!historyMessage.error"></i> |
||||
|
||||
<a class="im_message_from_photo pull-left" my-user-photolink="historyMessage.from_id" img-class="im_message_from_photo"></a> |
||||
|
||||
<div class="im_message_meta pull-right text-right"> |
||||
<i class="icon-message-status-tick"></i> |
||||
<span class="im_message_date" ng-bind="::historyMessage.date | time"></span> |
||||
</div> |
||||
|
||||
<div class="im_message_body" ng-class="::{im_message_body_media: historyMessage._ == 'message' && historyMessage.media && historyMessage.media._ != 'messageMediaEmpty'}"> |
||||
|
||||
<a class="im_message_author" my-user-link="historyMessage.from_id" short="!historyMessage.to_id.chat_id" color="historyMessage.to_id.chat_id > 0"></a> |
||||
|
||||
<div ng-if="::historyMessage._ == 'messageForwarded' || false" class="im_message_fwd_from"> |
||||
<div class="im_message_fwd_title" ng-if="::historyMessage.grouped == 'im_grouped_fwd_start'">Forwarded message</div> |
||||
<a class="im_message_fwd_photo pull-left" my-user-photolink="historyMessage.fwd_from_id" img-class="im_message_fwd_photo"></a> |
||||
<div class="im_message_fwd_author_wrap"> |
||||
<a class="im_message_fwd_author" my-user-link="historyMessage.fwd_from_id" short="true"></a><span class="im_message_fwd_date" ng-bind="historyMessage.fwd_date | dateOrTime"></span> |
||||
</div> |
||||
</div> |
||||
|
||||
<div ng-if="::historyMessage.media && historyMessage.media._ != 'messageMediaEmpty' || false" class="im_message_media" ng-switch="historyMessage.media._"> |
||||
|
||||
<div ng-switch-when="messageMediaPhoto" my-message-photo></div> |
||||
<div ng-switch-when="messageMediaVideo" my-message-video></div> |
||||
<div ng-switch-when="messageMediaDocument" my-message-document></div> |
||||
<div ng-switch-when="messageMediaAudio" my-message-audio></div> |
||||
<div ng-switch-when="messageMediaGeo" my-message-map></div> |
||||
<div ng-switch-when="messageMediaContact" my-message-contact></div> |
||||
<div ng-switch-when="messageMediaPending" my-message-pending></div> |
||||
|
||||
</div> |
||||
|
||||
<div class="im_message_text" ng-if="::historyMessage.message.length || false" ng-bind-html="::historyMessage.richMessage"></div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
@ -0,0 +1,30 @@
@@ -0,0 +1,30 @@
|
||||
<div class="im_message_document im_message_audio" ng-class="{im_message_audio_done: historyMessage.media.audio.url, im_message_audio_progress: historyMessage.media.audio.progress.enabled}"> |
||||
<a href="" ng-click="openAudio(historyMessage.media.audio.id)" ng-if="!historyMessage.media.audio.progress.enabled && !historyMessage.media.audio.url"> |
||||
<i class="icon icon-audio"></i> |
||||
</a> |
||||
<i class="icon icon-audio" ng-if="historyMessage.media.audio.progress.enabled || historyMessage.media.audio.url"></i> |
||||
|
||||
<div class="im_message_audio_info"> |
||||
<div class="im_message_audio_name_wrap" ng-if="!historyMessage.media.audio.url"> |
||||
<span class="im_message_audio_name"> |
||||
Voice message |
||||
</span> |
||||
<span class="im_message_audio_duration" ng-if="!historyMessage.media.audio.progress.enabled" ng-bind="::historyMessage.media.audio.duration | duration"></span> |
||||
<span class="im_message_audio_size" ng-if="historyMessage.media.audio.progress.enabled" ng-bind="historyMessage.media.audio.progress | formatSizeProgress"></span> |
||||
</div> |
||||
<div class="clearfix cancelable_progress_wrap" ng-if="historyMessage.media.audio.progress.enabled"> |
||||
<a class="im_message_media_progress_cancel pull-right" ng-click="historyMessage.media.audio.progress.cancel()">Cancel</a> |
||||
<div class="im_message_download_progress_wrap"> |
||||
<div class="progress tg_down_progress"> |
||||
<div class="progress-bar progress-bar-success" ng-style="{width: historyMessage.media.audio.progress.percent + '%'}"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="im_message_audio_player_wrap" ng-if="historyMessage.media.audio.url"> |
||||
<audio my-audio-autoplay audio="historyMessage.media.audio" controls="controls"> |
||||
<source ng-src="{{::historyMessage.media.audio.url}}" type="audio/ogg" /> |
||||
<embed ng-src="{{::historyMessage.media.audio.url}}" hidden="true" autostart="true" loop="false" /> |
||||
</audio> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
<div> |
||||
<a class="im_message_contact_photo pull-left" my-user-photolink="historyMessage.media.user_id" img-class="im_message_contact_photo"></a> |
||||
<div class="im_message_contact_name" ng-switch="historyMessage.media.user_id > 0"> |
||||
<a ng-switch-when="true" my-user-link="historyMessage.media.user_id"></a> |
||||
<span ng-switch-default ng-bind-html="::historyMessage.media.rFullName"></span> |
||||
</div> |
||||
<div class="im_message_contact_phone" ng-bind="::historyMessage.media.phone_number | phoneNumber"></div> |
||||
</div> |
||||
@ -0,0 +1,35 @@
@@ -0,0 +1,35 @@
|
||||
<div ng-switch="::historyMessage.media.document.isSpecial"> |
||||
|
||||
<div ng-switch-when="gif" my-load-gif document="historyMessage.media.document"></div> |
||||
|
||||
<div ng-switch-default class="im_message_document" ng-class="{im_message_document_thumbed: !!historyMessage.media.document.thumb, im_message_document_progress: historyMessage.media.document.progress.enabled}"> |
||||
|
||||
<a href="" ng-click="downloadDoc(historyMessage.media.document.id, historyMessage.media.document.withPreview)" ng-class="{im_message_document_link_disabled: historyMessage.media.document.progress.enabled}"> |
||||
<i class="icon icon-document" ng-if="::!historyMessage.media.document.thumb"></i> |
||||
<div class="im_message_document_thumb_wrap" ng-if="::historyMessage.media.document.thumb"> |
||||
<img |
||||
class="im_message_document_thumb" |
||||
my-load-thumb |
||||
thumb="historyMessage.media.document.thumb" |
||||
/> |
||||
</div> |
||||
</a> |
||||
|
||||
<div class="im_message_document_info"> |
||||
<div class="im_message_document_name_wrap"> |
||||
<span class="im_message_document_name" ng-bind="::historyMessage.media.document.file_name"></span> |
||||
<span class="im_message_document_size" ng-if="!historyMessage.media.document.progress.enabled" ng-bind="::historyMessage.media.document.size | formatSize"></span> |
||||
<span class="im_message_document_size" ng-if="historyMessage.media.document.progress.enabled" ng-bind="historyMessage.media.document.progress | formatSizeProgress"></span> |
||||
</div> |
||||
<div class="clearfix cancelable_progress_wrap" ng-if="historyMessage.media.document.progress.enabled"> |
||||
<a class="im_message_media_progress_cancel pull-right" ng-click="historyMessage.media.document.progress.cancel()">Cancel</a> |
||||
<div class="im_message_download_progress_wrap"> |
||||
<div class="progress tg_down_progress"> |
||||
<div class="progress-bar progress-bar-success" ng-style="{width: historyMessage.media.document.progress.percent + '%'}"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
<a my-map-point point="historyMessage.media.geo" class="im_message_geopoint"> |
||||
<i class="icon icon-geo-point"></i> |
||||
</a> |
||||
@ -0,0 +1,17 @@
@@ -0,0 +1,17 @@
|
||||
<div class="im_message_document im_message_upload_file" ng-class="::'im_message_upload_' + historyMessage.media.type"> |
||||
<i class="icon" ng-class="::'icon-' + historyMessage.media.type"></i> |
||||
<div class="im_message_document_info"> |
||||
<div class="im_message_document_name_wrap"> |
||||
<span class="im_message_document_name" ng-bind="::historyMessage.media.file_name"></span> |
||||
<span class="im_message_document_size" ng-if="historyMessage.media.progress" ng-bind="historyMessage.media.progress | formatSizeProgress"></span> |
||||
</div> |
||||
<div class="clearfix cancelable_progress_wrap"> |
||||
<a class="im_message_media_progress_cancel pull-right" ng-click="historyMessage.media.progress.cancel()">Cancel</a> |
||||
<div class="im_message_download_progress_wrap"> |
||||
<div class="progress tg_down_progress"> |
||||
<div class="progress-bar progress-bar-success" role="progressbar" ng-style="{width: historyMessage.media.progress.percent + '%'}"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -0,0 +1,7 @@
@@ -0,0 +1,7 @@
|
||||
<a class="im_message_photo_thumb" href="" ng-click="openPhoto(historyMessage.media.photo.id, historyMessage.id)" ng-style="::{width: historyMessage.media.photo.thumb.width + 'px'}" ng-mouseover="preloadPhoto(historyMessage.media.photo.id)"> |
||||
<img |
||||
class="im_message_photo_thumb" |
||||
my-load-thumb |
||||
thumb="historyMessage.media.photo.thumb" |
||||
/> |
||||
</a> |
||||
@ -0,0 +1,11 @@
@@ -0,0 +1,11 @@
|
||||
<div class="im_message_video im_message_document_thumbed"> |
||||
<a class="im_message_video_thumb" href="" ng-click="openVideo(historyMessage.media.video.id, historyMessage.id)" ng-style="::{width: historyMessage.media.video.thumb.width + 'px'}"> |
||||
<span class="im_message_video_duration" ng-bind="::historyMessage.media.video.duration | duration"></span> |
||||
<i class="icon icon-videoplay"></i> |
||||
<img |
||||
class="im_message_video_thumb" |
||||
my-load-thumb |
||||
thumb="historyMessage.media.video.thumb" |
||||
/> |
||||
</a> |
||||
</div> |
||||
@ -0,0 +1,32 @@
@@ -0,0 +1,32 @@
|
||||
<span ng-switch="::historyMessage.action._"> |
||||
<span ng-switch-when="messageActionChatCreate"> |
||||
created the group «<strong ng-bind-html="::historyMessage.action.rTitle"></strong>» |
||||
</span> |
||||
<span ng-switch-when="messageActionChatEditTitle"> |
||||
changed group name to «<strong ng-bind-html="::historyMessage.action.rTitle"></strong>» |
||||
</span> |
||||
<span ng-switch-when="messageActionChatEditPhoto"> |
||||
changed group photo |
||||
</span> |
||||
<span ng-switch-when="messageActionChatDeletePhoto"> |
||||
removed group photo |
||||
</span> |
||||
<span ng-switch-when="messageActionChatAddUser" ng-switch="::historyMessage.from_id != historyMessage.action.user_id"> |
||||
<span ng-switch-when="true"> |
||||
invited <a my-user-link="historyMessage.action.user_id" color="true"></a> |
||||
</span> |
||||
<span ng-switch-default> |
||||
returned to group |
||||
</span> |
||||
</span> |
||||
<span ng-switch-when="messageActionChatDeleteUser" ng-switch="::historyMessage.from_id != historyMessage.action.user_id"> |
||||
<span ng-switch-when="true"> |
||||
kicked <a my-user-link="historyMessage.action.user_id" color="true"></a> |
||||
</span> |
||||
<span ng-switch-default> |
||||
left group |
||||
</span> |
||||
</span> |
||||
|
||||
<span ng-switch-default ng-bind="'Unsupported action ' + historyMessage.action._"></span> |
||||
</span> |
||||
@ -0,0 +1,22 @@
@@ -0,0 +1,22 @@
|
||||
<div my-modal-width="{{photo.full.modalWidth}}" class="media_modal_wrap photo_modal_wrap" my-modal-position animation="no" my-modal-nav next="nav.next()" prev="nav.prev()"> |
||||
|
||||
<div class="modal-body"> |
||||
|
||||
<div class="photo_modal_image_wrap" my-load-full-photo full-photo="photo.full" thumb-location="photo.thumb.location" ng-click="nav.next()"> </div> |
||||
|
||||
<div class="media_meta_wrap clearfix"> |
||||
<div class="media_modal_actions pull-right"> |
||||
<a href="" class="media_modal_action_link" ng-click="download()">Download</a> |
||||
<a href="" class="media_modal_action_link" ng-if="canForward" ng-click="forward()">Forward</a> |
||||
<a href="" class="media_modal_action_link" ng-if="canDelete" ng-click="delete()">Delete</a> |
||||
</div> |
||||
|
||||
<p class="media_modal_info"> |
||||
<span class="media_modal_author" ng-bind-html="::photo.fromUser.rFullName"></span>, <span ng-bind="photo.date | dateOrTime"></span> |
||||
</p> |
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
@ -0,0 +1,46 @@
@@ -0,0 +1,46 @@
|
||||
<div class="profile_edit_modal_wrap"> |
||||
|
||||
<div class="tg_page_head tg_modal_head"> |
||||
<div class="navbar navbar-static-top navbar-inverse"> |
||||
<div class="container"> |
||||
|
||||
<div class="navbar-header"> |
||||
|
||||
<ul class="nav navbar-nav navbar-quick-nav"> |
||||
<li class="navbar-quick-right"> |
||||
<a ng-class="{disabled: profile.updating}" ng-click="updateProfile()" ng-bind="profile.updating ? 'Saving...' : 'Save'" ng-disabled="profile.updating"></a> |
||||
</li> |
||||
<li> |
||||
<a ng-click="$dismiss()" class="navbar-quick-media-back"> |
||||
<i class="icon icon-back"></i> |
||||
<div class="navbar-quick-back-title"> |
||||
<h4> |
||||
Edit Profile |
||||
</h4> |
||||
</div> |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal-body"> |
||||
|
||||
<form class="modal_simple_form" ng-submit="updateProfile()" my-vertical-position="0.3"> |
||||
|
||||
<div class="form-group" ng-class="{'has-error': error.field == 'first_name'}"> |
||||
<input class="form-control input-lg" my-focused type="text" placeholder="First name" ng-model="profile.first_name" name="first_name"/> |
||||
</div> |
||||
<div class="form-group" ng-class="{'has-error': error.field == 'last_name'}"> |
||||
<input class="form-control input-lg" type="text" placeholder="Last name" ng-model="profile.last_name"/> |
||||
</div> |
||||
|
||||
</form> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
@ -0,0 +1,21 @@
@@ -0,0 +1,21 @@
|
||||
<div class="media_modal_wrap video_modal_wrap" my-modal-position> |
||||
|
||||
<div class="modal-body"> |
||||
|
||||
<div class="video_modal_image_wrap" my-load-video video="video"></div> |
||||
|
||||
<div class="media_meta_wrap clearfix"> |
||||
<div class="media_modal_actions pull-right"> |
||||
<a href="" class="media_modal_action_link" ng-click="download()">Download</a> |
||||
<a ng-if="messageID" href="" class="media_modal_action_link" ng-click="forward()">Forward</a> |
||||
<a ng-if="messageID" href="" class="media_modal_action_link" ng-click="delete()">Delete</a> |
||||
</div> |
||||
|
||||
<p class="media_modal_info"> |
||||
<span class="media_modal_author" ng-bind-html="video.fromUser.rFullName"></span>, <span ng-bind="video.date | dateOrTime"></span> |
||||
</p> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
</div> |
||||
@ -0,0 +1,56 @@
@@ -0,0 +1,56 @@
|
||||
<div my-head></div> |
||||
|
||||
<div ng-if="showWelcome"> |
||||
|
||||
<div class="welcome_form"> |
||||
<div class="welcome_logo"></div> |
||||
|
||||
<h3 class="welcome_header"><strong>Telegram</strong> Web</h3> |
||||
|
||||
<div class="welcome_text"> |
||||
<p>This is an unofficial web-client for the <strong>Telegram Messenger</strong>.</p> |
||||
<p>It's still an <strong>alpha-version</strong> and may not be 200% reliable</p> |
||||
</div> |
||||
<div class="welcome_btn_wrap"> |
||||
<a href="#/login" class="btn btn-primary btn-block">Start Messaging</a> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="welcome_footer" my-custom-background="#f8f8f8"> |
||||
<div class="welcome_cards_wrap clearfix"> |
||||
|
||||
<div class="container-fluid"> |
||||
<div class="row"> |
||||
<div class="col-md-4 col-sm-4"> |
||||
<div class="welcome_footer_card_wrap row"> |
||||
<div class="welcome_footer_card welcome_footer_card_messaging"></div> |
||||
<h4>Fast messaging</h4> |
||||
<div class="welcome_footer_card_lead">Send messages with rich emoji support right from your desktop or laptop computer</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="col-md-4 col-sm-4"> |
||||
<div class="welcome_footer_card_wrap"> |
||||
<div class="welcome_footer_card welcome_footer_card_filesharing"></div> |
||||
<h4>Easy file sharing</h4> |
||||
<div class="welcome_footer_card_lead">Share files of any type using drag-and-drop or the attachment icon</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="col-md-4 col-sm-4"> |
||||
<div class="welcome_footer_card_wrap"> |
||||
<div class="welcome_footer_card welcome_footer_card_powerful"></div> |
||||
<h4>Powerful tools</h4> |
||||
<div class="welcome_footer_card_lead">Browse shared media and files by type <br/> and set custom notifications</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
|
||||
|
||||
|
||||
</div> |
||||
Loading…
Reference in new issue