diff --git a/src/client/components/analog-clock.vue b/src/client/components/analog-clock.vue index 8aa51898bc..32b7ebb8e3 100644 --- a/src/client/components/analog-clock.vue +++ b/src/client/components/analog-clock.vue @@ -5,7 +5,8 @@ :cy="5 - (Math.cos(angle) * (5 - graduationsPadding))" :r="i % 5 == 0 ? 0.125 : 0.05" :fill="i % 5 == 0 ? majorGraduationColor : minorGraduationColor" - :key="i"/> + :key="i" + /> <line :x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))" @@ -13,7 +14,8 @@ :x2="5 + (Math.sin(sAngle) * ((sHandLengthRatio * 5) - handsPadding))" :y2="5 - (Math.cos(sAngle) * ((sHandLengthRatio * 5) - handsPadding))" :stroke="sHandColor" - stroke-width="0.05"/> + :stroke-width="thickness / 2" + /> <line :x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))" @@ -21,7 +23,8 @@ :x2="5 + (Math.sin(mAngle) * ((mHandLengthRatio * 5) - handsPadding))" :y2="5 - (Math.cos(mAngle) * ((mHandLengthRatio * 5) - handsPadding))" :stroke="mHandColor" - stroke-width="0.1"/> + :stroke-width="thickness" + /> <line :x1="5 - (Math.sin(hAngle) * (hHandLengthRatio * handsTailLength))" @@ -29,16 +32,23 @@ :x2="5 + (Math.sin(hAngle) * ((hHandLengthRatio * 5) - handsPadding))" :y2="5 - (Math.cos(hAngle) * ((hHandLengthRatio * 5) - handsPadding))" :stroke="hHandColor" - stroke-width="0.1"/> + :stroke-width="thickness" + /> </svg> </template> <script lang="ts"> import { defineComponent } from 'vue'; import * as tinycolor from 'tinycolor2'; -import * as os from '@client/os'; export default defineComponent({ + props: { + thickness: { + type: Number, + default: 0.1 + } + }, + data() { return { now: new Date(), diff --git a/src/client/widgets/clock.vue b/src/client/widgets/clock.vue index e0689a294f..d960c3809a 100644 --- a/src/client/widgets/clock.vue +++ b/src/client/widgets/clock.vue @@ -1,7 +1,7 @@ <template> <MkContainer :naked="props.transparent" :show-header="false"> <div class="vubelbmv"> - <MkAnalogClock class="clock"/> + <MkAnalogClock class="clock" :thickness="props.thickness"/> </div> </MkContainer> </template> @@ -20,6 +20,17 @@ const widget = define({ type: 'boolean', default: false, }, + thickness: { + type: 'radio', + default: 0.1, + options: [{ + value: 0.1, label: 'thin' + }, { + value: 0.2, label: 'medium' + }, { + value: 0.3, label: 'thick' + }] + } }) });