HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

revert users/index.vue

Browse source
This commit is contained in:
ThatOneCalculator 2022-11-14 19:05:09 -08:00
parent 684c36556e
commit 5f15ca4fde
2 changed files with 95 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "calckey", "name": "calckey",
"version": "12.119.0-calc.13-rc.11", "version": "12.119.0-calc.13-rc.12",
"codename": "aqua", "codename": "aqua",
"repository": { "repository": {
"type": "git", "type": "git",

201
packages/client/src/pages/user/index.vue
View file

@ -1,53 +1,41 @@
<template> <template>
<MkStickyContainer> <MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template> <template #header>
<div v-if="user"> <MkPageHeader
<swiper v-model:tab="tab"
:modules="[Virtual]" :actions="headerActions"
:space-between="20" :tabs="headerTabs"
:virtual="true" />
:allow-touch-move="!(deviceKind === 'desktop' && !defaultStore.state.swipeOnDesktop)" </template>
@swiper="setSwiperRef" <div>
@slide-change="onSlideChange" <transition name="fade" mode="out-in">
> <div v-if="user">
<swiper-slide> <XHome v-if="tab === 'home'" :user="user"/>
<XHome :user="user"/> <XReactions v-else-if="tab === 'reactions'" :user="user"/>
</swiper-slide> <XClips v-else-if="tab === 'clips'" :user="user"/>
<swiper-slide> <XPages v-else-if="tab === 'pages'" :user="user"/>
<XReactions :user="user"/> <XGallery v-else-if="tab === 'gallery'" :user="user"/>
</swiper-slide> </div>
<swiper-slide> <MkError v-else-if="error" @retry="fetchUser()"/>
<XClips :user="user"/> <MkLoading v-else/>
</swiper-slide> </transition>
<swiper-slide>
<XPages :user="user"/>
</swiper-slide>
<swiper-slide>
<XGallery :user="user"/>
</swiper-slide>
</swiper>
</div> </div>
<MkError v-else-if="error" @retry="fetchUser()"/>
<MkLoading v-else/>
</MkStickyContainer> </MkStickyContainer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue'; import { defineAsyncComponent, computed, watch } from 'vue';
import { Virtual } from 'swiper'; import calcAge from 's-age';
import { Swiper, SwiperSlide } from 'swiper/vue';
import * as Acct from 'misskey-js/built/acct'; import * as Acct from 'misskey-js/built/acct';
import type * as misskey from 'misskey-js'; import type * as misskey from 'misskey-js';
import { getScrollPosition } from '@/scripts/scroll';
import number from '@/filters/number';
import { userPage, acct as getAcct } from '@/filters/user'; import { userPage, acct as getAcct } from '@/filters/user';
import * as os from '@/os'; import * as os from '@/os';
import { useRouter } from '@/router'; import { useRouter } from '@/router';
import { definePageMetadata } from '@/scripts/page-metadata'; import { definePageMetadata } from '@/scripts/page-metadata';
import { deviceKind } from '@/scripts/device-kind';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { $i } from '@/account'; import { $i } from '@/account';
import { defaultStore } from '@/store';
import 'swiper/scss';
import 'swiper/scss/virtual';
const XHome = defineAsyncComponent(() => import('./home.vue')); const XHome = defineAsyncComponent(() => import('./home.vue'));
const XReactions = defineAsyncComponent(() => import('./reactions.vue')); const XReactions = defineAsyncComponent(() => import('./reactions.vue'));
@ -55,36 +43,32 @@ const XClips = defineAsyncComponent(() => import('./clips.vue'));
const XPages = defineAsyncComponent(() => import('./pages.vue')); const XPages = defineAsyncComponent(() => import('./pages.vue'));
const XGallery = defineAsyncComponent(() => import('./gallery.vue')); const XGallery = defineAsyncComponent(() => import('./gallery.vue'));
const props = withDefaults(defineProps<{ const props = withDefaults(
acct: string; defineProps<{
page?: string; acct: string;
}>(), { page?: string;
page: 'home', }>(),
}); {
page: 'home',
},
);
const router = useRouter(); const router = useRouter();
let tabs = ['home']; let tab = $ref(props.page);
let user = $ref<null | misskey.entities.UserDetailed>(null); let user = $ref<null | misskey.entities.UserDetailed>(null);
if (($i && ($i.id === user?.id)) || user?.publicReactions) {
tabs.push('reactions');
}
if ((user?.instance != null)) {
tabs.push('clips', 'pages', 'gallery');
}
let tab = $ref(tabs[0]);
watch($$(tab), () => (syncSlide(tabs.indexOf(tab))));
let error = $ref(null); let error = $ref(null);
function fetchUser(): void { function fetchUser(): void {
if (props.acct == null) return; if (props.acct == null) return;
user = null; user = null;
os.api('users/show', Acct.parse(props.acct)).then(u => { os.api('users/show', Acct.parse(props.acct))
user = u; .then((u) => {
}).catch(err => { user = u;
error = err; })
}); .catch((err) => {
error = err;
});
} }
watch(() => props.acct, fetchUser, { watch(() => props.acct, fetchUser, {
@ -93,58 +77,61 @@ watch(() => props.acct, fetchUser, {
const headerActions = $computed(() => []); const headerActions = $computed(() => []);
const headerTabs = $computed(() => user ? [{ const headerTabs = $computed(() =>
key: 'home', user
title: i18n.ts.overview, ? [
icon: 'ph-house-bold ph-lg', {
}, ...($i && ($i.id === user.id)) || user.publicReactions ? [{ key: 'home',
key: 'reactions', title: i18n.ts.overview,
title: i18n.ts.reaction, icon: 'ph-user-bold ph-large',
icon: 'ph-smiley-bold ph-lg', },
}] : [], { ...(($i && $i.id === user.id) || user.publicReactions
key: 'clips', ? [
title: i18n.ts.clips, {
icon: 'ph-paperclip-bold ph-lg', key: 'reactions',
}, { title: i18n.ts.reaction,
key: 'pages', icon: 'ph-smiley-bold ph-large',
title: i18n.ts.pages, },
icon: 'ph-file-text-bold ph-lg', ]
}, { : []),
key: 'gallery', {
title: i18n.ts.gallery, key: 'clips',
icon: 'ph-image-square-bold ph-lg', title: i18n.ts.clips,
}] : null); icon: 'ph-paperclip-bold ph-large',
},
{
key: 'pages',
title: i18n.ts.pages,
icon: 'ph-file-text-bold ph-large',
},
{
key: 'gallery',
title: i18n.ts.gallery,
icon: 'ph-image-square-bold ph-large',
},
]
: null,
);
definePageMetadata(computed(() => user ? { definePageMetadata(
icon: 'ph-user-bold ph-lg', computed(() =>
title: user.name ? `${user.name} (@${user.username})` : `@${user.username}`, user
subtitle: `@${getAcct(user)}`, ? {
userName: user, icon: 'fas fa-user',
avatar: user, title: user.name
path: `/@${user.username}`, ? `${user.name} (@${user.username})`
share: { : `@${user.username}`,
title: user.name, subtitle: `@${getAcct(user)}`,
}, userName: user,
} : null)); avatar: user,
path: `/@${user.username}`,
let swiperRef = null; share: {
title: user.name,
function setSwiperRef(swiper) { },
swiperRef = swiper; }
syncSlide(tabs.indexOf(tab)); : null,
} ),
);
function onSlideChange() {
tab = tabs[swiperRef.activeIndex];
}
function syncSlide(index) {
swiperRef.slideTo(index);
}
onMounted(() => {
syncSlide(tabs.indexOf(swiperRef.activeIndex));
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>