feat(client): improve widget

This commit is contained in:
syuilo 2022-08-04 22:20:00 +09:00
parent b934c738a6
commit bdaa35d11f
5 changed files with 151 additions and 8 deletions

View file

@ -14,6 +14,7 @@ You should also include the user name that made the change.
### Improvements ### Improvements
- Client: Add vi-VN language support - Client: Add vi-VN language support
- Client: Add unix time widget @syuilo
### Bugfixes ### Bugfixes
- Server: リモートユーザーを正しくブロックできるように修正する @xianonn - Server: リモートユーザーを正しくブロックできるように修正する @xianonn

View file

@ -1312,6 +1312,7 @@ _widgets:
activity: "アクティビティ" activity: "アクティビティ"
photos: "フォト" photos: "フォト"
digitalClock: "デジタル時計" digitalClock: "デジタル時計"
unixClock: "UNIX時計"
federation: "連合" federation: "連合"
instanceCloud: "インスタンスクラウド" instanceCloud: "インスタンスクラウド"
postForm: "投稿フォーム" postForm: "投稿フォーム"

View file

@ -1,21 +1,21 @@
<template> <template>
<div class="mkw-digitalClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }"> <div class="mkw-digitalClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
<span> <div class="time">
<span v-text="hh"></span> <span v-text="hh"></span>
<span :style="{ visibility: showColon ? 'visible' : 'hidden' }">:</span> <span class="colon" :class="{ showColon }">:</span>
<span v-text="mm"></span> <span v-text="mm"></span>
<span :style="{ visibility: showColon ? 'visible' : 'hidden' }">:</span> <span class="colon" :class="{ showColon }">:</span>
<span v-text="ss"></span> <span v-text="ss"></span>
<span v-if="widgetProps.showMs" :style="{ visibility: showColon ? 'visible' : 'hidden' }">:</span> <span v-if="widgetProps.showMs" class="colon" :class="{ showColon }">:</span>
<span v-if="widgetProps.showMs" v-text="ms"></span> <span v-if="widgetProps.showMs" v-text="ms"></span>
</span> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onUnmounted, ref, watch } from 'vue'; import { onUnmounted, ref, watch } from 'vue';
import { GetFormResultType } from '@/scripts/form';
import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget'; import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form';
const name = 'digitalClock'; const name = 'digitalClock';
@ -54,14 +54,25 @@ const hh = ref('');
const mm = ref(''); const mm = ref('');
const ss = ref(''); const ss = ref('');
const ms = ref(''); const ms = ref('');
const showColon = ref(true); const showColon = ref(false);
let prevSec: number | null = null;
watch(showColon, (v) => {
if (v) {
window.setTimeout(() => {
showColon.value = false;
}, 30);
}
});
const tick = () => { const tick = () => {
const now = new Date(); const now = new Date();
hh.value = now.getHours().toString().padStart(2, '0'); hh.value = now.getHours().toString().padStart(2, '0');
mm.value = now.getMinutes().toString().padStart(2, '0'); mm.value = now.getMinutes().toString().padStart(2, '0');
ss.value = now.getSeconds().toString().padStart(2, '0'); ss.value = now.getSeconds().toString().padStart(2, '0');
ms.value = Math.floor(now.getMilliseconds() / 10).toString().padStart(2, '0'); ms.value = Math.floor(now.getMilliseconds() / 10).toString().padStart(2, '0');
showColon.value = now.getSeconds() % 2 === 0; if (now.getSeconds() !== prevSec) showColon.value = true;
prevSec = now.getSeconds();
}; };
tick(); tick();
@ -86,5 +97,17 @@ defineExpose<WidgetComponentExpose>({
.mkw-digitalClock { .mkw-digitalClock {
padding: 16px 0; padding: 16px 0;
text-align: center; text-align: center;
> .time {
> .colon {
opacity: 0;
transition: opacity 1s ease;
&.showColon {
opacity: 1;
transition: opacity 0s;
}
}
}
} }
</style> </style>

View file

@ -12,6 +12,7 @@ export default function(app: App) {
app.component('MkwActivity', defineAsyncComponent(() => import('./activity.vue'))); app.component('MkwActivity', defineAsyncComponent(() => import('./activity.vue')));
app.component('MkwPhotos', defineAsyncComponent(() => import('./photos.vue'))); app.component('MkwPhotos', defineAsyncComponent(() => import('./photos.vue')));
app.component('MkwDigitalClock', defineAsyncComponent(() => import('./digital-clock.vue'))); app.component('MkwDigitalClock', defineAsyncComponent(() => import('./digital-clock.vue')));
app.component('MkwUnixClock', defineAsyncComponent(() => import('./unix-clock.vue')));
app.component('MkwFederation', defineAsyncComponent(() => import('./federation.vue'))); app.component('MkwFederation', defineAsyncComponent(() => import('./federation.vue')));
app.component('MkwPostForm', defineAsyncComponent(() => import('./post-form.vue'))); app.component('MkwPostForm', defineAsyncComponent(() => import('./post-form.vue')));
app.component('MkwSlideshow', defineAsyncComponent(() => import('./slideshow.vue'))); app.component('MkwSlideshow', defineAsyncComponent(() => import('./slideshow.vue')));
@ -36,6 +37,7 @@ export const widgets = [
'activity', 'activity',
'photos', 'photos',
'digitalClock', 'digitalClock',
'unixClock',
'federation', 'federation',
'instanceCloud', 'instanceCloud',
'postForm', 'postForm',

View file

@ -0,0 +1,116 @@
<template>
<div class="mkw-unixClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
<div v-if="widgetProps.showLabel" class="label">UNIX time</div>
<div class="time">
<span v-text="ss"></span>
<span v-if="widgetProps.showMs" class="colon" :class="{ showColon }">:</span>
<span v-if="widgetProps.showMs" v-text="ms"></span>
</div>
<div v-if="widgetProps.showLabel" class="label">UTC</div>
</div>
</template>
<script lang="ts" setup>
import { onUnmounted, ref, watch } from 'vue';
import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
import { GetFormResultType } from '@/scripts/form';
const name = 'unixClock';
const widgetPropsDef = {
transparent: {
type: 'boolean' as const,
default: false,
},
fontSize: {
type: 'number' as const,
default: 1.5,
step: 0.1,
},
showMs: {
type: 'boolean' as const,
default: true,
},
showLabel: {
type: 'boolean' as const,
default: true,
},
};
type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
// vueimporttype
//const props = defineProps<WidgetComponentProps<WidgetProps>>();
//const emit = defineEmits<WidgetComponentEmits<WidgetProps>>();
const props = defineProps<{ widget?: Widget<WidgetProps>; }>();
const emit = defineEmits<{ (ev: 'updateProps', props: WidgetProps); }>();
const { widgetProps, configure } = useWidgetPropsManager(name,
widgetPropsDef,
props,
emit,
);
let intervalId;
const ss = ref('');
const ms = ref('');
const showColon = ref(false);
let prevSec: string | null = null;
watch(showColon, (v) => {
if (v) {
window.setTimeout(() => {
showColon.value = false;
}, 30);
}
});
const tick = () => {
const now = new Date();
ss.value = Math.floor(now.getTime() / 1000).toString();
ms.value = Math.floor(now.getTime() % 1000 / 10).toString().padStart(2, '0');
if (ss.value !== prevSec) showColon.value = true;
prevSec = ss.value;
};
tick();
watch(() => widgetProps.showMs, () => {
if (intervalId) window.clearInterval(intervalId);
intervalId = window.setInterval(tick, widgetProps.showMs ? 10 : 1000);
}, { immediate: true });
onUnmounted(() => {
window.clearInterval(intervalId);
});
defineExpose<WidgetComponentExpose>({
name,
configure,
id: props.widget ? props.widget.id : null,
});
</script>
<style lang="scss" scoped>
.mkw-unixClock {
padding: 16px 0;
text-align: center;
> .label {
font-size: 65%;
opacity: 0.7;
}
> .time {
> .colon {
opacity: 0;
transition: opacity 1s ease;
&.showColon {
opacity: 1;
transition: opacity 0s;
}
}
}
}
</style>