Improved animations

2016-01-18 19:39:24 +00:00 · 2016-01-18 19:39:24 +00:00 · 736860a5b2
commit 736860a5b2
parent 1d38572733
5 changed files with 132 additions and 71 deletions
--- a/app/js/app.js
+++ b/app/js/app.js
@ -12,6 +12,7 @@ angular.module('myApp', [
  'ngRoute',
  'ngSanitize',
  'ngTouch',
+  'ngAnimate',
  'ui.bootstrap',
  'mediaPlayer',
  'izhukov.utils',
--- a/app/js/controllers.js
+++ b/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;
          }
--- a/app/js/directives.js
+++ b/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;
-          progress = Math.max(0.0, Math.min(progress, 1.0));
-          bar.css({strokeDasharray: (progress * fullLen) + ', ' + ((1 - progress) * fullLen)});
+            updateProgress(bar, newProgress / 100.0, fullLen);
          });
-
+        }
      }
    }
  })
--- a/app/less/app.less
+++ b/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: rgba(255,255,255,0.95);
+  stroke-dashoffset: 0;
  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;
-  background: rgba(0,0,0,0.3);
+  font-size: 13px;
  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);
-  -moz-filter: blur(3px);
-  -o-filter: blur(3px);
-  -ms-filter: blur(3px);
-  filter: blur(3px);
+  -webkit-filter: blur(2px);
+  -moz-filter: blur(2px);
+  -o-filter: blur(2px);
+  -ms-filter: blur(2px);
+  filter: blur(2px);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
-  margin: -1px;
-  padding: 1px;
+  transform-origin: center center;
+  -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 {
-  color: #fff;
-  font-size: 10px;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 4px;
+.img_gif_meta_contents.ng-leave.ng-leave-active,
+.img_gif_meta_contents.ng-enter {
+  opacity: 0;
 }
-// .img_gif_label,
-// .img_gif_size {
-//   padding: 1px 8px;
-//   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;
-  }
+.img_gif_meta_contents.ng-leave,
+.img_gif_meta_contents.ng-enter.ng-enter-active {
+  opacity: 1;
 }

 .countries_modal_window {
--- a/app/partials/desktop/full_gif.html
+++ b/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-default class="img_gif_label">GIF</div>
+      <div ng-switch-when="true" class="img_gif_meta_contents">
+        <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'">