usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): prevent transition glitch of MkHorizontalSwipe

This commit is contained in:
syuilo 2025-03-20 20:28:16 +09:00
parent 6015254e59
commit 1fd87bd2e4
15 changed files with 79 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/frontend/src/components/MkHorizontalSwipe.vue
View File

@ -19,9 +19,9 @@ SPDX-License-Identifier: AGPL-3.0-only
:leaveToClass="transitionName === 'swipeAnimationLeft' ? $style.swipeAnimationLeft_leaveTo : $style.swipeAnimationRight_leaveTo" :leaveToClass="transitionName === 'swipeAnimationLeft' ? $style.swipeAnimationLeft_leaveTo : $style.swipeAnimationRight_leaveTo"
:style="`--swipe: ${pullDistance}px;`" :style="`--swipe: ${pullDistance}px;`"
> >
<!-- 【注意】slot内の最上位要素に動的にkeyを設定すること --> <div :key="tabModel">
<!-- 各最上位要素にユニークなkeyの指定がないとTransitionがうまく動きません --> <slot></slot>
<slot></slot> </div>
</Transition> </Transition>
</div> </div>
</template> </template>

8
packages/frontend/src/pages/channel.vue
View File

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700" :class="$style.main"> <MkSpacer :contentMax="700" :class="$style.main">
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
<div v-if="channel && tab === 'overview'" key="overview" class="_gaps"> <div v-if="channel && tab === 'overview'" class="_gaps">
<div class="_panel" :class="$style.bannerContainer"> <div class="_panel" :class="$style.bannerContainer">
<XChannelFollowButton :channel="channel" :full="true" :class="$style.subscribe"/> <XChannelFollowButton :channel="channel" :full="true" :class="$style.subscribe"/>
<MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" asLike class="button" rounded primary :class="$style.favorite" @click="unfavorite()"><i class="ti ti-star"></i></MkButton> <MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" asLike class="button" rounded primary :class="$style.favorite" @click="unfavorite()"><i class="ti ti-star"></i></MkButton>
@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</MkFoldableSection> </MkFoldableSection>
</div> </div>
<div v-if="channel && tab === 'timeline'" key="timeline" class="_gaps"> <div v-if="channel && tab === 'timeline'" class="_gaps">
<MkInfo v-if="channel.isArchived" warn>{{ i18n.ts.thisChannelArchived }}</MkInfo> <MkInfo v-if="channel.isArchived" warn>{{ i18n.ts.thisChannelArchived }}</MkInfo>
<!-- スマホ・タブレットの場合、キーボードが表示されると投稿が見づらくなるので、デスクトップ場合のみ自動でフォーカスを当てる --> <!-- スマホ・タブレットの場合、キーボードが表示されると投稿が見づらくなるので、デスクトップ場合のみ自動でフォーカスを当てる -->
@ -41,10 +41,10 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkTimeline :key="channelId" src="channel" :channel="channelId" @before="before" @after="after" @note="miLocalStorage.setItemAsJson(`channelLastReadedAt:${channel.id}`, Date.now())"/> <MkTimeline :key="channelId" src="channel" :channel="channelId" @before="before" @after="after" @note="miLocalStorage.setItemAsJson(`channelLastReadedAt:${channel.id}`, Date.now())"/>
</div> </div>
<div v-else-if="tab === 'featured'" key="featured"> <div v-else-if="tab === 'featured'">
<MkNotes :pagination="featuredPagination"/> <MkNotes :pagination="featuredPagination"/>
</div> </div>
<div v-else-if="tab === 'search'" key="search"> <div v-else-if="tab === 'search'">
<div v-if="notesSearchAvailable" class="_gaps"> <div v-if="notesSearchAvailable" class="_gaps">
<div> <div>
<MkInput v-model="searchQuery" @enter="search()"> <MkInput v-model="searchQuery" @enter="search()">

