chore(client): tweak ui

locales/ja-JP.yml

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

packages/client/src/components/form/range.vue

@@ -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);

packages/client/src/pages/settings/statusbars.statusbar.vue

@@ -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';

packages/client/src/pages/settings/statusbars.vue

@@ -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>