From 6f489b58a18310fa9d8aef695d984f7ceb312102 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?= <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Wed, 17 Apr 2024 10:48:42 +0900 Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=83=9A=E3=83=BC?= =?UTF-8?q?=E3=82=B8=E3=81=AE=E8=A1=A8=E7=A4=BA=E9=83=A8=E4=B8=8A=E9=83=A8?= =?UTF-8?q?=E3=81=AB=E7=B7=A8=E9=9B=86=E3=83=AA=E3=83=B3=E3=82=AF=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0=20(#13724)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/pages/page.vue | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue index ab44533b81..893c2deebf 100644 --- a/packages/frontend/src/pages/page.vue +++ b/packages/frontend/src/pages/page.vue @@ -12,6 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only :leaveActiveClass="defaultStore.state.animation ? $style.fadeLeaveActive : ''" :enterFromClass="defaultStore.state.animation ? $style.fadeEnterFrom : ''" :leaveToClass="defaultStore.state.animation ? $style.fadeLeaveTo : ''" + mode="out-in" > <div v-if="page" :key="page.id" class="_gaps"> <div :class="$style.pageMain"> @@ -41,8 +42,14 @@ SPDX-License-Identifier: AGPL-3.0-only </div> <div :class="$style.pageBannerTitle" class="_gaps_s"> <h1>{{ page.title || page.name }}</h1> - <div v-if="page.user" :class="$style.pageBannerTitleUser"> - <MkAvatar :user="page.user" :class="$style.avatar" indicator link preview/> <MkA :to="`/@${username}`"><MkUserName :user="page.user" :nowrap="false"/></MkA> + <div :class="$style.pageBannerTitleSub"> + <div v-if="page.user" :class="$style.pageBannerTitleUser"> + <MkAvatar :user="page.user" :class="$style.avatar" indicator link preview/> <MkA :to="`/@${username}`"><MkUserName :user="page.user" :nowrap="false"/></MkA> + </div> + <div :class="$style.pageBannerTitleSubActions"> + <button v-tooltip="i18n.ts.share" class="_button" :class="$style.generalActionButton" @click="share"><i class="ti ti-share ti-fw"></i></button> + <MkA v-if="page.userId === $i?.id" v-tooltip="i18n.ts._pages.editThisPage" :to="`/pages/edit/${page.id}`" class="_button" :class="$style.generalActionButton"><i class="ti ti-pencil ti-fw"></i></MkA> + </div> </div> </div> </div> @@ -355,8 +362,15 @@ definePageMetadata(() => ({ margin: 0; } + .pageBannerTitleSub { + display: flex; + align-items: center; + width: 100%; + } + .pageBannerTitleUser { --height: 32px; + flex-shrink: 0; .avatar { height: var(--height); @@ -365,6 +379,14 @@ definePageMetadata(() => ({ line-height: var(--height); } + + .pageBannerTitleSubActions { + flex-shrink: 0; + display: flex; + align-items: center; + gap: var(--marginHalf); + margin-left: auto; + } } }