10
packages/frontend/src/pages/channels.vue
View File

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="1200"> <MkSpacer :contentMax="1200">
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
<div v-if="tab === 'search'" key="search" :class="$style.searchRoot"> <div v-if="tab === 'search'" :class="$style.searchRoot">
<div class="_gaps"> <div class="_gaps">
<MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" @enter="search"> <MkInput v-model="searchQuery" :large="true" :autofocus="true" type="search" @enter="search">
<template #prefix><i class="ti ti-search"></i></template> <template #prefix><i class="ti ti-search"></i></template>
@ -25,28 +25,28 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkChannelList :key="key" :pagination="channelPagination"/> <MkChannelList :key="key" :pagination="channelPagination"/>
</MkFoldableSection> </MkFoldableSection>
</div> </div>
<div v-if="tab === 'featured'" key="featured"> <div v-if="tab === 'featured'">
<MkPagination v-slot="{items}" :pagination="featuredPagination"> <MkPagination v-slot="{items}" :pagination="featuredPagination">
<div :class="$style.root"> <div :class="$style.root">
<MkChannelPreview v-for="channel in items" :key="channel.id" :channel="channel"/> <MkChannelPreview v-for="channel in items" :key="channel.id" :channel="channel"/>
</div> </div>
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'favorites'" key="favorites"> <div v-else-if="tab === 'favorites'">
<MkPagination v-slot="{items}" :pagination="favoritesPagination"> <MkPagination v-slot="{items}" :pagination="favoritesPagination">
<div :class="$style.root"> <div :class="$style.root">
<MkChannelPreview v-for="channel in items" :key="channel.id" :channel="channel"/> <MkChannelPreview v-for="channel in items" :key="channel.id" :channel="channel"/>
</div> </div>
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'following'" key="following"> <div v-else-if="tab === 'following'">
<MkPagination v-slot="{items}" :pagination="followingPagination"> <MkPagination v-slot="{items}" :pagination="followingPagination">
<div :class="$style.root"> <div :class="$style.root">
<MkChannelPreview v-for="channel in items" :key="channel.id" :channel="channel"/> <MkChannelPreview v-for="channel in items" :key="channel.id" :channel="channel"/>
</div> </div>
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'owned'" key="owned"> <div v-else-if="tab === 'owned'">
<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton> <MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
<MkPagination v-slot="{items}" :pagination="ownedPagination"> <MkPagination v-slot="{items}" :pagination="ownedPagination">
<div :class="$style.root"> <div :class="$style.root">

4
packages/frontend/src/pages/drive.file.vue
View File

@ -10,11 +10,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
<MkSpacer v-if="tab === 'info'" key="info" :contentMax="800"> <MkSpacer v-if="tab === 'info'" :contentMax="800">
<XFileInfo :fileId="fileId"/> <XFileInfo :fileId="fileId"/>
</MkSpacer> </MkSpacer>
<MkSpacer v-else-if="tab === 'notes'" key="notes" :contentMax="800"> <MkSpacer v-else-if="tab === 'notes'" :contentMax="800">
<XNotes :fileId="fileId"/> <XNotes :fileId="fileId"/>
</MkSpacer> </MkSpacer>
</MkHorizontalSwipe> </MkHorizontalSwipe>

6
packages/frontend/src/pages/explore.vue
View File

@ -7,13 +7,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
<div v-if="tab === 'featured'" key="featured"> <div v-if="tab === 'featured'">
<XFeatured/> <XFeatured/>
</div> </div>
<div v-else-if="tab === 'users'" key="users"> <div v-else-if="tab === 'users'">
<XUsers/> <XUsers/>
</div> </div>
<div v-else-if="tab === 'roles'" key="roles"> <div v-else-if="tab === 'roles'">
<XRoles/> <XRoles/>
</div> </div>
</MkHorizontalSwipe> </MkHorizontalSwipe>

6
packages/frontend/src/pages/flash/flash-index.vue
View File

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700"> <MkSpacer :contentMax="700">
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
<div v-if="tab === 'featured'" key="featured"> <div v-if="tab === 'featured'">
<MkPagination v-slot="{items}" :pagination="featuredFlashsPagination"> <MkPagination v-slot="{items}" :pagination="featuredFlashsPagination">
<div class="_gaps_s"> <div class="_gaps_s">
<MkFlashPreview v-for="flash in items" :key="flash.id" :flash="flash"/> <MkFlashPreview v-for="flash in items" :key="flash.id" :flash="flash"/>
@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'my'" key="my"> <div v-else-if="tab === 'my'" ">
<div class="_gaps"> <div class="_gaps">
<MkButton gradate rounded style="margin: 0 auto;" @click="create()"><i class="ti ti-plus"></i></MkButton> <MkButton gradate rounded style="margin: 0 auto;" @click="create()"><i class="ti ti-plus"></i></MkButton>
<MkPagination v-slot="{items}" :pagination="myFlashsPagination"> <MkPagination v-slot="{items}" :pagination="myFlashsPagination">
@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
<div v-else-if="tab === 'liked'" key="liked"> <div v-else-if="tab === 'liked'">
<MkPagination v-slot="{items}" :pagination="likedFlashsPagination"> <MkPagination v-slot="{items}" :pagination="likedFlashsPagination">
<div class="_gaps_s"> <div class="_gaps_s">
<MkFlashPreview v-for="like in items" :key="like.flash.id" :flash="like.flash"/> <MkFlashPreview v-for="like in items" :key="like.flash.id" :flash="like.flash"/>

