fix(frontend): 특정 조건에서 노트 동작 버튼을 비활성화 해도 버튼이 사라지지 않음

- 노트에 답글을 작성할 수 없을 때 - 노트를 리노트할 수 없을 때
kokonect-link · Oct 10, 2024 · 3a6c486 · 3a6c486
1 parent 297c0c5
commit 3a6c486
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 66 deletions.
diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
@@ -48,6 +48,9 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
 - Fix: 로그인 하지 않은 사용자가 노트 내용에 포함된 이모지를 누르면 이모지 복사 및 리액션 메뉴에 접근할 수 있음
 - Fix: 모바일 환경에서 노트 작성 폼의 미리보기 디자인이 잘못 표시될 수 있음
 - Fix: 리버시에서 커스텀 이모지를 리액션으로 보낼 수 없음
+- Fix: 특정 조건에서 노트 동작 버튼을 비활성화 해도 버튼이 사라지지 않음
+  - 노트에 답글을 작성할 수 없을 때
+  - 노트를 리노트할 수 없을 때
 
 ---
 

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
@@ -149,28 +149,32 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</template>
 			</MkReactionsViewer>
 			<footer :class="$style.footer">
-				<button v-if="!note.isHidden && defaultStore.state.showReplyButtonInNoteFooter" v-vibrate="defaultStore.state.vibrateSystem ? 5 : []" v-tooltip="i18n.ts.reply" :class="$style.footerButton" class="_button" @click.stop="reply()">
-					<i class="ti ti-arrow-back-up"></i>
-					<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.repliesCount) }}</p>
-				</button>
-				<button v-else-if="note.isHidden" :class="$style.footerButton" class="_button" disabled>
-					<i class="ti ti-ban"></i>
-				</button>
-				<button
-					v-if="canRenote && defaultStore.state.showRenoteButtonInNoteFooter"
-					ref="renoteButton"
-					v-vibrate="defaultStore.state.vibrateSystem ? [30, 30, 60] : []"
-					v-tooltip="i18n.ts.renote"
-					:class="$style.footerButton"
-					class="_button"
-					@click.stop="defaultStore.state.renoteQuoteButtonSeparation && ((!defaultStore.state.renoteVisibilitySelection && !appearNote.channel) || (appearNote.channel && !appearNote.channel.allowRenoteToExternal) || appearNote.visibility === 'followers') ? renoteOnly() : renote()"
-				>
-					<i class="ti ti-repeat"></i>
-					<p v-if="appearNote.renoteCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.renoteCount) }}</p>
-				</button>
-				<button v-else-if="!canRenote" :class="$style.footerButton" class="_button" disabled>
-					<i class="ti ti-ban"></i>
-				</button>
+				<template v-if="defaultStore.state.showReplyButtonInNoteFooter">
+					<button v-if="!note.isHidden" v-vibrate="defaultStore.state.vibrateSystem ? 5 : []" v-tooltip="i18n.ts.reply" :class="$style.footerButton" class="_button" @click.stop="reply()">
+						<i class="ti ti-arrow-back-up"></i>
+						<p v-if="appearNote.repliesCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.repliesCount) }}</p>
+					</button>
+					<button v-else-if="note.isHidden" :class="$style.footerButton" class="_button" disabled>
+						<i class="ti ti-ban"></i>
+					</button>
+				</template>
+				<template v-if="defaultStore.state.showRenoteButtonInNoteFooter">
+					<button
+						v-if="canRenote"
+						ref="renoteButton"
+						v-vibrate="defaultStore.state.vibrateSystem ? [30, 30, 60] : []"
+						v-tooltip="i18n.ts.renote"
+						:class="$style.footerButton"
+						class="_button"
+						@click.stop="defaultStore.state.renoteQuoteButtonSeparation && ((!defaultStore.state.renoteVisibilitySelection && !appearNote.channel) || (appearNote.channel && !appearNote.channel.allowRenoteToExternal) || appearNote.visibility === 'followers') ? renoteOnly() : renote()"
+					>
+						<i class="ti ti-repeat"></i>
+						<p v-if="appearNote.renoteCount > 0" :class="$style.footerButtonCount">{{ number(appearNote.renoteCount) }}</p>
+					</button>
+					<button v-else-if="!canRenote" :class="$style.footerButton" class="_button" disabled>
+						<i class="ti ti-ban"></i>
+					</button>
+				</template>
 				<button v-if="appearNote.reactionAcceptance !== 'likeOnly' && appearNote.myReaction == null && defaultStore.state.showLikeButtonInNoteFooter" ref="heartReactButton" v-vibrate="defaultStore.state.vibrateSystem ? [30, 50, 50] : []" v-tooltip="i18n.ts.like" :class="$style.footerButton" class="_button" @click.stop="heartReact()">
 					<i class="ti ti-heart"></i>
 				</button>

diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -164,28 +164,32 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkA>
 			</div>
 			<MkReactionsViewer v-if="appearNote.reactionAcceptance !== 'likeOnly'" ref="reactionsViewer" :note="appearNote"/>
-			<button v-if="!note.isHidden && defaultStore.state.showReplyButtonInNoteFooter" v-vibrate="defaultStore.state.vibrateSystem ? 5 : []" v-tooltip="i18n.ts.reply" class="_button" :class="$style.noteFooterButton" @click="reply()">
-				<i class="ti ti-arrow-back-up"></i>
-				<p v-if="appearNote.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.repliesCount) }}</p>
-			</button>
-			<button v-else-if="note.isHidden" class="_button" :class="$style.noteFooterButton" disabled>
-				<i class="ti ti-ban"></i>
-			</button>
-			<button
-				v-if="canRenote && defaultStore.state.showRenoteButtonInNoteFooter"
-				ref="renoteButton"
-				v-vibrate="defaultStore.state.vibrateSystem ? [30, 30, 60] : []"
-				v-tooltip="i18n.ts.renote"
-				class="_button"
-				:class="$style.noteFooterButton"
-				@click.stop="defaultStore.state.renoteQuoteButtonSeparation && ((!defaultStore.state.renoteVisibilitySelection && !appearNote.channel) || (appearNote.channel && !appearNote.channel.allowRenoteToExternal) || appearNote.visibility === 'followers') ? renoteOnly() : renote()"
-			>
-				<i class="ti ti-repeat"></i>
-				<p v-if="appearNote.renoteCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.renoteCount) }}</p>
-			</button>
-			<button v-else-if="!canRenote" class="_button" :class="$style.noteFooterButton" disabled>
-				<i class="ti ti-ban"></i>
-			</button>
+			<template v-if="defaultStore.state.showReplyButtonInNoteFooter">
+				<button v-if="!note.isHidden" v-vibrate="defaultStore.state.vibrateSystem ? 5 : []" v-tooltip="i18n.ts.reply" class="_button" :class="$style.noteFooterButton" @click="reply()">
+					<i class="ti ti-arrow-back-up"></i>
+					<p v-if="appearNote.repliesCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.repliesCount) }}</p>
+				</button>
+				<button v-else-if="note.isHidden" class="_button" :class="$style.noteFooterButton" disabled>
+					<i class="ti ti-ban"></i>
+				</button>
+			</template>
+			<template v-if="defaultStore.state.showRenoteButtonInNoteFooter">
+				<button
+					v-if="canRenote"
+					ref="renoteButton"
+					v-vibrate="defaultStore.state.vibrateSystem ? [30, 30, 60] : []"
+					v-tooltip="i18n.ts.renote"
+					class="_button"
+					:class="$style.noteFooterButton"
+					@click.stop="defaultStore.state.renoteQuoteButtonSeparation && ((!defaultStore.state.renoteVisibilitySelection && !appearNote.channel) || (appearNote.channel && !appearNote.channel.allowRenoteToExternal) || appearNote.visibility === 'followers') ? renoteOnly() : renote()"
+				>
+					<i class="ti ti-repeat"></i>
+					<p v-if="appearNote.renoteCount > 0" :class="$style.noteFooterButtonCount">{{ number(appearNote.renoteCount) }}</p>
+				</button>
+				<button v-else-if="!canRenote" class="_button" :class="$style.noteFooterButton" disabled>
+					<i class="ti ti-ban"></i>
+				</button>
+			</template>
 			<button v-if="appearNote.reactionAcceptance !== 'likeOnly' && appearNote.myReaction == null && defaultStore.state.showLikeButtonInNoteFooter" ref="heartReactButton" v-vibrate="defaultStore.state.vibrateSystem ? [30, 50, 50] : []" v-tooltip="i18n.ts.like" :class="$style.noteFooterButton" class="_button" @click="heartReact()">
 				<i class="ti ti-heart"></i>
 			</button>

diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue
@@ -74,28 +74,32 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</template>
 		</MkReactionsViewer>
 		<footer :class="$style.footer">
-			<button v-if="!note.isHidden && defaultStore.state.showReplyButtonInNoteFooter" v-vibrate="defaultStore.state.vibrateSystem ? 5 : []" v-tooltip="i18n.ts.reply" :class="$style.footerButton" class="_button" @click.stop="reply()">
-				<i class="ti ti-arrow-back-up"></i>
-				<p v-if="note.repliesCount > 0" :class="$style.footerButtonCount">{{ note.repliesCount }}</p>
-			</button>
-			<button v-else-if="note.isHidden" :class="$style.footerButton" class="_button" disabled>
-				<i class="ti ti-ban"></i>
-			</button>
-			<button
-				v-if="canRenote && defaultStore.state.showRenoteButtonInNoteFooter"
-				ref="renoteButton"
-				v-vibrate="defaultStore.state.vibrateSystem ? [30, 50, 60] : []"
-				v-tooltip="i18n.ts.renote"
-				:class="$style.footerButton"
-				class="_button"
-				@click.stop="defaultStore.state.renoteQuoteButtonSeparation && ((!defaultStore.state.renoteVisibilitySelection && !note.channel) || (note.channel && !note.channel.allowRenoteToExternal) || note.visibility === 'followers') ? renoteOnly() : renote()"
-			>
-				<i class="ti ti-repeat"></i>
-				<p v-if="note.renoteCount > 0" :class="$style.footerButtonCount">{{ number(note.renoteCount) }}</p>
-			</button>
-			<button v-else-if="!canRenote" :class="$style.footerButton" class="_button" disabled>
-				<i class="ti ti-ban"></i>
-			</button>
+			<template v-if="defaultStore.state.showReplyButtonInNoteFooter">
+				<button v-if="!note.isHidden" v-vibrate="defaultStore.state.vibrateSystem ? 5 : []" v-tooltip="i18n.ts.reply" :class="$style.footerButton" class="_button" @click.stop="reply()">
+					<i class="ti ti-arrow-back-up"></i>
+					<p v-if="note.repliesCount > 0" :class="$style.footerButtonCount">{{ note.repliesCount }}</p>
+				</button>
+				<button v-else-if="note.isHidden" :class="$style.footerButton" class="_button" disabled>
+					<i class="ti ti-ban"></i>
+				</button>
+			</template>
+			<template v-if="defaultStore.state.showRenoteButtonInNoteFooter">
+				<button
+					v-if="canRenote"
+					ref="renoteButton"
+					v-vibrate="defaultStore.state.vibrateSystem ? [30, 50, 60] : []"
+					v-tooltip="i18n.ts.renote"
+					:class="$style.footerButton"
+					class="_button"
+					@click.stop="defaultStore.state.renoteQuoteButtonSeparation && ((!defaultStore.state.renoteVisibilitySelection && !note.channel) || (note.channel && !note.channel.allowRenoteToExternal) || note.visibility === 'followers') ? renoteOnly() : renote()"
+				>
+					<i class="ti ti-repeat"></i>
+					<p v-if="note.renoteCount > 0" :class="$style.footerButtonCount">{{ number(note.renoteCount) }}</p>
+				</button>
+				<button v-else-if="!canRenote" :class="$style.footerButton" class="_button" disabled>
+					<i class="ti ti-ban"></i>
+				</button>
+			</template>
 			<button v-if="note.reactionAcceptance !== 'likeOnly' && note.myReaction == null && defaultStore.state.showLikeButtonInNoteFooter" ref="heartReactButton" v-vibrate="defaultStore.state.vibrateSystem ? [30, 50, 50] : []" v-tooltip="i18n.ts.like" :class="$style.footerButton" class="_button" @click.stop="heartReact()">
 				<i class="ti ti-heart"></i>
 			</button>