SWREI/switched
0
0
Fork 0
Code

chore(client): tweak ui

Browse Source
This commit is contained in:
syuilo 2022-07-07 21:00:42 +09:00
parent c0eba65527
commit a785f1f933
4 changed files with 34 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
locales/ja-JP.yml
View File

@ -869,6 +869,14 @@ logoutConfirm: "ログアウトしますか？"
lastActiveDate: "最終利用日時"
statusbar: "ステータスバー"
pleaseSelect: "選択してください"
reverse: "反転"
colored: "色付き"
refreshInterval: "更新間隔"
label: "ラベル"
type: "タイプ"
speed: "速度"
slow: "遅い"
fast: "速い"
_emailUnavailable:
used: "既に使用されています"

4
packages/client/src/components/form/range.vue
View File

@ -198,7 +198,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
height: 100%;
background: var(--accent);
opacity: 0.5;
transition: width 0.2s cubic-bezier(0,0,0,1);
//transition: width 0.2s cubic-bezier(0,0,0,1);
}
}
@ -231,7 +231,7 @@ const onMousedown = (ev: MouseEvent | TouchEvent) => {
cursor: grab;
background: var(--accent);
border-radius: 999px;
transition: left 0.2s cubic-bezier(0,0,0,1);
//transition: left 0.2s cubic-bezier(0,0,0,1);
&:hover {
background: var(--accentLighten);

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

@ -8,7 +8,7 @@
</FormSelect>
<MkInput v-model="statusbar.name" manual-save class="_formBlock">
<template #label>Name</template>
<template #label>{{ i18n.ts.label }}</template>
</MkInput>
<MkSwitch v-model="statusbar.black" class="_formBlock">
@ -16,7 +16,7 @@
</MkSwitch>
<FormRadios v-model="statusbar.size" class="_formBlock">
<template #label>Size</template>
<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>
@ -29,27 +29,29 @@
<template #label>URL</template>
</MkInput>
<MkInput v-model="statusbar.props.refreshIntervalSec" manual-save class="_formBlock" type="number">
<template #label>Refresh interval</template>
</MkInput>
<MkInput v-model="statusbar.props.marqueeDuration" manual-save class="_formBlock" type="number">
<template #label>Duration</template>
<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 }} &lt;-&gt; {{ i18n.ts.slow }}</template>
</FormRange>
<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
<template #label>Reverse</template>
<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>Refresh interval</template>
</MkInput>
<MkInput v-model="statusbar.props.marqueeDuration" manual-save class="_formBlock" type="number">
<template #label>Duration</template>
<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 }} &lt;-&gt; {{ i18n.ts.slow }}</template>
</FormRange>
<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
<template #label>Reverse</template>
<template #label>{{ i18n.ts.reverse }}</template>
</MkSwitch>
<MkSwitch v-model="statusbar.props.colored" class="_formBlock">
<template #label>Colored</template>
<template #label>{{ i18n.ts.colored }}</template>
</MkSwitch>
</template>
<template v-else-if="statusbar.type === 'userList' && userLists != null">
@ -58,18 +60,19 @@
<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>Refresh interval</template>
</MkInput>
<MkInput v-model="statusbar.props.marqueeDuration" manual-save class="_formBlock" type="number">
<template #label>Duration</template>
<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 }} &lt;-&gt; {{ i18n.ts.slow }}</template>
</FormRange>
<MkSwitch v-model="statusbar.props.marqueeReverse" class="_formBlock">
<template #label>Reverse</template>
<template #label>{{ i18n.ts.reverse }}</template>
</MkSwitch>
</template>
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
<FormButton danger @click="del">Delete</FormButton>
<FormButton danger @click="del">{{ i18n.ts.remove }}</FormButton>
</div>
</div>
</template>
@ -81,6 +84,7 @@ 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/ui/button.vue';
import FormRange from '@/components/form/range.vue';
import * as os from '@/os';
import { menuDef } from '@/menu';
import { defaultStore } from '@/store';

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

@ -5,7 +5,7 @@
<template #suffix>{{ x.name }}</template>
<XStatusbar :_id="x.id" :user-lists="userLists"/>
</FormFolder>
<FormButton @click="add">add</FormButton>
<FormButton primary @click="add">{{ i18n.ts.add }}</FormButton>
</div>
</template>