52
packages/frontend/src/pages/follow-requests.vue
View File

@ -8,36 +8,34 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="800"> <MkSpacer :contentMax="800">
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
<div :key="tab" class="_gaps"> <MkPagination ref="paginationComponent" :pagination="pagination">
<MkPagination ref="paginationComponent" :pagination="pagination"> <template #empty>
<template #empty> <div class="_fullinfo">
<div class="_fullinfo"> <img :src="infoImageUrl" draggable="false"/>
<img :src="infoImageUrl" draggable="false"/> <div>{{ i18n.ts.noFollowRequests }}</div>
<div>{{ i18n.ts.noFollowRequests }}</div> </div>
</div> </template>
</template> <template #default="{items}">
<template #default="{items}"> <div class="mk-follow-requests _gaps">
<div class="mk-follow-requests _gaps"> <div v-for="req in items" :key="req.id" class="user _panel">
<div v-for="req in items" :key="req.id" class="user _panel"> <MkAvatar class="avatar" :user="displayUser(req)" indicator link preview/>
<MkAvatar class="avatar" :user="displayUser(req)" indicator link preview/> <div class="body">
<div class="body"> <div class="name">
<div class="name"> <MkA v-user-preview="displayUser(req).id" class="name" :to="userPage(displayUser(req))"><MkUserName :user="displayUser(req)"/></MkA>
<MkA v-user-preview="displayUser(req).id" class="name" :to="userPage(displayUser(req))"><MkUserName :user="displayUser(req)"/></MkA> <p class="acct">@{{ acct(displayUser(req)) }}</p>
<p class="acct">@{{ acct(displayUser(req)) }}</p> </div>
</div> <div v-if="tab === 'list'" class="commands">
<div v-if="tab === 'list'" class="commands"> <MkButton class="command" rounded primary @click="accept(displayUser(req))"><i class="ti ti-check"/> {{ i18n.ts.accept }}</MkButton>
<MkButton class="command" rounded primary @click="accept(displayUser(req))"><i class="ti ti-check"/> {{ i18n.ts.accept }}</MkButton> <MkButton class="command" rounded danger @click="reject(displayUser(req))"><i class="ti ti-x"/> {{ i18n.ts.reject }}</MkButton>
<MkButton class="command" rounded danger @click="reject(displayUser(req))"><i class="ti ti-x"/> {{ i18n.ts.reject }}</MkButton> </div>
</div> <div v-else class="commands">
<div v-else class="commands"> <MkButton class="command" rounded danger @click="cancel(displayUser(req))"><i class="ti ti-x"/> {{ i18n.ts.cancel }}</MkButton>
<MkButton class="command" rounded danger @click="cancel(displayUser(req))"><i class="ti ti-x"/> {{ i18n.ts.cancel }}</MkButton>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </div>
</MkPagination> </template>
</div> </MkPagination>
</MkHorizontalSwipe> </MkHorizontalSwipe>
</MkSpacer> </MkSpacer>
</MkStickyContainer> </MkStickyContainer>

