From 3273329a3d0fe52195030e594abd062de369ba5d Mon Sep 17 00:00:00 2001 From: Igor Zhukov Date: Tue, 25 Mar 2014 15:36:17 +0400 Subject: [PATCH] Improved I'm performance, added vertical position directive, removed modal animation --- app/css/app.css | 32 ++++++++----------- app/js/controllers.js | 15 +++++---- app/js/directives.js | 37 ++++++++++++++++++++-- app/partials/im.html | 71 +++++++++++++++++++++---------------------- 4 files changed, 89 insertions(+), 66 deletions(-) diff --git a/app/css/app.css b/app/css/app.css index 87e82bed..2cbd7676 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -307,7 +307,8 @@ input[type="number"]::-webkit-inner-spin-button { -o-transition: none; transition: none; } -.modal.fade { +.modal.fade, +.modal-backdrop.fade { -webkit-transition: none; -moz-transition: none; -o-transition: none; @@ -862,14 +863,6 @@ a.im_dialog:hover .im_dialog_date { -webkit-user-select: text; } -.im_history_empty { - padding: 100px 50px 0; - - text-align: center; - color: #999; - font-size: 1.5em; -} - .im_history_to_bottom .im_history_scrollable { position: absolute; bottom: 0; @@ -1413,11 +1406,12 @@ span.emoji { background-image: url('../img/emojisprite_4.png'); } -.im_history_not_selected { +.im_history_not_selected, +.im_history_empty { text-align: center; color: #999; font-size: 1.5em; - padding: 200px 50px 200px; + padding: 0 50px; } .im_send_panel_wrap { @@ -2621,21 +2615,21 @@ cd4073 pink ce671b orange */ .user_color_1, -.user_color_1:hover {color: #c03d33;} +.user_color_1:hover {color: #b3577a;} .user_color_2, -.user_color_2:hover {color: #4fad2d;} +.user_color_2:hover {color: #539e4f;} .user_color_3, -.user_color_3:hover {color: #d09306;} +.user_color_3:hover {color: #ae9661;} .user_color_4, -.user_color_4:hover {color: #348cd4;} +.user_color_4:hover {color: #4979a3;} .user_color_5, -.user_color_5:hover {color: #8544d6;} +.user_color_5:hover {color: #8365ab;} .user_color_6, -.user_color_6:hover {color: #cd4073;} +.user_color_6:hover {color: #b7635d;} .user_color_7, -.user_color_7:hover {color: #2996ad;} +.user_color_7:hover {color: #5397b4;} .user_color_8, -.user_color_8:hover {color: #ce671b;} +.user_color_8:hover {color: #c07844;} .im_dialogs_contacts_wrap h5 { diff --git a/app/js/controllers.js b/app/js/controllers.js index 27f71f58..0ed16438 100644 --- a/app/js/controllers.js +++ b/app/js/controllers.js @@ -365,7 +365,6 @@ angular.module('myApp.controllers', []) StatusManager.start(); $scope.history = []; - $scope.historyEmpty = false; $scope.mediaType = false; $scope.selectedMsgs = {}; $scope.selectedCount = 0; @@ -445,12 +444,15 @@ angular.module('myApp.controllers', []) } // console.trace('load history'); - var inputMediaFilter = $scope.mediaType && {_: inputMediaFilters[$scope.mediaType]}, + var curJump = jump, + inputMediaFilter = $scope.mediaType && {_: inputMediaFilters[$scope.mediaType]}, getMessagesPromise = inputMediaFilter ? AppMessagesManager.getSearch($scope.curDialog.inputPeer, '', inputMediaFilter, maxID) : AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID); getMessagesPromise.then(function (historyResult) { + if (curJump != jump) return; + offset += historyResult.history.length; hasMore = historyResult.count === null || offset < historyResult.count; maxID = historyResult.history[historyResult.history.length - 1]; @@ -460,8 +462,6 @@ angular.module('myApp.controllers', []) }); $scope.$broadcast('ui_history_prepend'); - }, function () { - safeReplaceObject($scope.state, {error: true}); }); } @@ -476,13 +476,14 @@ angular.module('myApp.controllers', []) ? AppMessagesManager.getSearch($scope.curDialog.inputPeer, '', inputMediaFilter, maxID) : AppMessagesManager.getHistory($scope.curDialog.inputPeer, maxID); - $scope.historyEmpty = false; + safeReplaceObject($scope.state, {loaded: false}); getMessagesPromise.then(function (historyResult) { + safeReplaceObject($scope.state, {loaded: true}); + if (curJump != jump) return; offset += historyResult.history.length; - $scope.historyEmpty = !historyResult.count; hasMore = historyResult.count === null || offset < historyResult.count; maxID = historyResult.history[historyResult.history.length - 1]; @@ -502,8 +503,6 @@ angular.module('myApp.controllers', []) $scope.historyUnread = {}; } - safeReplaceObject($scope.state, {loaded: true}); - $scope.$broadcast('ui_history_change'); AppMessagesManager.readHistory($scope.curDialog.inputPeer); diff --git a/app/js/directives.js b/app/js/directives.js index 029b07c4..c586a0c6 100644 --- a/app/js/directives.js +++ b/app/js/directives.js @@ -353,7 +353,7 @@ angular.module('myApp.directives', ['myApp.filters']) function updateBottomizer () { $(historyMessagesEl).css({marginTop: 0}); - if (historyMessagesEl.offsetHeight <= scrollableWrap.offsetHeight) { + if (historyMessagesEl.offsetHeight > 0 && historyMessagesEl.offsetHeight <= scrollableWrap.offsetHeight) { $(historyMessagesEl).css({marginTop: (scrollableWrap.offsetHeight - historyMessagesEl.offsetHeight - 20 - 44) + 'px'}); } $(historyWrap).nanoScroller(); @@ -984,4 +984,37 @@ angular.module('myApp.directives', ['myApp.filters']) }; - }); + }) + + + .directive('myVerticalPosition', function ($window, $timeout) { + + return { + link: link + }; + + function link($scope, element, attrs) { + + var updateMargin = function () { + var height = element[0].offsetHeight, + contHeight = $($window).height(), + ratio = attrs.myVerticalPosition && parseFloat(attrs.myVerticalPosition) || 0.5; + + if (height < contHeight) { + element.css('marginTop', parseInt((contHeight - height) * ratio)); + } else { + element.css('marginTop', ''); + } + }; + + onContentLoaded(updateMargin); + + $($window).on('resize', updateMargin); + + $scope.$on('ui_height', function () { + onContentLoaded(updateMargin); + }); + + }; + + }) diff --git a/app/partials/im.html b/app/partials/im.html index 9c628dee..76978803 100644 --- a/app/partials/im.html +++ b/app/partials/im.html @@ -59,10 +59,14 @@
-
No history to display
-
Loading history
+
+ Please select a chat to start messaging +
+
+ Loading history +
-
+
@@ -76,29 +80,23 @@
Media
- + Show all messages +{{missedCount}} -

- Photos - Videos - Documents +

+ Photos + Videos + Documents

-

+

-

+

{{historyPeer.data | userStatus}}

@@ -125,7 +123,9 @@
-
No messages to display
+
+ No messages here yet... +
@@ -189,24 +189,21 @@
Drop photos here to send
-
-
- - -
- -
- - -
- - -
- -
- - +
+ +
+ +
+ + +
+ +
+ +
+ +