feat(tms): Pull-to-Refreshの感度 (#196)

taiyme · Apr 24, 2024 · caade94 · caade94
1 parent 0a142d2
commit caade94
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 2 deletions.
diff --git a/locales/index.d.ts b/locales/index.d.ts
@@ -9994,6 +9994,28 @@ export interface Locale extends ILocale {
                  */
                 readonly "forceList": string;
             };
+            readonly "_pullToRefreshSensitivity": {
+                /**
+                 * Pull-to-Refreshの感度
+                 */
+                readonly "label": string;
+                /**
+                 * 離してリロードするまでの所要スクロールを変更します。
+                 */
+                readonly "caption": string;
+                /**
+                 * 低感度
+                 */
+                readonly "low": string;
+                /**
+                 * 中感度 (規定)
+                 */
+                readonly "middle": string;
+                /**
+                 * 高感度
+                 */
+                readonly "high": string;
+            };
             readonly "_pakuru": {
                 /**
                  * 「パクる」機能を有効にする

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
@@ -2664,6 +2664,12 @@ _tms:
       default: "デフォルト"
       classic: "クラシック"
       forceList: "リスト強制"
+    _pullToRefreshSensitivity:
+      label: "Pull-to-Refreshの感度"
+      caption: "離してリロードするまでの所要スクロールを変更します。"
+      low: "低感度"
+      middle: "中感度 (規定)"
+      high: "高感度"
     _pakuru:
       label: "「パクる」機能を有効にする"
       caption: "リノートメニューに「パクる」を追加します。添付ファイルを含むノートをパクる場合、時間がかかる場合があります。"

diff --git a/packages/frontend/src/components/MkPullToRefresh.vue b/packages/frontend/src/components/MkPullToRefresh.vue
@@ -27,10 +27,15 @@ import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
 import { i18n } from '@/i18n.js';
 import { getScrollContainer } from '@/scripts/scroll.js';
 import { isHorizontalSwipeSwiping } from '@/scripts/touch.js';
+import { tmsStore } from '@/tms/store.js';
 
 const SCROLL_STOP = 10;
 const MAX_PULL_DISTANCE = Infinity;
-const FIRE_THRESHOLD = 230;
+const FIRE_THRESHOLD = (
+	tmsStore.state.pullToRefreshSensitivity === 'low' ? 230
+	: tmsStore.state.pullToRefreshSensitivity === 'high' ? 130
+	: 180
+);
 const RELEASE_TRANSITION_DURATION = 200;
 const PULL_BRAKE_BASE = 1.5;
 const PULL_BRAKE_FACTOR = 170;

diff --git a/packages/frontend/src/pages/tms/settings/index.main.vue b/packages/frontend/src/pages/tms/settings/index.main.vue
@@ -17,6 +17,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkSelect>
 		</div>
 	</FormSection>
+	<FormSection>
+		<template #label>{{ i18n.ts.operations }}</template>
+		<div class="_gaps">
+			<MkSelect v-model="pullToRefreshSensitivity">
+				<template #label>{{ i18n.ts._tms._settings._pullToRefreshSensitivity.label }}</template>
+				<template #caption>{{ i18n.ts._tms._settings._pullToRefreshSensitivity.caption }}</template>
+				<option value="low">{{ i18n.ts._tms._settings._pullToRefreshSensitivity.low }}</option>
+				<option value="middle">{{ i18n.ts._tms._settings._pullToRefreshSensitivity.middle }}</option>
+				<option value="high">{{ i18n.ts._tms._settings._pullToRefreshSensitivity.high }}</option>
+			</MkSelect>
+		</div>
+	</FormSection>
 	<FormSection>
 		<div class="_gaps">
 			<MkSwitch v-model="enablePakuru">
@@ -35,7 +47,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, readonly, ref, watch } from 'vue';
 import { i18n } from '@/i18n.js';
-import { alert } from '@/os.js';
+import { alert, confirm } from '@/os.js';
+import { unisonReload } from '@/scripts/unison-reload.js';
 import { tmsStore } from '@/tms/store.js';
 import FormSection from '@/components/form/section.vue';
 import MkSelect from '@/components/MkSelect.vue';
@@ -46,6 +59,13 @@ const superMenuDisplayMode = computed(tmsStore.makeGetterSetter('superMenuDispla
 //#endregion
 
 //#region 即時変更 (ダイアログ付き)
+const pullToRefreshSensitivity = computed({
+	get: () => tmsStore.reactiveState.pullToRefreshSensitivity.value,
+	set: (newValue) => {
+		tmsStore.set('pullToRefreshSensitivity', newValue);
+		reloadAsk();
+	},
+});
 const enablePakuru = computed({
 	get: () => tmsStore.reactiveState.enablePakuru.value,
 	set: async (newValue) => {
@@ -72,6 +92,16 @@ const enableNumberquote = computed({
 });
 //#endregion
 
+const reloadAsk = async (): Promise<void> => {
+	const { canceled } = await confirm({
+		type: 'info',
+		text: i18n.ts.reloadToApplySetting,
+	});
+	if (canceled) return;
+
+	unisonReload();
+};
+
 const edited = ref(false);
 const changed = ref(false);
 

diff --git a/packages/frontend/src/tms/store.ts b/packages/frontend/src/tms/store.ts
@@ -14,6 +14,10 @@ export const tmsStore = markRaw(new Storage('tmsMain', {
 		where: 'deviceAccount',
 		default: 'default' as 'default' | 'classic' | 'forceList',
 	},
+	pullToRefreshSensitivity: {
+		where: 'device',
+		default: 'middle' as 'low' | 'middle' | 'high',
+	},
 	enablePakuru: {
 		where: 'device',
 		default: false,