Improved I'm performance, added vertical position directive, removed modal animation

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 {

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);

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);
+      });
+
+    };
+
+  })

app/partials/im.html

@@ -59,10 +59,14 @@
     </div>
 
     <div class="im_history_col_wrap" ng-controller="AppImHistoryController">
-      <div ng-if="state.notSelected" class="im_history_not_selected">No history to display</div>
-      <div ng-show="!state.notSelected &amp;&amp; !state.loaded" class="im_history_not_selected">Loading history<span my-typing-dots></span></div>
+      <div ng-show="state.notSelected" class="im_history_not_selected" my-vertical-position="0.3">
+        Please select a chat to start messaging
+      </div>
+      <div ng-show="!state.notSelected &amp;&amp; !state.loaded" class="im_history_not_selected" my-vertical-position="0.3">
+        Loading history <span my-typing-dots></span>
+      </div>
 
-      <div ng-if="state.loaded">
+      <div ng-show="state.loaded">
         <div my-history class="im_history_col">
 
           <div class="im_history_panel_wrap">
@@ -76,29 +80,23 @@
                 <div class="dropdown im_history_panel_media_dropdown pull-right">
                   <a class="dropdown-toggle">Media<i class="icon icon-caret"></i></a>
                   <ul class="dropdown-menu">
-                    <li>
-                      <a ng-click="toggleMedia('photos')">Photos</a>
-                    </li>
-                    <li>
-                      <a ng-click="toggleMedia('video')">Videos</a>
-                    </li>
-                    <li>
-                      <a ng-click="toggleMedia('documents')">Documents</a>
-                    </li>
+                    <li><a ng-click="toggleMedia('photos')">Photos</a></li>
+                    <li><a ng-click="toggleMedia('video')">Videos</a></li>
+                    <li><a ng-click="toggleMedia('documents')">Documents</a></li>
                   </ul>
                 </div>
-                <a ng-if="mediaType !== false" class="im_history_panel_return_link pull-right" ng-click="toggleMedia()">
+                <a ng-show="mediaType !== false" class="im_history_panel_return_link pull-right" ng-click="toggleMedia()">
                   Show all messages
                   <strong class="im_history_panel_return_count" ng-show="missedCount > 0">+{{missedCount}}</strong>
                 </a>
 
-                <h4 ng-if="mediaType !== false" ng-switch="mediaType">
-                  <span ng-switch-when="photos"> Photos </span>
-                  <span ng-switch-when="video"> Videos </span>
-                  <span ng-switch-when="documents"> Documents </span>
+                <h4 ng-show="mediaType !== false" ng-switch="mediaType">
+                  <span ng-switch-when="photos">Photos</span>
+                  <span ng-switch-when="video">Videos</span>
+                  <span ng-switch-when="documents">Documents</span>
                 </h4>
 
-                <h4 ng-if="mediaType === false &amp;&amp; historyPeer.id < 0" ng-click="showPeerInfo()">
+                <h4 ng-show="mediaType === false &amp;&amp; historyPeer.id < 0" ng-click="showPeerInfo()">
                   <span ng-bind-html="historyPeer.data.rTitle"></span>
                   <small class="im_chat_users">
                     <ng-pluralize count="historyPeer.data.participants_count"
@@ -107,7 +105,7 @@
                   </small>
                 </h4>
 
-                <h4 ng-if="mediaType === false &amp;&amp; historyPeer.id > 0" ng-click="showPeerInfo()">
+                <h4 ng-show="mediaType === false &amp;&amp; historyPeer.id > 0" ng-click="showPeerInfo()">
                   <span ng-bind-html="historyPeer.data.rFullName"></span>
                   <small class="im_peer_online">{{historyPeer.data | userStatus}}</small>
                 </h4>
@@ -125,7 +123,9 @@
               <div class="im_history_scrollable">
 
                   <div class="im_history" ng-class="{im_history_selectable: selectActions}">
-                    <div class="im_history_empty" ng-show="historyEmpty &amp;&amp; !history.length">No messages to display</div>
+                    <div class="im_history_empty" ng-show="!history.length" my-vertical-position="0.3">
+                      No messages here yet...
+                    </div>
                     <div class="im_history_messages">
                       <div class="im_history_message_wrap" my-message ng-repeat="historyMessage in history"></div>
                     </div>
@@ -189,24 +189,21 @@
                     <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"></textarea>
 
-                    <div class="" style="position: relative;">
-                      <div class="im_media_attach pull-right">
-                        <input type="file" class="im_media_attach_input" size="28" multiple="true" accept="image/*, video/*, audio/*" title="Send media"/>
-                        <i class="icon icon-camera"></i>
-                      </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_media_attach pull-right">
+                      <input type="file" class="im_media_attach_input" size="28" multiple="true" accept="image/*, video/*, audio/*" title="Send media"/>
+                      <i class="icon icon-camera"></i>
+                    </div>
 
-                      <div class="im_emoji_btn pull-right">
-                        <i class="icon icon-emoji"></i>
-                      </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>
 
-                      <button type="submit" class="btn btn-success im_submit">Send</button>
+                    <div class="im_emoji_btn pull-right">
+                      <i class="icon icon-emoji"></i>
                     </div>
+
+                    <button type="submit" class="btn btn-success im_submit">Send</button>
                   </form>
                 </div>