From c511dd774b855242972aa498b81ab22eb762a15b Mon Sep 17 00:00:00 2001
From: naskya <m@naskya.net>
Date: Fri, 16 Feb 2024 04:14:19 +0900
Subject: [PATCH] feat (client): big post button
---
docs/changelog.md | 2 +
locales/en-US.yml | 1 +
locales/ja-JP.yml | 1 +
packages/client/src/components/MkPostForm.vue | 59 +++++++++++++++++++
.../client/src/pages/settings/general.vue | 6 ++
packages/client/src/store.ts | 4 ++
6 files changed, 73 insertions(+)
diff --git a/docs/changelog.md b/docs/changelog.md
index ee036a1941..a8b11cf15f 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -5,6 +5,8 @@
- the "Hide NSFW media" config is now per device and per account
- increase the max number of pinned posts from 5 to 15
- change the second tab on the notifications page from "unread" to "reactions"
+- add ability to show a huge post button on the posting form
+ - joke feature, inspired by https://mstdn.poyo.me/@prime/110668364208741253
# v20240216
diff --git a/locales/en-US.yml b/locales/en-US.yml
index 570cd5e1ba..499692e22d 100644
--- a/locales/en-US.yml
+++ b/locales/en-US.yml
@@ -1169,6 +1169,7 @@ replaceChatButtonWithAccountButton: "Replace chat button with account switch but
replaceWidgetsButtonWithReloadButton: "Replace widgets button with reload button"
searchEngine: "Search engine used in search bar MFM"
postSearch: "Post search on this server"
+showBigPostButton: "Show a huge post button on the posting form"
_sensitiveMediaDetection:
description: "Reduces the effort of server moderation through automatically recognizing
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index fc3ae46199..5aa9a6845c 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2018,3 +2018,4 @@ replaceChatButtonWithAccountButton: "チャットのボタンをアカウント
replaceWidgetsButtonWithReloadButton: "ウィジェットのボタンを再読み込みボタンに変更する"
searchEngine: "検索のMFMで使用する検索エンジン"
postSearch: "このサーバーの投稿検索"
+showBigPostButton: "投稿ボタンを巨大にする"
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 9b2f5cac8a..a58ce88459 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -75,6 +75,7 @@
<i :class="icon('ph-binoculars')"></i>
</button>
<button
+ v-if="!showBigPostButton"
class="submit _buttonGradate"
:disabled="!canPost"
data-cy-open-post-form-submit
@@ -237,6 +238,25 @@
>
<i :class="icon('ph-question')"></i>
</button>
+ <div v-if="showBigPostButton">
+ <button
+ class="submit bigPostButton"
+ :disabled="!canPost"
+ data-cy-open-post-form-submit
+ @click="post"
+ >
+ {{ submitText
+ }}<i
+ :class="
+ reply
+ ? 'ph-arrow-u-up-left ph-bold ph-lg'
+ : renote
+ ? 'ph-quotes ph-bold ph-lg'
+ : 'ph-paper-plane-tilt ph-bold ph-lg'
+ "
+ ></i>
+ </button>
+ </div>
</footer>
<datalist id="hashtags">
<option
@@ -335,6 +355,8 @@ const hashtagsInputEl = ref<HTMLInputElement | null>(null);
const visibilityButton = ref<HTMLElement | null>(null);
const languageButton = ref<HTMLElement | undefined>();
+const showBigPostButton = defaultStore.state.showBigPostButton;
+
const posting = ref(false);
const text = ref(props.initialText ?? "");
const files = ref(props.initialFiles ?? []);
@@ -1509,4 +1531,41 @@ onMounted(() => {
}
}
}
+
+.bigPostButton {
+ appearance: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ display: block ruby;
+ padding: 3%;
+ margin: 0 auto;
+ border: none;
+ cursor: pointer;
+ color: inherit;
+ touch-action: manipulation;
+ -webkit-tap-highlight-color: transparent;
+ font-size: 3em;
+ font-family: inherit;
+ text-decoration: none;
+ width: 100%;
+ border-radius: 10px;
+ user-select: none;
+ -webkit-user-select: none;
+ -webkit-touch-callout: none;
+ color: var(--fgOnAccent);
+ background: linear-gradient(
+ 90deg,
+ var(--buttonGradateA),
+ var(--buttonGradateB)
+ );
+
+ > .ph-lg {
+ vertical-align: -0.125em;
+ margin-left: 12px;
+ }
+}
+
+.bigPostButton:disabled {
+ opacity: 0.7;
+}
</style>
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index 6874cf17a5..09fd7b65ec 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -279,6 +279,9 @@
<FormSwitch v-model="showFixedPostForm" class="_formBlock">{{
i18n.ts.showFixedPostForm
}}</FormSwitch>
+ <FormSwitch v-model="showBigPostButton" class="_formBlock">{{
+ i18n.ts.showBigPostButton
+ }}</FormSwitch>
<FormSwitch v-model="useEmojiCdn" class="_formBlock"
>{{ i18n.ts.useEmojiCdn
}}<template #caption>{{
@@ -490,6 +493,9 @@ const openServerInfo = computed(
const iconSet = computed(defaultStore.makeGetterSetter("iconSet"));
const useEmojiCdn = computed(defaultStore.makeGetterSetter("useEmojiCdn"));
const searchURL = computed(defaultStore.makeGetterSetter("searchURL"));
+const showBigPostButton = computed(
+ defaultStore.makeGetterSetter("showBigPostButton"),
+);
// This feature (along with injectPromo) is currently disabled
// function onChangeInjectFeaturedNote(v) {
diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts
index cb7bcff675..65a7d2449d 100644
--- a/packages/client/src/store.ts
+++ b/packages/client/src/store.ts
@@ -401,6 +401,10 @@ export const defaultStore = markRaw(
where: "device",
default: "https://duckduckgo.com/?q=",
},
+ showBigPostButton: {
+ where: "device",
+ default: false,
+ },
}),
);