diff options
Diffstat (limited to 'packages/client/src/pages/settings/statusbar.statusbar.vue')
| -rw-r--r-- | packages/client/src/pages/settings/statusbar.statusbar.vue | 140 |
1 files changed, 0 insertions, 140 deletions
diff --git a/packages/client/src/pages/settings/statusbar.statusbar.vue b/packages/client/src/pages/settings/statusbar.statusbar.vue deleted file mode 100644 index 608222386e..0000000000 --- a/packages/client/src/pages/settings/statusbar.statusbar.vue +++ /dev/null @@ -1,140 +0,0 @@ -<template> -<div class="_formRoot"> - <FormSelect v-model="statusbar.type" placeholder="Please select" class="_formBlock"> - <template #label>{{ i18n.ts.type }}</template> - <option value="rss">RSS</option> - <option value="federation">Federation</option> - <option value="userList">User list timeline</option> - </FormSelect> - - <MkInput v-model="statusbar.name" manual-save class="_formBlock"> - <template #label>{{ i18n.ts.label }}</template> - </MkInput> - - <MkSwitch v-model="statusbar.black" class="_formBlock"> - <template #label>Black</template> - </MkSwitch> - - <FormRadios v-model="statusbar.size" class="_formBlock"> - <template #label>{{ i18n.ts.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" manual-save class="_formBlock" type="url"> - <template #label>URL</template> - </MkInput> - <MkSwitch v-model="statusbar.props.shuffle" class="_formBlock"> - <template #label>{{ i18n.ts.shuffle }}</template> - </MkSwitch> - <MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number"> - <template #label>{{ i18n.ts.refreshInterval }}</template> - </MkInput> - <FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock"> - <template #label>{{ i18n.ts.speed }}</template> - <template #caption>{{ i18n.ts.fast }} <-> {{ i18n.ts.slow }}</template> - </FormRange> - <MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock"> - <template #label>{{ i18n.ts.reverse }}</template> - </MkSwitch> - </template> - <template v-else-if="statusbar.type === 'federation'"> - <MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number"> - <template #label>{{ i18n.ts.refreshInterval }}</template> - </MkInput> - <FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock"> - <template #label>{{ i18n.ts.speed }}</template> - <template #caption>{{ i18n.ts.fast }} <-> {{ i18n.ts.slow }}</template> - </FormRange> - <MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock"> - <template #label>{{ i18n.ts.reverse }}</template> - </MkSwitch> - <MkSwitch v-model="statusbar.props.colored" class="_formBlock"> - <template #label>{{ i18n.ts.colored }}</template> - </MkSwitch> - </template> - <template v-else-if="statusbar.type === 'userList' && userLists != null"> - <FormSelect v-model="statusbar.props.userListId" class="_formBlock"> - <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" manual-save class="_formBlock" type="number"> - <template #label>{{ i18n.ts.refreshInterval }}</template> - </MkInput> - <FormRange v-model="statusbar.props.marqueeDuration" :min="5" :max="150" :step="1" class="_formBlock"> - <template #label>{{ i18n.ts.speed }}</template> - <template #caption>{{ i18n.ts.fast }} <-> {{ i18n.ts.slow }}</template> - </FormRange> - <MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock"> - <template #label>{{ i18n.ts.reverse }}</template> - </MkSwitch> - </template> - - <div style="display: flex; gap: var(--margin); flex-wrap: wrap;"> - <FormButton danger @click="del">{{ i18n.ts.remove }}</FormButton> - </div> -</div> -</template> - -<script lang="ts" setup> -import { computed, reactive, ref, watch } from 'vue'; -import FormSelect from '@/components/form/select.vue'; -import MkInput from '@/components/form/input.vue'; -import MkSwitch from '@/components/form/switch.vue'; -import FormRadios from '@/components/form/radios.vue'; -import FormButton from '@/components/MkButton.vue'; -import FormRange from '@/components/form/range.vue'; -import * as os from '@/os'; -import { defaultStore } from '@/store'; -import { i18n } from '@/i18n'; -import { deepClone } from '@/scripts/clone'; - -const props = defineProps<{ - _id: string; - userLists: any[] | null; -}>(); - -const statusbar = reactive(deepClone(defaultStore.state.statusbars.find(x => x.id === props._id))); - -watch(() => statusbar.type, () => { - if (statusbar.type === 'rss') { - statusbar.name = 'NEWS'; - statusbar.props.url = 'http://feeds.afpbb.com/rss/afpbb/afpbbnews'; - statusbar.props.shuffle = true; - statusbar.props.refreshIntervalSec = 120; - statusbar.props.display = 'marquee'; - statusbar.props.marqueeDuration = 100; - statusbar.props.marqueeReverse = false; - } else if (statusbar.type === 'federation') { - statusbar.name = 'FEDERATION'; - statusbar.props.refreshIntervalSec = 120; - statusbar.props.display = 'marquee'; - statusbar.props.marqueeDuration = 100; - statusbar.props.marqueeReverse = false; - statusbar.props.colored = false; - } else if (statusbar.type === 'userList') { - statusbar.name = 'LIST TL'; - statusbar.props.refreshIntervalSec = 120; - statusbar.props.display = 'marquee'; - statusbar.props.marqueeDuration = 100; - statusbar.props.marqueeReverse = false; - } -}); - -watch(statusbar, save); - -async function save() { - const i = defaultStore.state.statusbars.findIndex(x => x.id === props._id); - const statusbars = deepClone(defaultStore.state.statusbars); - statusbars[i] = deepClone(statusbar); - defaultStore.set('statusbars', statusbars); -} - -function del() { - defaultStore.set('statusbars', defaultStore.state.statusbars.filter(x => x.id !== props._id)); -} -</script> |