From 8b36342f09eb6305aa9bcb42b5878a6fae1e2ec5 Mon Sep 17 00:00:00 2001 From: Freeplay Date: Wed, 4 Jan 2023 23:08:48 -0500 Subject: [PATCH 01/32] grid from note component BE GONE --- packages/client/src/components/MkNote.vue | 42 +------ .../client/src/components/MkNoteHeader.vue | 112 ++++++++++-------- 2 files changed, 71 insertions(+), 83 deletions(-) diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue index 8fdefcbfa..5b87ebdac 100644 --- a/packages/client/src/components/MkNote.vue +++ b/packages/client/src/components/MkNote.vue @@ -32,10 +32,9 @@
- +
-

@@ -426,9 +425,6 @@ function readPromo() { > .article { padding: 28px 32px 18px; cursor: pointer; - display: grid; - align-items: center; - grid-template-columns: 58px; @media (pointer: coarse) { cursor: default; @@ -438,7 +434,6 @@ function readPromo() { flex-shrink: 0; display: block; margin: 0 14px 8px 0; - grid-row: 1 / span 2; width: 48px; height: 48px; position: relative; @@ -449,38 +444,9 @@ function readPromo() { > .main { flex: 1; min-width: 0; - display: contents; - - > header.header { - display: contents; - - > .name, .info { - grid-row: 1; - } - } - - > :not(.ticker) { - grid-column: 1 / span 3; - width: 100%; - max-width: 100%; - } - - > .name, .info { - grid-row: 1; - } - - > .ticker { - grid-row: 2; - align-self: flex-start; - margin-left: auto; - } - - > .ticker { - font-size: 0.9em; - } > .body { - margin-top: .2em; + margin-top: .7em; overflow: hidden; margin-inline: -100px; padding-inline: 100px; @@ -569,6 +535,10 @@ function readPromo() { } } + > .files { + margin-top: .7em; + margin-bottom: .4em; + } > .url-preview { margin-top: 8px; } diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue index 7be4b0042..2cbed86b7 100644 --- a/packages/client/src/components/MkNoteHeader.vue +++ b/packages/client/src/components/MkNoteHeader.vue @@ -1,16 +1,24 @@ @@ -31,53 +39,63 @@ defineProps<{ From 96c9706f4ee66f301e07fec7637f914ee8811639 Mon Sep 17 00:00:00 2001 From: Freeplay Date: Wed, 4 Jan 2023 23:12:19 -0500 Subject: [PATCH 02/32] left a comment in there oops --- packages/client/src/components/MkNote.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue index 5b87ebdac..bfe9a5d42 100644 --- a/packages/client/src/components/MkNote.vue +++ b/packages/client/src/components/MkNote.vue @@ -32,7 +32,6 @@

-
From 32a31d23b5fbd8634af4b59f04e8d99a42c3914c Mon Sep 17 00:00:00 2001 From: Freeplay Date: Wed, 4 Jan 2023 23:37:22 -0500 Subject: [PATCH 03/32] More tweaks + fix instance ticker weeeeeeeeeeeeeee --- packages/client/src/components/MkNoteHeader.vue | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue index 2cbed86b7..9e6ee7edf 100644 --- a/packages/client/src/components/MkNoteHeader.vue +++ b/packages/client/src/components/MkNoteHeader.vue @@ -26,10 +26,15 @@ @@ -37,7 +37,7 @@ const bg = { align-items: center; height: 1.1em; justify-self: flex-end; - padding: .1em .4em; + padding: .2em .4em; border-radius: 100px; font-size: .8em; text-shadow: 0 2px 2px var(--shadow); diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue index 23312f30b..ff0ad04b6 100644 --- a/packages/client/src/components/MkNote.vue +++ b/packages/client/src/components/MkNote.vue @@ -363,13 +363,14 @@ function readPromo() { padding: 0 32px 0 32px; display: flex; &:first-child { - margin-top: 10px; + margin-top: 15px; } > :not(.line) { width: 0; flex-grow: 1; position: relative; - margin-bottom: -15px; + margin-bottom: -10px; + line-height: 28px; } > .line { width: var(--avatar-size); @@ -386,7 +387,6 @@ function readPromo() { > .info { display: flex; align-items: center; - line-height: 24px; font-size: 90%; white-space: pre; color: #f6c177; @@ -405,7 +405,6 @@ function readPromo() { > .renote { display: flex; align-items: center; - line-height: 28px; white-space: pre; color: var(--renote); @@ -428,6 +427,7 @@ function readPromo() { > .info { margin-left: auto; font-size: 0.9em; + display: flex; > .time { flex-shrink: 0; @@ -438,6 +438,10 @@ function readPromo() { margin-right: 4px; } } + > span { + display: flex; + align-items: center; + } } } @@ -448,7 +452,7 @@ function readPromo() { } > .article { - padding: 28px 32px 18px; + padding: 28px 32px 10px; cursor: pointer; @media (pointer: coarse) { diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue index dd1f11eca..a5cf65709 100644 --- a/packages/client/src/components/MkNoteHeader.vue +++ b/packages/client/src/components/MkNoteHeader.vue @@ -76,9 +76,6 @@ defineProps<{ display: flex; flex-direction: column; align-items: flex-start; - .username { - font-size: .9em; - } &:last-child { align-items: flex-end; } @@ -118,6 +115,7 @@ defineProps<{ overflow: hidden; text-overflow: ellipsis; align-self: flex-start; + font-size: .9em; } .info { From 8d55a6536e05cb48c912bb6bd5aa01a6af01fb58 Mon Sep 17 00:00:00 2001 From: Freeplay Date: Sat, 7 Jan 2023 01:47:56 -0500 Subject: [PATCH 09/32] remove part I forgot didn't work cuz i don't i don't know a --- packages/client/src/components/MkNote.vue | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue index ff0ad04b6..4d1048402 100644 --- a/packages/client/src/components/MkNote.vue +++ b/packages/client/src/components/MkNote.vue @@ -438,10 +438,6 @@ function readPromo() { margin-right: 4px; } } - > span { - display: flex; - align-items: center; - } } } From c9c7a0f1628bf23fc457b3d505a083fff431db78 Mon Sep 17 00:00:00 2001 From: Freeplay Date: Sat, 7 Jan 2023 15:53:51 -0500 Subject: [PATCH 10/32] Change avatar size var to camelCase, more tweaks --- packages/client/src/components/MkMediaList.vue | 2 ++ packages/client/src/components/MkNote.vue | 13 ++++++------- packages/client/src/components/MkNoteDetailed.vue | 4 ++-- packages/client/src/components/MkNoteSub.vue | 6 +++--- packages/client/src/components/MkSubNoteContent.vue | 2 +- packages/client/src/style.scss | 2 +- 6 files changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/client/src/components/MkMediaList.vue b/packages/client/src/components/MkMediaList.vue index 2c7682f12..b721fe2e8 100644 --- a/packages/client/src/components/MkMediaList.vue +++ b/packages/client/src/components/MkMediaList.vue @@ -143,6 +143,8 @@ const previewable = (file: misskey.entities.DriveFile): boolean => { position: relative; width: 100%; margin-top: 4px; + border-radius: var(--radius); + overflow: hidden; &:before { content: ''; diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue index 4d1048402..f7fa63362 100644 --- a/packages/client/src/components/MkNote.vue +++ b/packages/client/src/components/MkNote.vue @@ -373,7 +373,7 @@ function readPromo() { line-height: 28px; } > .line { - width: var(--avatar-size); + width: var(--avatarSize); display: flex; margin-right: 14px; margin-top: 0; @@ -448,7 +448,7 @@ function readPromo() { } > .article { - padding: 28px 32px 10px; + padding: 28px 32px 16px; cursor: pointer; @media (pointer: coarse) { @@ -461,8 +461,8 @@ function readPromo() { flex-shrink: 0; display: block; margin: 0 14px 0 0; - width: var(--avatar-size); - height: var(--avatar-size); + width: var(--avatarSize); + height: var(--avatarSize); position: relative; top: 0; left: 0; @@ -627,11 +627,10 @@ function readPromo() { &.max-width_500px { font-size: 0.9em; - // --avatar-size: 50px; } &.max-width_450px { - --avatar-size: 46px; + --avatarSize: 46px; > .note-context { padding-inline: 16px; margin-top: 0; @@ -664,7 +663,7 @@ function readPromo() { } &.max-width_300px { - --avatar-size: 40px; + --avatarSize: 40px; > .article { > .main { diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue index 020e37303..c61847afa 100644 --- a/packages/client/src/components/MkNoteDetailed.vue +++ b/packages/client/src/components/MkNoteDetailed.vue @@ -414,8 +414,8 @@ if (appearNote.replyId) { > .avatar { display: block; flex-shrink: 0; - width: var(--avatar-size); - height: var(--avatar-size); + width: var(--avatarSize); + height: var(--avatarSize); } > .body { diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue index bde41e13c..d8bae4e23 100644 --- a/packages/client/src/components/MkNoteSub.vue +++ b/packages/client/src/components/MkNoteSub.vue @@ -148,10 +148,10 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item flex-direction: column; align-items: center; margin-right: 14px; - width: var(--avatar-size); + width: var(--avatarSize); > .avatar { - width: var(--avatar-size); - height: var(--avatar-size); + width: var(--avatarSize); + height: var(--avatarSize); margin: 0; } > .line { diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue index 8b40bca7f..b7978e2d7 100644 --- a/packages/client/src/components/MkSubNoteContent.vue +++ b/packages/client/src/components/MkSubNoteContent.vue @@ -2,7 +2,7 @@
({{ i18n.ts.deleted }}) - + RN: ...
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss index 9a66999bb..ca8bd8b43 100644 --- a/packages/client/src/style.scss +++ b/packages/client/src/style.scss @@ -4,7 +4,7 @@ --radius: 12px; --marginFull: 16px; --marginHalf: 10px; - --avatar-size: 48px; + --avatarSize: 48px; --margin: var(--marginFull); From a0b0faa05437f1764519b0c1fbae9318d145b450 Mon Sep 17 00:00:00 2001 From: Freeplay Date: Sat, 7 Jan 2023 17:50:05 -0500 Subject: [PATCH 11/32] Change instance ticker bg opacity --- packages/client/src/components/MkInstanceTicker.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue index 399ea2776..4d5cdb8c6 100644 --- a/packages/client/src/components/MkInstanceTicker.vue +++ b/packages/client/src/components/MkInstanceTicker.vue @@ -27,7 +27,7 @@ const instance = props.instance ?? { const themeColor = instance.themeColor ?? '#777777'; const bg = { - background: `linear-gradient(90deg, ${themeColor}, ${themeColor}99)`, + background: `linear-gradient(90deg, ${themeColor}, ${themeColor}55)`, }; From ed5c4af66dbae7ce12435d4eeeea9c4d66b64aa9 Mon Sep 17 00:00:00 2001 From: Freeplay Date: Sat, 7 Jan 2023 18:32:45 -0500 Subject: [PATCH 12/32] add -webkit-mask to line --- packages/client/src/components/MkNoteSub.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue index d8bae4e23..5ba2909ba 100644 --- a/packages/client/src/components/MkNoteSub.vue +++ b/packages/client/src/components/MkNoteSub.vue @@ -137,8 +137,8 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item opacity: .8; } > .avatar-container .line { - // background: linear-gradient(var(--accentedBg),var(--accentDarken)); mask: linear-gradient(rgba(0,0,0,0.8), black); + -webkit-mask: linear-gradient(rgba(0,0,0,0.8), black); } } } From a3f3e69c1c5c931087f10e5e79968910736dd82c Mon Sep 17 00:00:00 2001 From: Freeplay Date: Sun, 8 Jan 2023 01:23:02 -0500 Subject: [PATCH 13/32] Link preview: Replace shadow border with an actual border Wonder why they did that in the first place, doesn't work well in some zoom levels. --- packages/client/src/components/MkUrlPreview.vue | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue index 32f6e4494..ef65cb796 100644 --- a/packages/client/src/components/MkUrlPreview.vue +++ b/packages/client/src/components/MkUrlPreview.vue @@ -210,14 +210,12 @@ onUnmounted(() => { position: relative; display: block; font-size: 14px; - box-shadow: 0 0 0 1px var(--divider); + border: 1px solid var(--divider); border-radius: 8px; overflow: hidden; &:hover { text-decoration: none; - border-color: rgba(0, 0, 0, 0.2); - > article > header > h1 { text-decoration: underline; } From 173962974bb26bb38369e6817c5aa5974e46d85b Mon Sep 17 00:00:00 2001 From: Freeplay Date: Sun, 8 Jan 2023 02:30:42 -0500 Subject: [PATCH 14/32] s p a c i n g fixes --- packages/client/src/components/MkNote.vue | 4 ++-- packages/client/src/components/MkNoteDetailed.vue | 12 ++++++++++++ packages/client/src/components/MkNoteSub.vue | 5 +++-- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue index f7fa63362..b6b9ea487 100644 --- a/packages/client/src/components/MkNote.vue +++ b/packages/client/src/components/MkNote.vue @@ -363,7 +363,7 @@ function readPromo() { padding: 0 32px 0 32px; display: flex; &:first-child { - margin-top: 15px; + margin-top: 20px; } > :not(.line) { width: 0; @@ -639,7 +639,7 @@ function readPromo() { } } > .article { - padding: 14px 16px 9px; + padding: 16px 16px 9px; > .main > .header-container > .avatar { margin-right: 10px; diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue index c61847afa..bed09d9b5 100644 --- a/packages/client/src/components/MkNoteDetailed.vue +++ b/packages/client/src/components/MkNoteDetailed.vue @@ -345,6 +345,9 @@ if (appearNote.replyId) { > .reply-to-more { // opacity: 0.7; cursor: pointer; + &:first-child { + padding-top: 30px; + } @media (pointer: coarse) { cursor: default; @@ -419,6 +422,7 @@ if (appearNote.replyId) { } > .body { + width: 0; flex: 1; display: flex; flex-direction: column; @@ -427,8 +431,12 @@ if (appearNote.replyId) { font-size: 0.95em; > .top { + display: flex; + align-items: center; > .name { font-weight: bold; + overflow: hidden; + text-overflow: ellipsis; } > .is-bot { @@ -566,6 +574,10 @@ if (appearNote.replyId) { } &.max-width_450px { + + > .reply-to-more:first-child { + padding-top: 14px; + } > .renote { padding: 8px 16px 0 16px; } diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue index 5ba2909ba..4e608d870 100644 --- a/packages/client/src/components/MkNoteSub.vue +++ b/packages/client/src/components/MkNoteSub.vue @@ -75,10 +75,10 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item display: flex; > .avatar-container { + margin-right: 8px; > .avatar { flex-shrink: 0; display: block; - margin: 0 8px 0 0; width: 38px; height: 38px; border-radius: 8px; @@ -132,6 +132,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item } &.reply-to:first-child { + padding-top: 30px; > .main { > .avatar-container .avatar, > .body { opacity: .8; @@ -164,7 +165,7 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item } &.max-width_450px { - padding: 14px 16px; + padding: 14px 16px !important; margin-bottom: 0 !important; > .main > .avatar-container { margin-right: 10px; From 4589bc114cdb8cef119135180cfe224e76fd1291 Mon Sep 17 00:00:00 2001 From: Freeplay Date: Mon, 9 Jan 2023 11:35:48 -0500 Subject: [PATCH 15/32] FIX TICKER ISSUE --- packages/client/src/components/MkNoteHeader.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue index a5cf65709..18b9f7284 100644 --- a/packages/client/src/components/MkNoteHeader.vue +++ b/packages/client/src/components/MkNoteHeader.vue @@ -31,7 +31,7 @@ import MkInstanceTicker from '@/components/MkInstanceTicker.vue'; import { notePage } from '@/filters/note'; import { userPage } from '@/filters/user'; -const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance); +const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && note.user.instance); defineProps<{ From 1a34b8b5d10da226c3b2a01a168c21fa056495da Mon Sep 17 00:00:00 2001 From: Freeplay Date: Mon, 9 Jan 2023 14:35:24 -0500 Subject: [PATCH 16/32] Remove opacity from reply --- packages/client/src/components/MkNoteSub.vue | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue index 4e608d870..44eab8e20 100644 --- a/packages/client/src/components/MkNoteSub.vue +++ b/packages/client/src/components/MkNoteSub.vue @@ -133,15 +133,6 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item &.reply-to:first-child { padding-top: 30px; - > .main { - > .avatar-container .avatar, > .body { - opacity: .8; - } - > .avatar-container .line { - mask: linear-gradient(rgba(0,0,0,0.8), black); - -webkit-mask: linear-gradient(rgba(0,0,0,0.8), black); - } - } } &.reply-to, &.reply-to-more { .avatar-container { From 9325ec14f277fcabd1616009e61a8a9d252b73fb Mon Sep 17 00:00:00 2001 From: Freeplay Date: Mon, 9 Jan 2023 15:49:46 -0500 Subject: [PATCH 17/32] Remove RN: text from note, still displayed as "Quote: ..." in subnote --- packages/client/src/components/MkNote.vue | 1 - packages/client/src/components/MkSubNoteContent.vue | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue index b6b9ea487..7bde0f959 100644 --- a/packages/client/src/components/MkNote.vue +++ b/packages/client/src/components/MkNote.vue @@ -47,7 +47,6 @@
- RN:
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue index b7978e2d7..decca7d35 100644 --- a/packages/client/src/components/MkSubNoteContent.vue +++ b/packages/client/src/components/MkSubNoteContent.vue @@ -4,7 +4,7 @@ ({{ i18n.ts.deleted }}) - RN: ... + {{ i18n.ts.quoteAttached }}: ...
({{ i18n.t('withNFiles', { n: note.files.length }) }}) From 369c1bbc4492b4da962c851c44d6f4d8b6a651e9 Mon Sep 17 00:00:00 2001 From: Freeplay Date: Mon, 9 Jan 2023 19:55:40 -0500 Subject: [PATCH 18/32] More status buttons per few pixels (?) --- packages/client/src/components/MkNote.vue | 36 +++++------------------ 1 file changed, 7 insertions(+), 29 deletions(-) diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue index 7bde0f959..3cc89c5f8 100644 --- a/packages/client/src/components/MkNote.vue +++ b/packages/client/src/components/MkNote.vue @@ -593,14 +593,16 @@ function readPromo() { } > .footer { + display: flex; + flex-wrap: wrap; + margin-left: -.5em; > .button { margin: 0; padding: 8px; opacity: 0.7; - - &:not(:last-child) { - margin-right: 16px; - } + flex-grow: 1; + max-width: 3.5em; + min-width: max-content; &:hover { color: var(--fgHighlighted); @@ -647,34 +649,10 @@ function readPromo() { } } - &.max-width_350px { - > .article { - > .main { - > .footer { - > .button { - &:not(:last-child) { - margin-right: 18px; - } - } - } - } - } - } + &.max-width_300px { --avatarSize: 40px; - > .article { - - > .main { - > .footer { - > .button { - &:not(:last-child) { - margin-right: 12px; - } - } - } - } - } } } From 5b5c134fc75394cde973e0566698b6c4cb900298 Mon Sep 17 00:00:00 2001 From: Freeplay Date: Mon, 9 Jan 2023 21:53:39 -0500 Subject: [PATCH 19/32] Fix reactions overflow --- packages/client/src/components/MkNote.vue | 5 +++-- packages/client/src/components/MkReactionsViewer.vue | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue index 3cc89c5f8..7da7dc97b 100644 --- a/packages/client/src/components/MkNote.vue +++ b/packages/client/src/components/MkNote.vue @@ -595,7 +595,6 @@ function readPromo() { > .footer { display: flex; flex-wrap: wrap; - margin-left: -.5em; > .button { margin: 0; padding: 8px; @@ -603,7 +602,9 @@ function readPromo() { flex-grow: 1; max-width: 3.5em; min-width: max-content; - + &:first-of-type { + margin-left: -.5em; + } &:hover { color: var(--fgHighlighted); } diff --git a/packages/client/src/components/MkReactionsViewer.vue b/packages/client/src/components/MkReactionsViewer.vue index 78f005e66..21dc80e21 100644 --- a/packages/client/src/components/MkReactionsViewer.vue +++ b/packages/client/src/components/MkReactionsViewer.vue @@ -22,6 +22,7 @@ const isMe = computed(() => $i && $i.id === props.note.userId);