From a785f1f9336c2662f18c1c5858e816db1b75243a Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 7 Jul 2022 21:00:42 +0900
Subject: [PATCH] chore(client): tweak ui

---
 locales/ja-JP.yml                             |  8 ++++
 packages/client/src/components/form/range.vue |  4 +-
 .../pages/settings/statusbars.statusbar.vue   | 42 ++++++++++---------
 .../client/src/pages/settings/statusbars.vue  |  2 +-
 4 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index de5826b21..49cce121d 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -869,6 +869,14 @@ logoutConfirm: "ログアウトしますか？"
 lastActiveDate: "最終利用日時"
 statusbar: "ステータスバー"
 pleaseSelect: "選択してください"
+reverse: "反転"
+colored: "色付き"
+refreshInterval: "更新間隔"
+label: "ラベル"
+type: "タイプ"
+speed: "速度"
+slow: "遅い"
+fast: "速い"
 
 _emailUnavailable:
   used: "既に使用されています"
diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue
index f87b92183..ebec482d8 100644
--- a/packages/client/src/components/form/range.vue
+++ b/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);
diff --git a/packages/client/src/pages/settings/statusbars.statusbar.vue b/packages/client/src/pages/settings/statusbars.statusbar.vue
index 6b03ad46e..206979925 100644
--- a/packages/client/src/pages/settings/statusbars.statusbar.vue
+++ b/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';
diff --git a/packages/client/src/pages/settings/statusbars.vue b/packages/client/src/pages/settings/statusbars.vue
index bcfff1652..c81bd7fbd 100644
--- a/packages/client/src/pages/settings/statusbars.vue
+++ b/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>