natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

note-improvements (#9799) 

Boop!

Co-authored-by: Freeplay <Freeplay@duck.com>
Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9799
Co-authored-by: Free <freeplay@duck.com>
Co-committed-by: Free <freeplay@duck.com>
This commit is contained in:
Free 2023-04-02 21:39:25 +00:00 committed by Kainoa Kanter
parent 84debac6db
commit 8bd64c89a4
6 changed files with 53 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
locales/en-US.yml
View File

@ -1230,13 +1230,13 @@ _sfx:
_ago: _ago:
future: "Future" future: "Future"
justNow: "Just now" justNow: "Just now"
secondsAgo: "{n} second(s) ago" secondsAgo: "{n}s ago"
minutesAgo: "{n} minute(s) ago" minutesAgo: "{n}m ago"
hoursAgo: "{n} hour(s) ago" hoursAgo: "{n}h ago"
daysAgo: "{n} day(s) ago" daysAgo: "{n}d ago"
weeksAgo: "{n} week(s) ago" weeksAgo: "{n}w ago"
monthsAgo: "{n} month(s) ago" monthsAgo: "{n}mo ago"
yearsAgo: "{n} year(s) ago" yearsAgo: "{n}y ago"
_time: _time:
second: "Second(s)" second: "Second(s)"
minute: "Minute(s)" minute: "Minute(s)"

14
packages/client/src/components/MkNote.vue
View File

@ -10,16 +10,16 @@
:class="{ renote: isRenote }" :class="{ renote: isRenote }"
> >
<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/> <MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" class="reply-to"/>
<div class="note-context"> <div class="note-context" @click="noteClick">
<div class="line"></div> <div class="line"></div>
<div v-if="appearNote._prId_" class="info"><i class="ph-megaphone-simple-bold ph-lg"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ph-x ph-bold ph-lg"></i></button></div> <div v-if="appearNote._prId_" class="info"><i class="ph-megaphone-simple-bold ph-lg"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click.stop="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ph-x ph-bold ph-lg"></i></button></div>
<div v-if="appearNote._featuredId_" class="info"><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts.featured }}</div> <div v-if="appearNote._featuredId_" class="info"><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts.featured }}</div>
<div v-if="pinned" class="info"><i class="ph-push-pin ph-bold ph-lg"></i>{{ i18n.ts.pinnedNote }}</div> <div v-if="pinned" class="info"><i class="ph-push-pin ph-bold ph-lg"></i>{{ i18n.ts.pinnedNote }}</div>
<div v-if="isRenote" class="renote"> <div v-if="isRenote" class="renote">
<i class="ph-repeat ph-bold ph-lg"></i> <i class="ph-repeat ph-bold ph-lg"></i>
<I18n :src="i18n.ts.renotedBy" tag="span"> <I18n :src="i18n.ts.renotedBy" tag="span">
<template #user> <template #user>
<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)"> <MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)" @click.stop>
<MkUserName :user="note.user"/> <MkUserName :user="note.user"/>
</MkA> </MkA>
</template> </template>
@ -93,7 +93,6 @@
<i class="ph-dots-three-outline ph-bold ph-lg"></i> <i class="ph-dots-three-outline ph-bold ph-lg"></i>
</button> </button>
</footer> </footer>
<!-- <MkNoteFooter :note="appearNote"></MkNoteFooter> -->
</div> </div>
</article> </article>
</div> </div>
@ -418,7 +417,7 @@ function readPromo() {
align-items: center; align-items: center;
white-space: pre; white-space: pre;
color: var(--renote); color: var(--renote);
cursor: pointer;
> i { > i {
margin-right: 4px; margin-right: 4px;
@ -504,7 +503,7 @@ function readPromo() {
width: 100%; width: 100%;
margin-top: 1em; margin-top: 1em;
position: sticky; position: sticky;
bottom: 1em; bottom: var(--stickyBottom);
> span { > span {
display: inline-block; display: inline-block;
@ -663,6 +662,9 @@ function readPromo() {
} }
> .line { > .line {
margin-right: 10px; margin-right: 10px;
&::before {
margin-top: 8px;
}
} }
} }
> .article { > .article {

3
packages/client/src/components/MkNoteDetailed.vue
View File

@ -352,6 +352,7 @@ onUnmounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.lxwezrsl { .lxwezrsl {
font-size: 1.05em;
position: relative; position: relative;
transition: box-shadow 0.1s ease; transition: box-shadow 0.1s ease;
contain: content; contain: content;
@ -451,7 +452,7 @@ onUnmounted(() => {
&:last-child { &:last-child {
padding-bottom: 24px; padding-bottom: 24px;
} }
font-size: 1.2em; font-size: 1.1em;
overflow: clip; overflow: clip;
outline: none; outline: none;
scroll-margin-top: calc(var(--stickyTop) + 20vh); scroll-margin-top: calc(var(--stickyTop) + 20vh);

39
packages/client/src/components/MkNoteSub.vue
View File

@ -7,25 +7,25 @@
<div v-if="conversation && depth > 1" class="line"></div> <div v-if="conversation && depth > 1" class="line"></div>
<div class="main" @click="noteClick"> <div class="main" @click="noteClick">
<div class="avatar-container"> <div class="avatar-container">
<MkAvatar class="avatar" :user="note.user"/> <MkAvatar class="avatar" :user="appearNote.user"/>
<div v-if="(!conversation) || replies.length > 0" class="line"></div> <div v-if="(!conversation) || replies.length > 0" class="line"></div>
</div> </div>
<div class="body"> <div class="body">
<XNoteHeader class="header" :note="note" :mini="true"/> <XNoteHeader class="header" :note="note" :mini="true"/>
<div class="body"> <div class="body">
<p v-if="note.cw != null" class="cw"> <p v-if="appearNote.cw != null" class="cw">
<MkA v-if="note.replyId" :to="`/notes/${note.replyId}`" class="reply-icon" @click.stop> <MkA v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`" class="reply-icon" @click.stop>
<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i> <i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
</MkA> </MkA>
<MkA v-if="conversation && note.renoteId && note.renoteId != parentId && !note.replyId" :to="`/notes/${note.renoteId}`" class="reply-icon" @click.stop> <MkA v-if="conversation && appearNote.renoteId && appearNote.renoteId != parentId && !appearNote.replyId" :to="`/notes/${appearNote.renoteId}`" class="reply-icon" @click.stop>
<i class="ph-quotes ph-bold ph-lg"></i> <i class="ph-quotes ph-bold ph-lg"></i>
</MkA> </MkA>
<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/> <Mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
<br/> <br/>
<XCwButton v-model="showContent" :note="note"/> <XCwButton v-model="showContent" :note="note"/>
</p> </p>
<div v-show="note.cw == null || showContent" class="content"> <div v-show="appearNote.cw == null || showContent" class="content">
<MkSubNoteContent class="text" :note="note" :detailed="true" :parentId="note.parentId" :conversation="conversation"/> <MkSubNoteContent class="text" :note="note" :detailed="true" :parentId="appearNote.parentId" :conversation="conversation"/>
</div> </div>
<div v-if="translating || translation" class="translation"> <div v-if="translating || translation" class="translation">
<MkLoading v-if="translating" mini/> <MkLoading v-if="translating" mini/>
@ -56,15 +56,14 @@
<i class="ph-dots-three-outline ph-bold ph-lg"></i> <i class="ph-dots-three-outline ph-bold ph-lg"></i>
</button> </button>
</footer> </footer>
<!-- <MkNoteFooter :note="note" :directReplies="replies.length"></MkNoteFooter> -->
</div> </div>
</div> </div>
<template v-if="conversation"> <template v-if="conversation">
<template v-if="replies.length == 1"> <template v-if="replies.length == 1">
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth" :parentId="note.replyId"/> <MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth" :parentId="appearNote.replyId"/>
</template> </template>
<template v-else-if="depth < 5"> <template v-else-if="depth < 5">
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1" :parentId="note.replyId"/> <MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1" :parentId="appearNote.replyId"/>
</template> </template>
<div v-else-if="replies.length > 0" class="more"> <div v-else-if="replies.length > 0" class="more">
<div class="line"></div> <div class="line"></div>
@ -457,6 +456,26 @@ function noteClick(e) {
-webkit-mask: linear-gradient(to right, transparent 2px, black 2px); -webkit-mask: linear-gradient(to right, transparent 2px, black 2px);
} }
} }
// End Reply Divider
.children > .main:last-child {
padding-bottom: 1em;
&::before {
bottom: 1em;
}
// &::after {
// content: "";
// border-top: 1px solid var(--X13);
// position: absolute;
// bottom: 0;
// margin-left: calc(var(--avatarSize) + 12px);
// inset-inline: 0;
// }
}
&.firstColumn > .children:last-child > .main {
padding-bottom: 0 !important;
&::before { bottom: 0 !important }
// &::after { content: unset }
}
&.max-width_500px { &.max-width_500px {
:not(.reply) > & { :not(.reply) > & {

2
packages/client/src/components/MkSubNoteContent.vue
View File

@ -130,7 +130,7 @@ const urls = props.note.text ? extractUrlFromMfm(mfm.parse(props.note.text)) : n
width: 100%; width: 100%;
margin-top: 1em; margin-top: 1em;
position: sticky; position: sticky;
bottom: 1em; bottom: var(--stickyBottom);
> span { > span {
display: inline-block; display: inline-block;

8
packages/client/src/ui/universal.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="dkgtipfy" :class="{ wallpaper }"> <div class="dkgtipfy" :class="{ wallpaper, isMobile }">
<XSidebar v-if="!isMobile" class="sidebar"/> <XSidebar v-if="!isMobile" class="sidebar"/>
<MkStickyContainer class="contents"> <MkStickyContainer class="contents">
@ -319,6 +319,10 @@ console.log(mainRouter.currentRoute.value.name);
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
--stickyBottom: 1em;
&.isMobile {
--stickyBottom: 6rem;
}
&.wallpaper { &.wallpaper {
background: var(--wallpaperOverlay); background: var(--wallpaperOverlay);
//backdrop-filter: var(--blur, blur(4px)); //backdrop-filter: var(--blur, blur(4px));
@ -363,7 +367,7 @@ console.log(mainRouter.currentRoute.value.name);
} }
> .postButton, .widgetButton { > .postButton, .widgetButton {
bottom: 6rem; bottom: var(--stickyBottom);
right: 1.5rem; right: 1.5rem;
height: 4rem; height: 4rem;
width: 4rem; width: 4rem;