mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-26 21:03:09 +02:00
enhance(frontend): tweak user home page
This commit is contained in:
parent
9f49b9f4d2
commit
390602837b
3 changed files with 31 additions and 33 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"/>
|
||||||
|
|
Loading…
Reference in a new issue