From f92f474088696f4379650f6a03688b44eb934632 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Mon, 1 Jan 2024 17:44:13 +0100
Subject: [PATCH 1/2] Bring note style closer to Firefish
---
.../src/components/MkAchievements.vue | 4 +-
packages/frontend/src/components/MkNote.vue | 4 +-
.../src/components/MkNoteDetailed.vue | 4 +-
.../frontend/src/components/MkUserInfo.vue | 4 +-
.../frontend/src/components/MkUserPopup.vue | 4 +-
.../src/components/MkUserSetupDialog.User.vue | 4 +-
.../src/components/SkInstanceTicker.vue | 1 -
packages/frontend/src/components/SkNote.vue | 26 ++++++--
.../src/components/SkNoteDetailed.vue | 23 ++++---
.../frontend/src/components/SkNoteHeader.vue | 11 ++--
.../frontend/src/components/SkNoteSub.vue | 61 ++++++++++---------
.../src/components/SkOldNoteWindow.vue | 4 +-
packages/frontend/src/style.scss | 3 +
packages/frontend/src/themes/_dark.json5 | 1 +
packages/frontend/src/themes/_light.json5 | 1 +
15 files changed, 88 insertions(+), 67 deletions(-)
diff --git a/packages/frontend/src/components/MkAchievements.vue b/packages/frontend/src/components/MkAchievements.vue
index cdd9cb87b1..333f62e29c 100644
--- a/packages/frontend/src/components/MkAchievements.vue
+++ b/packages/frontend/src/components/MkAchievements.vue
@@ -120,8 +120,8 @@ onMounted(() => {
.iconFrame {
position: relative;
- width: 58px;
- height: 58px;
+ width: var(--avatar);
+ height: var(--avatar);
padding: 6px;
border-radius: var(--radius-full);
box-sizing: border-box;
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 8a3b4cef48..6274419c54 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -986,8 +986,8 @@ function emitUpdReaction(emoji: string, delta: number) {
flex-shrink: 0;
display: block !important;
margin: 0 14px 0 0;
- width: 58px;
- height: 58px;
+ width: var(--avatar);
+ height: var(--avatar);
position: sticky !important;
top: calc(22px + var(--stickyTop, 0px));
left: 0;
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index e287890e2c..6558e24630 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -871,8 +871,8 @@ function animatedMFM() {
.noteHeaderAvatar {
display: block;
flex-shrink: 0;
- width: 58px;
- height: 58px;
+ width: var(--avatar);
+ height: var(--avatar);
}
.noteHeaderBody {
diff --git a/packages/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue
index 4e326911d8..0e3f3914b8 100644
--- a/packages/frontend/src/components/MkUserInfo.vue
+++ b/packages/frontend/src/components/MkUserInfo.vue
@@ -65,8 +65,8 @@ defineProps<{
top: 62px;
left: 13px;
z-index: 2;
- width: 58px;
- height: 58px;
+ width: var(--avatar);
+ height: var(--avatar);
border: solid 4px var(--panel);
}
diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue
index ec2c48b1cf..c9100652f3 100644
--- a/packages/frontend/src/components/MkUserPopup.vue
+++ b/packages/frontend/src/components/MkUserPopup.vue
@@ -199,8 +199,8 @@ onMounted(() => {
right: 0;
margin: 0 auto;
z-index: 2;
- width: 58px;
- height: 58px;
+ width: var(--avatar);
+ height: var(--avatar);
}
.title {
diff --git a/packages/frontend/src/components/MkUserSetupDialog.User.vue b/packages/frontend/src/components/MkUserSetupDialog.User.vue
index 621995cc5b..7becc5c66d 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.User.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.User.vue
@@ -59,8 +59,8 @@ async function follow() {
top: 30px;
left: 13px;
z-index: 2;
- width: 58px;
- height: 58px;
+ width: var(--avatar);
+ height: var(--avatar);
border: solid 4px var(--panel);
}
diff --git a/packages/frontend/src/components/SkInstanceTicker.vue b/packages/frontend/src/components/SkInstanceTicker.vue
index 96bc1ca2c0..9cfc332698 100644
--- a/packages/frontend/src/components/SkInstanceTicker.vue
+++ b/packages/frontend/src/components/SkInstanceTicker.vue
@@ -46,7 +46,6 @@ const bg = {
align-items: center;
height: 1.5ex;
border-radius: var(--radius-xl);
- margin-top: 5px;
padding: 4px;
overflow: clip;
color: #fff;
diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index 83909654c7..10c7c72e61 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -882,7 +882,6 @@ function emitUpdReaction(emoji: string, delta: number) {
}
.replyTo {
- opacity: 0.7;
padding-bottom: 0;
}
@@ -890,11 +889,28 @@ function emitUpdReaction(emoji: string, delta: number) {
position: relative;
display: flex;
align-items: center;
- padding: 24px 38px 16px;
+ padding: 24px 32px 16px calc(32px + var(--avatar) + 14px);
line-height: 28px;
white-space: pre;
color: var(--renote);
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: calc(32px + .5 * var(--avatar));
+ bottom: -8px;
+ border-left: var(--thread-width) solid var(--thread);
+ }
+
+ &:first-child {
+ padding-left: 32px;
+
+ &::before {
+ display: none;
+ }
+ }
+
& + .article {
padding-top: 8px;
}
@@ -906,7 +922,7 @@ function emitUpdReaction(emoji: string, delta: number) {
.renoteAvatar {
flex-shrink: 0;
- display: inline-block;
+ display: none; /* same as Firefish, but keeping the element around in case someone wants to add it back via CSS override */
width: 28px;
height: 28px;
margin: 0 8px 0 0;
@@ -987,8 +1003,8 @@ function emitUpdReaction(emoji: string, delta: number) {
display: block !important;
position: sticky !important;
margin: 0 14px 0 0;
- width: 58px;
- height: 58px;
+ width: var(--avatar);
+ height: var(--avatar);
position: sticky !important;
top: calc(22px + var(--stickyTop, 0px));
left: 0;
diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index f850adba1b..6bd5d77442 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -178,7 +178,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!repliesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
</div>
- <SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" />
+ <SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
</div>
<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@@ -381,16 +381,16 @@ const reactionsPagination = computed(() => ({
}));
async function addReplyTo(replyNote: Misskey.entities.Note) {
- replies.value.unshift(replyNote);
- appearNote.value.repliesCount += 1;
+ replies.value.unshift(replyNote);
+ appearNote.value.repliesCount += 1;
}
async function removeReply(id: Misskey.entities.Note['id']) {
- const replyIdx = replies.value.findIndex(note => note.id === id);
- if (replyIdx >= 0) {
- replies.value.splice(replyIdx, 1);
- appearNote.value.repliesCount -= 1;
- }
+ const replyIdx = replies.value.findIndex(note => note.id === id);
+ if (replyIdx >= 0) {
+ replies.value.splice(replyIdx, 1);
+ appearNote.value.repliesCount -= 1;
+ }
}
useNoteCapture({
@@ -807,12 +807,11 @@ function animatedMFM() {
}
.replyTo {
- opacity: 0.7;
padding-bottom: 0;
}
.replyToMore {
- opacity: 0.7;
+
}
.renote {
@@ -879,8 +878,8 @@ function animatedMFM() {
.noteHeaderAvatar {
display: block;
flex-shrink: 0;
- width: 58px;
- height: 58px;
+ width: var(--avatar);
+ height: var(--avatar);
}
.noteHeaderBody {
diff --git a/packages/frontend/src/components/SkNoteHeader.vue b/packages/frontend/src/components/SkNoteHeader.vue
index d3ecdf17bb..7a3f9d02f5 100644
--- a/packages/frontend/src/components/SkNoteHeader.vue
+++ b/packages/frontend/src/components/SkNoteHeader.vue
@@ -116,6 +116,8 @@ const mock = inject<boolean>('mock', false);
.root {
display: flex;
cursor: auto; /* not clickToOpen-able */
+ min-height: 100%;
+ align-items: center;
}
.classicRoot {
@@ -135,6 +137,7 @@ const mock = inject<boolean>('mock', false);
display: flex;
align-items: flex-end;
margin-left: auto;
+ margin-bottom: auto;
padding-left: 10px;
overflow: clip;
}
@@ -143,10 +146,9 @@ const mock = inject<boolean>('mock', false);
.name {
flex-shrink: 1;
display: block;
- // note, these margin top values were done by hand may need futher checking if it actualy aligns pixel perfect
- margin: 3px .5em 0 0;
+ margin: 0 .5em 0 0;
padding: 0;
- overflow: scroll;
+ overflow: hidden;
overflow-wrap: anywhere;
font-size: 1em;
font-weight: bold;
@@ -192,8 +194,7 @@ const mock = inject<boolean>('mock', false);
.username {
flex-shrink: 9999999;
- // note these top margins were made to align with the instance ticker
- margin: 4px .5em 0 0;
+ margin: 0 .5em 0 0;
overflow: hidden;
text-overflow: ellipsis;
font-size: .95em;
diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue
index bc482294b4..0fb6e00ab1 100644
--- a/packages/frontend/src/components/SkNoteSub.vue
+++ b/packages/frontend/src/components/SkNoteSub.vue
@@ -426,22 +426,22 @@ if (props.detail) {
<style lang="scss" module>
.root {
padding: 28px 32px;
- font-size: 0.9em;
position: relative;
+ --reply-indent: calc(.5 * var(--avatar));
+
&.children {
padding: 10px 0 0 16px;
- font-size: 1em;
}
}
.line {
position: absolute;
- height: calc(100% - 58px); // 58px of avatar height (see SkNote)
- left: 60px;
+ left: calc(32px + .5 * var(--avatar));
// using solid instead of dotted, stylelistic choice
- border-left: 2.5px solid rgb(174, 174, 174);
- top: 86px; // 28px of .root padding, plus 58px of avatar height (see SkNote)
+ border-left: var(--thread-width) solid var(--thread);
+ top: calc(28px + var(--avatar)); // 28px of .root padding, plus 58px of avatar height (see SkNote)
+ bottom: -28px;
}
.footer {
@@ -471,8 +471,8 @@ if (props.detail) {
flex-shrink: 0;
display: block;
margin: 0 14px 0 0;
- width: 58px;
- height: 58px;
+ width: var(--avatar);
+ height: var(--avatar);
border-radius: var(--radius-sm);
}
@@ -521,15 +521,11 @@ if (props.detail) {
@container (max-width: 580px) {
.root {
padding: 28px 26px 0;
+ --avatar: 46px;
}
.line {
- left: 50.5px;
- }
-
- .avatar {
- width: 50px;
- height: 50px;
+ left: calc(26px + .5 * var(--avatar));
}
}
@@ -537,6 +533,11 @@ if (props.detail) {
.root {
padding: 23px 25px;
}
+
+ .line {
+ top: calc(23px + var(--avatar));
+ left: calc(25px + .5 * var(--avatar));
+ }
}
@container (max-width: 400px) {
@@ -586,16 +587,16 @@ if (props.detail) {
padding: 10px 0 0 8px;
}
}
+
+ .line {
+ top: calc(22px + var(--avatar));
+ left: calc(24px + .5 * var(--avatar));
+ }
}
@container (max-width: 450px) {
- .line {
- left: 46px;
- }
-
- .avatar {
- width: 46px;
- height: 46px;
+ .root {
+ --avatar: 44px;
}
}
@@ -616,19 +617,19 @@ if (props.detail) {
.threadLine {
width: 0;
flex-grow: 1;
- border-left: 2.5px solid rgb(174, 174, 174);
- margin-left: 29px;
+ border-left: var(--thread-width) solid var(--thread);
+ margin-left: var(--reply-indent);
}
.reply {
- margin-left: 29px;
+ margin-left: var(--reply-indent);
}
.reply:not(:last-child) {
- border-left: 2.5px solid rgb(174, 174, 174);
+ border-left: var(--thread-width) solid var(--thread);
&::before {
- left: -2px;
+ left: calc(-1 * var(--thread-width));
}
}
@@ -637,10 +638,10 @@ if (props.detail) {
content: '';
left: 0px;
top: -10px;
- height: 49px;
+ height: calc(10px + 10px + .5 * var(--avatar));
width: 15px;
- border-left: 2.5px solid rgb(174, 174, 174);
- border-bottom: 2.5px solid rgb(174, 174, 174);
+ border-left: var(--thread-width) solid var(--thread);
+ border-bottom: var(--thread-width) solid var(--thread);
border-bottom-left-radius: 15px;
}
@@ -649,7 +650,7 @@ if (props.detail) {
padding-left: 0 !important;
&::before {
- left: 29px;
+ left: var(--reply-indent);
width: 0;
border-bottom: unset;
}
diff --git a/packages/frontend/src/components/SkOldNoteWindow.vue b/packages/frontend/src/components/SkOldNoteWindow.vue
index f8de28e346..5ea3f03965 100644
--- a/packages/frontend/src/components/SkOldNoteWindow.vue
+++ b/packages/frontend/src/components/SkOldNoteWindow.vue
@@ -177,8 +177,8 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
.noteHeaderAvatar {
display: block;
flex-shrink: 0;
- width: 58px;
- height: 58px;
+ width: var(--avatar);
+ height: var(--avatar);
}
.noteHeaderBody {
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index fd2716bf9d..d8d0754ca3 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -37,6 +37,9 @@
--margin: var(--marginHalf);
}
+ --avatar: 48px;
+ --thread-width: 2px;
+
//--ad: rgb(255 169 0 / 10%);
}
diff --git a/packages/frontend/src/themes/_dark.json5 b/packages/frontend/src/themes/_dark.json5
index 3f5822977a..8544572718 100644
--- a/packages/frontend/src/themes/_dark.json5
+++ b/packages/frontend/src/themes/_dark.json5
@@ -30,6 +30,7 @@
panelHeaderFg: '@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
panelBorder: '" solid 1px var(--divider)',
+ thread: ':lighten<12<@panel',
acrylicPanel: ':alpha<0.5<@panel',
windowHeader: ':alpha<0.85<@panel',
popup: ':lighten<3<@panel',
diff --git a/packages/frontend/src/themes/_light.json5 b/packages/frontend/src/themes/_light.json5
index 6ebfcaafeb..2f3783310f 100644
--- a/packages/frontend/src/themes/_light.json5
+++ b/packages/frontend/src/themes/_light.json5
@@ -30,6 +30,7 @@
panelHeaderFg: '@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
panelBorder: '" solid 1px var(--divider)',
+ thread: ':darken<12<@panel',
acrylicPanel: ':alpha<0.5<@panel',
windowHeader: ':alpha<0.85<@panel',
popup: ':lighten<3<@panel',
From 0e6d0c4f9507433feeb87c9218ea7927a3a2d67e Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Mon, 1 Jan 2024 17:54:47 +0100
Subject: [PATCH 2/2] Update changelog
---
CHANGELOG.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 30e2e57b7d..15845124b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,7 @@
-
### Client
--
+- Enhance: Adjusted styling to be closer to Firefish
### Server
-