Browse Source

Improved animations

master
Igor Zhukov 9 years ago
parent
commit
736860a5b2
  1. 1
      app/js/app.js
  2. 7
      app/js/controllers.js
  3. 57
      app/js/directives.js
  4. 120
      app/less/app.less
  5. 10
      app/partials/desktop/full_gif.html

1
app/js/app.js

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

7
app/js/controllers.js

@ -1548,13 +1548,18 @@ angular.module('myApp.controllers', ['myApp.i18n']) @@ -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;
}

57
app/js/directives.js

@ -1996,6 +1996,8 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -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']) @@ -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']) @@ -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']) @@ -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']) @@ -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']) @@ -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']) @@ -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']) @@ -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);
});
}
}
}
})

120
app/less/app.less

@ -420,14 +420,8 @@ a { @@ -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 { @@ -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 { @@ -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 { @@ -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;
.img_gif_thumb {
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
margin: -1px;
padding: 1px;
max-width: 100%;
height: auto;
.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_image {
max-width: 100%;
}
.img_gif_info_wrap {
color: #fff;
font-size: 10px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 4px;
}
// .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;
.img_gif_thumb {
-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');
transform-origin: center center;
-webkit-transform-origin: center center;
-webkit-transform: scale(1.02, 1.02);
transform: scale(1.02, 1.02);
.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;
max-width: 100%;
height: auto;
}
.progress-bar {
background: #fff;
height: 2px;
.img_gif_meta_contents {
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s;
}
.img_gif_meta_contents.ng-leave.ng-leave-active,
.img_gif_meta_contents.ng-enter {
opacity: 0;
}
.img_gif_meta_contents.ng-leave,
.img_gif_meta_contents.ng-enter.ng-enter-active {
opacity: 1;
}
.countries_modal_window {

10
app/partials/desktop/full_gif.html

@ -3,8 +3,14 @@ @@ -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'">

Loading…
Cancel
Save