graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-27 17:23:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2018-05-30 04:07:23 +09:00
parent 248acaee75
commit fa56a44d85
1 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/client/app/common/views/components/analog-clock.vue
View file

@ -1,12 +1,10 @@
<template>
<svg class="mk-analog-clock" viewBox="0 0 10 10" preserveAspectRatio="none">
<line v-for="angle, i in graduations"
:x1="5 + (Math.sin(angle) * (5 - graduationsPadding))"
:y1="5 - (Math.cos(angle) * (5 - graduationsPadding))"
:x2="5 + (Math.sin(angle) * ((5 - graduationsPadding) - (i % 5 == 0 ? longGraduationLength : shortGraduationLength)))"
:y2="5 - (Math.cos(angle) * ((5 - graduationsPadding) - (i % 5 == 0 ? longGraduationLength : shortGraduationLength)))"
:stroke="i % 5 == 0 ? longGraduationColor : shortGraduationColor"
stroke-width="0.05"/>
<circle v-for="angle, i in graduations"
:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
:r="i % 5 == 0 ? 0.125 : 0.05"
:fill="i % 5 == 0 ? majorGraduationColor : minorGraduationColor"/>
<line
:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
@ -43,14 +41,13 @@ export default Vue.extend({
default: false
}
},
data() {
return {
now: new Date(),
clock: null,
graduationsPadding: 0.5,
longGraduationLength: 0.3,
shortGraduationLength: 0.15,
handsPadding: 1,
handsTailLength: 0.7,
hHandLengthRatio: 0.75,
@ -58,11 +55,12 @@ export default Vue.extend({
sHandLengthRatio: 1
};
},
computed: {
longGraduationColor(): string {
majorGraduationColor(): string {
return this.dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
},
shortGraduationColor(): string {
minorGraduationColor(): string {
return this.dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
},
@ -106,12 +104,15 @@ export default Vue.extend({
return angles;
}
},
mounted() {
this.clock = setInterval(this.tick, 1000);
},
beforeDestroy() {
clearInterval(this.clock);
},
methods: {
tick() {
this.now = new Date();