6
packages/frontend/src/pages/gallery/index.vue
View File

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="1400"> <MkSpacer :contentMax="1400">
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
<div v-if="tab === 'explore'" key="explore"> <div v-if="tab === 'explore'">
<MkFoldableSection class="_margin"> <MkFoldableSection class="_margin">
<template #header><i class="ti ti-clock"></i>{{ i18n.ts.recentPosts }}</template> <template #header><i class="ti ti-clock"></i>{{ i18n.ts.recentPosts }}</template>
<MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disableAutoLoad="true"> <MkPagination v-slot="{items}" :pagination="recentPostsPagination" :disableAutoLoad="true">
@ -26,14 +26,14 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkPagination> </MkPagination>
</MkFoldableSection> </MkFoldableSection>
</div> </div>
<div v-else-if="tab === 'liked'" key="liked"> <div v-else-if="tab === 'liked'">
<MkPagination v-slot="{items}" :pagination="likedPostsPagination"> <MkPagination v-slot="{items}" :pagination="likedPostsPagination">
<div :class="$style.items"> <div :class="$style.items">
<MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/> <MkGalleryPostPreview v-for="like in items" :key="like.id" :post="like.post" class="post"/>
</div> </div>
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'my'" key="my"> <div v-else-if="tab === 'my'">
<MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="ti ti-plus"></i> {{ i18n.ts.postToGallery }}</MkA> <MkA to="/gallery/new" class="_link" style="margin: 16px;"><i class="ti ti-plus"></i> {{ i18n.ts.postToGallery }}</MkA>
<MkPagination v-slot="{items}" :pagination="myPostsPagination"> <MkPagination v-slot="{items}" :pagination="myPostsPagination">
<div :class="$style.items"> <div :class="$style.items">

12
packages/frontend/src/pages/instance-info.vue
View File

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer v-if="instance" :contentMax="600" :marginMin="16" :marginMax="32"> <MkSpacer v-if="instance" :contentMax="600" :marginMin="16" :marginMax="32">
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
<div v-if="tab === 'overview'" key="overview" class="_gaps_m"> <div v-if="tab === 'overview'" class="_gaps_m">
<div class="fnfelxur"> <div class="fnfelxur">
<img :src="faviconUrl" alt="" class="icon"/> <img :src="faviconUrl" alt="" class="icon"/>
<span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span> <span class="name">{{ instance.name || `(${i18n.ts.unknown})` }}</span>
@ -91,7 +91,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink> <FormLink :to="`https://${host}/manifest.json`" external style="margin-bottom: 8px;">manifest.json</FormLink>
</FormSection> </FormSection>
</div> </div>
<div v-else-if="tab === 'chart'" key="chart" class="_gaps_m"> <div v-else-if="tab === 'chart'" class="_gaps_m">
<div class="cmhjzshl"> <div class="cmhjzshl">
<div class="selects"> <div class="selects">
<MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;"> <MkSelect v-model="chartSrc" style="margin: 0 10px 0 0; flex: 1;">
@ -116,14 +116,14 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
</div> </div>
<div v-else-if="tab === 'users'" key="users" class="_gaps_m"> <div v-else-if="tab === 'users'" class="_gaps_m">
<MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;"> <MkPagination v-slot="{items}" :pagination="usersPagination" style="display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); grid-gap: 12px;">
<MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" class="user" :to="`/admin/user/${user.id}`"> <MkA v-for="user in items" :key="user.id" v-tooltip.mfm="`Last posted: ${dateString(user.updatedAt)}`" class="user" :to="`/admin/user/${user.id}`">
<MkUserCardMini :user="user"/> <MkUserCardMini :user="user"/>
</MkA> </MkA>
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'raw'" key="raw" class="_gaps_m"> <div v-else-if="tab === 'raw'" class="_gaps_m">
<MkObjectView tall :value="instance"> <MkObjectView tall :value="instance">
</MkObjectView> </MkObjectView>
</div> </div>
@ -135,8 +135,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup> <script lang="ts" setup>
import { ref, computed, watch } from 'vue'; import { ref, computed, watch } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import MkChart from '@/components/MkChart.vue';
import type { ChartSrc } from '@/components/MkChart.vue'; import type { ChartSrc } from '@/components/MkChart.vue';
import type { Paging } from '@/components/MkPagination.vue';
import MkChart from '@/components/MkChart.vue';
import MkObjectView from '@/components/MkObjectView.vue'; import MkObjectView from '@/components/MkObjectView.vue';
import FormLink from '@/components/form/link.vue'; import FormLink from '@/components/form/link.vue';
import MkLink from '@/components/MkLink.vue'; import MkLink from '@/components/MkLink.vue';
@ -153,7 +154,6 @@ import { definePage } from '@/page.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import MkUserCardMini from '@/components/MkUserCardMini.vue'; import MkUserCardMini from '@/components/MkUserCardMini.vue';
import MkPagination from '@/components/MkPagination.vue'; import MkPagination from '@/components/MkPagination.vue';
import type { Paging } from '@/components/MkPagination.vue';
import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js'; import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js';
import { dateString } from '@/filters/date.js'; import { dateString } from '@/filters/date.js';

