Skip to content
This repository has been archived by the owner on Jan 31, 2024. It is now read-only.

Commit

Permalink
upd: rework threading/post ui 1/2
Browse files Browse the repository at this point in the history 
Co-authored-by: Gaspard Wierzbinski <[email protected]>
Co-authored-by: Marie <[email protected]>
  • Loading branch information
@CPlusPatch
3 people committed Dec 2, 2023
1 parent ad5a6c1 commit 1a4bff7
Show file tree
Hide file tree
Showing 8 changed files with 327 additions and 81 deletions.
49 changes: 23 additions & 26 deletions packages/frontend/src/components/MkInstanceTicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,51 +35,48 @@ const faviconUrl = $computed(() => props.instance ? getProxiedImageUrlNullable(p
const themeColor = instance.themeColor ?? '#777777';

const bg = {
background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`,
//background: `linear-gradient(90deg, ${themeColor}, ${themeColor}00)`,
background: `${themeColor}`,
};
</script>

<style lang="scss" module>
$height: 2ex;

.root {
display: flex;
align-items: center;
height: $height;
border-radius: var(--radius-xs) 0 0 var(--radius-xs);
height: 1.5ex;
border-radius: var(--radius-xl);
margin-top: 5px;
padding: 4px;
overflow: clip;
color: #fff;
text-shadow: /* .866 ≈ sin(60deg) */
1px 0 1px #000,
.866px .5px 1px #000,
.5px .866px 1px #000,
0 1px 1px #000,
-.5px .866px 1px #000,
-.866px .5px 1px #000,
-1px 0 1px #000,
-.866px -.5px 1px #000,
-.5px -.866px 1px #000,
0 -1px 1px #000,
.5px -.866px 1px #000,
.866px -.5px 1px #000;
mask-image: linear-gradient(90deg,
rgb(0,0,0),
rgb(0,0,0) calc(100% - 16px),
rgba(0,0,0,0) 100%
);
text-shadow: -1px -1px 0 var(--bg),1px -1px 0 var(--bg),-1px 1px 0 var(--bg),1px 1px 0 var(--bg)
}

.icon {
height: $height;
height: 2ex;
flex-shrink: 0;
}

.name {
margin-left: 4px;
line-height: 1;
font-size: 0.9em;
font-size: 0.8em;
font-weight: bold;
white-space: nowrap;
overflow: visible;
overflow: hidden;
overflow-wrap: anywhere;
max-width: 300px;
text-overflow: ellipsis;

&::-webkit-scrollbar {
display: none;
}
}

@container (max-width: 400px) {
.name {
max-width: 50px;
}
}
</style>
49 changes: 28 additions & 21 deletions packages/frontend/src/components/MkNote.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<Mfm :text="getNoteSummary(appearNote)" :plain="true" :nowrap="true" :author="appearNote.user" :nyaize="'respect'" :class="$style.collapsedRenoteTargetText" @click="renoteCollapsed = false"/>
</div>
<article v-else :class="$style.article" @contextmenu.stop="onContextmenu">
<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
<MkAvatar :class="$style.avatar" :user="appearNote.user" :link="!mock" :preview="!mock"/>
<div :class="[$style.main, { [$style.clickToOpen]: defaultStore.state.clickToOpen }]" @click="defaultStore.state.clickToOpen ? noteclick(appearNote.id) : undefined">
<MkNoteHeader :note="appearNote" :mini="true" v-on:click.stop/>
<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
<div style="display: flex; padding-bottom: 10px;">
<div v-if="appearNote.channel" :class="$style.colorBar" :style="{ background: appearNote.channel.color }"></div>
<MkAvatar :class="[$style.avatar, { [$style.avatarReplyTo]: appearNote.reply }]" :user="appearNote.user" :link="!mock" :preview="!mock"/>
<div :class="$style.main">
<MkNoteHeader :note="appearNote" :mini="true"/>
</div>
</div>
<div :class="[{ [$style.clickToOpen]: defaultStore.state.clickToOpen }]" @click="defaultStore.state.clickToOpen ? noteclick(appearNote.id) : undefined">
<div style="container-type: inline-size;">
<p v-if="appearNote.cw != null" :class="$style.cw">
<Mfm v-if="appearNote.cw != ''" style="margin-right: 8px;" :text="appearNote.cw" :author="appearNote.user" :nyaize="'respect'"/>
Expand All @@ -60,7 +63,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-show="appearNote.cw == null || showContent" :class="[{ [$style.contentCollapsed]: collapsed }]" >
<div :class="$style.text">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<MkA v-if="appearNote.replyId" :class="$style.replyIcon" :to="`/notes/${appearNote.replyId}`"><i class="ph-arrow-bend-left-up ph-bold ph-lg"></i></MkA>
<Mfm
v-if="appearNote.text"
:parsedNodes="parsed"
Expand Down Expand Up @@ -176,7 +178,6 @@ import MkCwButton from '@/components/MkCwButton.vue';
import MkPoll from '@/components/MkPoll.vue';
import MkUsersTooltip from '@/components/MkUsersTooltip.vue';
import MkUrlPreview from '@/components/MkUrlPreview.vue';
import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
import MkButton from '@/components/MkButton.vue';
import { pleaseLogin } from '@/scripts/please-login.js';
import { focusPrev, focusNext } from '@/scripts/focus.js';
Expand Down Expand Up @@ -830,7 +831,7 @@ function emitUpdReaction(emoji: string, delta: number) {
position: relative;
display: flex;
align-items: center;
padding: 16px 32px 8px 32px;
padding: 24px 38px 16px;
line-height: 28px;
white-space: pre;
color: var(--renote);
Expand Down Expand Up @@ -882,7 +883,7 @@ function emitUpdReaction(emoji: string, delta: number) {
align-items: center;
line-height: 28px;
white-space: pre;
padding: 0 32px 18px;
padding: 8px 38px 24px;
}

.collapsedRenoteTargetAvatar {
Expand All @@ -909,7 +910,6 @@ function emitUpdReaction(emoji: string, delta: number) {

.article {
position: relative;
display: flex;
padding: 28px 32px;
}

Expand All @@ -926,12 +926,19 @@ function emitUpdReaction(emoji: string, delta: number) {
.avatar {
flex-shrink: 0;
display: block !important;
position: sticky !important;
margin: 0 14px 0 0;
width: 58px;
height: 58px;
position: sticky !important;
top: calc(22px + var(--stickyTop, 0px));
left: 0;
transition: top 0.5s;

&.avatarReplyTo {
position: relative !important;
top: 0 !important;
}
}

.main {
Expand Down Expand Up @@ -994,7 +1001,6 @@ function emitUpdReaction(emoji: string, delta: number) {

.text {
overflow-wrap: break-word;
overflow: hidden;
}

.replyIcon {
Expand Down Expand Up @@ -1027,7 +1033,8 @@ function emitUpdReaction(emoji: string, delta: number) {

.quoteNote {
padding: 16px;
border: dashed 1px var(--renote);
// Made border solid, stylistic choice
border: solid 1px var(--renote);
border-radius: var(--radius-sm);
overflow: clip;
}
Expand Down Expand Up @@ -1067,7 +1074,11 @@ function emitUpdReaction(emoji: string, delta: number) {
}

.renote {
padding: 12px 26px 0 26px;
padding: 24px 28px 16px;
}

.collapsedRenoteTarget {
padding: 8px 28px 24px;
}

.article {
Expand All @@ -1085,12 +1096,8 @@ function emitUpdReaction(emoji: string, delta: number) {
font-size: 0.9em;
}

.renote {
padding: 10px 22px 0 22px;
}

.article {
padding: 20px 22px;
padding: 23px 25px;
}

.footer {
Expand All @@ -1100,20 +1107,20 @@ function emitUpdReaction(emoji: string, delta: number) {

@container (max-width: 480px) {
.renote {
padding: 8px 16px 0 16px;
padding: 20px 24px 8px;
}

.tip {
padding: 8px 16px 0 16px;
}

.collapsedRenoteTarget {
padding: 0 16px 9px;
padding: 8px 24px 20px;
margin-top: 4px;
}

.article {
padding: 14px 16px;
padding: 22px 24px;
}
}

Expand Down
69 changes: 53 additions & 16 deletions packages/frontend/src/components/MkNoteDetailed.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,9 @@ SPDX-License-Identifier: AGPL-3.0-only
v-hotkey="keymap"
:class="$style.root"
>
<div v-if="appearNote.reply && appearNote.reply.replyId">
<div v-if="!conversationLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadConversation">{{ i18n.ts.loadConversation }}</MkButton>
</div>
<MkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws"/>
<div v-if="appearNote.reply && appearNote.reply.replyId && !conversationLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadConversation">{{ i18n.ts.loadConversation }}</MkButton>
</div>
<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws"/>
<div v-if="isRenote" :class="$style.renote">
<MkAvatar :class="$style.renoteAvatar" :user="note.user" link preview/>
<i class="ph-rocket-launch ph-bold ph-lg" style="margin-right: 4px;"></i>
Expand All @@ -43,15 +39,29 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-if="note.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ph-rocket ph-bold ph-lg"></i></span>
</div>
</div>
<template v-if="appearNote.reply && appearNote.reply.replyId">
<MkNoteSub v-for="note in conversation" :key="note.id" :class="$style.replyToMore" :note="note" :expandAllCws="props.expandAllCws"/>
</template>
<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo" :expandAllCws="props.expandAllCws"/>
<article :class="$style.note" @contextmenu.stop="onContextmenu">
<header :class="$style.noteHeader">
<MkAvatar :class="$style.noteHeaderAvatar" :user="appearNote.user" indicator link preview/>
<div :class="$style.noteHeaderBody">
<div>
<MkA v-user-preview="appearNote.user.id" :class="$style.noteHeaderName" :to="userPage(appearNote.user)">
<MkUserName :nowrap="false" :user="appearNote.user"/>
</MkA>
<span v-if="appearNote.user.isBot" :class="$style.isBot">bot</span>
<div style="display: flex; align-items: center; white-space: nowrap; overflow: hidden;">
<div :class="$style.noteHeaderBody">
<div>
<MkA v-user-preview="appearNote.user.id" :class="$style.noteHeaderName" :to="userPage(appearNote.user)">
<MkUserName :nowrap="false" :user="appearNote.user"/>
</MkA>
<span v-if="appearNote.user.isBot" :class="$style.isBot">bot</span>
<span v-if="appearNote.user.badgeRoles" :class="$style.badgeRoles">
<img v-for="role in appearNote.user.badgeRoles" :key="role.id" v-tooltip="role.name" :class="$style.badgeRole" :src="role.iconUrl"/>
</span>
</div>
<div :class="$style.noteHeaderUsername"><MkAcct :user="appearNote.user"/></div>
</div>
</div>
<div style="display: flex; align-items: flex-end; margin-left: auto;">
<div :class="$style.noteHeaderBody">
<div :class="$style.noteHeaderInfo">
<span v-if="appearNote.visibility !== 'public'" style="margin-left: 0.5em;" :title="i18n.ts._visibility[appearNote.visibility]">
<i v-if="appearNote.visibility === 'home'" class="ph-house ph-bold ph-lg"></i>
Expand All @@ -61,9 +71,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<span v-if="appearNote.updatedAt" ref="menuVersionsButton" style="margin-left: 0.5em;" title="Edited" @mousedown="menuVersions()"><i class="ph-pencil ph-bold ph-lg"></i></span>
<span v-if="appearNote.localOnly" style="margin-left: 0.5em;" :title="i18n.ts._visibility['disableFederation']"><i class="ph-rocket ph-bold ph-lg"></i></span>
</div>
<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
</div>
<div :class="$style.noteHeaderUsername"><MkAcct :user="appearNote.user"/></div>
<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance"/>
</div>
</header>
<div :class="$style.noteContent">
Expand All @@ -73,7 +82,6 @@ SPDX-License-Identifier: AGPL-3.0-only
</p>
<div v-show="appearNote.cw == null || showContent">
<span v-if="appearNote.isHidden" style="opacity: 0.5">({{ i18n.ts.private }})</span>
<MkA v-if="appearNote.replyId" :class="$style.noteReplyTarget" :to="`/notes/${appearNote.replyId}`"><i class="ph-arrow-bend-left-up ph-bold ph-lg"></i></MkA>
<Mfm
v-if="appearNote.text"
:parsedNodes="parsed"
Expand Down Expand Up @@ -464,7 +472,7 @@ function renote() {
if (appearNote.channel?.isSensitive) {
visibility = smallerVisibility(visibility, 'home');
}

os.api('notes/create', {
localOnly,
visibility,
Expand Down Expand Up @@ -851,12 +859,19 @@ function animatedMFM() {

.noteHeaderInfo {
float: right;
text-align: right;
}

.noteHeaderUsername {
margin-bottom: 2px;
line-height: 1.3;
word-wrap: anywhere;
text-overflow: ellipsis;
white-space: nowrap;

&::-webkit-scrollbar {
display: none;
}
}

.playMFMButton {
Expand Down Expand Up @@ -1037,9 +1052,31 @@ function animatedMFM() {
}
}

.avatar {
flex-shrink: 0 !important;
display: block !important;
margin: 0 10px 0 0 !important;
width: 40px !important;
height: 40px !important;
border-radius: var(--radius-sm) !important;
}

.muted {
padding: 8px;
text-align: center;
opacity: 0.7;
}

.badgeRoles {
margin: 0 .5em 0 0;
}

.badgeRole {
height: 1.3em;
vertical-align: -20%;

& + .badgeRole {
margin-left: 0.2em;
}
}
</style>
Loading

0 comments on commit 1a4bff7

Please sign in to comment.