fix(frontend): 一定の条件でノート送信ボタンが意図しない見た目になる問題を修正 (MisskeyIO#884)

Co-authored-by: あわわわとーにゅ <17376330+u1-liquid@users.noreply.github.com>

packages/frontend/src/components/MkPostForm.vue

@@ -48,8 +48,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<div :class="$style.submitInner">
 					<template v-if="posted"></template>
 					<template v-else-if="posting"><MkEllipsis/></template>
-					<template v-else>{{ submitText }}</template>
-					<i style="margin-left: 6px;" :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i>
+					<template v-else>
+						<span :class="$style.submitButtonText">
+							{{ submitText }}
+						</span>
+					</template>
+					<span>
+						<i :class="posted ? 'ti ti-check' : reply ? 'ti ti-arrow-back-up' : renote ? 'ti ti-quote' : 'ti ti-send'"></i>
+					</span>
 				</div>
 			</button>
 		</div>
@@ -109,6 +115,7 @@ import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { toASCII } from 'punycode.js';
+import type { NoteDraftItem } from '@/types/note-draft-item.js';
 import MkNoteSimple from '@/components/MkNoteSimple.vue';
 import MkNotePreview from '@/components/MkNotePreview.vue';
 import XPostFormAttaches from '@/components/MkPostFormAttaches.vue';
@@ -134,7 +141,6 @@ import { miLocalStorage } from '@/local-storage.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 import { emojiPicker } from '@/scripts/emoji-picker.js';
 import { mfmFunctionPicker } from '@/scripts/mfm-function-picker.js';
-import type { NoteDraftItem } from '@/types/note-draft-item.js';
 
 const $i = signinRequired();
 
@@ -770,7 +776,7 @@ async function openDrafts() {
 	}
 }
 
-function loadDraft(exactMatch: boolean = false) {
+function loadDraft(exactMatch = false) {
 	const drafts = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}') as Record<string, NoteDraftItem>;
 	const scope = exactMatch ? draftKey.value : draftKey.value.replace(`note:${draftId.value}`, 'note:');
 	const draft = Object.entries(drafts).filter(([k]) => k.startsWith(scope))
@@ -968,9 +974,9 @@ async function post(ev?: MouseEvent) {
 			type: 'error',
 			text: err.message + '\n' + (err as any).id,
 		});
-		emit("postError");
+		emit('postError');
 	});
-	emit("posting");
+	emit('posting');
 }
 
 function cancel() {
@@ -987,7 +993,7 @@ async function insertEmoji(ev: MouseEvent) {
 	os.openEmojiPicker(
 		(ev.currentTarget ?? ev.target) as HTMLElement,
 		{ asReactionPicker: false },
-		textareaEl.value
+		textareaEl.value,
 	);
 }
 
@@ -1194,6 +1200,10 @@ defineExpose({
 	box-sizing: border-box;
 	color: var(--fgOnAccent);
 	background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	justify-content: center;
 }
 
 .headerRightItem {
@@ -1448,5 +1458,13 @@ defineExpose({
 		gap: 0;
 	}
 
+	.submitInner {
+		min-width: 20px;
+	}
+
+	.submitButtonText {
+		display: none;
+	}
+
 }
 </style>