m33/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages 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>
<svg class="mk-analog-clock" viewBox="0 0 10 10" preserveAspectRatio="none">
<circle v-for="angle, i in graduations"
<svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
<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"/>
:fill="i % 5 == 0 ? majorGraduationColor : minorGraduationColor"
:key="i"/>
<line
:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
@ -38,10 +39,6 @@ import * as tinycolor from 'tinycolor2';
export default Vue.extend({
props: {
dark: {
type: Boolean,
default: false
},
smooth: {
type: Boolean,
default: false
@ -63,6 +60,10 @@ export default Vue.extend({
},
computed: {
dark(): boolean {
return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--bg')).isDark();
},
majorGraduationColor(): string {
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)';
},
mHandColor(): string {
return this.dark ? '#fff' : '#777';
return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--fg')).toHexString();
},
hHandColor(): string {
return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--primary')).toHexString();
return tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent')).toHexString();
},
ms(): number {
return this.now.getMilliseconds() * this.smooth;
return this.now.getMilliseconds() * (this.smooth ? 1 : 0);
},
s(): number {
return this.now.getSeconds();
@ -137,7 +138,7 @@ export default Vue.extend({
</script>
<style lang="scss" scoped>
.mk-analog-clock {
.mbcofsoe {
display: block;
}
</style>

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

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