Tabbed content in detailed notes page

This commit is contained in:
Freeplay 2023-05-19 13:02:41 -04:00
parent e921e2dce3
commit d013b351e2
6 changed files with 251 additions and 187 deletions

View File

@ -5,7 +5,7 @@
ref="el"
v-hotkey="keymap"
v-size="{ max: [500, 450, 350, 300] }"
class="tkcbzcuz"
class="tkcbzcuz note-container"
:tabindex="!isDeleted ? '-1' : null"
:class="{ renote: isRenote }"
>
@ -104,6 +104,11 @@
/>
</div>
</div>
</div>
<div v-if="detailedView" class="info">
<MkA class="created-at" :to="notePage(appearNote)">
<MkTime :time="appearNote.createdAt" mode="absolute" />
</MkA>
<MkA
v-if="appearNote.channel && !inChannel"
class="channel"
@ -113,11 +118,6 @@
{{ appearNote.channel.name }}</MkA
>
</div>
<div v-if="detailedView" class="info">
<MkA class="created-at" :to="notePage(appearNote)">
<MkTime :time="appearNote.createdAt" mode="absolute" />
</MkA>
</div>
<footer ref="footerEl" class="footer" @click.stop tabindex="-1">
<XReactionsViewer
v-if="enableEmojiReactions"
@ -130,7 +130,7 @@
@click="reply()"
>
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<template v-if="appearNote.repliesCount > 0">
<template v-if="appearNote.repliesCount > 0 && !detailedView">
<p class="count">{{ appearNote.repliesCount }}</p>
</template>
</button>
@ -139,6 +139,7 @@
class="button"
:note="appearNote"
:count="appearNote.renoteCount"
:detailedView="detailedView"
/>
<XStarButtonNoEmoji
v-if="!enableEmojiReactions"
@ -450,6 +451,10 @@ function focusAfter() {
focusNext(el.value);
}
function scrollIntoView() {
el.value.scrollIntoView();
}
function noteClick(e) {
if (document.getSelection().type === "Range" || props.detailedView) {
e.stopPropagation();
@ -464,6 +469,12 @@ function readPromo() {
});
isDeleted.value = true;
}
defineExpose({
focus,
blur,
scrollIntoView,
});
</script>
<style lang="scss" scoped>
@ -656,14 +667,13 @@ function readPromo() {
}
}
}
> .channel {
opacity: 0.7;
font-size: 80%;
}
}
> .info {
margin-block: 16px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: .7em;
margin-top: 16px;
opacity: 0.7;
font-size: 0.9em;
}

View File

