open-vault/ui/app/components/radial-progress.js
Matthew Irish d93c92e4f5
UI - guard page redesign (#4779)
* add NavHeader component
* use NavHeader in SplashPage component and application.hbs
* let download button take a block
* add RadialProgress component
* use RadialProgress in ShamirFlow component
* style up the RadialProgress component
* update ember-basic-dropdown, ember-basic-dropdown-hover
* rework operation token generation workflow
* directly depend on ember-maybe-in-element
2018-06-26 16:35:47 -05:00

30 lines
824 B
JavaScript

import Ember from 'ember';
const { computed } = Ember;
export default Ember.Component.extend({
'data-test-radial-progress': true,
tagName: 'svg',
classNames: 'radial-progress',
attributeBindings: ['size:width', 'size:height', 'viewBox'],
progressDecimal: null,
size: 20,
strokeWidth: 1,
viewBox: computed('size', function() {
let s = this.get('size');
return `0 0 ${s} ${s}`;
}),
centerValue: computed('size', function() {
return this.get('size') / 2;
}),
r: computed('size', 'strokeWidth', function() {
return (this.get('size') - this.get('strokeWidth')) / 2;
}),
c: computed('r', function() {
return 2 * Math.PI * this.get('r');
}),
dashArrayOffset: computed('c', 'progressDecimal', function() {
return this.get('c') * (1 - this.get('progressDecimal'));
}),
});