enhance(frontend): ページの表示部上部に編集リンクを追加 (#13724)

This commit is contained in:
かっこかり 2024-04-17 10:48:42 +09:00 committed by GitHub
parent e9e877f64e
commit 6f489b58a1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 24 additions and 2 deletions

View File

@ -12,6 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:leaveActiveClass="defaultStore.state.animation ? $style.fadeLeaveActive : ''" :leaveActiveClass="defaultStore.state.animation ? $style.fadeLeaveActive : ''"
:enterFromClass="defaultStore.state.animation ? $style.fadeEnterFrom : ''" :enterFromClass="defaultStore.state.animation ? $style.fadeEnterFrom : ''"
:leaveToClass="defaultStore.state.animation ? $style.fadeLeaveTo : ''" :leaveToClass="defaultStore.state.animation ? $style.fadeLeaveTo : ''"
mode="out-in"
> >
<div v-if="page" :key="page.id" class="_gaps"> <div v-if="page" :key="page.id" class="_gaps">
<div :class="$style.pageMain"> <div :class="$style.pageMain">
@ -41,9 +42,15 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<div :class="$style.pageBannerTitle" class="_gaps_s"> <div :class="$style.pageBannerTitle" class="_gaps_s">
<h1>{{ page.title || page.name }}</h1> <h1>{{ page.title || page.name }}</h1>
<div :class="$style.pageBannerTitleSub">
<div v-if="page.user" :class="$style.pageBannerTitleUser"> <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> <MkAvatar :user="page.user" :class="$style.avatar" indicator link preview/> <MkA :to="`/@${username}`"><MkUserName :user="page.user" :nowrap="false"/></MkA>
</div> </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>
</div> </div>
<div :class="$style.pageContent"> <div :class="$style.pageContent">
@ -355,8 +362,15 @@ definePageMetadata(() => ({
margin: 0; margin: 0;
} }
.pageBannerTitleSub {
display: flex;
align-items: center;
width: 100%;
}
.pageBannerTitleUser { .pageBannerTitleUser {
--height: 32px; --height: 32px;
flex-shrink: 0;
.avatar { .avatar {
height: var(--height); height: var(--height);
@ -365,6 +379,14 @@ definePageMetadata(() => ({
line-height: var(--height); line-height: var(--height);
} }
.pageBannerTitleSubActions {
flex-shrink: 0;
display: flex;
align-items: center;
gap: var(--marginHalf);
margin-left: auto;
}
} }
} }