From c47bfe53ffd3fdb2f0f1765e3215b65cd0b79024 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 15 Aug 2025 09:38:36 +0300 Subject: [PATCH 1/9] aria --- src/components/notification/notification.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index b4398b448..28ab1b9b8 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -12,13 +12,13 @@
From 9ed2fd3c4b97850f6a4c398111e94db24a9ff50a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 15 Aug 2025 09:41:08 +0300 Subject: [PATCH 2/9] default to 1rem instead 14px --- src/App.scss | 2 +- src/components/emoji_picker/emoji_picker.js | 2 +- src/components/status/status.scss | 4 ++-- src/modules/instance.js | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/App.scss b/src/App.scss index be6929f69..01f24d0ca 100644 --- a/src/App.scss +++ b/src/App.scss @@ -21,7 +21,7 @@ } html { - font-size: var(--textSize, 14px); + font-size: var(--textSize, 1rem); --navbar-height: var(--navbarSize, 3.5rem); --emoji-size: var(--emojiSize, 32px); diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index f9b306fb4..8e572d1d2 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -140,7 +140,7 @@ const EmojiPicker = { }, updateEmojiSize () { const css = window.getComputedStyle(this.$refs.popover.$el) - const fontSize = css.getPropertyValue('font-size') || '14px' + const fontSize = css.getPropertyValue('font-size') || '1rem' const emojiSize = css.getPropertyValue('--emojiSize') || '2.2rem' const fontSizeUnit = fontSize.replace(/[0-9,.]+/, '').trim() diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 0f325ea7f..09b37aa14 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -245,8 +245,8 @@ margin-right: 0; .emoji { - width: 14px; - height: 14px; + width: 1em; + height: 1em; vertical-align: middle; object-fit: contain; } diff --git a/src/modules/instance.js b/src/modules/instance.js index 93f81e4d8..7317debf8 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -108,7 +108,7 @@ const defaultState = { palette: null, style: null, emojiReactionsScale: 0.5, - textSize: '14px', + textSize: '1rem', emojiSize: '2.2rem', navbarSize: '3.5rem', panelHeaderSize: '3.2rem', From 028556f8ab7f88ef0d0894593a11f8b449c1812b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 15 Aug 2025 09:48:28 +0300 Subject: [PATCH 3/9] remove icons from "show more" since we show attachments anyway --- src/components/status_body/status_body.vue | 26 ---------------------- 1 file changed, 26 deletions(-) diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue index 1035d04c6..1291533c9 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -57,32 +57,6 @@ @click.prevent="toggleShowMore" > {{ toggleText }} -
From 16ada7ec6c18c7fdeb4fe1d5598a27120da560da Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 15 Aug 2025 09:49:28 +0300 Subject: [PATCH 4/9] add padding to compact status' poll icon --- src/components/status_content/status_content.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index fb08186b4..bab4f70a5 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -24,7 +24,7 @@ /> -
+
From 7b2f3b648ad0e2377ea352a900663490a7738030 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 15 Aug 2025 10:03:34 +0300 Subject: [PATCH 5/9] improve visibilty of attachment buttons --- src/App.scss | 4 ++++ src/components/button.style.js | 20 ++++++++++++++++++++ 2 files changed, 24 insertions(+) diff --git a/src/App.scss b/src/App.scss index 01f24d0ca..00a8e9547 100644 --- a/src/App.scss +++ b/src/App.scss @@ -382,6 +382,10 @@ nav { font-family: sans-serif; font-family: var(--font); + &.-transparent { + backdrop-filter: blur(0.125em) contrast(60%); + } + &::-moz-focus-inner { border: none; } diff --git a/src/components/button.style.js b/src/components/button.style.js index ecbf54d9e..c32a232f4 100644 --- a/src/components/button.style.js +++ b/src/components/button.style.js @@ -64,6 +64,26 @@ export default { opacity: 0.5 } }, + { + component: 'Text', + parent: { + component: 'Button', + variant: 'transparent' + }, + directives: { + textColor: '--text' + } + }, + { + component: 'Icon', + parent: { + component: 'Button', + variant: 'transparent' + }, + directives: { + textColor: '--text' + } + }, { state: ['hover'], directives: { From 0d6453baecbb1385b19fc159bce04c1b861cce5a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 19 Aug 2025 16:21:30 +0300 Subject: [PATCH 6/9] fix emoji reactions notifs being non-expandable --- src/components/notification/notification.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index 247b73848..8692c6190 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -138,7 +138,7 @@ const Notification = { return highlightStyle(highlight[user.screen_name]) }, expandable () { - return (new Set(['like', '-pleroma:emoji_reaction', 'repeat'])).has(this.notification.type) + return (new Set(['like', 'pleroma:emoji_reaction', 'repeat'])).has(this.notification.type) }, user () { return this.$store.getters.findUser(this.notification.from_profile.id) From 26a2232e1841a359d3f34200d38ca9c897b1f30a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 19 Aug 2025 16:21:44 +0300 Subject: [PATCH 7/9] fix incorrect collapse state --- src/components/notification/notification.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 28ab1b9b8..76ede11e2 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -255,7 +255,7 @@ class="status-content" :compact="!statusExpanded" :status="notification.status" - :collapse="statusExpanded" + :collapse="!statusExpanded" @click="toggleStatusExpanded()" /> From 8780e0191e7213b141cf36efa40365401304b06d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 19 Aug 2025 16:35:40 +0300 Subject: [PATCH 8/9] proper collapse --- src/components/rich_content/rich_content.jsx | 19 +++++++++++++++++-- src/components/status_body/status_body.vue | 3 ++- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx index 9466603cd..599985c3b 100644 --- a/src/components/rich_content/rich_content.jsx +++ b/src/components/rich_content/rich_content.jsx @@ -86,6 +86,12 @@ export default { required: false, type: Boolean, default: false + }, + // Collapse newlines + collapse: { + required: false, + type: Boolean, + default: false } }, // NEVER EVER TOUCH DATA INSIDE RENDER @@ -281,11 +287,20 @@ export default { const pass1 = convertHtmlToTree(html).map(processItem) const pass2 = [...pass1].reverse().map(processItemReverse).reverse() + // DO NOT USE SLOTS they cause a re-render feedback loop here. // slots updated -> rerender -> emit -> update up the tree -> rerender -> ... // at least until vue3? - const result = - { pass2 } + const result = + + { + this.collapse + ? pass2.map(x => { + if (!Array.isArray(x)) return x.replace(/\n/g, ' ') + return x.map(y => y.type === 'br' ? ' ' : y) + }) + : pass2 + } const event = { diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue index 1291533c9..0735e8d98 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -38,7 +38,8 @@ v-if="!hideSubjectStatus && !(singleLine && status.summary_raw_html)" :class="{ '-single-line': singleLine }" class="text media-body" - :html="collapse ? collapsedStatus : status.raw_html" + :html="status.raw_html" + :collapse="collapse" :emoji="status.emojis" :handle-links="true" :faint="compact" From bebb3fcfa62270ee0d358febe241ebde2f4d73e3 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 19 Aug 2025 17:28:19 +0300 Subject: [PATCH 9/9] better click handler --- src/components/notification/notification.js | 25 +++++++++++++++++++ src/components/notification/notification.vue | 4 ++- src/components/status_body/status_body.js | 1 + .../status_content/status_content.js | 1 + 4 files changed, 30 insertions(+), 1 deletion(-) diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index 8692c6190..3edf21de7 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -42,6 +42,7 @@ library.add( const Notification = { data () { return { + selecting: false, statusExpanded: false, unmuted: false, showingApproveConfirmDialog: false, @@ -62,11 +63,35 @@ const Notification = { UserLink, ConfirmModal }, + mounted () { + document.addEventListener('selectionchange', this.onContentSelect) + }, + unmounted () { + document.removeEventListener('selectionchange', this.onContentSelect) + }, methods: { toggleStatusExpanded () { if (!this.expandable) return this.statusExpanded = !this.statusExpanded }, + onContentSelect () { + const { isCollapsed, anchorNode, offsetNode } = document.getSelection() + if (isCollapsed) { + this.selecting = false + return + } + const within = this.$refs.root.contains(anchorNode) || this.$refs.root.contains(offsetNode) + if (within) { + this.selecting = true + } else { + this.selecting = false + } + }, + onContentClick (e) { + if (!this.selecting && !e.target.closest('a') && !e.target.closest('button')) { + this.toggleStatusExpanded() + } + }, generateUserProfileLink (user) { return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames) }, diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 76ede11e2..b639b9c88 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -1,6 +1,7 @@
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js index e89d1d173..f23055955 100644 --- a/src/components/status_body/status_body.js +++ b/src/components/status_body/status_body.js @@ -41,6 +41,7 @@ const StatusContent = { parseReadyDone: false } }, + emits: ['parseReady'], computed: { localCollapseSubjectDefault () { return this.mergedConfig.collapseMessageWithSubject diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js index f61ba0d05..364123f49 100644 --- a/src/components/status_content/status_content.js +++ b/src/components/status_content/status_content.js @@ -65,6 +65,7 @@ const StatusContent = { 'controlledShowingLongSubject', 'controlledToggleShowingLongSubject' ], + emits: ['parseReady', 'mediaplay', 'mediapause'], data () { return { uncontrolledShowingTall: this.fullContent || (this.inConversation && this.focused),