4
packages/frontend/src/pages/my-clips/index.vue
View File

@ -8,14 +8,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700"> <MkSpacer :contentMax="700">
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
<div v-if="tab === 'my'" key="my" class="_gaps"> <div v-if="tab === 'my'" class="_gaps">
<MkButton primary rounded class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton> <MkButton primary rounded class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
<MkPagination v-slot="{ items }" ref="pagingComponent" :pagination="pagination" class="_gaps"> <MkPagination v-slot="{ items }" ref="pagingComponent" :pagination="pagination" class="_gaps">
<MkClipPreview v-for="item in items" :key="item.id" :clip="item" :noUserInfo="true"/> <MkClipPreview v-for="item in items" :key="item.id" :clip="item" :noUserInfo="true"/>
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'favorites'" key="favorites" class="_gaps"> <div v-else-if="tab === 'favorites'" class="_gaps">
<MkClipPreview v-for="item in favorites" :key="item.id" :clip="item"/> <MkClipPreview v-for="item in favorites" :key="item.id" :clip="item"/>
</div> </div>
</MkHorizontalSwipe> </MkHorizontalSwipe>

8
packages/frontend/src/pages/notifications.vue
View File

@ -8,13 +8,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="800"> <MkSpacer :contentMax="800">
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
<div v-if="tab === 'all'" key="all"> <div v-if="tab === 'all'">
<XNotifications :class="$style.notifications" :excludeTypes="excludeTypes"/> <XNotifications :class="$style.notifications" :excludeTypes="excludeTypes"/>
</div> </div>
<div v-else-if="tab === 'mentions'" key="mention"> <div v-else-if="tab === 'mentions'">
<MkNotes :pagination="mentionsPagination"/> <MkNotes :pagination="mentionsPagination"/>
</div> </div>
<div v-else-if="tab === 'directNotes'" key="directNotes"> <div v-else-if="tab === 'directNotes'">
<MkNotes :pagination="directNotesPagination"/> <MkNotes :pagination="directNotesPagination"/>
</div> </div>
</MkHorizontalSwipe> </MkHorizontalSwipe>
@ -24,13 +24,13 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { notificationTypes } from '@@/js/const.js';
import XNotifications from '@/components/MkNotifications.vue'; import XNotifications from '@/components/MkNotifications.vue';
import MkNotes from '@/components/MkNotes.vue'; import MkNotes from '@/components/MkNotes.vue';
import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue'; import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { definePage } from '@/page.js'; import { definePage } from '@/page.js';
import { notificationTypes } from '@@/js/const.js';
const tab = ref('all'); const tab = ref('all');
const includeTypes = ref<string[] | null>(null); const includeTypes = ref<string[] | null>(null);

6
packages/frontend/src/pages/pages.vue
View File

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkSpacer :contentMax="700"> <MkSpacer :contentMax="700">
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
<div v-if="tab === 'featured'" key="featured"> <div v-if="tab === 'featured'">
<MkPagination v-slot="{items}" :pagination="featuredPagesPagination"> <MkPagination v-slot="{items}" :pagination="featuredPagesPagination">
<div class="_gaps"> <div class="_gaps">
<MkPagePreview v-for="page in items" :key="page.id" :page="page"/> <MkPagePreview v-for="page in items" :key="page.id" :page="page"/>
@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'my'" key="my" class="_gaps"> <div v-else-if="tab === 'my'" class="_gaps">
<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton> <MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
<MkPagination v-slot="{items}" :pagination="myPagesPagination"> <MkPagination v-slot="{items}" :pagination="myPagesPagination">
<div class="_gaps"> <div class="_gaps">
@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkPagination> </MkPagination>
</div> </div>
<div v-else-if="tab === 'liked'" key="liked"> <div v-else-if="tab === 'liked'">
<MkPagination v-slot="{items}" :pagination="likedPagesPagination"> <MkPagination v-slot="{items}" :pagination="likedPagesPagination">
<div class="_gaps"> <div class="_gaps">
<MkPagePreview v-for="like in items" :key="like.page.id" :page="like.page"/> <MkPagePreview v-for="like in items" :key="like.page.id" :page="like.page"/>

