From f92f474088696f4379650f6a03688b44eb934632 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 1 Jan 2024 17:44:13 +0100 Subject: [PATCH] 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
{{ i18n.ts.loadReplies }}
- +
@@ -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('mock', false); .root { display: flex; cursor: auto; /* not clickToOpen-able */ + min-height: 100%; + align-items: center; } .classicRoot { @@ -135,6 +137,7 @@ const mock = inject('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('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('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) {