mirror of
https://activitypub.software/TransFem-org/Sharkey
synced 2024-12-22 00:10:14 +00:00
remove notes-container.vue and revert refactor
This commit is contained in:
Hazelnoot
parent
9d3aa6bb41
commit
f5652605ec
5 changed files with 215 additions and 5 deletions
88
idea/Sharkey/SkPagination.vue
Normal file
88
idea/Sharkey/SkPagination.vue
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
<!--
|
||||
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
|
||||
SPDX-License-Identifier: AGPL-3.0-only
|
||||
-->
|
||||
|
||||
<!--
|
||||
Important note: this is a generic component.
|
||||
Some operations require Vue helpers to satisfy typescript.
|
||||
See this page for more information: https://vuejs.org/api/sfc-script-setup.html#generics
|
||||
-->
|
||||
|
||||
<template>
|
||||
<MkPagination ref="mkPagination" :pagination="pagination" :disableAutoload="disableAutoLoad" :displayLimit="computedDisplayLimit">
|
||||
<template #empty>
|
||||
<slot name="empty">
|
||||
<div class="_fullinfo">
|
||||
<img :src="noContentImage ?? infoImageUrl" class="_ghost" :alt="noContentText" aria-hidden="true"/>
|
||||
<div>{{ noContentText }}</div>
|
||||
</div>
|
||||
</slot>
|
||||
</template>
|
||||
|
||||
<template #default="{ items }">
|
||||
<slot :items="items as Response"></slot>
|
||||
</template>
|
||||
</MkPagination>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export type { Paging } from '@/components/MkPagination.vue';
|
||||
</script>
|
||||
|
||||
<script setup lang="ts" generic="Endpoint extends keyof Endpoints">
|
||||
import { computed, shallowRef } from 'vue';
|
||||
import type { Endpoints } from 'misskey-js';
|
||||
import type { SwitchCaseResponseType } from 'misskey-js/built/api.types.js';
|
||||
import type { ComponentExposed } from 'vue-component-type-helpers';
|
||||
import { infoImageUrl } from '@/instance.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import MkPagination, { Paging } from '@/components/MkPagination.vue';
|
||||
import { MisskeyEntity } from '@/types/date-separated-list.js';
|
||||
|
||||
type Response = SwitchCaseResponseType<Endpoint, Endpoints[Endpoint]['req']> & MisskeyEntity[];
|
||||
type Entity = Response[number];
|
||||
|
||||
const mkPagination = shallowRef<InstanceType<typeof MkPagination>>();
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
pagination: Paging<Endpoint>;
|
||||
disableAutoLoad?: boolean;
|
||||
displayLimit?: number | null;
|
||||
noContentText?: string;
|
||||
noContentImage?: string;
|
||||
}>(), {
|
||||
disableAutoLoad: false,
|
||||
displayLimit: undefined,
|
||||
noContentText: i18n.ts.noNotes,
|
||||
noContentImage: undefined,
|
||||
});
|
||||
|
||||
// Value of displayLimit with default value applied.
|
||||
const computedDisplayLimit = computed(() => {
|
||||
// undefined (default) means to use the value from paging.
|
||||
if (props.displayLimit === undefined) {
|
||||
return props.pagination.limit;
|
||||
}
|
||||
|
||||
// number means to use that value.
|
||||
// null means to use the default from MkPagination.
|
||||
return props.displayLimit ?? undefined;
|
||||
});
|
||||
|
||||
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
||||
defineExpose({
|
||||
// Expose all the same properties...
|
||||
...mkPagination.value!,
|
||||
|
||||
// But override these to have a narrower type.
|
||||
items: mkPagination.value!.items as Map<string, Entity> | undefined,
|
||||
queue: mkPagination.value!.queue as Map<string, Entity> | undefined,
|
||||
prepend: (item: Entity) => mkPagination.value!.prepend(item),
|
||||
append: (item: Entity) => mkPagination.value!.append(item),
|
||||
updateItem: (id: Entity['id'], replacer: (old: Entity) => Entity) => {
|
||||
return mkPagination.value!.updateItem(id, old => replacer(old as Entity));
|
||||
},
|
||||
});
|
||||
/* eslint-enable @typescript-eslint/no-non-null-assertion */
|
||||
</script>
|
||||
|
|
@ -145,7 +145,36 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<XListenBrainz :key="user.id" :user="user" :collapsed="true"/>
|
||||
</MkLazy>
|
||||
</template>
|
||||
<notes-container :user="user" :includeFeatured="false" :includePinned="user.pinnedNotes.length > 0"/>
|
||||
<!-- <div v-if="!disableNotes">
|
||||
<MkLazy>
|
||||
<XTimeline :user="user"/>
|
||||
</MkLazy>
|
||||
</div> -->
|
||||
<MkStickyContainer>
|
||||
<template #header>
|
||||
<!-- You can't use v-if on these, as MkTab first *deletes* and replaces all children with native HTML elements. -->
|
||||
<!-- Instead, we add a "no notes" placeholder and default to null (all notes) if there's nothing pinned. -->
|
||||
<!-- It also converts all comments into text! -->
|
||||
<MkTab v-model="noteview" :class="$style.tab">
|
||||
<option value="pinned">{{ i18n.ts.pinnedOnly }}</option>
|
||||
<option :value="null">{{ i18n.ts.notes }}</option>
|
||||
<option value="all">{{ i18n.ts.all }}</option>
|
||||
<option value="files">{{ i18n.ts.withFiles }}</option>
|
||||
</MkTab>
|
||||
</template>
|
||||
<MkLazy>
|
||||
<div v-if="noteview === 'pinned'" class="_gaps">
|
||||
<div v-if="user.pinnedNotes.length < 1" class="_fullinfo">
|
||||
<img :src="infoImageUrl" class="_ghost" aria-hidden="true" :alt="i18n.ts.noNotes"/>
|
||||
<div>{{ i18n.ts.noNotes }}</div>
|
||||
</div>
|
||||
<div v-else class="_panel">
|
||||
<MkNote v-for="note of user.pinnedNotes" :key="note.id" class="note" :class="$style.pinnedNote" :note="note" :pinned="true"/>
|
||||
</div>
|
||||
</div>
|
||||
<MkNotes v-else :class="$style.tl" :noGap="true" :pagination="AllPagination"/>
|
||||
</MkLazy>
|
||||
</MkStickyContainer>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!narrow" class="sub _gaps" style="container-type: inline-size;">
|
||||
|
|
@ -161,6 +190,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<script lang="ts" setup>
|
||||
import { defineAsyncComponent, computed, onMounted, onUnmounted, nextTick, watch, ref } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import MkTab from '@/components/MkTab.vue';
|
||||
import MkNotes from '@/components/MkNotes.vue';
|
||||
import MkFollowButton from '@/components/MkFollowButton.vue';
|
||||
import MkAccountMoved from '@/components/MkAccountMoved.vue';
|
||||
import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
|
||||
|
|
@ -181,7 +212,6 @@ import { misskeyApi } from '@/scripts/misskey-api.js';
|
|||
import { isFollowingVisibleForMe, isFollowersVisibleForMe } from '@/scripts/isFfVisibleForMe.js';
|
||||
import { useRouter } from '@/router/supplier.js';
|
||||
import { getStaticImageUrl } from '@/scripts/media-proxy.js';
|
||||
import NotesContainer from '@/pages/user/notes-container.vue';
|
||||
import { infoImageUrl } from '@/instance.js';
|
||||
|
||||
const MkNote = defineAsyncComponent(() =>
|
||||
|
|
@ -230,6 +260,7 @@ const memoDraft = ref(props.user.memo);
|
|||
const isEditingMemo = ref(false);
|
||||
const moderationNote = ref(props.user.moderationNote);
|
||||
const editModerationNote = ref(false);
|
||||
const noteview = ref<string | null>(null);
|
||||
|
||||
const listenbrainzdata = ref(false);
|
||||
if (props.user.listenbrainz) {
|
||||
|
|
@ -268,6 +299,26 @@ watch(moderationNote, async () => {
|
|||
await misskeyApi('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 AllPagination = {
|
||||
endpoint: 'users/notes' as const,
|
||||
limit: 10,
|
||||
params: computed(() => ({
|
||||
userId: props.user.id,
|
||||
withRenotes: noteview.value === 'all',
|
||||
withReplies: noteview.value === 'all',
|
||||
withChannelNotes: noteview.value === 'all',
|
||||
withFiles: noteview.value === 'files',
|
||||
})),
|
||||
};
|
||||
|
||||
const style = computed(() => {
|
||||
if (props.user.bannerUrl == null) return {};
|
||||
if (defaultStore.state.disableShowingAnimatedImages) {
|
||||
|
|
@ -743,6 +794,13 @@ onUnmounted(() => {
|
|||
</style>
|
||||
|
||||
<style lang="scss" module>
|
||||
.tl {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-radius: var(--radius);
|
||||
overflow: clip;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.tab {
|
||||
margin-bottom: calc(var(--margin) / 2);
|
||||
padding: calc(var(--margin) / 2) 0;
|
||||
|
|
|
|||
|
|
@ -4,14 +4,78 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<notes-container :user="user"/>
|
||||
<MkStickyContainer>
|
||||
<template #header>
|
||||
<MkTab v-model="tab" :class="$style.tab">
|
||||
<option value="pinned">{{ i18n.ts.pinnedOnly }}</option>
|
||||
<option value="featured">{{ i18n.ts.featured }}</option>
|
||||
<option :value="null">{{ i18n.ts.notes }}</option>
|
||||
<option value="all">{{ i18n.ts.all }}</option>
|
||||
<option value="files">{{ i18n.ts.withFiles }}</option>
|
||||
</MkTab>
|
||||
</template>
|
||||
<div v-if="tab === 'pinned'" class="_gaps">
|
||||
<div v-if="user.pinnedNotes.length < 1" class="_fullinfo">
|
||||
<img :src="infoImageUrl" class="_ghost" aria-hidden="true" :alt="i18n.ts.noNotes"/>
|
||||
<div>{{ i18n.ts.noNotes }}</div>
|
||||
</div>
|
||||
<div v-else class="_panel">
|
||||
<MkNote v-for="note of user.pinnedNotes" :key="note.id" class="note" :class="$style.pinnedNote" :note="note" :pinned="true"/>
|
||||
</div>
|
||||
</div>
|
||||
<MkNotes v-else :class="$style.tl" :noGap="true" :pagination="pagination"/>
|
||||
</MkStickyContainer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, defineAsyncComponent } from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import NotesContainer from '@/pages/user/notes-container.vue';
|
||||
import MkNotes from '@/components/MkNotes.vue';
|
||||
import MkTab from '@/components/MkTab.vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { infoImageUrl } from '@/instance.js';
|
||||
import { defaultStore } from '@/store.js';
|
||||
|
||||
defineProps<{
|
||||
const MkNote = defineAsyncComponent(() =>
|
||||
defaultStore.state.noteDesign === 'sharkey'
|
||||
? import('@/components/SkNote.vue')
|
||||
: import('@/components/MkNote.vue'),
|
||||
);
|
||||
|
||||
const props = defineProps<{
|
||||
user: Misskey.entities.UserDetailed;
|
||||
}>();
|
||||
|
||||
const tab = ref<string | null>('all');
|
||||
|
||||
const pagination = computed(() => tab.value === 'featured' ? {
|
||||
endpoint: 'users/featured-notes' as const,
|
||||
limit: 10,
|
||||
params: {
|
||||
userId: props.user.id,
|
||||
},
|
||||
} : {
|
||||
endpoint: 'users/notes' as const,
|
||||
limit: 10,
|
||||
params: {
|
||||
userId: props.user.id,
|
||||
withRenotes: tab.value === 'all',
|
||||
withReplies: tab.value === 'all',
|
||||
withChannelNotes: tab.value === 'all',
|
||||
withFiles: tab.value === 'files',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.tab {
|
||||
padding: calc(var(--margin) / 2) 0;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.tl {
|
||||
background: var(--bg);
|
||||
border-radius: var(--radius);
|
||||
overflow: clip;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue