Improved animations

app/js/app.js

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

app/js/controllers.js

@@ -1548,13 +1548,18 @@ angular.module('myApp.controllers', ['myApp.i18n'])
 
         var target = $event.target;
         while (target) {
-          if (target.className.indexOf('im_message_outer_wrap') != -1) {
+          if (target instanceof SVGElement) {
+            target = target.parentNode;
+            continue;
+          }
+          if (target.className && target.className.indexOf('im_message_outer_wrap') != -1) {
             if (Config.Mobile) {
               return false;
             }
             break;
           }
           if (Config.Mobile &&
+              target.className &&
               target.className.indexOf('im_message_body') != -1) {
             break;
           }

app/js/directives.js

@@ -1996,6 +1996,8 @@ angular.module('myApp.directives', ['myApp.filters'])
 
       var downloadPromise = false;
 
+      $scope.isActive = false;
+
       // Demo
       // $scope.document.progress = {enabled: true, percent: 30};
       // $timeout(function () {
@@ -2005,8 +2007,6 @@ angular.module('myApp.directives', ['myApp.filters'])
       //   $scope.document.progress.percent = 100;
       // }, 10000);
 
-      $scope.isActive = false;
-
       $scope.toggle = function (e) {
         if (e && checkClick(e, true)) {
           AppDocsManager.saveDocFile($scope.document.id);
@@ -2017,6 +2017,16 @@ angular.module('myApp.directives', ['myApp.filters'])
           onContentLoaded(function () {
             $scope.isActive = !$scope.isActive;
             $scope.$emit('ui_height');
+
+            var video = $('video', element)[0];
+            if (video) {
+              if (!$scope.isActive) {
+                video.pause();
+                video.currentTime = 0;
+              } else {
+                video.play();
+              }
+            }
           })
           return;
         }
@@ -2030,8 +2040,9 @@ angular.module('myApp.directives', ['myApp.filters'])
         downloadPromise = AppDocsManager.downloadDoc($scope.document.id);
 
         downloadPromise.then(function () {
+          $timeout(function () {
             $scope.isActive = true;
-          $scope.$emit('ui_height');
+          }, 200);
         })
       }
 
@@ -3242,7 +3253,25 @@ angular.module('myApp.directives', ['myApp.filters'])
   })
 
   .directive('myArcProgress', function () {
-    var html = '<svg class="progress-arc" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="progress-arc-circle" fill="transparent" stroke-dashoffset="0"></circle><circle class="progress-arc-bar" fill="transparent" stroke-dashoffset="0"></circle></svg>';
+    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" />\
+      <stop offset="60%" class="stop60" />\
+      <stop offset="100%" class="stop100"/>\
+    </linearGradient>\
+  </defs>\
+  <circle class="progress-arc-bar" fill="transparent" stroke-dashoffset="0"></circle>\
+</svg>';
+
+    function updateProgress (bar, progress, fullLen) {
+      progress = Math.max(0.0, Math.min(progress, 1.0));
+      var minProgress = 0.2;
+      progress = minProgress + (1 - minProgress) * progress;
+      bar.css({strokeDasharray: (progress * fullLen) + ', ' + ((1 - progress) * fullLen)});
+    }
+
     return {
       scope: {
         progress: '=myArcProgress'
@@ -3252,8 +3281,13 @@ angular.module('myApp.directives', ['myApp.filters'])
           .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 circle = $('.progress-arc-circle', element);
         var bar = $('.progress-arc-bar', element);
 
         var width = attrs.width || 40;
@@ -3263,10 +3297,6 @@ angular.module('myApp.directives', ['myApp.filters'])
 
         $(svgEl).attr('width', width);
         $(svgEl).attr('height', width);
-        circle.attr('cx', center);
-        circle.attr('cy', center);
-        circle.attr('r', radius);
-        circle.css({strokeWidth: stroke});
 
         bar.attr('cx', center);
         bar.attr('cy', center);
@@ -3274,12 +3304,13 @@ angular.module('myApp.directives', ['myApp.filters'])
         bar.css({strokeWidth: stroke});
 
         var fullLen = 2 * Math.PI * radius;
+        if (intermediate) {
+          updateProgress(bar, 0.3, fullLen);
+        } else {
           $scope.$watch('progress', function (newProgress) {
-          var progress = newProgress / 100.0;
+            updateProgress(bar, newProgress / 100.0, fullLen);
-          progress = Math.max(0.0, Math.min(progress, 1.0));
-          bar.css({strokeDasharray: (progress * fullLen) + ', ' + ((1 - progress) * fullLen)});
           });
-
+        }
       }
     }
   })

app/less/app.less

@@ -420,14 +420,8 @@ a {
   display: block;
   border-radius: 100%;
 }
