From 6e6d9f3029dffeba71a7498467edcf8795f33832 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Wed, 28 Dec 2022 18:22:46 +0900
Subject: [PATCH] :art:
---
packages/frontend/src/components/MkButton.vue | 10 ++++--
.../frontend/src/components/MkUrlPreview.vue | 33 +++++++++++--------
2 files changed, 27 insertions(+), 16 deletions(-)
diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index 891645bb2a..20bce2104b 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -2,7 +2,7 @@
<button
v-if="!link"
ref="el" class="bghgjjyj _button"
- :class="{ inline, primary, gradate, danger, rounded, full }"
+ :class="{ inline, primary, gradate, danger, rounded, full, small }"
:type="type"
@click="emit('click', $event)"
@mousedown="onMousedown"
@@ -14,7 +14,7 @@
</button>
<MkA
v-else class="bghgjjyj _button"
- :class="{ inline, primary, gradate, danger, rounded, full }"
+ :class="{ inline, primary, gradate, danger, rounded, full, small }"
:to="to"
@mousedown="onMousedown"
>
@@ -40,6 +40,7 @@ const props = defineProps<{
wait?: boolean;
danger?: boolean;
full?: boolean;
+ small?: boolean;
}>();
const emit = defineEmits<{
@@ -125,6 +126,11 @@ function onMousedown(evt: MouseEvent): void {
background: var(--buttonHoverBg);
}
+ &.small {
+ font-size: 90%;
+ padding: 6px 12px;
+ }
+
&.full {
width: 100%;
}
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index 4635537f9a..eb96b729b8 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -10,7 +10,6 @@
<transition :name="$store.state.animation ? 'zoom' : ''" mode="out-in">
<component :is="self ? 'MkA' : 'a'" v-if="!fetching" class="link" :class="{ compact }" :[attr]="self ? url.substr(local.length) : url" rel="nofollow noopener" :target="target" :title="url">
<div v-if="thumbnail" class="thumbnail" :style="`background-image: url('${thumbnail}')`">
- <button v-if="!playerEnabled && player.url" class="_button" :title="i18n.ts.enablePlayer" @click.prevent="isMobile? playerEnabled = true : openPlayer()"><i class="ti ti-player-play"></i></button>
</div>
<article>
<header>
@@ -24,10 +23,18 @@
</article>
</component>
</transition>
- <div v-if="tweetId" class="expandTweet">
- <a @click="tweetExpanded = true">
+ <div v-if="tweetId" class="action">
+ <MkButton :small="true" inline @click="tweetExpanded = true">
<i class="ti ti-brand-twitter"></i> {{ i18n.ts.expandTweet }}
- </a>
+ </MkButton>
+ </div>
+ <div v-if="!playerEnabled && player.url" class="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>
</div>
</template>
@@ -38,6 +45,7 @@ import { url as local, lang } from '@/config';
import { i18n } from '@/i18n';
import * as os from '@/os';
import { deviceKind } from '@/scripts/device-kind';
+import MkButton from '@/components/MkButton.vue';
const props = withDefaults(defineProps<{
url: string;
@@ -181,16 +189,6 @@ onUnmounted(() => {
justify-content: center;
align-items: center;
- > button {
- font-size: 3.5em;
- opacity: 0.7;
-
- &:hover {
- font-size: 4em;
- opacity: 0.9;
- }
- }
-
& + article {
left: 100px;
width: calc(100% - 100px);
@@ -249,6 +247,13 @@ onUnmounted(() => {
}
}
}
+
+ > .action {
+ display: flex;
+ gap: 6px;
+ flex-wrap: wrap;
+ margin-top: 6px;
+ }
}
@container (max-width: 400px) {