Ui improvements

Fixes #177
First attempt on #296
Video modal bugfixes

app/css/app.css

@@ -1298,23 +1298,27 @@ a.im_dialog:hover .im_dialog_date {
 .non_osx .im_message_author {
   font-size: 12px;
 }
-.im_message_grouped .im_message_from_photo,
-.im_message_grouped .im_message_author {
+.im_message_grouped1 .im_message_from_photo,
+.im_message_grouped1 .im_message_author,
+.im_message_grouped2 .im_message_from_photo,
+.im_message_grouped2 .im_message_author {
   display: none;
 }
-.im_message_grouped .im_message_body {
+.im_message_grouped1 .im_message_body,
+.im_message_grouped2 .im_message_body {
   margin-left: 46px;
 }
-.im_message_grouped .im_content_message_select_area {
+.im_message_grouped1 .im_content_message_select_area,
+.im_message_grouped2 .im_content_message_select_area {
   height: 34px;
 }
 .im_history_appending .im_content_message_select_area {
   height: 52px;
 }
-.im_message_grouped .icon-select-tick {
+.im_message_grouped1 .icon-select-tick {
   margin-top: 4px;
 }
-.im_message_grouped .icon-message-status {
+.im_message_grouped1 .icon-message-status {
   margin-top: 5px;
 }
 
@@ -2916,13 +2920,6 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
   }
 }
 
-@media (min-height: 768px) {
-  .user_modal_window .modal-dialog {
-    margin-top: 150px;
-  }
-}
-
-
 @media (max-width: 480px) {
   .login_form_wrap {
     border-radius: 0;
@@ -2976,7 +2973,7 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status {
   }
 }
 
-@media (max-height: 480px) {
+@media (max-height: 600px) {
   .im_page_footer {
     display: none;
   }

app/js/app.js

@@ -12,6 +12,7 @@ window._debugMode = location.search.indexOf('debug=1') > 0;
 window._osX = (navigator.platform || '').toLowerCase().indexOf('mac') != -1 ||
               (navigator.userAgent || '').toLowerCase().indexOf('mac') != -1;
 window._retina = window.devicePixelRatio > 1;
+window._mobile = $(window).height() < 600;
 
 if (!window._osX) {
   $('body').addClass('non_osx');

app/js/controllers.js

@@ -545,14 +545,14 @@ angular.module('myApp.controllers', [])
         curMessage = $scope.history[i];
         if (prevMessage &&
             curMessage.from_id == prevMessage.from_id &&
-            curMessage.date < prevMessage.date + 300 &&
+            !prevMessage.fwd_from_id == !curMessage.fwd_from_id &&
             !prevMessage.action &&
             !curMessage.action &&
-            !prevMessage.fwd_from_id &&
-            !curMessage.fwd_from_id &&
-            curMessage.message && curMessage.message.length < 60) {
+            curMessage.date < prevMessage.date + 900) {
 
-          curMessage.grouped = true;
+
+          var singleLine = curMessage.message && curMessage.message.length < 70 && curMessage.message.indexOf("\n") == -1;
+          curMessage.grouped = !curMessage.fwd_from_id && singleLine ? 1 : 2;
         } else if (prevMessage || !i) {
           delete curMessage.grouped;
         }
@@ -583,7 +583,7 @@ angular.module('myApp.controllers', [])
           $scope.history.unshift(AppMessagesManager.wrapForHistory(id));
         });
 
-        updateHistoryGroups(historyResult.history.length);
+        updateHistoryGroups(historyResult.history.length + 1);
 
         $scope.$broadcast('ui_history_prepend');
       });

app/js/directives.js

@@ -540,10 +540,14 @@ angular.module('myApp.directives', ['myApp.filters'])
         $(richTextarea).on('DOMNodeInserted', onPastedImageEvent);
       }
 
-      $scope.$on('ui_peer_change', focusField);
-      $scope.$on('ui_history_focus', focusField);
-      $scope.$on('ui_history_change', focusField);
+      if (!window._mobile) {
+        $scope.$on('ui_peer_change', focusField);
+        $scope.$on('ui_history_focus', focusField);
+        $scope.$on('ui_history_change', focusField);
+      }
+
       $scope.$on('ui_message_send', focusField);
+
       $scope.$on('ui_peer_draft', updateField);
       $scope.$on('ui_message_before_send', updateValue);
 
@@ -556,7 +560,9 @@ angular.module('myApp.directives', ['myApp.filters'])
         }
       });
 
