Browse Source

Arc-progress

master
Igor Zhukov 9 years ago
parent
commit
bf89e0ea92
  1. 43
      app/js/directives.js
  2. 56
      app/less/app.less
  3. 23
      app/partials/desktop/full_gif.html

43
app/js/directives.js

@ -3232,6 +3232,49 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -3232,6 +3232,49 @@ 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>';
return {
scope: {
progress: '=myArcProgress'
},
link: function ($scope, element, attrs) {
element
.html(html)
.addClass('progress-arc-wrap');
var svgEl = element[0].firstChild;
var circle = $('.progress-arc-circle', element);
var bar = $('.progress-arc-bar', element);
var width = attrs.width || 40;
var radius = width * 0.86;
var stroke = width * 0.14;
var center = width / 2;
$(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);
bar.attr('r', radius);
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)});
});
}
}
})
.directive('myScrollToOn', function () {
return {

56
app/less/app.less

@ -416,6 +416,62 @@ a { @@ -416,6 +416,62 @@ a {
}
}
.progress-arc-wrap {
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;
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;
}
/* Infinite rotation */
@-webkit-keyframes infinite_rotation {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@-moz-keyframes infinite_rotation {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@-ms-keyframes infinite_rotation {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@keyframes infinite_rotation {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.dropdown-menu {
border-radius: 2px;
padding: 0;

23
app/partials/desktop/full_gif.html

@ -2,6 +2,14 @@ @@ -2,6 +2,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_info_wrap">
<div class="img_gif_label pull-left">GIF</div>
<div ng-if="!document.downloaded" class="img_gif_size pull-right" ng-bind="::document.size | formatSize"></div>
</div>
</div>
<div ng-if="document.url" ng-show="document.downloaded &amp;&amp; isActive" ng-switch="document.mime_type == 'video/mp4'">
<video ng-switch-when="true" width="{{document.thumb.width}}" height="{{document.thumb.height}}" loop autoplay class="img_gif_video">
<source ng-src="{{document.url}}" type="video/mp4">
@ -12,19 +20,4 @@ @@ -12,19 +20,4 @@
</div>
<div ng-show="!isActive" ng-switch="document.progress.enabled">
<div ng-switch-when="true" class="img_gif_progress_wrap">
<div class="img_gif_progress progress tg_progress">
<div class="progress-bar progress-bar-success" ng-style="{width: document.progress.percent + '%'}"></div>
</div>
</div>
<div ng-switch-default class="img_gif_info_wrap">
<div class="img_gif_label pull-left">GIF</div>
<div ng-if="!document.downloaded" class="img_gif_size pull-right" ng-bind="::document.size | formatSize"></div>
</div>
</div>
</a>
Loading…
Cancel
Save