From 0d2e3df061aaeaf6b6239bb4079f563351d1dfda Mon Sep 17 00:00:00 2001 From: woxtu <woxtup@gmail.com> Date: Fri, 21 Jul 2023 09:57:21 +0900 Subject: [PATCH] Hide action buttons on `MkUrlPreviewPopup` (#11332) --- .../frontend/src/components/MkUrlPreview.vue | 30 +++++++++++-------- .../src/components/MkUrlPreviewPopup.vue | 2 +- 2 files changed, 18 insertions(+), 14 deletions(-) diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue index 5c37f70bd9..f7b1b7dfff 100644 --- a/packages/frontend/src/components/MkUrlPreview.vue +++ b/packages/frontend/src/components/MkUrlPreview.vue @@ -52,19 +52,21 @@ </footer> </article> </component> - <div v-if="tweetId" :class="$style.action"> - <MkButton :small="true" inline @click="tweetExpanded = true"> - <i class="ti ti-brand-twitter"></i> {{ i18n.ts.expandTweet }} - </MkButton> - </div> - <div v-if="!playerEnabled && player.url" :class="$style.action"> - <MkButton :small="true" inline @click="playerEnabled = true"> - <i class="ti ti-player-play"></i> {{ i18n.ts.enablePlayer }} - </MkButton> - <MkButton v-if="!isMobile" :small="true" inline @click="openPlayer()"> - <i class="ti ti-picture-in-picture"></i> {{ i18n.ts.openInWindow }} - </MkButton> - </div> + <template v-if="showActions"> + <div v-if="tweetId" :class="$style.action"> + <MkButton :small="true" inline @click="tweetExpanded = true"> + <i class="ti ti-brand-twitter"></i> {{ i18n.ts.expandTweet }} + </MkButton> + </div> + <div v-if="!playerEnabled && player.url" :class="$style.action"> + <MkButton :small="true" inline @click="playerEnabled = true"> + <i class="ti ti-player-play"></i> {{ i18n.ts.enablePlayer }} + </MkButton> + <MkButton v-if="!isMobile" :small="true" inline @click="openPlayer()"> + <i class="ti ti-picture-in-picture"></i> {{ i18n.ts.openInWindow }} + </MkButton> + </div> + </template> </div> </template> @@ -85,9 +87,11 @@ const props = withDefaults(defineProps<{ url: string; detail?: boolean; compact?: boolean; + showActions?: boolean; }>(), { detail: false, compact: false, + showActions: true, }); const MOBILE_THRESHOLD = 500; diff --git a/packages/frontend/src/components/MkUrlPreviewPopup.vue b/packages/frontend/src/components/MkUrlPreviewPopup.vue index 36a9e2f73f..d360169c82 100644 --- a/packages/frontend/src/components/MkUrlPreviewPopup.vue +++ b/packages/frontend/src/components/MkUrlPreviewPopup.vue @@ -1,7 +1,7 @@ <template> <div :class="$style.root" :style="{ zIndex, top: top + 'px', left: left + 'px' }"> <Transition :name="defaultStore.state.animation ? '_transition_zoom' : ''" @afterLeave="emit('closed')"> - <MkUrlPreview v-if="showing" class="_popup _shadow" :url="url"/> + <MkUrlPreview v-if="showing" class="_popup _shadow" :url="url" :showActions="false"/> </Transition> </div> </template>