enhance(client): tweak statusbar
This commit is contained in:
parent
dc1a35c13c
commit
4ab2f16ed3
5 changed files with 63 additions and 60 deletions
|
@ -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));
|
||||||
|
|
|
@ -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: {},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div class="dlrsnxqu">
|
||||||
class="dlrsnxqu" :class="{
|
<div
|
||||||
verySmall: defaultStore.reactiveState.statusbarSize.value === 'verySmall',
|
v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="[{ black: x.black }, {
|
||||||
small: defaultStore.reactiveState.statusbarSize.value === 'small',
|
verySmall: x.size === 'verySmall',
|
||||||
medium: defaultStore.reactiveState.statusbarSize.value === 'medium',
|
small: x.size === 'small',
|
||||||
large: defaultStore.reactiveState.statusbarSize.value === 'large',
|
medium: x.size === 'medium',
|
||||||
veryLarge: defaultStore.reactiveState.statusbarSize.value === 'veryLarge',
|
large: x.size === 'large',
|
||||||
}"
|
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);
|
||||||
|
|
Loading…
Reference in a new issue