Added some animations

2016-01-18 22:56:14 +00:00 · 2016-01-18 22:56:14 +00:00 · c4c67d4d6d
commit c4c67d4d6d
parent 736860a5b2
7 changed files with 117 additions and 66 deletions
--- a/app/js/app.js
+++ b/app/js/app.js
@ -12,7 +12,7 @@ angular.module('myApp', [
  'ngRoute',
  'ngSanitize',
  'ngTouch',
-  'ngAnimate',
+  // 'ngAnimate',
  'ui.bootstrap',
  'mediaPlayer',
  'izhukov.utils',
--- a/app/js/controllers.js
+++ b/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;
--- a/app/js/directives.js
+++ b/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">\
-      <stop offset="60%" class="stop0" />\
+    <linearGradient id="grad_intermediate%id%" x1="0%" y1="0%" x2="100%" y2="0%">\
+      <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
-          .html(html)
-          .addClass('progress-arc-wrap');
-
-        var intermediate = attrs.intermediate && $scope.$eval(attrs.intermediate);
-
-        if (intermediate) {
-          element.addClass('progress-arc-intermediate');
-        }
-
-        var svgEl = element[0].firstChild;
-        var bar = $('.progress-arc-bar', element);
-
-        var width = attrs.width || 40;
-        var radius = width / 2 * 0.86;
-        var stroke = width / 2 * 0.14;
+        var intermediate = !attrs.myArcProgress;
+        var width = attrs.width || element.width() || 40;
+        var stroke = attrs.stroke || (width / 2 * 0.14);
        var center = width / 2;
+        var radius = center - stroke;

-        $(svgEl).attr('width', width);
-        $(svgEl).attr('height', width);
+        // Doesn't work without unique id for every gradient
+        var curNum = ++num;

-        bar.attr('cx', center);
-        bar.attr('cy', center);
-        bar.attr('r', radius);
-        bar.css({strokeWidth: stroke});
+        element
+          .html(html.replace('%id%', curNum))
+          .addClass('progress-arc-wrap')
+          .addClass(intermediate ? 'progress-arc-intermediate' : 'progress-arc-percent')
+          .css({width: width, height: width});
+
+        $(element[0].firstChild)
+          .attr('width', width)
+          .attr('height', width);
+
+        var bar = $('.progress-arc-bar', element);
+        bar
+          .attr('cx', center)
+          .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);
--- a/app/js/messages_manager.js
+++ b/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) {
--- a/app/less/app.less
+++ b/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;
-
-  -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;
-
-  stroke: #FFF;
-  stroke: rgba(255,255,255,0.95);
+  fill: transparent;

  .progress-arc-intermediate & {
-    stroke: url(#grad-intermediate);
+    stroke: #68a4d1;
+
+    -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;
+  }
+
+  .progress-arc-percent & {
+    stroke: #FFF;
+    stroke: rgba(255,255,255,0.95);
+
+    transition: stroke-dasharray 500ms linear;
+
+    -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;
--- a/app/less/desktop.less
+++ b/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 {
--- a/app/partials/desktop/im.html
+++ b/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">
-        <my-i18n msgid="im_loading_history"></my-i18n><span my-loading-dots></span>
+      <div ng-show="!state.notSelected &amp;&amp; !state.loaded" class="im_history_loading" my-vertical-position="0.35" padding="true">
+        <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">
-                        <my-i18n msgid="im_loading_history"></my-i18n><span my-loading-dots></span>
-                      </span>
-                      <span ng-switch-default my-i18n="im_no_messages"></span>
+
+                    <div ng-if="state.empty" ng-switch="state.mayBeHasMore">
+                      <div ng-switch-when="true" class="im_history_loading" my-vertical-position="0.25" padding="true">
+                        <div my-arc-progress stroke="5" width="60"></div>
+                      </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>