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"
searchUser: "Search for a user"
reply: "Reply"
jumpToReply: "Jump to Reply"
loadMore: "Load more"
showMore: "Show more"
newer: "newer"
older: "older"
showLess: "Close"
youGotNewFollower: "followed you"
receiveFollowRequest: "Follow request received"

View File

@ -15,20 +15,22 @@
:key="note.id"
class="reply-to"
:note="note"
:detailedView="true"
/>
<MkLoading v-else-if="appearNote.reply" mini />
<MkNoteSub
v-if="appearNote.reply"
:note="appearNote.reply"
class="reply-to"
:detailedView="true"
/>
<div ref="noteEl" class="article" tabindex="-1">
<div ref="noteEl" class="article" tabindex="-1" :id="appearNote.id">
<MkNote
@contextmenu.stop="onContextmenu"
tabindex="-1"
:note="appearNote"
:detailedView="true"
detailedView
></MkNote>
</div>
@ -39,6 +41,7 @@
:note="note"
class="reply"
:conversation="replies"
:detailedView="true"
/>
<MkLoading v-else-if="appearNote.repliesCount > 0" />
</div>
@ -329,6 +332,9 @@ onMounted(() => {
onUpdated(() => {
if (!isScrolling) {
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 {
font-size: 0.9em;

View File

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

View File

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

View File

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

View File

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

View File

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