Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make thickness of clock hands configuable

Browse Source
This commit is contained in:
syuilo 2021-07-19 23:31:27 +09:00
parent f142ed91fb
commit 756b8a2a29
2 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/client/components/analog-clock.vue
View File

@ -5,7 +5,8 @@
: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"/> :key="i"
/>
<line <line
:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))" :x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
@ -13,7 +14,8 @@
:x2="5 + (Math.sin(sAngle) * ((sHandLengthRatio * 5) - handsPadding))" :x2="5 + (Math.sin(sAngle) * ((sHandLengthRatio * 5) - handsPadding))"
:y2="5 - (Math.cos(sAngle) * ((sHandLengthRatio * 5) - handsPadding))" :y2="5 - (Math.cos(sAngle) * ((sHandLengthRatio * 5) - handsPadding))"
:stroke="sHandColor" :stroke="sHandColor"
stroke-width="0.05"/> :stroke-width="thickness / 2"
/>
<line <line
:x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))" :x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))"
@ -21,7 +23,8 @@
:x2="5 + (Math.sin(mAngle) * ((mHandLengthRatio * 5) - handsPadding))" :x2="5 + (Math.sin(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
:y2="5 - (Math.cos(mAngle) * ((mHandLengthRatio * 5) - handsPadding))" :y2="5 - (Math.cos(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
:stroke="mHandColor" :stroke="mHandColor"
stroke-width="0.1"/> :stroke-width="thickness"
/>
<line <line
:x1="5 - (Math.sin(hAngle) * (hHandLengthRatio * handsTailLength))" :x1="5 - (Math.sin(hAngle) * (hHandLengthRatio * handsTailLength))"
@ -29,16 +32,23 @@
:x2="5 + (Math.sin(hAngle) * ((hHandLengthRatio * 5) - handsPadding))" :x2="5 + (Math.sin(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
:y2="5 - (Math.cos(hAngle) * ((hHandLengthRatio * 5) - handsPadding))" :y2="5 - (Math.cos(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
:stroke="hHandColor" :stroke="hHandColor"
stroke-width="0.1"/> :stroke-width="thickness"
/>
</svg> </svg>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import * as tinycolor from 'tinycolor2'; import * as tinycolor from 'tinycolor2';
import * as os from '@client/os';
export default defineComponent({ export default defineComponent({
props: {
thickness: {
type: Number,
default: 0.1
}
},
data() { data() {
return { return {
now: new Date(), now: new Date(),

13
src/client/widgets/clock.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<MkContainer :naked="props.transparent" :show-header="false"> <MkContainer :naked="props.transparent" :show-header="false">
<div class="vubelbmv"> <div class="vubelbmv">
<MkAnalogClock class="clock"/> <MkAnalogClock class="clock" :thickness="props.thickness"/>
</div> </div>
</MkContainer> </MkContainer>
</template> </template>
@ -20,6 +20,17 @@ const widget = define({
type: 'boolean', type: 'boolean',
default: false, default: false,
}, },
thickness: {
type: 'radio',
default: 0.1,
options: [{
value: 0.1, label: 'thin'
}, {
value: 0.2, label: 'medium'
}, {
value: 0.3, label: 'thick'
}]
}
}) })
}); });