HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Add reply lines, other tweaks

Browse source
This commit is contained in:
Freeplay 2023-01-06 18:58:52 -05:00
parent 46f70c9355
commit 34576f6670
4 changed files with 175 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

220
packages/client/src/components/MkNote.vue
View file

@ -10,25 +10,27 @@
: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 v-if="pinned" class="info"><i class="ph-push-pin-bold ph-lg"></i> {{ i18n.ts.pinnedNote }}</div> <div class="note-context">
<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-bold ph-lg"></i></button></div> <div class="line"></div>
<div v-if="appearNote._featuredId_" class="info"><i class="ph-lightning-bold ph-lg"></i> {{ i18n.ts.featured }}</div> <div v-if="pinned" class="info"><i class="ph-push-pin-bold ph-lg"></i> {{ i18n.ts.pinnedNote }}</div>
<div v-if="isRenote" class="renote"> <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-bold ph-lg"></i></button></div>
<MkAvatar class="avatar" :user="note.user"/> <div v-if="appearNote._featuredId_" class="info"><i class="ph-lightning-bold ph-lg"></i> {{ i18n.ts.featured }}</div>
<i class="ph-repeat-bold ph-lg"></i> <div v-if="isRenote" class="renote">
<I18n :src="i18n.ts.renotedBy" tag="span"> <i class="ph-repeat-bold ph-lg"></i>
<template #user> <I18n :src="i18n.ts.renotedBy" tag="span">
<MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)"> <template #user>
<MkUserName :user="note.user"/> <MkA v-user-preview="note.userId" class="name" :to="userPage(note.user)">
</MkA> <MkUserName :user="note.user"/>
</template> </MkA>
</I18n> </template>
<div class="info"> </I18n>
<button ref="renoteTime" class="_button time" @click="showRenoteMenu()"> <div class="info">
<i v-if="isMyRenote" class="ph-dots-three-outline-bold ph-lg dropdownIcon"></i> <button ref="renoteTime" class="_button time" @click="showRenoteMenu()">
<MkTime :time="note.createdAt"/> <i v-if="isMyRenote" class="ph-dots-three-outline-bold ph-lg dropdownIcon"></i>
</button> <MkTime :time="note.createdAt"/>
<MkVisibility :note="note"/> </button>
<MkVisibility :note="note"/>
</div>
</div> </div>
</div> </div>
<article class="article" @contextmenu.stop="onContextmenu" @click.self="router.push(notePage(appearNote))"> <article class="article" @contextmenu.stop="onContextmenu" @click.self="router.push(notePage(appearNote))">
@ -44,7 +46,6 @@
</p> </p>
<div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }"> <div v-show="appearNote.cw == null || showContent" class="content" :class="{ collapsed, isLong }">
<div class="text" @click.self="router.push(notePage(appearNote))"> <div class="text" @click.self="router.push(notePage(appearNote))">
<MkA v-if="appearNote.replyId" class="reply" :to="`/notes/${appearNote.replyId}`"><i class="ph-arrow-bend-up-left-bold ph-lg"></i></MkA>
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/> <Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
<a v-if="appearNote.renote != null" class="rp">RN:</a> <a v-if="appearNote.renote != null" class="rp">RN:</a>
<div v-if="translating || translation" class="translation"> <div v-if="translating || translation" class="translation">
@ -345,83 +346,105 @@ function readPromo() {
opacity: 1; opacity: 1;
} }
> .info {
display: flex;
align-items: center;
padding: 16px 32px 8px 32px;
line-height: 24px;
font-size: 90%;
white-space: pre;
color: #f6c177;
> i {
margin-right: 4px;
}
> .hide {
margin-left: auto;
color: inherit;
}
}
> .info + .article {
padding-top: 8px;
}
> .reply-to { > .reply-to {
opacity: 0.7; & + .note-context {
padding-bottom: 0; .line::before {
content: "";
display: block;
margin-bottom: -15px;
width: 2px;
background-color: var(--accentDarken);
margin-inline: auto;
}
}
} }
> .renote { .note-context {
padding: 0 32px 0 32px;
display: flex; display: flex;
align-items: center; &:first-child {
padding: 16px 32px 8px 32px; margin-top: 16px;
line-height: 28px; }
white-space: pre; > :not(.line) {
color: var(--renote); width: 0;
flex-grow: 1;
> .avatar { position: relative;
flex-shrink: 0; margin-bottom: -15px;
display: inline-block; }
width: 28px; > .line {
height: 28px; width: var(--avatar-size);
margin: 0 8px 0 0; display: flex;
border-radius: 6px; margin-right: 14px;
margin-top: 0;
flex-grow: 0;
} }
> i { > div > i {
margin-right: 4px; position: absolute;
right: 100%;
} }
> .info {
display: flex;
align-items: center;
line-height: 24px;
font-size: 90%;
white-space: pre;
color: #f6c177;
> span { > i {
overflow: hidden; margin-right: 4px;
flex-shrink: 1; }
text-overflow: ellipsis;
white-space: nowrap;
> .name { > .hide {
font-weight: bold; margin-left: auto;
color: inherit;
} }
} }
> .info {
margin-left: auto;
font-size: 0.9em;
> .time { > .renote {
flex-shrink: 0; display: flex;
color: inherit; align-items: center;
line-height: 28px;
white-space: pre;
color: var(--renote);
> .dropdownIcon {
margin-right: 4px; > 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;
display: inline-flex;
align-items: center;
> .dropdownIcon {
margin-right: 4px;
}
} }
} }
} }
}
> .renote + .article { & + .article {
padding-top: 8px; padding-top: 10px;
}
} }
> .article { > .article {
@ -437,9 +460,9 @@ function readPromo() {
> .avatar { > .avatar {
flex-shrink: 0; flex-shrink: 0;
display: block; display: block;
margin: 0 14px 8px 0; margin: 0 14px 0 0;
width: 48px; width: var(--avatar-size);
height: 48px; height: var(--avatar-size);
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
@ -454,10 +477,8 @@ function readPromo() {
min-width: 0; min-width: 0;
> .body { > .body {
margin-top: .2em; margin-top: .7em;
overflow: hidden; overflow: hidden;
margin-inline: -100px;
padding-inline: 100px;
> .cw { > .cw {
cursor: default; cursor: default;
@ -606,31 +627,19 @@ function readPromo() {
&.max-width_500px { &.max-width_500px {
font-size: 0.9em; font-size: 0.9em;
// --avatar-size: 50px;
> .article {
> .avatar {
width: 50px;
height: 50px;
}
}
} }
&.max-width_450px { &.max-width_450px {
> .renote { --avatar-size: 46px;
padding: 8px 16px 0 16px; > .note-context {
padding-inline: 16px;
} }
> .info {
padding: 8px 16px 0 16px;
}
> .article { > .article {
padding: 14px 16px 9px; padding: 14px 16px 9px;
> .avatar { > .main > .header-container > .avatar {
margin: 0 10px 8px 0; margin-right: 10px;
width: 46px;
height: 46px;
// top: calc(14px + var(--stickyTop, 0px)); // top: calc(14px + var(--stickyTop, 0px));
} }
} }
@ -651,11 +660,8 @@ function readPromo() {
} }
&.max-width_300px { &.max-width_300px {
--avatar-size: 40px;
> .article { > .article {
> .avatar {
width: 44px;
height: 44px;
}
> .main { > .main {
> .footer { > .footer {

25
packages/client/src/components/MkNoteDetailed.vue
View file

@ -340,12 +340,11 @@ if (appearNote.replyId) {
} }
> .reply-to { > .reply-to {
opacity: 0.7; margin-bottom: -16px;
padding-bottom: 0;
} }
> .reply-to-more { > .reply-to-more {
opacity: 0.7; // opacity: 0.7;
cursor: pointer; cursor: pointer;
@media (pointer: coarse) { @media (pointer: coarse) {
@ -416,8 +415,8 @@ if (appearNote.replyId) {
> .avatar { > .avatar {
display: block; display: block;
flex-shrink: 0; flex-shrink: 0;
width: 52px; width: var(--avatar-size);
height: 52px; height: var(--avatar-size);
} }
> .body { > .body {
@ -425,7 +424,7 @@ if (appearNote.replyId) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding-left: 16px; padding-left: 14px;
font-size: 0.95em; font-size: 0.95em;
> .top { > .top {
@ -574,12 +573,8 @@ if (appearNote.replyId) {
> .article { > .article {
padding: 16px; padding: 16px;
> .header > .body {
> .header { padding-left: 10px;
> .avatar {
width: 50px;
height: 50px;
}
} }
} }
} }
@ -602,12 +597,6 @@ if (appearNote.replyId) {
font-size: 0.825em; font-size: 0.825em;
> .article { > .article {
> .header {
> .avatar {
width: 50px;
height: 50px;
}
}
> .main { > .main {
> .footer { > .footer {

65
packages/client/src/components/MkNoteSub.vue
View file

@ -1,7 +1,10 @@
<template> <template>
<div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1 }"> <div v-size="{ max: [450] }" class="wrpstxzv" :class="{ children: depth > 1 }">
<div class="main" @click="router.push(notePage(note.reply))"> <div class="main" @click="router.push(notePage(note.reply))">
<MkAvatar class="avatar" :user="note.user"/> <div class="avatar-container">
<MkAvatar class="avatar" :user="note.user"/>
<div class="line"></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">
@ -56,11 +59,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
<style lang="scss" scoped> <style lang="scss" scoped>
.wrpstxzv { .wrpstxzv {
padding: 16px 32px; padding: 16px 32px;
font-size: 0.9em;
&.max-width_450px {
padding: 14px 16px;
}
&.children { &.children {
padding: 10px 0 0 16px; padding: 10px 0 0 16px;
@ -75,13 +74,15 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
> .main { > .main {
display: flex; display: flex;
> .avatar { > .avatar-container {
flex-shrink: 0; > .avatar {
display: block; flex-shrink: 0;
margin: 0 8px 0 0; display: block;
width: 38px; margin: 0 8px 0 0;
height: 38px; width: 38px;
border-radius: 8px; height: 38px;
border-radius: 8px;
}
} }
> .body { > .body {
@ -129,5 +130,45 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
> .more { > .more {
padding: 10px 0 0 16px; padding: 10px 0 0 16px;
} }
&.reply-to:first-child {
> .main {
> .avatar-container .avatar, > .body {
opacity: .8;
}
> .avatar-container .line {
// background: linear-gradient(var(--accentedBg),var(--accentDarken));
mask: linear-gradient(rgba(0,0,0,0.8), black);
}
}
}
&.reply-to, &.reply-to-more {
.avatar-container {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 14px;
width: var(--avatar-size);
> .avatar {
width: var(--avatar-size);
height: var(--avatar-size);
margin: 0;
}
> .line {
background-color: var(--accentDarken);
width: 2px;
flex-grow: 1;
margin-bottom: -30px;
}
}
}
&.max-width_450px {
padding: 14px 16px;
margin-bottom: 0 !important;
> .main > .avatar-container {
margin-right: 10px;
}
}
} }
</style> </style>

1
packages/client/src/style.scss
View file

@ -4,6 +4,7 @@
--radius: 12px; --radius: 12px;
--marginFull: 16px; --marginFull: 16px;
--marginHalf: 10px; --marginHalf: 10px;
--avatar-size: 48px;
--margin: var(--marginFull); --margin: var(--marginFull);