From a3c0713eb184314b89d218d401a627a9a19417db Mon Sep 17 00:00:00 2001
From: naskya <m@naskya.net>
Date: Thu, 15 Feb 2024 13:43:23 +0900
Subject: [PATCH] feat (client): ability to replace widgets button with reload
button on mobile
---
locales/en-US.yml | 1 +
locales/ja-JP.yml | 1 +
packages/client/src/pages/settings/general.vue | 8 ++++++++
packages/client/src/store.ts | 4 ++++
packages/client/src/ui/universal.vue | 17 +++++++++++++++++
5 files changed, 31 insertions(+)
diff --git a/locales/en-US.yml b/locales/en-US.yml
index 774e4a101d..ac1480aa24 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1166,6 +1166,7 @@ preventMisclick: "Accidental click prevention"
hideFollowButtons: "Hide follow buttons in a misclickable position"
forMobile: "Mobile"
replaceChatButtonWithAccountButton: "Replace chat button with account switch button"
+replaceWidgetsButtonWithReloadButton: "Replace widgets button with reload button"
_sensitiveMediaDetection:
description: "Reduces the effort of server moderation through automatically recognizing
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c040e2de85..d0919ee3ce 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2015,3 +2015,4 @@ preventMisclick: "誤タップ防止"
hideFollowButtons: "誤タップしやすい位置にあるフォローボタンを隠す"
forMobile: "携帯端末向け"
replaceChatButtonWithAccountButton: "チャットのボタンをアカウント切り替えボタンに変更する"
+replaceWidgetsButtonWithReloadButton: "ウィジェットのボタンを再読み込みボタンに変更する"
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index 00304275ce..e11852e831 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -298,6 +298,11 @@
class="_formBlock"
>{{ i18n.ts.replaceChatButtonWithAccountButton }}</FormSwitch
>
+ <FormSwitch
+ v-model="replaceWidgetsButtonWithReloadButton"
+ class="_formBlock"
+ >{{ i18n.ts.replaceWidgetsButtonWithReloadButton }}</FormSwitch
+ >
</FormSection>
<FormRange
@@ -454,6 +459,9 @@ const hideFollowButtons = computed(
const replaceChatButtonWithAccountButton = computed(
defaultStore.makeGetterSetter("replaceChatButtonWithAccountButton"),
);
+const replaceWidgetsButtonWithReloadButton = computed(
+ defaultStore.makeGetterSetter("replaceWidgetsButtonWithReloadButton"),
+);
const detectPostLanguage = computed(
defaultStore.makeGetterSetter("detectPostLanguage"),
);
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index ad43d78200..a0f87fa976 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -393,6 +393,10 @@ export const defaultStore = markRaw(
where: "device",
default: true,
},
+ replaceWidgetsButtonWithReloadButton: {
+ where: "device",
+ default: false,
+ },
}),
);
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 536f0d855a..51ea23f24d 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -130,6 +130,17 @@
</div>
</button>
<button
+ v-if="replaceWidgetsButtonWithReloadButton"
+ :aria-label="i18n.ts.reload"
+ class="button widget _button"
+ @click="reload"
+ >
+ <div class="button-wrapper">
+ <i class="ph-arrows-clockwise ph-bold ph-lg"></i>
+ </div>
+ </button>
+ <button
+ v-else
v-vibrate="5"
:aria-label="i18n.t('_deck._columns.widgets')"
class="button widget _button"
@@ -247,6 +258,12 @@ const openAccountMenu = (ev: MouseEvent) => {
);
};
+const replaceWidgetsButtonWithReloadButton =
+ defaultStore.state.replaceWidgetsButtonWithReloadButton;
+const reload = () => {
+ window.location.reload();
+};
+
const buttonAnimIndex = ref(0);
const drawerMenuShowing = ref(false);