rsesot/misskey
1
0
Fork 0
forked from mirrors/misskey
Code Pull Requests Activity

perf(frontend): use css-native implementation for spacer rather than vue component

Browse Source
This commit is contained in:
syuilo
2025-04-27 19:55:56 +09:00
parent c4f13a0472
commit 0a1ff77f23
143 changed files with 370 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/pages/user/achievements.vue
View File

@@ -4,9 +4,9 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="1200">
<div class="_spacer" style="--MI_SPACER-w: 1200px;">
<MkAchievements :user="user" :withLocked="false" :withDescription="$i != null && (props.user.id === $i.id)"/>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>

4
packages/frontend/src/pages/user/activity.vue
View File

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div class="_gaps">
<MkFoldableSection class="item">
<template #header><i class="ti ti-activity"></i> Heatmap</template>
@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<XPv :user="user"/>
</MkFoldableSection>
</div>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>

4
packages/frontend/src/pages/user/clips.vue
View File

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div>
<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" :class="$style.item" class="_panel _margin">
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkA>
</MkPagination>
</div>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>

4
packages/frontend/src/pages/user/files.vue
View File

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="1100">
<div class="_spacer" style="--MI_SPACER-w: 1100px;">
<div :class="$style.root">
<MkPagination v-slot="{items}" :pagination="pagination">
<div :class="$style.stream">
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
</MkPagination>
</div>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>

4
packages/frontend/src/pages/user/flashs.vue
View File

@@ -4,11 +4,11 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
<MkFlashPreview v-for="flash in items" :key="flash.id" :flash="flash" class="_margin"/>
</MkPagination>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>

4
packages/frontend/src/pages/user/followers.vue
View File

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="1000">
<div class="_spacer" style="--MI_SPACER-w: 1000px;">
<Transition name="fade" mode="out-in">
<div v-if="user">
<XFollowList :user="user" type="followers"/>
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkError v-else-if="error" @retry="fetchUser()"/>
<MkLoading v-else/>
</Transition>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/user/following.vue
View File

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="1000">
<div class="_spacer" style="--MI_SPACER-w: 1000px;">
<Transition name="fade" mode="out-in">
<div v-if="user">
<XFollowList :user="user" type="following"/>
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkError v-else-if="error" @retry="fetchUser()"/>
<MkLoading v-else/>
</Transition>
</MkSpacer>
</div>
</PageWithHeader>
</template>

4
packages/frontend/src/pages/user/gallery.vue
View File

@@ -4,13 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<MkPagination v-slot="{items}" :pagination="pagination">
<div :class="$style.root">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
</div>
</MkPagination>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>

4
packages/frontend/src/pages/user/home.vue
View File

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="narrow ? 800 : 1100">
<div class="_spacer" :style="{ '--MI_SPACER-w': narrow ? '800px' : '1100px' }">
<div ref="rootEl" class="ftskorzw" :class="{ wide: !narrow }" style="container-type: inline-size;">
<div class="main _gaps">
<!-- TODO -->
@@ -155,7 +155,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<XActivity :key="user.id" :user="user"/>
</div>
</div>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>

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

@@ -7,9 +7,9 @@ SPDX-License-Identifier: AGPL-3.0-only
<PageWithHeader v-model:tab="tab" :tabs="headerTabs" :actions="headerActions" :swipable="true">
<div v-if="user">
<XHome v-if="tab === 'home'" :user="user" @unfoldFiles="() => { tab = 'files'; }"/>
<MkSpacer v-else-if="tab === 'notes'" :contentMax="800" style="padding-top: 0">
<div v-else-if="tab === 'notes'" class="_spacer" style="--MI_SPACER-w: 800px;">
<XTimeline :user="user"/>
</MkSpacer>
</div>
<XFiles v-else-if="tab === 'files'" :user="user"/>
<XActivity v-else-if="tab === 'activity'" :user="user"/>
<XAchievements v-else-if="tab === 'achievements'" :user="user"/>

5
packages/frontend/src/pages/user/lists.vue
View File

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<MkStickyContainer>
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<div>
<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="lists">
<MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/list/${ list.id }`">
@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkA>
</MkPagination>
</div>
</MkSpacer>
</div>
</MkStickyContainer>
</template>
@@ -23,7 +23,6 @@ import {} from 'vue';
import * as Misskey from 'misskey-js';
import MkPagination from '@/components/MkPagination.vue';
import MkStickyContainer from '@/components/global/MkStickyContainer.vue';
import MkSpacer from '@/components/global/MkSpacer.vue';
import MkAvatars from '@/components/MkAvatars.vue';
const props = defineProps<{

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

@@ -4,11 +4,11 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_margin"/>
</MkPagination>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>

4
packages/frontend/src/pages/user/raw.vue
View File

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="600" :marginMin="16" :marginMax="32">
<div class="_spacer" style="--MI_SPACER-w: 600px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
<div class="_gaps_m">
<div :class="$style.userMInfoRoot">
<MkAvatar :class="$style.userMInfoAvatar" :user="user" indicator link preview/>
@@ -35,7 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkObjectView tall :value="user"></MkObjectView>
</FormSection>
</div>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>

4
packages/frontend/src/pages/user/reactions.vue
View File

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkSpacer :contentMax="700">
<div class="_spacer" style="--MI_SPACER-w: 700px;">
<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
<div v-for="item in items" :key="item.id" :to="`/clips/${item.id}`" class="_panel _margin">
<div :class="$style.header">
@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkNote :key="item.id" :note="item.note"/>
</div>
</MkPagination>
</MkSpacer>
</div>
</template>
<script lang="ts" setup>