OpenSource/misskey
OpenSource/misskey
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey.git synced 2024-12-23 06:20:38 +01:00
Code Issues Projects Releases Packages Wiki Activity

enhance(frontend): tweak user home page

Browse source
This commit is contained in:
syuilo 2023-12-16 11:56:58 +09:00
parent 9f49b9f4d2
commit 390602837b
3 changed files with 31 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -136,9 +136,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkLazy> </MkLazy>
</template> </template>
<div v-if="!disableNotes"> <div v-if="!disableNotes">
<div style="margin-bottom: 8px;">{{ i18n.ts.featured }}</div>
<MkLazy> <MkLazy>
<MkNotes :class="$style.tl" :noGap="true" :pagination="pagination"/> <XTimeline :user="user"/>
</MkLazy> </MkLazy>
</div> </div>
</div> </div>
@ -193,6 +192,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;
@ -219,14 +219,6 @@ watch(moderationNote, async () => {
await os.api('admin/update-user-note', { userId: props.user.id, text: moderationNote.value }); await os.api('admin/update-user-note', { userId: props.user.id, text: moderationNote.value });
}); });
const pagination = {
endpoint: 'users/featured-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 {

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

@ -4,18 +4,17 @@ 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="tab" :class="$style.tab">
<MkTab v-model="include" :class="$style.tab"> <option value="featured">{{ i18n.ts.featured }}</option>
<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="files">{{ i18n.ts.withFiles }}</option> <option value="files">{{ i18n.ts.withFiles }}</option>
</MkTab> </MkTab>
</template> </template>
<MkNotes :noGap="true" :pagination="pagination" :class="$style.tl"/> <MkNotes :noGap="true" :pagination="pagination" :class="$style.tl"/>
</MkStickyContainer> </MkStickyContainer>
</MkSpacer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -29,24 +28,29 @@ const props = defineProps<{
user: Misskey.entities.UserDetailed; user: Misskey.entities.UserDetailed;
}>(); }>();
const include = ref<string | null>('all'); const tab = ref<string | null>('all');
const pagination = { const pagination = computed(() => tab.value === 'featured' ? {
endpoint: 'users/featured-notes' as const,
limit: 10,
params: {
userId: props.user.id,
},
} : {
endpoint: 'users/notes' as const, endpoint: 'users/notes' as const,
limit: 10, limit: 10,
params: computed(() => ({ params: {
userId: props.user.id, userId: props.user.id,
withRenotes: include.value === 'all', withRenotes: tab.value === 'all',
withReplies: include.value === 'all', withReplies: tab.value === 'all',
withChannelNotes: include.value === 'all', withChannelNotes: tab.value === 'all',
withFiles: include.value === 'files', withFiles: tab.value === 'files',
})), },
}; });
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.tab { .tab {
margin: calc(var(--margin) / 2) 0;
padding: calc(var(--margin) / 2) 0; padding: calc(var(--margin) / 2) 0;
background: var(--bg); background: var(--bg);
} }

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

@ -9,7 +9,9 @@ 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"/> <MkSpacer v-else-if="tab === 'notes'" :contentMax="800" style="padding-top: 0">
<XTimeline :user="user"/>
</MkSpacer>
<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"/>
<XReactions v-else-if="tab === 'reactions'" :user="user"/> <XReactions v-else-if="tab === 'reactions'" :user="user"/>