Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

✌️

Browse source
This commit is contained in:
syuilo 2020-02-14 23:55:13 +09:00
parent a2ce072ae7
commit cddfc55110
2 changed files with 21 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,11 @@
<template> <template>
<svg class="mk-analog-clock" viewBox="0 0 10 10" preserveAspectRatio="none"> <svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
<circle v-for="angle, i in graduations" <circle v-for="(angle, i) in graduations"
:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))" :cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))" :cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
:r="i % 5 == 0 ? 0.125 : 0.05" :r="i % 5 == 0 ? 0.125 : 0.05"
:fill="i % 5 == 0 ? majorGraduationColor : minorGraduationColor"/> :fill="i % 5 == 0 ? majorGraduationColor : minorGraduationColor"
:key="i"/>
<line <line
:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))" :x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
@ -38,10 +39,6 @@ import * as tinycolor from 'tinycolor2';
export default Vue.extend({ export default Vue.extend({
props: { props: {
dark: {
type: Boolean,
default: false
},
smooth: { smooth: {
type: Boolean, type: Boolean,
default: false default: false
@ -63,6 +60,10 @@ export default Vue.extend({
}, },
computed: { computed: {
dark(): boolean {
return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--bg')).isDark();
},
majorGraduationColor(): string { majorGraduationColor(): string {
return this.dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)'; return this.dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
}, },
@ -74,14 +75,14 @@ export default Vue.extend({
return this.dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)'; return this.dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)';
}, },
mHandColor(): string { mHandColor(): string {
return this.dark ? '#fff' : '#777'; return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--fg')).toHexString();
}, },
hHandColor(): string { hHandColor(): string {
return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--primary')).toHexString(); return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent')).toHexString();
}, },
ms(): number { ms(): number {
return this.now.getMilliseconds() * this.smooth; return this.now.getMilliseconds() * (this.smooth ? 1 : 0);
}, },
s(): number { s(): number {
return this.now.getSeconds(); return this.now.getSeconds();
@ -137,7 +138,7 @@ export default Vue.extend({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.mk-analog-clock { .mbcofsoe {
display: block; display: block;
} }
</style> </style>

16
src/client/widgets/clock.vue
View file

@ -1,8 +1,8 @@
<template> <template>
<div class="mkw-clock"> <div>
<mk-container :naked="props.style % 2 === 0" :show-header="false"> <mk-container :naked="props.style % 2 === 0" :show-header="false">
<div class="mkw-analog-clock--body"> <div class="vubelbmv">
<mk-analog-clock :dark="$store.state.device.darkmode" :smooth="props.style < 2"/> <mk-analog-clock class="clock" :smooth="props.style < 2"/>
</div> </div>
</mk-container> </mk-container>
</div> </div>
@ -10,7 +10,6 @@
<script lang="ts"> <script lang="ts">
import define from './define'; import define from './define';
import MkContainer from '../components/ui/container.vue'; import MkContainer from '../components/ui/container.vue';
import MkAnalogClock from '../components/analog-clock.vue'; import MkAnalogClock from '../components/analog-clock.vue';
@ -34,9 +33,12 @@ export default define({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.mkw-analog-clock { .vubelbmv {
.mkw-analog-clock--body { padding: 8px;
padding: 8px;
> .clock {
height: 150px;
margin: auto;
} }
} }
</style> </style>