-.progress-arc circle {
-  stroke-dashoffset: 0;
-  stroke: rgba(0,0,0,0.3);
-  stroke-width: 3px;
-}
 .progress-arc .progress-arc-bar {
-  stroke: #FFF;
+  stroke-dashoffset: 0;
-  stroke: rgba(255,255,255,0.95);
   transform-origin: center center;
   transition: stroke-dasharray 500ms linear;
 
@@ -435,6 +429,31 @@ a {
   -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);
+
+  .progress-arc-intermediate & {
+    stroke: url(#grad-intermediate);
+  }
+}
+.stop0 {
+  stop-opacity: 1.0;
+  // .progress-arc-intermediate-blue & {
+    stop-color: #68a4d1;
+  // }
+}
+.stop60 {
+  stop-opacity: 1.0;
+  // .progress-arc-intermediate-blue & {
+    stop-color: #68a4d1;
+  // }
+}
+.stop100 {
+  stop-opacity: 0.0;
+  // .progress-arc-intermediate-blue & {
+    stop-color: #68a4d1;
+  // }
 }
 
 /* Infinite rotation */
@@ -3556,8 +3575,10 @@ h5 {
 /* Gif documents */
 .img_gif_image_wrap {
   position: relative;
+  overflow: hidden;
 }
 .img_gif_meta {
+  background: rgba(0,0,0,0.3);
   width: 40px;
   height: 40px;
   line-height: 0;
@@ -3576,61 +3597,58 @@ h5 {
   color: #FFF;
   display: block;
   line-height: 40px;
-  font-size: 15px;
+  font-size: 13px;
-  background: rgba(0,0,0,0.3);
   text-align: center;
 }
+.icon-cancel {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-left: -9px;
+  margin-top: -1px;
+
+  .icon-bar {
+    display: block;
+    width: 18px;
+    height: 2px;
+    background: #FFF;
+    transform-origin: 50% 50%;
+
+    &:first-child {
+      .transform(rotate(-45deg));
+    }
+    &:last-child {
+      .transform(translate3d(0,-2px,0) rotate(45deg));
+    }
+  }
+}
 
 .img_gif_thumb {
-  -webkit-filter: blur(3px);
+  -webkit-filter: blur(2px);
-  -moz-filter: blur(3px);
+  -moz-filter: blur(2px);
-  -o-filter: blur(3px);
+  -o-filter: blur(2px);
-  -ms-filter: blur(3px);
+  -ms-filter: blur(2px);
-  filter: blur(3px);
+  filter: blur(2px);
   filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
-  margin: -1px;
+  transform-origin: center center;
-  padding: 1px;
+  -webkit-transform-origin: center center;
+  -webkit-transform: scale(1.02, 1.02);
+  transform: scale(1.02, 1.02);
+
   max-width: 100%;
   height: auto;
 }
-.img_gif_image {
+
-  max-width: 100%;
+.img_gif_meta_contents {
+  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s;
 }
-.img_gif_info_wrap {
+.img_gif_meta_contents.ng-leave.ng-leave-active,
-  color: #fff;
+.img_gif_meta_contents.ng-enter {
-  font-size: 10px;
+  opacity: 0;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 4px;
 }
-// .img_gif_label,
+.img_gif_meta_contents.ng-leave,
-// .img_gif_size {
+.img_gif_meta_contents.ng-enter.ng-enter-active {
-//   padding: 1px 8px;
+  opacity: 1;
-//   background: rgba(0,0,0,0.5);
-//   border-radius: 3px;
-//   overflow: hidden;
-// }
-
-.img_gif_progress_wrap {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-
-  .tg_progress {
-    background: rgba(0,0,0, 0.6);
-    border-color: rgba(0,0,0, 0.6);
-    border-width: 8px;
-    height: 18px;
-    border-radius: 0;
-  }
-
-  .progress-bar {
-    background: #fff;
-    height: 2px;
-  }
 }
 
 .countries_modal_window {

app/partials/desktop/full_gif.html

@@ -3,8 +3,14 @@
   <div class="img_gif_image_wrap">
 
     <div class="img_gif_meta" ng-show="!isActive" ng-switch="document.progress.enabled">
-      <div ng-switch-when="true" my-arc-progress="document.progress.percent"></div>
+      <div ng-switch-when="true" class="img_gif_meta_contents">
-      <div ng-switch-default class="img_gif_label">GIF</div>
+        <i class="icon icon-cancel">
+          <i class="icon icon-bar"></i>
+          <i class="icon icon-bar"></i>
+        </i>
+        <div my-arc-progress="document.progress.percent"></div>
+      </div>
+      <div ng-switch-default class="img_gif_label noselect" class="img_gif_meta_contents">GIF</div>
     </div>
 
     <div ng-if="document.url" ng-show="document.downloaded &amp;&amp; isActive" ng-switch="document.mime_type == 'video/mp4'">