worldcone/cherrypick
2
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

enhance(frontend): 유저 페이지 개선

Browse source
This commit is contained in:
NoriDev 2023-10-24 20:34:23 +09:00
parent ccb2ef4bc1
commit 5d396a7c1e
3 changed files with 14 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
packages/frontend/src/pages/user/home.vue
View file

@ -148,7 +148,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<XFiles :key="user.id" :user="user"/> <XFiles :key="user.id" :user="user"/>
<XActivity :key="user.id" :user="user"/> <XActivity :key="user.id" :user="user"/>
</template> </template>
<MkNotes v-if="!disableNotes" :class="$style.tl" :noGap="true" :pagination="pagination"/> <XTimeline v-if="!disableNotes" :user="user"/>
</div> </div>
</div> </div>
<div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;"> <div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
@ -204,6 +204,7 @@ function calcAge(birthdate: string): number {
const XFiles = defineAsyncComponent(() => import('./index.files.vue')); const XFiles = defineAsyncComponent(() => import('./index.files.vue'));
const XActivity = defineAsyncComponent(() => import('./index.activity.vue')); const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
const XTimeline = defineAsyncComponent(() => import('./index.timeline.vue'));
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
user: Misskey.entities.UserDetailed; user: Misskey.entities.UserDetailed;
@ -233,14 +234,6 @@ watch($$(moderationNote), async () => {
await os.api('admin/update-user-note', { userId: props.user.id, text: moderationNote }); await os.api('admin/update-user-note', { userId: props.user.id, text: moderationNote });
}); });
const pagination = {
endpoint: 'users/notes' as const,
limit: 10,
params: computed(() => ({
userId: props.user.id,
})),
};
const style = $computed(() => { const style = $computed(() => {
if (props.user.bannerUrl == null) return {}; if (props.user.bannerUrl == null) return {};
return { return {
@ -746,12 +739,6 @@ onUnmounted(() => {
</style> </style>
<style lang="scss" module> <style lang="scss" module>
.tl {
background: var(--bg);
border-radius: var(--radius);
overflow: clip;
}
.verifiedLink { .verifiedLink {
margin-left: 4px; margin-left: 4px;
color: var(--success); color: var(--success);

26
packages/frontend/src/pages/user/index.timeline.vue
View file

@ -4,20 +4,18 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkSpacer :contentMax="800" style="padding-top: 0"> <MkStickyContainer>
<MkStickyContainer> <template #header>
<template #header> <MkTab v-model="include" :class="$style.tab">
<MkTab v-model="include" :class="$style.tab"> <option :value="null">{{ i18n.ts.notes }}</option>
<option :value="null">{{ i18n.ts.notes }}</option> <option value="all">{{ i18n.ts.all }}</option>
<option value="all">{{ i18n.ts.all }}</option> <option value="featured">{{ i18n.ts.featured }}</option>
<option value="featured">{{ i18n.ts.featured }}</option> <option value="files">{{ i18n.ts.withFiles }}</option>
<option value="files">{{ i18n.ts.withFiles }}</option> </MkTab>
</MkTab> </template>
</template> <MkNotes v-if="include === 'featured'" :noGap="true" :pagination="featuredPagination" :class="$style.tl"/>
<MkNotes v-if="include === 'featured'" :noGap="true" :pagination="featuredPagination" :class="$style.tl"/> <MkNotes v-else :noGap="true" :pagination="pagination" :class="$style.tl"/>
<MkNotes v-else :noGap="true" :pagination="pagination" :class="$style.tl"/> </MkStickyContainer>
</MkStickyContainer>
</MkSpacer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

6
packages/frontend/src/pages/user/index.vue
View file

@ -12,7 +12,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<div> <div>
<div v-if="user"> <div v-if="user">
<XHome v-if="tab === 'home'" :user="user"/> <XHome v-if="tab === 'home'" :user="user"/>
<XTimeline v-else-if="tab === 'notes'" :user="user"/>
<XEvent v-else-if="tab === 'events'" :user="user"/> <XEvent v-else-if="tab === 'events'" :user="user"/>
<XActivity v-else-if="tab === 'activity'" :user="user"/> <XActivity v-else-if="tab === 'activity'" :user="user"/>
<XAchievements v-else-if="tab === 'achievements'" :user="user"/> <XAchievements v-else-if="tab === 'achievements'" :user="user"/>
@ -50,7 +49,6 @@ window.addEventListener('resize', () => {
}); });
const XHome = defineAsyncComponent(() => import('./home.vue')); const XHome = defineAsyncComponent(() => import('./home.vue'));
const XTimeline = defineAsyncComponent(() => import('./index.timeline.vue'));
const XEvent = defineAsyncComponent(() => import('./events.vue')); const XEvent = defineAsyncComponent(() => import('./events.vue'));
const XActivity = defineAsyncComponent(() => import('./activity.vue')); const XActivity = defineAsyncComponent(() => import('./activity.vue'));
const XAchievements = defineAsyncComponent(() => import('./achievements.vue')); const XAchievements = defineAsyncComponent(() => import('./achievements.vue'));
@ -96,10 +94,6 @@ const headerTabs = $computed(() => user ? [{
key: 'home', key: 'home',
title: i18n.ts.overview, title: i18n.ts.overview,
icon: 'ti ti-home', icon: 'ti ti-home',
}, {
key: 'notes',
title: i18n.ts.notes,
icon: 'ti ti-pencil',
}, { }, {
key: 'events', key: 'events',
title: i18n.ts.events, title: i18n.ts.events,