From 2a24fc18ca07ba3cd2dd194d14afbbc1ac16e4b6 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Mon, 4 Jul 2022 01:37:47 +0900
Subject: [PATCH] enhance(client): tweak statusbar
---
.../pages/settings/statusbars.statusbar.vue | 28 ++++---
.../client/src/pages/settings/statusbars.vue | 10 +--
packages/client/src/store.ts | 6 +-
.../src/ui/_common_/statusbar-user-list.vue | 2 +
.../client/src/ui/_common_/statusbars.vue | 77 ++++++++++---------
5 files changed, 63 insertions(+), 60 deletions(-)
diff --git a/packages/client/src/pages/settings/statusbars.statusbar.vue b/packages/client/src/pages/settings/statusbars.statusbar.vue
index ad2fa557a..6b03ad46e 100644
--- a/packages/client/src/pages/settings/statusbars.statusbar.vue
+++ b/packages/client/src/pages/settings/statusbars.statusbar.vue
@@ -7,7 +7,7 @@
<option value="userList">User list timeline</option>
</FormSelect>
- <MkInput v-model="statusbar.name" class="_formBlock">
+ <MkInput v-model="statusbar.name" manual-save class="_formBlock">
<template #label>Name</template>
</MkInput>
@@ -15,14 +15,23 @@
<template #label>Black</template>
</MkSwitch>
+ <FormRadios v-model="statusbar.size" class="_formBlock">
+ <template #label>Size</template>
+ <option value="verySmall">{{ i18n.ts.small }}+</option>
+ <option value="small">{{ i18n.ts.small }}</option>
+ <option value="medium">{{ i18n.ts.medium }}</option>
+ <option value="large">{{ i18n.ts.large }}</option>
+ <option value="veryLarge">{{ i18n.ts.large }}+</option>
+ </FormRadios>
+
<template v-if="statusbar.type === 'rss'">
- <MkInput v-model="statusbar.props.url" class="_formBlock" type="url">
+ <MkInput v-model="statusbar.props.url" manual-save class="_formBlock" type="url">
<template #label>URL</template>
</MkInput>
- <MkInput v-model="statusbar.props.refreshIntervalSec" class="_formBlock" type="number">
+ <MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
<template #label>Refresh interval</template>
</MkInput>
- <MkInput v-model="statusbar.props.marqueeDuration" class="_formBlock" type="number">
+ <MkInput v-model="statusbar.props.marqueeDuration" manual-save class="_formBlock" type="number">
<template #label>Duration</template>
</MkInput>
<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
@@ -30,10 +39,10 @@
</MkSwitch>
</template>
<template v-else-if="statusbar.type === 'federation'">
- <MkInput v-model="statusbar.props.refreshIntervalSec" class="_formBlock" type="number">
+ <MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
<template #label>Refresh interval</template>
</MkInput>
- <MkInput v-model="statusbar.props.marqueeDuration" class="_formBlock" type="number">
+ <MkInput v-model="statusbar.props.marqueeDuration" manual-save class="_formBlock" type="number">
<template #label>Duration</template>
</MkInput>
<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
@@ -48,10 +57,10 @@
<template #label>{{ i18n.ts.userList }}</template>
<option v-for="list in userLists" :value="list.id">{{ list.name }}</option>
</FormSelect>
- <MkInput v-model="statusbar.props.refreshIntervalSec" class="_formBlock" type="number">
+ <MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
<template #label>Refresh interval</template>
</MkInput>
- <MkInput v-model="statusbar.props.marqueeDuration" class="_formBlock" type="number">
+ <MkInput v-model="statusbar.props.marqueeDuration" manual-save class="_formBlock" type="number">
<template #label>Duration</template>
</MkInput>
<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
@@ -60,7 +69,6 @@
</template>
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
- <FormButton @click="save">save</FormButton>
<FormButton danger @click="del">Delete</FormButton>
</div>
</div>
@@ -109,6 +117,8 @@ watch(() => statusbar.type, () => {
}
});
+watch(statusbar, save);
+
async function save() {
const i = defaultStore.state.statusbars.findIndex(x => x.id === props._id);
const statusbars = JSON.parse(JSON.stringify(defaultStore.state.statusbars));
diff --git a/packages/client/src/pages/settings/statusbars.vue b/packages/client/src/pages/settings/statusbars.vue
index 18de11975..bcfff1652 100644
--- a/packages/client/src/pages/settings/statusbars.vue
+++ b/packages/client/src/pages/settings/statusbars.vue
@@ -6,14 +6,6 @@
<XStatusbar :_id="x.id" :user-lists="userLists"/>
</FormFolder>
<FormButton @click="add">add</FormButton>
- <FormRadios v-model="statusbarSize" class="_formBlock">
- <template #label>Size</template>
- <option value="verySmall">{{ i18n.ts.small }}+</option>
- <option value="small">{{ i18n.ts.small }}</option>
- <option value="medium">{{ i18n.ts.medium }}</option>
- <option value="large">{{ i18n.ts.large }}</option>
- <option value="veryLarge">{{ i18n.ts.large }}+</option>
- </FormRadios>
</div>
</template>
@@ -30,7 +22,6 @@ import { unisonReload } from '@/scripts/unison-reload';
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
-const statusbarSize = computed(defaultStore.makeGetterSetter('statusbarSize'));
const statusbars = defaultStore.reactiveState.statusbars;
let userLists = $ref();
@@ -46,6 +37,7 @@ async function add() {
id: uuid(),
type: null,
black: false,
+ size: 'medium',
props: {},
});
}
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index cde907017..7ddab18f0 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -94,13 +94,11 @@ export const defaultStore = markRaw(new Storage('base', {
name: string;
id: string;
type: string;
+ size: 'verySmall' | 'small' | 'medium' | 'large' | 'veryLarge';
+ black: boolean;
props: Record<string, any>;
}[],
},
- statusbarSize: {
- where: 'deviceAccount',
- default: 'medium',
- },
widgets: {
where: 'deviceAccount',
default: [] as {
diff --git a/packages/client/src/ui/_common_/statusbar-user-list.vue b/packages/client/src/ui/_common_/statusbar-user-list.vue
index 2757e9118..12533d05f 100644
--- a/packages/client/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/client/src/ui/_common_/statusbar-user-list.vue
@@ -52,6 +52,8 @@ const tick = () => {
});
};
+watch(() => props.userListId, tick);
+
useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
immediate: true,
afterMounted: true,
diff --git a/packages/client/src/ui/_common_/statusbars.vue b/packages/client/src/ui/_common_/statusbars.vue
index c18771c54..c448b0956 100644
--- a/packages/client/src/ui/_common_/statusbars.vue
+++ b/packages/client/src/ui/_common_/statusbars.vue
@@ -1,14 +1,14 @@
<template>
-<div
- class="dlrsnxqu" :class="{
- verySmall: defaultStore.reactiveState.statusbarSize.value === 'verySmall',
- small: defaultStore.reactiveState.statusbarSize.value === 'small',
- medium: defaultStore.reactiveState.statusbarSize.value === 'medium',
- large: defaultStore.reactiveState.statusbarSize.value === 'large',
- veryLarge: defaultStore.reactiveState.statusbarSize.value === 'veryLarge',
- }"
->
- <div v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="{ black: x.black }">
+<div class="dlrsnxqu">
+ <div
+ v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="[{ black: x.black }, {
+ verySmall: x.size === 'verySmall',
+ small: x.size === 'small',
+ medium: x.size === 'medium',
+ large: x.size === 'large',
+ veryLarge: x.size === 'veryLarge',
+ }]"
+ >
<span class="name">{{ x.name }}</span>
<XRss v-if="x.type === 'rss'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url"/>
<XFederation v-else-if="x.type === 'federation'" class="body" :refresh-interval-sec="x.props.refreshIntervalSec" :marquee-duration="x.props.marqueeDuration" :marquee-reverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/>
@@ -28,37 +28,38 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
<style lang="scss" scoped>
.dlrsnxqu {
- --height: 24px;
- --nameMargin: 10px;
background: var(--panel);
- font-size: 0.85em;
-
- &.verySmall {
- --nameMargin: 7px;
- --height: 16px;
- font-size: 0.75em;
- }
-
- &.small {
- --nameMargin: 8px;
- --height: 20px;
- font-size: 0.8em;
- }
-
- &.large {
- --nameMargin: 12px;
- --height: 26px;
- font-size: 0.875em;
- }
-
- &.veryLarge {
- --nameMargin: 14px;
- --height: 30px;
- font-size: 0.9em;
- }
> .item {
- display: inline-flex;
+ --height: 24px;
+ --nameMargin: 10px;
+ font-size: 0.85em;
+
+ &.verySmall {
+ --nameMargin: 7px;
+ --height: 16px;
+ font-size: 0.75em;
+ }
+
+ &.small {
+ --nameMargin: 8px;
+ --height: 20px;
+ font-size: 0.8em;
+ }
+
+ &.large {
+ --nameMargin: 12px;
+ --height: 26px;
+ font-size: 0.875em;
+ }
+
+ &.veryLarge {
+ --nameMargin: 14px;
+ --height: 30px;
+ font-size: 0.9em;
+ }
+
+ display: flex;
vertical-align: bottom;
width: 100%;
line-height: var(--height);