4
packages/frontend/src/pages/search.vue
View File

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
<MkSpacer v-if="tab === 'note'" key="note" :contentMax="800"> <MkSpacer v-if="tab === 'note'" :contentMax="800">
<div v-if="notesSearchAvailable || ignoreNotesSearchAvailable"> <div v-if="notesSearchAvailable || ignoreNotesSearchAvailable">
<XNote v-bind="props"/> <XNote v-bind="props"/>
</div> </div>
@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</MkSpacer> </MkSpacer>
<MkSpacer v-else-if="tab === 'user'" key="user" :contentMax="800"> <MkSpacer v-else-if="tab === 'user'" :contentMax="800">
<XUser v-bind="props"/> <XUser v-bind="props"/>
</MkSpacer> </MkSpacer>
</MkHorizontalSwipe> </MkHorizontalSwipe>

4
packages/frontend/src/pages/timeline.vue
View File

@ -4,11 +4,11 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkStickyContainer> <MkStickyContainer class="_pageScrollable">
<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/></template> <template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/></template>
<MkSpacer :contentMax="800"> <MkSpacer :contentMax="800">
<MkHorizontalSwipe v-model:tab="src" :tabs="$i ? headerTabs : headerTabsWhenNotLogin"> <MkHorizontalSwipe v-model:tab="src" :tabs="$i ? headerTabs : headerTabsWhenNotLogin">
<div :key="src" ref="rootEl"> <div ref="rootEl">
<MkInfo v-if="isBasicTimeline(src) && !store.r.timelineTutorials.value[src]" style="margin-bottom: var(--MI-margin);" closable @close="closeTutorial()"> <MkInfo v-if="isBasicTimeline(src) && !store.r.timelineTutorials.value[src]" style="margin-bottom: var(--MI-margin);" closable @close="closeTutorial()">
{{ i18n.ts._timelineDescription[src] }} {{ i18n.ts._timelineDescription[src] }}
</MkInfo> </MkInfo>

24
packages/frontend/src/pages/user/index.vue
View File

@ -4,25 +4,25 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkStickyContainer> <MkStickyContainer class="_pageScrollable">
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
<div> <div>
<div v-if="user"> <div v-if="user">
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
<XHome v-if="tab === 'home'" key="home" :user="user" @unfoldFiles="() => { tab = 'files'; }"/> <XHome v-if="tab === 'home'" :user="user" @unfoldFiles="() => { tab = 'files'; }"/>
<MkSpacer v-else-if="tab === 'notes'" key="notes" :contentMax="800" style="padding-top: 0"> <MkSpacer v-else-if="tab === 'notes'" :contentMax="800" style="padding-top: 0">
<XTimeline :user="user"/> <XTimeline :user="user"/>
</MkSpacer> </MkSpacer>
<XFiles v-else-if="tab === 'files'" :user="user"/> <XFiles v-else-if="tab === 'files'" :user="user"/>
<XActivity v-else-if="tab === 'activity'" key="activity" :user="user"/> <XActivity v-else-if="tab === 'activity'" :user="user"/>
<XAchievements v-else-if="tab === 'achievements'" key="achievements" :user="user"/> <XAchievements v-else-if="tab === 'achievements'" :user="user"/>
<XReactions v-else-if="tab === 'reactions'" key="reactions" :user="user"/> <XReactions v-else-if="tab === 'reactions'" :user="user"/>
<XClips v-else-if="tab === 'clips'" key="clips" :user="user"/> <XClips v-else-if="tab === 'clips'" :user="user"/>
<XLists v-else-if="tab === 'lists'" key="lists" :user="user"/> <XLists v-else-if="tab === 'lists'" :user="user"/>
<XPages v-else-if="tab === 'pages'" key="pages" :user="user"/> <XPages v-else-if="tab === 'pages'" :user="user"/>
<XFlashs v-else-if="tab === 'flashs'" key="flashs" :user="user"/> <XFlashs v-else-if="tab === 'flashs'" :user="user"/>
<XGallery v-else-if="tab === 'gallery'" key="gallery" :user="user"/> <XGallery v-else-if="tab === 'gallery'" :user="user"/>
<XRaw v-else-if="tab === 'raw'" key="raw" :user="user"/> <XRaw v-else-if="tab === 'raw'" :user="user"/>
</MkHorizontalSwipe> </MkHorizontalSwipe>
</div> </div>
<MkError v-else-if="error" @retry="fetchUser()"/> <MkError v-else-if="error" @retry="fetchUser()"/>