mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-26 20:43:08 +02:00
enhance(client): improve analog-clock
This commit is contained in:
parent
786b150ea7
commit
2d8e7b4da7
2 changed files with 21 additions and 3 deletions
|
@ -40,7 +40,7 @@
|
||||||
|
|
||||||
<line
|
<line
|
||||||
class="s"
|
class="s"
|
||||||
:class="{ animate: !disableSAnimate }"
|
:class="{ animate: !disableSAnimate && sAnimation !== 'none', elastic: sAnimation === 'elastic', easeOut: sAnimation === 'easeOut' }"
|
||||||
:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
|
:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
|
||||||
:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
|
:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
|
||||||
:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
|
:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
|
||||||
|
@ -99,6 +99,7 @@ const props = withDefaults(defineProps<{
|
||||||
twentyfour?: boolean;
|
twentyfour?: boolean;
|
||||||
graduations?: 'none' | 'dots' | 'numbers';
|
graduations?: 'none' | 'dots' | 'numbers';
|
||||||
fadeGraduations?: boolean;
|
fadeGraduations?: boolean;
|
||||||
|
sAnimation?: 'none' | 'elastic' | 'easeOut';
|
||||||
}>(), {
|
}>(), {
|
||||||
numbers: false,
|
numbers: false,
|
||||||
thickness: 0.1,
|
thickness: 0.1,
|
||||||
|
@ -106,6 +107,7 @@ const props = withDefaults(defineProps<{
|
||||||
twentyfour: false,
|
twentyfour: false,
|
||||||
graduations: 'dots',
|
graduations: 'dots',
|
||||||
fadeGraduations: true,
|
fadeGraduations: true,
|
||||||
|
sAnimation: 'elastic',
|
||||||
});
|
});
|
||||||
|
|
||||||
const graduationsMajor = computed(() => {
|
const graduationsMajor = computed(() => {
|
||||||
|
@ -161,7 +163,7 @@ function tick() {
|
||||||
disableSAnimate = false;
|
disableSAnimate = false;
|
||||||
}, 100);
|
}, 100);
|
||||||
}, 100);
|
}, 100);
|
||||||
}, 500);
|
}, 700);
|
||||||
} else {
|
} else {
|
||||||
sAngle = Math.PI * s / 30;
|
sAngle = Math.PI * s / 30;
|
||||||
}
|
}
|
||||||
|
@ -211,9 +213,13 @@ onBeforeUnmount(() => {
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
transform-origin: 50% 50%;
|
transform-origin: 50% 50%;
|
||||||
|
|
||||||
&.animate {
|
&.animate.elastic {
|
||||||
transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
|
transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.animate.easeOut {
|
||||||
|
transition: transform .7s cubic-bezier(0,.7,.3,1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
:graduations="widgetProps.graduations"
|
:graduations="widgetProps.graduations"
|
||||||
:fade-graduations="widgetProps.fadeGraduations"
|
:fade-graduations="widgetProps.fadeGraduations"
|
||||||
:twentyfour="widgetProps.twentyFour"
|
:twentyfour="widgetProps.twentyFour"
|
||||||
|
:s-animation="widgetProps.sAnimation"
|
||||||
/>
|
/>
|
||||||
<MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :show-s="false" :offset="tzOffset"/>
|
<MkDigitalClock v-if="widgetProps.label === 'time' || widgetProps.label === 'timeAndTz'" class="_monospace label c time" :show-s="false" :offset="tzOffset"/>
|
||||||
<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div>
|
<div v-if="widgetProps.label === 'tz' || widgetProps.label === 'timeAndTz'" class="_monospace label d offset">{{ tzOffsetLabel }}</div>
|
||||||
|
@ -70,6 +71,17 @@ const widgetPropsDef = {
|
||||||
type: 'boolean' as const,
|
type: 'boolean' as const,
|
||||||
default: true,
|
default: true,
|
||||||
},
|
},
|
||||||
|
sAnimation: {
|
||||||
|
type: 'radio' as const,
|
||||||
|
default: 'elastic',
|
||||||
|
options: [{
|
||||||
|
value: 'none', label: 'None',
|
||||||
|
}, {
|
||||||
|
value: 'elastic', label: 'Elastic',
|
||||||
|
}, {
|
||||||
|
value: 'easeOut', label: 'Ease out',
|
||||||
|
}],
|
||||||
|
},
|
||||||
twentyFour: {
|
twentyFour: {
|
||||||
type: 'boolean' as const,
|
type: 'boolean' as const,
|
||||||
default: false,
|
default: false,
|
||||||
|
|
Loading…
Reference in a new issue