Added some animations

app/js/app.js

@@ -12,7 +12,7 @@ angular.module('myApp', [
   'ngRoute',
   'ngSanitize',
   'ngTouch',
-  'ngAnimate',
+  // 'ngAnimate',
   'ui.bootstrap',
   'mediaPlayer',
   'izhukov.utils',

app/js/controllers.js

@@ -1297,14 +1297,14 @@ angular.module('myApp.controllers', ['myApp.i18n'])
         return;
       }
       lessPending = false;
-      lessActive = true;
+      $scope.state.lessActive = lessActive = true;
 
       var curJump = jump,
           curLessJump = ++lessJump,
           limit = 0,
           backLimit = 20;
       AppMessagesManager.getHistory($scope.curDialog.peerID, minID, limit, backLimit).then(function (historyResult) {
-        lessActive = false;
+        $scope.state.lessActive = lessActive = false;
         if (curJump != jump || curLessJump != lessJump) return;
 
         var i, id;
@@ -1345,7 +1345,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
         return;
       }
       morePending = false;
-      moreActive = true;
+      $scope.state.moreActive = moreActive = true;
 
       var curJump = jump,
           curMoreJump = ++moreJump,
@@ -1356,7 +1356,7 @@ angular.module('myApp.controllers', ['myApp.i18n'])
         : AppMessagesManager.getHistory($scope.curDialog.peerID, maxID, limit);
 
       getMessagesPromise.then(function (historyResult) {
-        moreActive = false;
+        $scope.state.moreActive = moreActive = false;
         if (curJump != jump || curMoreJump != moreJump) return;
 
         angular.forEach(historyResult.history, function (id) {
@@ -1403,9 +1403,9 @@ angular.module('myApp.controllers', ['myApp.i18n'])
         limit = 10;
       }
 
-      moreActive = false;
+      $scope.state.moreActive = moreActive = false;
       morePending = false;
-      lessActive = false;
+      $scope.state.lessActive = lessActive = false;
       lessPending = false;
 
       var prerenderedLen = peerHistory.messages.length;

app/js/directives.js

@@ -1999,7 +1999,7 @@ angular.module('myApp.directives', ['myApp.filters'])
       $scope.isActive = false;
 
       // Demo
-      // $scope.document.progress = {enabled: true, percent: 30};
+      $scope.document.progress = {enabled: true, percent: 30};
       // $timeout(function () {
       //   $scope.document.progress.percent = 60;
       // }, 3000);
@@ -3256,13 +3256,13 @@ angular.module('myApp.directives', ['myApp.filters'])
     var html =
 '<svg class="progress-arc" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">\
   <defs>\
-    <linearGradient id="grad-intermediate">\
+    <linearGradient id="grad_intermediate%id%" x1="0%" y1="0%" x2="100%" y2="0%">\
-      <stop offset="60%" class="stop0" />\
+      <stop offset="0%" class="stop0" />\
       <stop offset="60%" class="stop60" />\
-      <stop offset="100%" class="stop100"/>\
+      <stop offset="100%"  class="stop100"/>\
     </linearGradient>\
   </defs>\
-  <circle class="progress-arc-bar" fill="transparent" stroke-dashoffset="0"></circle>\
+  <circle class="progress-arc-bar"></circle>\
 </svg>';
 
     function updateProgress (bar, progress, fullLen) {
@@ -3272,40 +3272,43 @@ angular.module('myApp.directives', ['myApp.filters'])
       bar.css({strokeDasharray: (progress * fullLen) + ', ' + ((1 - progress) * fullLen)});
     }
 
+    var num = 0;
+
     return {
       scope: {
         progress: '=myArcProgress'
       },
       link: function  ($scope, element, attrs) {
-        element
+        var intermediate = !attrs.myArcProgress;
-          .html(html)
+        var width = attrs.width || element.width() || 40;
-          .addClass('progress-arc-wrap');
+        var stroke = attrs.stroke || (width / 2 * 0.14);
-
+        var center = width / 2;
-        var intermediate = attrs.intermediate && $scope.$eval(attrs.intermediate);
+        var radius = center - stroke;
-
-        if (intermediate) {
-          element.addClass('progress-arc-intermediate');
-        }
 
-        var svgEl = element[0].firstChild;
+        // Doesn't work without unique id for every gradient
-        var bar = $('.progress-arc-bar', element);
+        var curNum = ++num;
 
-        var width = attrs.width || 40;
+        element
-        var radius = width / 2 * 0.86;
+          .html(html.replace('%id%', curNum))
-        var stroke = width / 2 * 0.14;
+          .addClass('progress-arc-wrap')
-        var center = width / 2;
+          .addClass(intermediate ? 'progress-arc-intermediate' : 'progress-arc-percent')
+          .css({width: width, height: width});
 
-        $(svgEl).attr('width', width);
+        $(element[0].firstChild)
-        $(svgEl).attr('height', width);
+          .attr('width', width)
+          .attr('height', width);
 
-        bar.attr('cx', center);
+        var bar = $('.progress-arc-bar', element);
-        bar.attr('cy', center);
+        bar
-        bar.attr('r', radius);
+          .attr('cx', center)
-        bar.css({strokeWidth: stroke});
+          .attr('cy', center)
+          .attr('r', radius)
+          .css({strokeWidth: stroke});
 
         var fullLen = 2 * Math.PI * radius;
         if (intermediate) {
           updateProgress(bar, 0.3, fullLen);
+          bar.css({stroke: 'url(#grad_intermediate' + curNum + ')'});
         } else {
           $scope.$watch('progress', function (newProgress) {
             updateProgress(bar, newProgress / 100.0, fullLen);

app/js/messages_manager.js

@@ -181,7 +181,10 @@ angular.module('myApp.services')
     }
 
     NotificationsManager.savePeerSettings(peerID, dialog.notify_settings);
-    ApiUpdatesManager.addChannelState(channelID, dialog.pts);
+
+    if (dialog.pts) {
+      ApiUpdatesManager.addChannelState(channelID, dialog.pts);
+    }
   }
 
   function getTopMessages (limit) {

app/less/app.less

@@ -423,37 +423,40 @@ a {
 .progress-arc .progress-arc-bar {
   stroke-dashoffset: 0;
   transform-origin: center center;
-  transition: stroke-dasharray 500ms linear;
+  fill: transparent;
 
-  -webkit-animation:  infinite_rotation 2s linear infinite;
+  .progress-arc-intermediate & {
-  -moz-animation:     infinite_rotation 2s linear infinite;
+    stroke: #68a4d1;
-  -ms-animation:      infinite_rotation 2s linear infinite;
+
-  animation:          infinite_rotation 2s linear infinite;
+    -webkit-animation:  infinite_rotation 0.8s linear infinite;
+    -moz-animation:     infinite_rotation 0.8s linear infinite;
+    -ms-animation:      infinite_rotation 0.8s linear infinite;
+    animation:          infinite_rotation 0.8s linear infinite;
+  }
 
-  stroke: #FFF;
+  .progress-arc-percent & {
-  stroke: rgba(255,255,255,0.95);
+    stroke: #FFF;
+    stroke: rgba(255,255,255,0.95);
 
-  .progress-arc-intermediate & {
+    transition: stroke-dasharray 500ms linear;
-    stroke: url(#grad-intermediate);
+
+    -webkit-animation:  infinite_rotation 2s linear infinite;
+    -moz-animation:     infinite_rotation 2s linear infinite;
+    -ms-animation:      infinite_rotation 2s linear infinite;
+    animation:          infinite_rotation 2s linear infinite;
   }
 }
 .stop0 {
   stop-opacity: 1.0;
-  // .progress-arc-intermediate-blue & {
+  stop-color: #68a4d1;
-    stop-color: #68a4d1;
-  // }
 }
 .stop60 {
   stop-opacity: 1.0;
-  // .progress-arc-intermediate-blue & {
+  stop-color: #68a4d1;
-    stop-color: #68a4d1;
-  // }
 }
 .stop100 {
   stop-opacity: 0.0;
-  // .progress-arc-intermediate-blue & {
+  stop-color: #68a4d1;
-    stop-color: #68a4d1;
-  // }
 }
 
 /* Infinite rotation */
@@ -1412,7 +1415,8 @@ a.im_dialog_selected {
 }
 
 .im_history {
-  padding: 20px 0 0 0;
+  // padding: 20px 0 0 0;
+  padding: 0;
   position: relative;
 }
 .im_message_unread_split {
@@ -2265,6 +2269,37 @@ a.im_message_fwd_photo {
     display: none;
   }
 }
+.im_history_loading {
+  width: 60px;
+  margin: 0 auto;
+  visibility: hidden;
+
+  &.vertical-aligned {
+    visibility: visible;
+  }
+}
+
+.im_history_loading_more {
+  display: block;
+  width: 26px;
+  margin: 0 auto;
+  padding: 20px 0 0;
+  visibility: hidden;
+
+  &.im_history_loading_more_active {
+    visibility: visible;
+  }
+}
+.im_history_loading_less {
+  display: block;
+  width: 26px;
+  margin: 0 auto;
+  visibility: hidden;
+
+  &.im_history_loading_less_active {
+    visibility: visible;
+  }
+}
 
 .im_send_panel_wrap {
   margin: 0 auto;

app/less/desktop.less

@@ -748,7 +748,6 @@ a.footer_link.active:active {
     line-height: 18px;
     width: 100%;
     height: 39px;
-    padding: 13px 0 8px;
     overflow: hidden;
     -webkit-user-select: none;
   }
@@ -758,7 +757,7 @@ a.footer_link.active:active {
     color: #999;
     max-width: 556px;
     margin: 0 auto;
-    padding: 0 81px 0 85px;
+    padding: 13px 81px 8px 85px;
 
     a.im_history_typing_author {
       color: #999;
@@ -767,6 +766,10 @@ a.footer_link.active:active {
   }
 }
 
+.im_history_loading_less {
+  margin-top: 5px;
+}
+
 /* Contacts modal */
 .contacts_modal {
   &_window {

app/partials/desktop/im.html

@@ -90,8 +90,8 @@
         <div ng-switch-default class="im_history_not_selected" my-vertical-position="0.35" padding="true" my-i18n="im_select_a_chat"></div>
       </div>
 
-      <div ng-show="!state.notSelected &amp;&amp; !state.loaded" class="im_history_not_selected" my-vertical-position="0.35" padding="true">
+      <div ng-show="!state.notSelected &amp;&amp; !state.loaded" class="im_history_loading" my-vertical-position="0.35" padding="true">
-        <my-i18n msgid="im_loading_history"></my-i18n><span my-loading-dots></span>
+        <div my-arc-progress stroke="5" width="60"></div>
       </div>
 
       <div ng-show="state.loaded">
@@ -103,14 +103,18 @@
 
               <div class="im_history_scrollable">
                   <div class="im_history" ng-class="{im_history_selectable: !historyState.botActions, im_history_select_active: 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">
+                    <div ng-if="state.empty" ng-switch="state.mayBeHasMore">
-                        <my-i18n msgid="im_loading_history"></my-i18n><span my-loading-dots></span>
+                      <div ng-switch-when="true" class="im_history_loading" my-vertical-position="0.25" padding="true">
-                      </span>
+                        <div my-arc-progress stroke="5" width="60"></div>
-                      <span ng-switch-default my-i18n="im_no_messages"></span>
+                      </div>
+                      <div ng-switch-default class="im_history_empty" my-vertical-position="0.25" padding="true" my-i18n="im_no_messages"></div>
                     </div>
 
                     <div class="im_history_messages" ng-class="{im_history_messages_group: historyPeer.id < 0}">
+                      <div class="im_history_loading_more" ng-if="!state.empty" ng-class="{im_history_loading_more_active: state.moreActive}">
+                        <div my-arc-progress stroke="3" width="26"></div>
+                      </div>
                       <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>
@@ -118,9 +122,12 @@
 
                   </div>
 
-                  <div class="im_history_typing_wrap">
+                  <div class="im_history_typing_wrap" ng-switch="historyState.skipped">
 
-                    <div class="im_history_typing" ng-show="historyState.typing.length > 0 &amp;&amp; !historyFilter.mediaType &amp;&amp; !state.empty" ng-switch="historyState.typing.length" my-i18n>
+                    <div ng-switch-when="true" class="im_history_loading_less" ng-class="{im_history_loading_less_active: state.lessActive}">
+                      <div my-arc-progress stroke="3" width="26"></div>
+                    </div>
+                    <div ng-switch-default class="im_history_typing" ng-show="historyState.typing.length > 0 &amp;&amp; !historyFilter.mediaType &amp;&amp; !state.empty" ng-switch="historyState.typing.length" my-i18n>
                       <span ng-switch-when="1" my-i18n-format="im_one_typing"></span>
                       <span ng-switch-when="2" my-i18n-format="im_two_typing"></span>
                       <span ng-switch-default my-i18n-format="im_many_typing"></span>