@ -25,17 +25,51 @@
:detailedView="true"
/>
<div ref="noteEl" class="article" tabindex="-1" :id="appearNote.id">
<MkNote
@contextmenu.stop="onContextmenu"
tabindex="-1"
:note="appearNote"
detailedView
></MkNote>
</div>
<MkNote
ref="noteEl"
@contextmenu.stop="onContextmenu"
tabindex="-1"
:note="appearNote"
detailedView
></MkNote>
<MkTab
v-model="tab"
:style="'chips'"
@update:modelValue="loadTab"
>
<option value="replies">
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<template v-if="appearNote.repliesCount > 0">
<span class="count">{{ appearNote.repliesCount }}</span>
</template>
{{ i18n.ts._notification._types.reply }}
</option>
<option value="renotes">
<i class="ph-repeat ph-bold ph-lg"></i>
<template v-if="appearNote.renoteCount > 0">
<span class="count">{{ appearNote.renoteCount }}</span>
</template>
{{ i18n.ts._notification._types.renote }}
</option>
<option value="quotes">
<i class="ph-quotes ph-bold ph-lg"></i>
<template v-if="directQuotes?.length > 0">
<span class="count">{{ directQuotes.length }}</span>
</template>
{{ i18n.ts._notification._types.quote }}
</option>
<option value="clips">
<i class="ph-paperclip ph-bold ph-lg"></i>
<template v-if="clips.length > 0">
<span class="count">{{ clips.length }}</span>
</template>
{{ i18n.ts.clips }}
</option>
</MkTab>
<MkNoteSub
v-if="directReplies"
v-if="directReplies && tab === 'replies'"
v-for="note in directReplies"
:key="note.id"
:note="note"
@ -43,7 +77,66 @@
:conversation="replies"
:detailedView="true"
/>
<MkLoading v-else-if="appearNote.repliesCount > 0" />
<MkLoading v-else-if="tab === 'replies' && appearNote.repliesCount > 0" />
<MkNoteSub
v-if="directQuotes && tab === 'quotes'"
v-for="note in directQuotes"
:key="note.id"
:note="note"
class="reply"
:conversation="directQuotes"
:detailedView="true"
/>
<MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
<!-- <MkPagination
v-if="tab === 'renotes'"
v-slot="{ items }"
ref="pagingComponent"
:pagination="pagination"
> -->
<MkUserCardMini
v-if="tab === 'renotes' && appearNote.renoteCount > 0"
v-for="item in renotes"
:key="item.user.id"
:user="item.user"
:with-chart="false"
/>
<!-- </MkPagination> -->
<MkLoading v-else-if="tab === 'renotes' && appearNote.renoteCount > 0" />
<div
v-if="tab === 'clips' && clips.length > 0"
class="_content clips"
>
<MkA
v-for="item in clips"
:key="item.id"
:to="`/clips/${item.id}`"
class="item _panel"
>
<b>{{ item.name }}</b>
<div
v-if="item.description"
class="description"
>
{{ item.description }}
</div>
<div class="user">
<MkAvatar
:user="item.user"
class="avatar"
:show-indicator="true"
/>
<MkUserName
:user="item.user"
:nowrap="false"
/>
</div>
</MkA>
</div>
<MkLoading v-else-if="tab === 'clips' && clips.length > 0" />
</div>
<div v-else class="_panel muted" @click="muted.muted = false">
<I18n :src="softMuteReasonI18nSrc(muted.what)" tag="small">
@ -73,15 +166,17 @@ import {
reactive,
ref,
} from "vue";
import type * as misskey from "calckey-js";
import * as misskey from "calckey-js";
import MkTab from "@/components/MkTab.vue";
import MkNote from "@/components/MkNote.vue";
import MkNoteSub from "@/components/MkNoteSub.vue";
import XStarButton from "@/components/MkStarButton.vue";
import XRenoteButton from "@/components/MkRenoteButton.vue";
import MkPagination from "@/components/MkPagination.vue";
import MkUserCardMini from "@/components/MkUserCardMini.vue";
import { pleaseLogin } from "@/scripts/please-login";
import { getWordSoftMute } from "@/scripts/check-word-mute";
import { userPage } from "@/filters/user";
import { useRouter } from "@/router";
import * as os from "@/os";
import { defaultStore, noteViewInterruptors } from "@/store";
import { reactionPicker } from "@/scripts/reaction-picker";
@ -92,12 +187,15 @@ import { useNoteCapture } from "@/scripts/use-note-capture";
import { deepClone } from "@/scripts/clone";
import { stream } from "@/stream";
import { NoteUpdatedEvent } from "calckey-js/built/streaming.types";
import appear from "@/directives/appear";
const props = defineProps<{
note: misskey.entities.Note;
pinned?: boolean;
}>();
let tab = $ref("replies");
let note = $ref(deepClone(props.note));
const softMuteReasonI18nSrc = (what?: string) => {
@ -146,6 +244,9 @@ const translating = ref(false);
let conversation = $ref<null | misskey.entities.Note[]>([]);
const replies = ref<misskey.entities.Note[]>([]);
let directReplies = $ref<null | misskey.entities.Note[]>([]);
let directQuotes = $ref<null | misskey.entities.Note[]>([]);
let clips = $ref();
let renotes = $ref();
let isScrolling;
const keymap = {
@ -259,10 +360,14 @@ os.api("notes/children", {
directReplies = res
.filter(
(note) =>
note.replyId === appearNote.id ||
note.renoteId === appearNote.id
note.replyId === appearNote.id
)
.reverse();
directQuotes = res
.filter(
(note) =>
note.renoteId === appearNote.id
);
});
conversation = null;
@ -276,6 +381,33 @@ if (appearNote.replyId) {
});
}
clips = null;
os.api("notes/clips", {
noteId: appearNote.id,
}).then((res) => {
clips = res;
});
// const pagination = {
// endpoint: "notes/renotes",
// noteId: appearNote.id,
// limit: 10,
// };
// const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
renotes = null;
function loadTab() {
if (tab === "renotes" && !renotes) {
os.api("notes/renotes", {
noteId: appearNote.id,
limit: 100,
}).then((res) => {
renotes = res;
})
}
}
async function onNoteUpdated(noteData: NoteUpdatedEvent): Promise<void> {
const { type, id, body } = noteData;
@ -326,12 +458,12 @@ document.addEventListener("wheel", () => {
onMounted(() => {
stream.on("noteUpdated", onNoteUpdated);
isScrolling = false;
noteEl?.scrollIntoView();
noteEl.scrollIntoView();
});
onUpdated(() => {
if (!isScrolling) {
noteEl?.scrollIntoView();
noteEl.scrollIntoView();
if (location.hash) {
location.replace(location.hash); // Jump to highlighted reply
}
@ -372,80 +504,36 @@ onUnmounted(() => {
}
}
&:hover > .article > .main > .footer > .button {
opacity: 1;
}
> .reply-to {
margin-bottom: -16px;
padding-bottom: 16px;
}
> .renote {
display: flex;
align-items: center;
padding: 16px 32px 8px 32px;
line-height: 28px;
white-space: pre;
color: var(--renote);
> .avatar {
flex-shrink: 0;
display: inline-block;
width: 28px;
height: 28px;
margin: 0 8px 0 0;
border-radius: 6px;
}
> i {
margin-right: 4px;
}
> span {
overflow: hidden;
flex-shrink: 1;
text-overflow: ellipsis;
white-space: nowrap;
> .name {
font-weight: bold;
}
}
> .info {
margin-left: auto;
font-size: 0.9em;
> .time {
flex-shrink: 0;
color: inherit;
> .dropdownIcon {
margin-right: 4px;
}
}
}
}
> .renote + .article {
padding-top: 8px;
}
> .article {
padding-block: 28px 6px;
> :deep(.note-container) {
padding-block: 28px 0;
padding-top: 12px;
font-size: 1.1rem;
overflow: clip;
outline: none;
scroll-margin-top: calc(var(--stickyTop) + 20vh);
:deep(.article) {
.article {
cursor: unset;
padding-bottom: 0;
}
&:first-of-type {
padding-top: 28px;
}
}
> :deep(.chips) {
padding: 6px 32px 12px;
}
> :deep(.user-card-mini) {
padding-inline: 32px;
border-top: 1px solid var(--divider);
border-radius: 0;
}
> .reply {
border-top: solid 0.5px var(--divider);
cursor: pointer;
@ -532,46 +620,20 @@ onUnmounted(() => {
> .reply-to:first-child {
padding-top: 14px;
}
> .renote {
padding: 8px 16px 0 16px;
}
> .article {
> :deep(.note-container) {
padding: 6px 0 0 0;
> .header > .body {
padding-left: 10px;
}
}
}
&.max-width_350px {
> .article {
> .main {
> .footer {
> .button {
&:not(:last-child) {
margin-right: 18px;
}
}
}
}
> .clips, > .chips, > :deep(.user-card-mini) {
padding-inline: 16px !important;
}
}
&.max-width_300px {
font-size: 0.825em;
> .article {
> .main {
> .footer {
> .button {
&:not(:last-child) {
margin-right: 12px;
}
}
}
}
}
}
}
@ -580,4 +642,36 @@ onUnmounted(() => {
text-align: center;
opacity: 0.7;
}
.clips { // want to redesign at some point
padding: 24px 32px;
padding-top: 0;
> .item {
display: block;
padding: 16px;
// background: var(--buttonBg);
border: 1px solid var(--divider);
margin-bottom: var(--margin);
transition: background .2s;
&:hover, &:focus-within {
background: var(--panelHighlight);
}
> .description {
padding: 8px 0;
}
> .user {
$height: 32px;
padding-top: 16px;
border-top: solid 0.5px var(--divider);
line-height: $height;
> .avatar {
width: $height;
height: $height;
}
}
}
}
</style>

View File

@ -7,7 +7,7 @@
@click="renote(false, $event)"
>
<i class="ph-repeat ph-bold ph-lg"></i>
<p v-if="count > 0" class="count">{{ count }}</p>
<p v-if="count > 0 && !detailedView" class="count">{{ count }}</p>
</button>
<button v-else class="eddddedb _button">
<i class="ph-prohibit ph-bold ph-lg"></i>
@ -30,6 +30,7 @@ import { MenuItem } from "@/types/menu";
const props = defineProps<{
note: misskey.entities.Note;
count: number;
detailedView?;
}>();
const buttonRef = ref<HTMLElement>();

View File

@ -6,6 +6,9 @@ export default defineComponent({
modelValue: {
required: true,
},
style: {
required: false,
},
},
render() {
const options = this.$slots.default();
@ -13,7 +16,10 @@ export default defineComponent({
return h(
"div",
{
class: "pxhvhrfw",
class: [
"pxhvhrfw",
{ chips: this.style === "chips" },
],
},
options.map((option) =>
withDirectives(
@ -66,7 +72,7 @@ export default defineComponent({
&.active {
color: var(--accent);
background: var(--accentedBg);
background: var(--accentedBg) !important;
}
&:not(.active):hover {
@ -83,6 +89,26 @@ export default defineComponent({
}
}
&.chips {
padding: 12px 32px;
font-size: .85em;
overflow-x: auto;
> button {
display: flex;
gap: 6px;
align-items: center;
flex: unset;
margin: 0;
margin-right: 8px;
padding: .5em 1em;
border-radius: 100px;
background: var(--buttonBg);
> i {
margin-top: -.1em;
}
}
}
&.max-width_500px {
font-size: 80%;

View File

@ -1,5 +1,6 @@
<template>
<div
class="user-card-mini"
:class="[
$style.root,
{ yellow: user.isSilenced, red: user.isSuspended, gray: false },

View File

@ -41,37 +41,6 @@
class="note"
/>
</div>
<div
v-if="clips && clips.length > 0"
class="_content clips _gap"
>
<div class="title">{{ i18n.ts.clip }}</div>
<MkA
v-for="item in clips"
:key="item.id"
:to="`/clips/${item.id}`"
class="item _panel _gap"
>
<b>{{ item.name }}</b>
<div
v-if="item.description"
class="description"
>
{{ item.description }}
</div>
<div class="user">
<MkAvatar
:user="item.user"
class="avatar"
:show-indicator="true"
/>
<MkUserName
:user="item.user"
:nowrap="false"
/>
</div>
</MkA>
</div>
<MkButton
v-if="!showPrev && hasPrev"
class="load prev"
@ -114,7 +83,6 @@ const props = defineProps<{
}>();
let note = $ref<null | misskey.entities.Note>();
let clips = $ref();
let hasPrev = $ref(false);
let hasNext = $ref(false);
let showPrev = $ref(false);
@ -160,9 +128,6 @@ function fetchNote() {
.then((res) => {
note = res;
Promise.all([
os.api("notes/clips", {
noteId: note.id,
}),
os.api("users/notes", {
userId: note.userId,
untilId: note.id,
@ -173,8 +138,7 @@ function fetchNote() {
sinceId: note.id,
limit: 1,
}),
]).then(([_clips, prev, next]) => {
clips = _clips;
]).then(([prev, next]) => {
hasPrev = prev.length !== 0;
hasNext = next.length !== 0;
});
@ -220,10 +184,6 @@ definePageMetadata(
opacity: 0;
}
:global(html, body) {
scroll-behavior: smooth;
}
.fcuexfpr {
#calckey_app > :not(.wallpaper) & {
background: var(--bg);
@ -251,34 +211,6 @@ definePageMetadata(
background: var(--panel);
}
}
> .clips {
> .title {
font-weight: bold;
padding: 12px;
}
> .item {
display: block;
padding: 16px;
> .description {
padding: 8px 0;
}
> .user {
$height: 32px;
padding-top: 16px;
border-top: solid 0.5px var(--divider);
line-height: $height;
> .avatar {
width: $height;
height: $height;
}
}
}
}
}
}
}