From 736860a5b2d771b9d5c11500db3a88aaa8ead114 Mon Sep 17 00:00:00 2001 From: Igor Zhukov Date: Mon, 18 Jan 2016 19:39:24 +0000 Subject: [PATCH] Improved animations --- app/js/app.js | 1 + app/js/controllers.js | 7 +- app/js/directives.js | 63 +++++++++++---- app/less/app.less | 122 +++++++++++++++++------------ app/partials/desktop/full_gif.html | 10 ++- 5 files changed, 132 insertions(+), 71 deletions(-) diff --git a/app/js/app.js b/app/js/app.js index ef8a942f..6b27224c 100644 --- 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', diff --git a/app/js/controllers.js b/app/js/controllers.js index 3ac9887e..080aca43 100644 --- 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; } diff --git a/app/js/directives.js b/app/js/directives.js index 55befab0..3defe60c 100755 --- 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 () { - $scope.isActive = true; - $scope.$emit('ui_height'); + $timeout(function () { + $scope.isActive = true; + }, 200); }) } @@ -3242,7 +3253,25 @@ angular.module('myApp.directives', ['myApp.filters']) }) .directive('myArcProgress', function () { - var html = ''; + var html = +'\ + \ + \ + \ + \ + \ + \ + \ + \ +'; + + 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; - $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)}); - }); - + if (intermediate) { + updateProgress(bar, 0.3, fullLen); + } else { + $scope.$watch('progress', function (newProgress) { + updateProgress(bar, newProgress / 100.0, fullLen); + }); + } } } }) diff --git a/app/less/app.less b/app/less/app.less index 96fa4867..474675b3 100644 --- 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 { diff --git a/app/partials/desktop/full_gif.html b/app/partials/desktop/full_gif.html index b857ddc4..cb02be0d 100644 --- a/app/partials/desktop/full_gif.html +++ b/app/partials/desktop/full_gif.html @@ -3,8 +3,14 @@
-
-
GIF
+
+ + + + +
+
+
GIF