Jump to Reply + other note page improvmeents

This commit is contained in:
Freeplay 2023-05-17 21:54:37 -04:00
parent 72a40b3139
commit fb06aecb7b
7 changed files with 47 additions and 15 deletions

View File

@ -57,8 +57,11 @@ sendMessage: "Send a message"
copyUsername: "Copy username" copyUsername: "Copy username"
searchUser: "Search for a user" searchUser: "Search for a user"
reply: "Reply" reply: "Reply"
jumpToReply: "Jump to Reply"
loadMore: "Load more" loadMore: "Load more"
showMore: "Show more" showMore: "Show more"
newer: "newer"
older: "older"
showLess: "Close" showLess: "Close"
youGotNewFollower: "followed you" youGotNewFollower: "followed you"
receiveFollowRequest: "Follow request received" receiveFollowRequest: "Follow request received"

View File

@ -15,20 +15,22 @@
:key="note.id" :key="note.id"
class="reply-to" class="reply-to"
:note="note" :note="note"
:detailedView="true"
/> />
<MkLoading v-else-if="appearNote.reply" mini /> <MkLoading v-else-if="appearNote.reply" mini />
<MkNoteSub <MkNoteSub
v-if="appearNote.reply" v-if="appearNote.reply"
:note="appearNote.reply" :note="appearNote.reply"
class="reply-to" class="reply-to"
:detailedView="true"
/> />
<div ref="noteEl" class="article" tabindex="-1"> <div ref="noteEl" class="article" tabindex="-1" :id="appearNote.id">
<MkNote <MkNote
@contextmenu.stop="onContextmenu" @contextmenu.stop="onContextmenu"
tabindex="-1" tabindex="-1"
:note="appearNote" :note="appearNote"
:detailedView="true" detailedView
></MkNote> ></MkNote>
</div> </div>
@ -39,6 +41,7 @@
:note="note" :note="note"
class="reply" class="reply"
:conversation="replies" :conversation="replies"
:detailedView="true"
/> />
<MkLoading v-else-if="appearNote.repliesCount > 0" /> <MkLoading v-else-if="appearNote.repliesCount > 0" />
</div> </div>
@ -329,6 +332,9 @@ onMounted(() => {
onUpdated(() => { onUpdated(() => {
if (!isScrolling) { if (!isScrolling) {
noteEl?.scrollIntoView(); noteEl?.scrollIntoView();
if (location.hash) {
location.replace(location.hash); // Jump to highlighted reply
}
} }
}); });
@ -510,6 +516,14 @@ onUnmounted(() => {
// } // }
// } // }
} }
:deep(.reply:target > .main),
:deep(.reply-to:target) {
z-index: 2;
&::before {
outline: auto;
opacity: 1;
}
}
&.max-width_500px { &.max-width_500px {
font-size: 0.9em; font-size: 0.9em;

View File

@ -4,6 +4,8 @@
ref="el" ref="el"
v-size="{ max: [450, 500] }" v-size="{ max: [450, 500] }"
class="wrpstxzv" class="wrpstxzv"
:id="detailedView ? appearNote.id : null"
tabindex="-1"
:class="{ :class="{
children: depth > 1, children: depth > 1,
singleStart: replies.length == 1, singleStart: replies.length == 1,
@ -138,6 +140,7 @@
:depth="depth" :depth="depth"
:replyLevel="replyLevel + 1" :replyLevel="replyLevel + 1"
:parentId="appearNote.replyId" :parentId="appearNote.replyId"
:detailedView="detailedView"
/> />
</template> </template>
<template v-else> <template v-else>
@ -150,6 +153,7 @@
:depth="depth + 1" :depth="depth + 1"
:replyLevel="replyLevel + 1" :replyLevel="replyLevel + 1"
:parentId="appearNote.replyId" :parentId="appearNote.replyId"
:detailedView="detailedView"
/> />
</template> </template>
</template> </template>
@ -212,6 +216,7 @@ const props = withDefaults(
note: misskey.entities.Note; note: misskey.entities.Note;
conversation?: misskey.entities.Note[]; conversation?: misskey.entities.Note[];
parentId?; parentId?;
detailedView?;
// how many notes are in between this one and the note being viewed in detail // how many notes are in between this one and the note being viewed in detail
depth?: number; depth?: number;
@ -348,6 +353,7 @@ function noteClick(e) {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrpstxzv { .wrpstxzv {
padding: 16px 32px; padding: 16px 32px;
outline: none;
&.children { &.children {
padding: 10px 0 0 var(--indent); padding: 10px 0 0 var(--indent);
padding-left: var(--indent) !important; padding-left: var(--indent) !important;

View File

@ -2,7 +2,8 @@
<p v-if="note.cw != null" class="cw"> <p v-if="note.cw != null" class="cw">
<MkA <MkA
v-if="!detailed && note.replyId" v-if="!detailed && note.replyId"
:to="`/notes/${note.replyId}`" :to="`#${note.replyId}`"
behavior="browser"
class="reply-icon" class="reply-icon"
@click.stop @click.stop
> >
@ -16,6 +17,7 @@
!note.replyId !note.replyId
" "
:to="`/notes/${note.renoteId}`" :to="`/notes/${note.renoteId}`"
v-tooltip="i18n.ts.jumpToReply"
class="reply-icon" class="reply-icon"
@click.stop @click.stop
> >
@ -60,7 +62,9 @@
<template v-if="!note.cw"> <template v-if="!note.cw">
<MkA <MkA
v-if="!detailed && note.replyId" v-if="!detailed && note.replyId"
:to="`/notes/${note.replyId}`" :to="`#${note.replyId}`"
behavior="browser"
v-tooltip="i18n.ts.jumpToReply"
class="reply-icon" class="reply-icon"
@click.stop @click.stop
> >

View File

@ -2,9 +2,8 @@
<a <a
:href="to" :href="to"
:class="active ? activeClass : null" :class="active ? activeClass : null"
@click="nav"
@contextmenu.prevent.stop="onContextmenu" @contextmenu.prevent.stop="onContextmenu"
@click.stop @click.stop="nav"
> >
<slot></slot> <slot></slot>
</a> </a>
@ -99,13 +98,9 @@ function popout() {
} }
function nav(ev: MouseEvent) { function nav(ev: MouseEvent) {
if (!ev.ctrlKey) { if (!ev.ctrlKey && props.behavior !== "browser") {
ev.preventDefault();
if (props.behavior === "browser") { ev.preventDefault();
location.href = props.to;
return;
}
if (props.behavior) { if (props.behavior) {
if (props.behavior === "window") { if (props.behavior === "window") {

View File

@ -139,6 +139,7 @@ const props = defineProps<{
thin?: boolean; thin?: boolean;
displayMyAvatar?: boolean; displayMyAvatar?: boolean;
displayBackButton?: boolean; displayBackButton?: boolean;
to?: string;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
@ -193,7 +194,11 @@ const preventDrag = (ev: TouchEvent) => {
}; };
const onClick = () => { const onClick = () => {
if (props.to) {
location.href = props.to;
} else {
scrollToTop(el, { behavior: "smooth" }); scrollToTop(el, { behavior: "smooth" });
}
}; };
function onTabMousedown(tab: Tab, ev: MouseEvent): void { function onTabMousedown(tab: Tab, ev: MouseEvent): void {

View File

@ -5,6 +5,7 @@
:actions="headerActions" :actions="headerActions"
:tabs="headerTabs" :tabs="headerTabs"
:display-back-button="true" :display-back-button="true"
:to="`#${noteId}`"
/></template> /></template>
<MkSpacer :content-max="800" :marginMin="6"> <MkSpacer :content-max="800" :marginMin="6">
<div class="fcuexfpr"> <div class="fcuexfpr">
@ -26,7 +27,7 @@
v-if="!showNext && hasNext" v-if="!showNext && hasNext"
class="load next" class="load next"
@click="showNext = true" @click="showNext = true"
v-tooltip="i18n.ts.loadMore" v-tooltip="`${i18n.ts.loadMore} (${i18n.ts.newer})`"
><i class="ph-caret-up ph-bold ph-lg"></i ><i class="ph-caret-up ph-bold ph-lg"></i
></MkButton> ></MkButton>
<div class="note _gap"> <div class="note _gap">
@ -75,7 +76,7 @@
v-if="!showPrev && hasPrev" v-if="!showPrev && hasPrev"
class="load prev" class="load prev"
@click="showPrev = true" @click="showPrev = true"
v-tooltip="i18n.ts.loadMore" v-tooltip="`${i18n.ts.loadMore} (${i18n.ts.older})`"
><i class="ph-caret-down ph-bold ph-lg"></i ><i class="ph-caret-down ph-bold ph-lg"></i
></MkButton> ></MkButton>
</div> </div>
@ -219,6 +220,10 @@ definePageMetadata(
opacity: 0; opacity: 0;
} }
:global(html, body) {
scroll-behavior: smooth;
}
.fcuexfpr { .fcuexfpr {
#calckey_app > :not(.wallpaper) & { #calckey_app > :not(.wallpaper) & {
background: var(--bg); background: var(--bg);