SWREI/switched
0
0
Fork 0
Code

enhance(client): tweak statusbar

Browse Source
This commit is contained in:
syuilo 2022-07-04 01:37:47 +09:00
parent dc1a35c13c
commit 4ab2f16ed3
5 changed files with 63 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/client/src/pages/settings/statusbars.statusbar.vue
View File

@ -7,7 +7,7 @@
<option value="userList">User list timeline</option> <option value="userList">User list timeline</option>
</FormSelect> </FormSelect>
<MkInput v-model="statusbar.name" class="_formBlock"> <MkInput v-model="statusbar.name" manual-save class="_formBlock">
<template #label>Name</template> <template #label>Name</template>
</MkInput> </MkInput>
@ -15,14 +15,23 @@
<template #label>Black</template> <template #label>Black</template>
</MkSwitch> </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'"> <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> <template #label>URL</template>
</MkInput> </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> <template #label>Refresh interval</template>
</MkInput> </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> <template #label>Duration</template>
</MkInput> </MkInput>
<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock"> <MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
@ -30,10 +39,10 @@
</MkSwitch> </MkSwitch>
</template> </template>
<template v-else-if="statusbar.type === 'federation'"> <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> <template #label>Refresh interval</template>
</MkInput> </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> <template #label>Duration</template>
</MkInput> </MkInput>
<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock"> <MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
@ -48,10 +57,10 @@
<template #label>{{ i18n.ts.userList }}</template> <template #label>{{ i18n.ts.userList }}</template>
<option v-for="list in userLists" :value="list.id">{{ list.name }}</option> <option v-for="list in userLists" :value="list.id">{{ list.name }}</option>
</FormSelect> </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> <template #label>Refresh interval</template>
</MkInput> </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> <template #label>Duration</template>
</MkInput> </MkInput>
<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock"> <MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
@ -60,7 +69,6 @@
</template> </template>
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;"> <div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
<FormButton @click="save">save</FormButton>
<FormButton danger @click="del">Delete</FormButton> <FormButton danger @click="del">Delete</FormButton>
</div> </div>
</div> </div>
@ -109,6 +117,8 @@ watch(() => statusbar.type, () => {
} }
}); });
watch(statusbar, save);
async function save() { async function save() {
const i = defaultStore.state.statusbars.findIndex(x => x.id === props._id); const i = defaultStore.state.statusbars.findIndex(x => x.id === props._id);
const statusbars = JSON.parse(JSON.stringify(defaultStore.state.statusbars)); const statusbars = JSON.parse(JSON.stringify(defaultStore.state.statusbars));

10
packages/client/src/pages/settings/statusbars.vue
View File

@ -6,14 +6,6 @@
<XStatusbar :_id="x.id" :user-lists="userLists"/> <XStatusbar :_id="x.id" :user-lists="userLists"/>
</FormFolder> </FormFolder>
<FormButton @click="add">add</FormButton> <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> </div>
</template> </template>
@ -30,7 +22,6 @@ import { unisonReload } from '@/scripts/unison-reload';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from '@/scripts/page-metadata';
const statusbarSize = computed(defaultStore.makeGetterSetter('statusbarSize'));
const statusbars = defaultStore.reactiveState.statusbars; const statusbars = defaultStore.reactiveState.statusbars;
let userLists = $ref(); let userLists = $ref();
@ -46,6 +37,7 @@ async function add() {
id: uuid(), id: uuid(),
type: null, type: null,
black: false, black: false,
size: 'medium',
props: {}, props: {},
}); });
} }

6
packages/client/src/store.ts
View File

@ -94,13 +94,11 @@ export const defaultStore = markRaw(new Storage('base', {
name: string; name: string;
id: string; id: string;
type: string; type: string;
size: 'verySmall' | 'small' | 'medium' | 'large' | 'veryLarge';
black: boolean;
props: Record<string, any>; props: Record<string, any>;
}[], }[],
}, },
statusbarSize: {
where: 'deviceAccount',
default: 'medium',
},
widgets: { widgets: {
where: 'deviceAccount', where: 'deviceAccount',
default: [] as { default: [] as {

2
packages/client/src/ui/_common_/statusbar-user-list.vue
View File

@ -52,6 +52,8 @@ const tick = () => {
}); });
}; };
watch(() => props.userListId, tick);
useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), { useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
immediate: true, immediate: true,
afterMounted: true, afterMounted: true,

23
packages/client/src/ui/_common_/statusbars.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div class="dlrsnxqu">
<div <div
class="dlrsnxqu" :class="{ v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="[{ black: x.black }, {
verySmall: defaultStore.reactiveState.statusbarSize.value === 'verySmall', verySmall: x.size === 'verySmall',
small: defaultStore.reactiveState.statusbarSize.value === 'small', small: x.size === 'small',
medium: defaultStore.reactiveState.statusbarSize.value === 'medium', medium: x.size === 'medium',
large: defaultStore.reactiveState.statusbarSize.value === 'large', large: x.size === 'large',
veryLarge: defaultStore.reactiveState.statusbarSize.value === 'veryLarge', veryLarge: x.size === 'veryLarge',
}" }]"
> >
<div v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="{ black: x.black }">
<span class="name">{{ x.name }}</span> <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"/> <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"/> <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,9 +28,11 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
<style lang="scss" scoped> <style lang="scss" scoped>
.dlrsnxqu { .dlrsnxqu {
background: var(--panel);
> .item {
--height: 24px; --height: 24px;
--nameMargin: 10px; --nameMargin: 10px;
background: var(--panel);
font-size: 0.85em; font-size: 0.85em;
&.verySmall { &.verySmall {
@ -57,8 +59,7 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
font-size: 0.9em; font-size: 0.9em;
} }
> .item { display: flex;
display: inline-flex;
vertical-align: bottom; vertical-align: bottom;
width: 100%; width: 100%;
line-height: var(--height); line-height: var(--height);