From 8cf5fca52188a0bcd8e986221746bc31b0923f29 Mon Sep 17 00:00:00 2001 From: Igor Zhukov Date: Tue, 17 Jun 2014 22:02:35 +0400 Subject: [PATCH] Improved mobile layout Some modifications from #35 --- app/css/app.css | 306 +++++++++-------------------- app/css/app_mobile.css | 326 +++++++++++++++++++++++++++++++ app/index.html | 3 +- app/js/controllers.js | 107 +++++----- app/js/directives.js | 54 +++-- app/js/lib/config.js | 3 +- app/js/services.js | 24 +-- app/partials/chat_modal.html | 67 +++---- app/partials/contacts_modal.html | 6 +- app/partials/head.html | 82 ++++++-- app/partials/im.html | 22 +-- app/partials/login.html | 2 +- app/partials/message.html | 7 +- app/partials/peer_select.html | 4 + app/partials/photo_modal.html | 17 +- app/partials/video_modal.html | 16 +- app/partials/welcome.html | 3 +- app/webogram.appcache | 2 +- 18 files changed, 680 insertions(+), 371 deletions(-) create mode 100644 app/css/app_mobile.css diff --git a/app/css/app.css b/app/css/app.css index 66db3838..a51331ce 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -176,16 +176,15 @@ input[type="number"] { .tg_page_head .navbar { min-height: 44px; } +.tg_page_head .navbar-quick-nav, .tg_page_head .navbar-toggle { - margin-top: 5px; - margin-bottom: 5px; + display: none; } .tg_page_head .container { display: block; width: auto; } .tg_page_head .navbar-inverse { - /*-webkit-app-region: drag;*/ background: #497495; border: 0; @@ -205,6 +204,10 @@ input[type="number"] { line-height: 0; height: auto; } +.navbar_offline .navbar-header, +.navbar_offline .navbar-offline > li { + float: left; +} .navbar-offline { max-width: 250px; margin: 0 auto; @@ -274,33 +277,6 @@ input[type="number"] { background-color: rgba(255,255,255,0.1); } -.tg_page_head .navbar-quick-nav { - margin: 0; -} -.tg_page_head .navbar-quick-nav li { - float: left; -} -.tg_page_head .navbar-quick-nav a { - padding-top: 15px; - padding-bottom: 15px; -} -.icon-back { - display: inline-block; - width: 10px; - height: 18px; - vertical-align: text-top; - - background: url(../img/icons/IconsetW.png) -15px -419px no-repeat; - background-size: 42px 710px; - opacity: 0.6; -} -.is_1x .icon-back { - background-image: url(../img/icons/IconsetW_1x.png); -} -.tg_page_head .navbar-quick-nav a:hover .icon-back { - opacity: 1; -} - .tg_progress { height: 12px; @@ -328,6 +304,9 @@ input[type="number"] { padding: 5px 14px; font-size: 13px; } +.dropdown-header { + padding: 3px 14px; +} .modal-backdrop { background: #111111; @@ -418,6 +397,13 @@ input[type="number"] { background-image: url(../img/icons/PhotoControls_1x.png); } +.modal { + padding: 10px; +} +.modal-dialog { + margin: 0 auto; +} + .text-invisible { visibility: hidden; } @@ -467,7 +453,7 @@ input[type="number"] { margin: 17px; opacity: 0.8; } -.is_1x .icon-back { +.is_1x .modal-close-button i { background-image: url(../img/icons/IconsetW_1x.png); } .modal-close-button:hover i { @@ -1296,11 +1282,11 @@ a.im_dialog_selected .im_dialog_date { } .im_history_appending { - -webkit-transition: all 0.2s; - -moz-transition: all 0.2s; - -ms-transition: all 0.2s; - -o-transition: all 0.2s; - transition: all 0.2s; + -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; } @@ -1791,45 +1777,74 @@ img.im_message_document_thumb { width: 10px; height: 10px; border-radius: 7px; - overflow: hidden; position: absolute; margin-left: -26px; margin-top: 13px; opacity: 0; } -.icon-message-status-unread { +.im_message_unread .icon-message-status { opacity: 1.0; } -.icon-message-status-pending { +.im_message_pending .icon-message-status { opacity: 0.5; } -.icon-message-status-error { + +.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; } -.icon-message-status-error:hover { +.im_message_error_btn .icon-message-status:hover { opacity: 1; } -.icon-message-status-tick { - display: none; - width: 16px; - height: 10px; - background: url(../img/icons/Checks2_2x.png) 0 0 no-repeat; - background-size: 16px 10px; - top: 2px; - position: relative; -} -.icon-message-status-tick.message-status-unread-tick { - /*width: 13px;*/ - background: url(../img/icons/Checks1_2x.png) 0 0 no-repeat; - background-size: 16px 10px; -} .im_message_date { color: #adadad; font-size: 0.85em; padding: 0 0 20px 10px; } + +@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; + } +} + + div.im_message_author, div.im_message_body { display: block; @@ -1882,11 +1897,17 @@ span.emoji { .im_history_not_selected, .im_history_empty { + visibility: hidden; text-align: center; color: #999; font-size: 16px; line-height: 18px; padding: 1px 50px; + margin: 0; +} +.im_history_not_selected.vertical-aligned, +.im_history_empty.vertical-aligned { + visibility: visible; } .im_history_to_bottom .im_history_not_selected, .im_history_to_bottom .im_history_empty { @@ -2143,21 +2164,19 @@ img.img_fullsize { } .user_modal_status { color: #999; - margin-bottom: 24px; + margin-bottom: 16px; } -.user_modal_actions_wrap { - margin-top: 8px; -} .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-left: 10px; + margin: 8px 0 0 0; float: left; } .user_modal_other_btn .dropdown-toggle { @@ -2189,12 +2208,13 @@ img.img_fullsize { } .chat_modal_members_count { color: #999; - margin-bottom: 24px; + margin-bottom: 16px; } .chat_modal_actions_wrap { - margin-top: 8px; + position: relative; } + .chat_modal_main_btn { border: 0; font-size: 12px; @@ -2203,6 +2223,8 @@ img.img_fullsize { float: left; position: relative; overflow: hidden; + margin-right: 10px; + margin-top: 8px; } .chat_modal_invite_btn { border: 0; @@ -2212,6 +2234,7 @@ img.img_fullsize { float: left; position: relative; margin-right: 10px; + margin-top: 8px; } .chat_modal_delete_btn { border: 0; @@ -2219,9 +2242,11 @@ img.img_fullsize { padding-left: 16px; padding-right: 16px; float: left; + margin-right: 10px; + margin-top: 8px; } .chat_modal_other_btn { - margin-left: 10px; + margin-top: 8px; float: left; } .chat_modal_other_btn .dropdown-toggle { @@ -3039,160 +3064,6 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status { } -@media (min-width: 480px) { - .tg_page_head .navbar-quick-nav { - display: none; - } -} - -@media (max-width: 480px) { - .tg_page_head .navbar > .container .navbar-brand { - padding-left: 9px; - } - .im_history_panel_edit_link { - margin-right: 0; - } - .im_dialogs_panel_dropdown .dropdown-menu { - right: 0; - left: auto; - } -} - -@media (max-width: 480px) { - .login_form_wrap { - border-radius: 0; - max-width: auto; - box-shadow: none; - -webkit-box-shadow: none; - margin: 30px auto 20px; - } -} - -@media (max-width: 640px) { - .im_page_footer { - display: none; - } - - .im_panel_own_photo, - .im_panel_peer_photo { - display: none; - } - .im_history_panel_wrap { - margin: 0 15px; - } - .im_send_panel_wrap { - padding: 10px 15px; - } - .icon-select-tick { - margin: 10px 0 0 -24px - } - .im_content_message_wrap { - margin-left: 0; - } - .im_history_typing { - padding: 0 15px 0 60px; - } - .im_history_panel_info_link { - display: none; - } - - .im_send_form { - left: 0; - right: 0; - max-width: none; - } - - .im_edit_flush_link, - .im_edit_cancel_link, - .im_edit_delete_btn, - .im_edit_forward_btn { - padding-left: 5px; - padding-right: 5px; - margin: 6px 4px; - } - .im_edit_panel_border { - margin: 0 18px 22px 3px; - } - .im_edit_panel_wrap { - margin: 0 5px; - padding-bottom: 18px; - } - - .emoji-wysiwyg-editor { - min-height: 34px; - max-height: 150px; - } - - .im_dialog_peer { - white-space: normal; - height: 2.84em; - } - .im_dialog_message { - display: none; - } -} - -@media (max-width: 900px) { - .icon-message-status { - z-index: 10; - margin-left: -5px; - border-radius: 0; - height: 34px; - border: 0; - width: 2px; - margin-top: 1px; - border: 0; - } - .im_message_grouped1 .icon-message-status, - .im_message_grouped2 .icon-message-status { - margin-top: -8px; - } -} - -@media (max-width: 480px) { - .im_dialogs_col_wrap, - .im_page_peer_not_selected .im_history_col_wrap { - display: none; - } - .im_page_peer_not_selected .im_dialogs_col_wrap { - display: block; - border-right: 0; - } - - .im_page_peer_not_selected .im_dialogs_col { - margin-right: 0; - } - .im_page_peer_not_selected .im_dialogs_col_wrap .pane { - width: 12px; - right: 0px; - } - .im_page_peer_not_selected .im_dialogs_col_wrap .pane > .slider { - border-radius: 3px; - margin: 0 3px; - } - - .im_dialogs_scrollable_wrap { - padding: 0 12px 0 12px; - } - - .im_dialogs_col_wrap, - .im_history_col_wrap { - float: none; - width: auto; - max-width: auto; - min-width: auto; - } - - .im_page_peer_not_selected .im_dialog_peer { - white-space: nowrap; - height: auto; - } - .im_page_peer_not_selected .im_dialog_message { - display: block; - } -} - - /* Dialogs modal */ .peer_select_window .modal-dialog { max-width: 506px; @@ -3579,4 +3450,3 @@ ce671b orange .changelog_version_changes_list li { line-height: 20px; } - diff --git a/app/css/app_mobile.css b/app/css/app_mobile.css new file mode 100644 index 00000000..32b8d0a3 --- /dev/null +++ b/app/css/app_mobile.css @@ -0,0 +1,326 @@ +@media (max-width: 479px) { + +html { + background: #FFF; +} +.tg_page_head .navbar > .container .navbar-brand { + padding-left: 9px; +} +.im_history_panel_edit_link { + margin-right: 0; +} +.navbar-header { + float: none; +} +.navbar-toggle-wrap { + float: right; + display: block; + margin: 5px; +} +.navbar-toggle-wrap .navbar-toggle { + float: none; + display: block; + margin: 0; +} +.navbar-toggle .dropdown-toggle { + display: block; +} +.navbar-toggle-wrap .dropdown-menu { + margin-top: 4px; + right: 0; + left: auto; +} + +.tg_page_head .navbar-quick-nav { + display: block; + margin: 0; +} +.tg_page_head .navbar-quick-nav li { + float: left; +} +.tg_page_head .navbar-quick-nav a { + padding-top: 15px; + padding-bottom: 15px; +} +.icon-back { + display: inline-block; + width: 10px; + height: 18px; + vertical-align: text-top; + + background: url(../img/icons/IconsetW.png) -15px -419px no-repeat; + background-size: 42px 710px; + opacity: 0.8; +} +.is_1x .icon-back { + background-image: url(../img/icons/IconsetW_1x.png); +} +.tg_page_head .navbar-quick-nav a:hover .icon-back { + opacity: 1; +} + +.tg_page_head .navbar > .container .navbar-brand { + display: none; +} +.tg_page_head .navbar_peer_not_selected > .container .navbar-brand { + display: block; +} + +.tg_page_head .navbar-inverse .navbar-quick-nav > li > a { + padding-left: 15px; + padding: 6px 10px 2px 25px; + color: #b9cfe3; + font-size: 13px; + height: 44px; +} +.tg_page_head .navbar-inverse .navbar-quick-nav > li > a:hover { + color: #b9cfe3; + background-color: rgba(255,255,255,0.1); +} +.navbar-quick-nav .icon-back { + position: absolute; + margin-left: -15px; + margin-top: 9px; +} +.navbar-quick-nav h4 { + font-size: 14px; + color: #FFF; + white-space: nowrap; + overflow: hidden; + margin: 0; +} +.navbar-quick-media-back h4 { + margin: 9px 0 12px 0; +} +.navbar-quick-profile-back small, +.navbar-quick-group-back small { + white-space: nowrap; + overflow: hidden; + margin-left: 0; +} + +.navbar-menu { + display: none; +} +.navbar_offline .navbar-menu { + display: block; +} +.navbar_offline .navbar-offline { + float: left; + margin: 0; +} +.navbar_offline .tg_head_logo_text { + display: none; +} +.tg_page_head .navbar_offline > .container .navbar-brand { + margin-right: 0; +} +.navbar_offline .navbar-quick-nav li > a > h4, +.navbar_offline .navbar-quick-nav li > a > small { + display: none; +} + + +.login_form_wrap { + border-radius: 0; + max-width: auto; + box-shadow: none; + -webkit-box-shadow: none; + margin: 30px auto 20px; +} + +.im_page_wrap { + background: none; + box-shadow: none; + border: 0; + overflow: hidden; +} + +.im_page_footer { + display: none; +} + +.im_panel_own_photo, +.im_panel_peer_photo { + display: none; +} +.im_history_panel_wrap { + margin: 0 15px; +} +.im_send_panel_wrap { + padding: 10px 10px; +} +.icon-select-tick { + margin: 10px 0 0 -24px +} +.im_message_wrap { + padding: 0 10px; +} +.im_content_message_wrap { + margin-left: 0; +} +.im_history_typing { + padding: 0 15px 0 56px; +} +.im_history_panel_info_link { + display: none; +} + +.im_send_form { + left: 0; + right: 0; + max-width: none; +} + +.im_edit_flush_link, +.im_edit_cancel_link, +.im_edit_delete_btn, +.im_edit_forward_btn { + padding-left: 5px; + padding-right: 5px; + margin: 6px 4px; +} +.im_edit_panel_border { + margin: 0 18px 22px 3px; +} +.im_edit_panel_wrap { + margin: 0 5px; + padding-bottom: 18px; +} + +.emoji-wysiwyg-editor { + min-height: 34px; + max-height: 150px; +} + +.im_dialog_peer { + white-space: normal; + height: 2.84em; +} +.im_dialog_message { + display: none; +} + +.im_history_col .nano > .pane { + top: 3px; + right: 3px; + width: 6px; +} +.im_history_col .nano > .pane > .slider, +.contacts_modal_col .nano > .pane > .slider, +.im_dialogs_modal_col .nano > .pane > .slider { + background : rgba(3,46,79,0.22); + border-radius: 3px; + margin: 0; +} + +.im_dialogs_col_wrap, +.im_page_peer_not_selected .im_history_col_wrap { + display: none; +} +.im_page_peer_not_selected .im_dialogs_col_wrap { + display: block; + border-right: 0; +} + +.im_page_peer_not_selected .im_dialogs_col { + margin-right: 0; +} +.im_page_peer_not_selected .im_dialogs_col_wrap .pane { + width: 6px; + right: 3px; +} +.im_page_peer_not_selected .im_dialogs_col_wrap .pane > .slider { + background : rgba(3,46,79,0.22); + border-radius: 3px; + margin: 0; +} +.im_dialogs_panel { + padding-left: 9px; + padding-right: 9px; +} +.im_dialogs_panel_dropdown { + display: none; +} +.im_page_split .im_dialogs_search { + margin-right: 0; +} +.im_dialogs_modal_col .im_dialogs_scrollable_wrap, +.im_dialogs_scrollable_wrap { + padding: 0; +} +.peer_select_modal_wrap .modal-body { + padding-left: 0; + padding-right: 0; +} + +.im_dialogs_col_wrap, +.im_history_col_wrap { + float: none; + width: auto; + max-width: auto; + min-width: auto; +} + +.im_dialogs_modal_col_wrap .im_dialog_peer, +.im_page_peer_not_selected .im_dialog_peer { + white-space: nowrap; + height: auto; +} +.im_dialogs_modal_col_wrap .im_dialog_message, +.im_page_peer_not_selected .im_dialog_message { + display: block; +} +.im_history_panel_wrap { + display: none; +} + + +.modal.page_modal { + background: #FFF; +} +.page_modal .modal-content { + border-radius: 0; + box-shadow: none; +} +.page_modal .modal-dialog { + margin: 0; +} +.page_modal .modal-content .modal-body { + padding-left: 0; + padding-right: 0; +} + + +.user_modal_other_btn button { + padding-right: 0; +} +.user_modal_other_btn .dropdown-menu { + left: auto; + right: -9px; +} +.chat_modal_actions_wrap { + clear: both; +} +.chat_modal_other_btn button { + padding-right: 0; +} +.chat_modal_other_btn .dropdown-menu { + left: auto; + right: -9px; +} + +.photo_modal_window .modal-content, +.video_modal_window .modal-content { + border-radius: 0; +} +.media_modal_wrap .modal-body { + padding: 0 0 0; +} +.media_modal_actions, +.media_modal_info{ + margin: 10px; +} + + +} \ No newline at end of file diff --git a/app/index.html b/app/index.html index a1f45dbd..ade74629 100644 --- a/app/index.html +++ b/app/index.html @@ -10,6 +10,7 @@ + @@ -23,7 +24,7 @@ -
+
diff --git a/app/js/controllers.js b/app/js/controllers.js index ce270bd9..9a8f598e 100644 --- a/app/js/controllers.js +++ b/app/js/controllers.js @@ -230,12 +230,14 @@ angular.module('myApp.controllers', []) $scope.isLoggedIn = true; $scope.isEmpty = {}; + $scope.historyFilter = {mediaType: false}; + $scope.historyPeer = {}; $scope.openSettings = function () { $modal.open({ templateUrl: 'partials/settings_modal.html', controller: 'SettingsModalController', - windowClass: 'settings_modal_window' + windowClass: 'settings_modal_window page_modal' }); } @@ -243,7 +245,7 @@ angular.module('myApp.controllers', []) ContactsSelectService.selectContact().then(function (userID) { $scope.dialogSelect(AppUsersManager.getUserString(userID)); }); - } + }; $scope.openGroup = function () { ContactsSelectService.selectContacts().then(function (userIDs) { @@ -263,7 +265,15 @@ angular.module('myApp.controllers', []) } }); - } + }; + + $scope.importContact = function () { + AppUsersManager.openImportContact().then(function (foundContact) { + if (foundContact) { + $scope.$broadcast('contact_imported'); + } + }); + }; $scope.dialogSelect = function (peerString, messageID) { var params = {peerString: peerString}; @@ -280,7 +290,27 @@ angular.module('myApp.controllers', []) location.reload(); }); }) - } + }; + + $scope.showPeerInfo = function () { + if ($scope.curDialog.peerID > 0) { + $rootScope.openUser($scope.curDialog.peerID) + } else if ($scope.curDialog.peerID < 0) { + $rootScope.openChat(-$scope.curDialog.peerID) + } + }; + + $scope.toggleEdit = function () { + $scope.$broadcast('history_edit_toggle'); + }; + + $scope.returnToRecent = function () { + $scope.$broadcast('history_return_recent'); + }; + + $scope.toggleMedia = function (mediaType) { + $scope.$broadcast('history_media_toggle', mediaType); + }; updateCurDialog(); @@ -353,6 +383,12 @@ angular.module('myApp.controllers', []) } }); + $scope.$on('contact_imported', function () { + if (contactsShown) { + loadDialogs(); + } + }) + var prevMessages = false; $scope.$watchCollection('search', function () { if ($scope.search.messages && (!angular.isString($scope.search.query) || !$scope.search.query.length)) { @@ -367,14 +403,6 @@ angular.module('myApp.controllers', []) } }); - $scope.importContact = function () { - AppUsersManager.openImportContact().then(function (foundContact) { - if (contactsShown && foundContact) { - loadDialogs(); - } - }); - }; - $scope.importPhonebook = function () { PhonebookContactsService.openPhonebookImport().result.then(function (foundContacts) { if (contactsShown && foundContacts.length) { @@ -444,14 +472,6 @@ angular.module('myApp.controllers', []) }); }; - $scope.importContact = function () { - AppUsersManager.openImportContact().then(function (foundContact) { - if (contactsShown && foundContact) { - loadDialogs(); - } - }); - }; - $scope.importPhonebook = function () { PhonebookContactsService.openPhonebookImport().result.then(function (foundContacts) { if (contactsShown && foundContacts.length) { @@ -558,7 +578,6 @@ angular.module('myApp.controllers', []) StatusManager.start(); $scope.history = []; - $scope.mediaType = false; $scope.skippedHistory = false; $scope.selectedMsgs = {}; $scope.selectedCount = 0; @@ -572,10 +591,16 @@ angular.module('myApp.controllers', []) $scope.selectedForward = selectedForward; $scope.selectedCancel = selectedCancel; $scope.selectedFlush = selectedFlush; + $scope.toggleEdit = toggleEdit; $scope.toggleMedia = toggleMedia; $scope.returnToRecent = returnToRecent; - $scope.showPeerInfo = showPeerInfo; + + $scope.$on('history_edit_toggle', toggleEdit); + $scope.$on('history_media_toggle', function (e, mediaType) { + toggleMedia(mediaType); + }); + $scope.$on('history_return_recent', returnToRecent); var peerID, hasMore = false, @@ -603,7 +628,7 @@ angular.module('myApp.controllers', []) $scope.curDialog.peerID = peerID; $scope.curDialog.inputPeer = AppPeersManager.getInputPeer(newPeer); - $scope.mediaType = false; + $scope.historyFilter.mediaType = false; selectedCancel(true); @@ -629,11 +654,11 @@ angular.module('myApp.controllers', []) $scope.history = []; - $scope.historyPeer = { + safeReplaceObject($scope.historyPeer, { id: peerID, data: peerData, photo: AppPeersManager.getPeerPhoto(peerID, 'User', 'Group') - }; + }); MtpApiManager.getUserID().then(function (id) { $scope.ownPhoto = AppUsersManager.getUserPhoto(id, 'User'); @@ -734,7 +759,7 @@ angular.module('myApp.controllers', []) var curJump = jump, curMoreJump = moreJump, - inputMediaFilter = $scope.mediaType && {_: inputMediaFilters[$scope.mediaType]}, + inputMediaFilter = $scope.historyFilter.mediaType && {_: inputMediaFilters[$scope.historyFilter.mediaType]}, getMessagesPromise = inputMediaFilter ? AppMessagesManager.getSearch($scope.curDialog.inputPeer, '', inputMediaFilter, maxID) : AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID); @@ -777,7 +802,7 @@ angular.module('myApp.controllers', []) } var curJump = ++jump, - inputMediaFilter = $scope.mediaType && {_: inputMediaFilters[$scope.mediaType]}, + inputMediaFilter = $scope.historyFilter.mediaType && {_: inputMediaFilters[$scope.historyFilter.mediaType]}, getMessagesPromise = inputMediaFilter ? AppMessagesManager.getSearch($scope.curDialog.inputPeer, '', inputMediaFilter, maxID) : AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID, limit, backLimit); @@ -814,7 +839,7 @@ angular.module('myApp.controllers', []) if (historyResult.unreadOffset) { $scope.historyUnreadAfter = historyResult.history[historyResult.unreadOffset - 1]; } else { - $scope.historyUnreadAfter = {}; + delete $scope.historyUnreadAfter; } $scope.historyFocus = $scope.curDialog.messageID || 0; @@ -950,13 +975,13 @@ angular.module('myApp.controllers', []) } function toggleMedia (mediaType) { - $scope.mediaType = mediaType || false; + $scope.historyFilter.mediaType = mediaType || false; $scope.history = []; loadHistory(); } function returnToRecent () { - if ($scope.mediaType) { + if ($scope.historyFilter.mediaType) { toggleMedia(); } else { if ($scope.curDialog.messageID) { @@ -967,14 +992,6 @@ angular.module('myApp.controllers', []) } } - function showPeerInfo () { - if ($scope.curDialog.peerID > 0) { - $rootScope.openUser($scope.curDialog.peerID) - } else if ($scope.curDialog.peerID < 0) { - $rootScope.openChat(-$scope.curDialog.peerID) - } - } - var typingTimeouts = {}; @@ -982,7 +999,7 @@ angular.module('myApp.controllers', []) $scope.$on('history_append', function (e, addedMessage) { if (addedMessage.peerID == $scope.curDialog.peerID) { - if ($scope.mediaType || $scope.skippedHistory) { + if ($scope.historyFilter.mediaType || $scope.skippedHistory) { if (addedMessage.my) { returnToRecent(); } else { @@ -997,7 +1014,7 @@ angular.module('myApp.controllers', []) $scope.typing = {}; $scope.$broadcast('ui_history_append_new', {my: addedMessage.my}); if (addedMessage.my) { - $scope.historyUnread = {}; + delete $scope.historyUnreadAfter; } // console.log('append check', $rootScope.idle.isIDLE, addedMessage.peerID, $scope.curDialog.peerID); @@ -1030,7 +1047,7 @@ angular.module('myApp.controllers', []) }); $scope.$on('history_focus', function (e, peerData) { - if ($scope.mediaType) { + if ($scope.historyFilter.mediaType) { toggleMedia(); } }); @@ -1068,7 +1085,7 @@ angular.module('myApp.controllers', []) $scope.$on('history_need_more', showMoreHistory); $rootScope.$watch('idle.isIDLE', function (newVal) { - if (!newVal && $scope.curDialog && $scope.curDialog.peerID && !$scope.mediaType && !$scope.skippedHistory) { + if (!newVal && $scope.curDialog && $scope.curDialog.peerID && !$scope.historyFilter.mediaType && !$scope.skippedHistory) { AppMessagesManager.readHistory($scope.curDialog.inputPeer); } }); @@ -1152,7 +1169,7 @@ angular.module('myApp.controllers', []) // console.trace('ctrl text changed', newVal); if (newVal && newVal.length) { - if (!$scope.mediaType && !$scope.skippedHistory) { + if (!$scope.historyFilter.mediaType && !$scope.skippedHistory) { AppMessagesManager.readHistory($scope.curDialog.inputPeer); } @@ -1530,7 +1547,7 @@ angular.module('myApp.controllers', []) $modal.open({ templateUrl: edit ? 'partials/edit_contact_modal.html' : 'partials/import_contact_modal.html', controller: 'ImportContactModalController', - windowClass: 'import_contact_modal_window', + windowClass: 'import_contact_modal_window page_modal', scope: scope }).result.then(function (foundUserID) { if ($scope.userID == foundUserID) { @@ -1820,7 +1837,7 @@ angular.module('myApp.controllers', []) $modal.open({ templateUrl: 'partials/profile_edit_modal.html', controller: 'ProfileEditModalController', - windowClass: 'profile_edit_modal_window' + windowClass: 'profile_edit_modal_window page_modal' }); }; diff --git a/app/js/directives.js b/app/js/directives.js index 5537fcc6..e801608d 100644 --- a/app/js/directives.js +++ b/app/js/directives.js @@ -11,6 +11,15 @@ angular.module('myApp.directives', ['myApp.filters']) + + .directive('myHead', function() { + return { + restrict: 'AE', + scope: true, + templateUrl: 'partials/head.html' + }; + }) + .directive('myDialog', function() { return { restrict: 'AE', @@ -236,7 +245,8 @@ angular.module('myApp.directives', ['myApp.filters']) function updateSizes () { if (attrs.modal) { $(element).css({ - height: $($window).height() - 200 + height: $($window).height() - + (Config.Navigator.mobile ? 100 : 200) }); updateScroller(); return; @@ -281,7 +291,10 @@ angular.module('myApp.directives', ['myApp.filters']) function updateSizes () { $(element).css({ - height: $($window).height() - (panelWrap && panelWrap.offsetHeight || 0) - (searchWrap && searchWrap.offsetHeight || 0) - 200 + height: $($window).height() - + (panelWrap && panelWrap.offsetHeight || 0) - + (searchWrap && searchWrap.offsetHeight || 0) - + (Config.Navigator.mobile ? 60 : 200) }); $(contactsWrap).nanoScroller(); } @@ -370,21 +383,24 @@ angular.module('myApp.directives', ['myApp.filters']) } } - var animated = transform && !$rootScope.idle.isIDLE ? true : false, + var animated = transform ? true : false, curAnimation = false; $scope.$on('ui_history_append_new', function (e, options) { if (!atBottom && !options.my) { return; } - if (!animated) { + var curAnimated = animated && !$rootScope.idle.isIDLE, + wasH; + if (!curAnimated) { $(scrollable).css({bottom: 0}); $(scrollableWrap).addClass('im_history_to_bottom'); + } else { + wasH = scrollableWrap.scrollHeight; } - var wasH = scrollableWrap.scrollHeight; onContentLoaded(function () { - if (animated) { + if (curAnimated) { curAnimation = true; $(historyMessagesEl).removeClass('im_history_appending'); scrollableWrap.scrollTop = scrollableWrap.scrollHeight; @@ -740,7 +756,7 @@ angular.module('myApp.directives', ['myApp.filters']) $(richTextarea).on('DOMNodeInserted', onPastedImageEvent); } - if (!Config.Navigator.mobile) { + if (!Config.Navigator.touch) { $scope.$on('ui_peer_change', focusField); $scope.$on('ui_history_focus', focusField); $scope.$on('ui_history_change', focusField); @@ -761,7 +777,7 @@ angular.module('myApp.directives', ['myApp.filters']) } }); - if (!Config.Navigator.mobile) { + if (!Config.Navigator.touch) { focusField(); } @@ -1221,7 +1237,7 @@ angular.module('myApp.directives', ['myApp.filters']) .directive('myFocused', function(){ return { link: function($scope, element, attrs) { - if (Config.Navigator.mobile) { + if (Config.Navigator.touch) { return false; } setTimeout(function () { @@ -1235,7 +1251,7 @@ angular.module('myApp.directives', ['myApp.filters']) return { link: function($scope, element, attrs) { $scope.$on(attrs.myFocusOn, function () { - if (Config.Navigator.mobile) { + if (Config.Navigator.touch) { return false; } onContentLoaded(function () { @@ -1276,7 +1292,7 @@ angular.module('myApp.directives', ['myApp.filters']) function link($scope, element, attrs) { attrs.$observe('myModalWidth', function (newW) { - $(element[0].parentNode.parentNode).css({width: parseInt(newW) + 36}); + $(element[0].parentNode.parentNode).css({width: parseInt(newW) + (Config.Navigator.mobile ? 0 : 36)}); }); }; @@ -1379,6 +1395,10 @@ angular.module('myApp.directives', ['myApp.filters']) function link($scope, element, attrs) { var updateMargin = function () { + if (Config.Navigator.mobile && + $(element[0].parentNode.parentNode.parentNode).hasClass('page_modal')) { + return; + } var height = element[0].parentNode.offsetHeight, contHeight = element[0].parentNode.parentNode.parentNode.offsetHeight; @@ -1416,15 +1436,21 @@ angular.module('myApp.directives', ['myApp.filters']) function link($scope, element, attrs) { - var prevMargin = false; + var usePadding = attrs.padding === 'true', + prevMargin = 0; var updateMargin = function () { var height = element[0].offsetHeight, + fullHeight = height - (height && usePadding ? 2 * prevMargin : 0), contHeight = $($window).height(), ratio = attrs.myVerticalPosition && parseFloat(attrs.myVerticalPosition) || 0.5, - margin = height < contHeight ? parseInt((contHeight - height) * ratio) : ''; + margin = fullHeight < contHeight ? parseInt((contHeight - fullHeight) * ratio) : '', + styles = usePadding + ? {paddingTop: margin, paddingBottom: margin} + : {marginTop: margin, marginBottom: margin}; - element.css({marginTop: margin, marginBottom: margin}); + element.css(styles); + element.addClass('vertical-aligned'); if (prevMargin !== margin) { $scope.$emit('ui_height'); diff --git a/app/js/lib/config.js b/app/js/lib/config.js index c7ec00d5..89ff33f1 100644 --- a/app/js/lib/config.js +++ b/app/js/lib/config.js @@ -35,7 +35,8 @@ Config.Navigator = { osX: (navigator.platform || '').toLowerCase().indexOf('mac') != -1 || (navigator.userAgent || '').toLowerCase().indexOf('mac') != -1, retina: window.devicePixelRatio > 1, - mobile: $(window).height() < 600 + touch: $(window).width() <= 768, + mobile: $(window).width() < 480 }; Config.Schema = Config.Schema || {}; diff --git a/app/js/services.js b/app/js/services.js index b20b501d..bf78b571 100644 --- a/app/js/services.js +++ b/app/js/services.js @@ -284,7 +284,7 @@ angular.module('myApp.services', []) templateUrl: 'partials/user_modal.html', controller: 'UserModalController', scope: scope, - windowClass: 'user_modal_window' + windowClass: 'user_modal_window page_modal' }); }; $rootScope.openUser = openUser; @@ -377,7 +377,7 @@ angular.module('myApp.services', []) return $modal.open({ templateUrl: 'partials/import_contact_modal.html', controller: 'ImportContactModalController', - windowClass: 'import_contact_modal_window' + windowClass: 'import_contact_modal_window page_modal' }).result.then(function (foundUserID) { if (!foundUserID) { return $q.reject(); @@ -457,7 +457,7 @@ angular.module('myApp.services', []) return $modal.open({ templateUrl: 'partials/phonebook_modal.html', controller: 'PhonebookModalController', - windowClass: 'phonebook_modal_window' + windowClass: 'phonebook_modal_window page_modal' }); } @@ -598,7 +598,7 @@ angular.module('myApp.services', []) var modalInstance = $modal.open({ templateUrl: 'partials/chat_modal.html', controller: 'ChatModalController', - windowClass: 'chat_modal_window', + windowClass: 'chat_modal_window page_modal', scope: scope }); } @@ -985,15 +985,16 @@ angular.module('myApp.services', []) } } - if (!offsetNotFound && historyStorage.count !== null && historyStorage.history.length == historyStorage.count || - historyStorage.history.length >= offset + (limit || 1) - ) { + if (!offsetNotFound && ( + historyStorage.count !== null && historyStorage.history.length == historyStorage.count || + historyStorage.history.length >= offset + (limit || 1) + )) { if (backLimit) { backLimit = Math.min(offset, backLimit); offset = Math.max(0, offset - backLimit); limit += backLimit; } else { - limit = limit || 20; + limit = limit || (offset ? 20 : 5); } return $q.when({ @@ -2291,7 +2292,7 @@ angular.module('myApp.services', []) function wrapForFull (photoID) { var photo = wrapForHistory(photoID), - fullWidth = $(window).width() - 36, + fullWidth = $(window).width() - (Config.Navigator.mobile ? 20 : 36), fullHeight = $($window).height() - 150, fullPhotoSize = choosePhotoSize(photo, fullWidth, fullHeight), full = { @@ -2522,7 +2523,8 @@ angular.module('myApp.services', []) var modalInstance = $modal.open({ templateUrl: 'partials/video_modal.html', controller: 'VideoModalController', - scope: scope + scope: scope, + windowClass: 'video_modal_window' }); } @@ -3723,7 +3725,7 @@ angular.module('myApp.services', []) $modal.open({ templateUrl: 'partials/changelog_modal.html', scope: $scope, - windowClass: 'changelog_modal_window' + windowClass: 'changelog_modal_window page_modal' }); } diff --git a/app/partials/chat_modal.html b/app/partials/chat_modal.html index df78fffe..0fe05b6c 100644 --- a/app/partials/chat_modal.html +++ b/app/partials/chat_modal.html @@ -22,42 +22,39 @@

-
- -
- - - - - - - - Update photo - - - Updating - - - -
- - -
- +
+ + + + + + + + Update photo + + + Updating + + + +
+ +
+
diff --git a/app/partials/contacts_modal.html b/app/partials/contacts_modal.html index dea71cc5..d6d147ab 100644 --- a/app/partials/contacts_modal.html +++ b/app/partials/contacts_modal.html @@ -1,7 +1,11 @@
+ +
+

Contacts

+
@@ -44,7 +48,7 @@
-
+
diff --git a/app/partials/head.html b/app/partials/head.html index 841e2ee7..9457318f 100644 --- a/app/partials/head.html +++ b/app/partials/head.html @@ -1,19 +1,78 @@
-