-      focusField();
+      if (!window._mobile) {
+        focusField();
+      }
 
       function focusField () {
         onContentLoaded(function () {
@@ -679,6 +685,7 @@ angular.module('myApp.directives', ['myApp.filters'])
         if ($scope.thumb && $scope.thumb.width && $scope.thumb.height) {
           element.attr('width', $scope.thumb.width);
           element.attr('height', $scope.thumb.height);
+          $scope.$emit('ui_height');
         }
         // console.log('new loc', newLocation, arguments);
         var counterSaved = ++counter;
@@ -842,6 +849,7 @@ angular.module('myApp.directives', ['myApp.filters'])
         $scope.player.hasQuicktime = hasQt;
         $scope.player.quicktime = false;
         $scope.player.src = $sce.trustAsResourceUrl(url);
+        $scope.$emit('ui_height');
       }, function (e) {
         console.log('Download video failed', e, $scope.video);
         $scope.progress.enabled = false;
@@ -857,6 +865,8 @@ angular.module('myApp.directives', ['myApp.filters'])
         $scope.progress.percent = Math.max(1, Math.floor(100 * progress.done / progress.total));
       });
 
+      $scope.$emit('ui_height');
+
       $scope.$on('$destroy', function () {
         downloadPromise.cancel();
       });
@@ -1010,6 +1020,9 @@ angular.module('myApp.directives', ['myApp.filters'])
   .directive('myFocused', function(){
     return {
       link: function($scope, element, attrs) {
+        if (window._mobile) {
+          return false;
+        }
         setTimeout(function () {
           element[0].focus();
         }, 100);
@@ -1021,6 +1034,9 @@ angular.module('myApp.directives', ['myApp.filters'])
     return {
       link: function($scope, element, attrs) {
         $scope.$on(attrs.myFocusOn, function () {
+          if (window._mobile) {
+            return false;
+          }
           onContentLoaded(function () {
             element[0].focus();
           });

app/js/lib/mtproto.js

@@ -2849,8 +2849,8 @@ factory('MtpApiFileManager', function (MtpApiManager, $q, $window) {
       fileWriteBytes(fileWriter, fromFileEntry).then(function () {
         deferred.resolve(fileWriter);
       }, function (e) {
-        fileWriter.truncate(0);
         deferred.reject(e);
+        fileWriter.truncate(0);
       });
     }, function (e) {
       deferred.reject(e);
@@ -2903,8 +2903,8 @@ factory('MtpApiFileManager', function (MtpApiManager, $q, $window) {
         cacheFileWriter,
         errorHandler = function (error) {
           deferred.reject(error);
-          if (cacheFileWriter) cacheFileWriter.truncate(0);
           errorHandler = angular.noop;
+          if (cacheFileWriter) cacheFileWriter.truncate(0);
         };
 
     requestFS().then(function () {
@@ -2940,8 +2940,8 @@ factory('MtpApiFileManager', function (MtpApiManager, $q, $window) {
         cacheFileWriter,
         errorHandler = function (error) {
           deferred.reject(error);
-          if (cacheFileWriter) cacheFileWriter.truncate(0);
           errorHandler = angular.noop;
+          if (cacheFileWriter) cacheFileWriter.truncate(0);
         },
         doDownload = function () {
           cachedFs.root.getFile(fileName, {create: true}, function(fileEntry) {
@@ -3019,8 +3019,8 @@ factory('MtpApiFileManager', function (MtpApiManager, $q, $window) {
         errorHandler = function (error) {
           // console.error('Dl Error', error);
           deferred.reject(error);
-          if (cacheFileWriter) cacheFileWriter.truncate(0);
           errorHandler = angular.noop;
+          if (cacheFileWriter) cacheFileWriter.truncate(0);
         },
         saveToFileEntry = function (fileEntry) {
           fileEntry.createWriter(function (fileWriter) {

app/partials/message.html

@@ -4,7 +4,7 @@
   </ng-pluralize>
 </div>
 
-<div class="im_message_outer_wrap" ng-class="{im_message_selected: selectedMsgs[historyMessage.id], im_message_grouped: historyMessage.grouped}" ng-click="toggleMessage(historyMessage.id, $event)">
+<div class="im_message_outer_wrap" ng-class="[ selectedMsgs[historyMessage.id] &amp;&amp; 'im_message_selected', historyMessage.grouped &amp;&amp; ('im_message_grouped' + historyMessage.grouped) ]" ng-click="toggleMessage(historyMessage.id, $event)">
 
 
   <div class="im_message_wrap clearfix" bindonce>