From ace1f5067c90be2fa0b8da22d39b0e2c88f590fb Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Sat, 7 Aug 2021 10:28:45 -0400 Subject: Make status display controlled --- src/components/status_content/status_content.js | 59 ++++++++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) (limited to 'src/components/status_content') diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js index dec8914a..65ec85c4 100644 --- a/src/components/status_content/status_content.js +++ b/src/components/status_content/status_content.js @@ -23,6 +23,31 @@ library.add( faPollH ) +const camelCase = name => name.charAt(0).toUpperCase() + name.slice(1) + +const controlledOrUncontrolledGetters = list => list.reduce((res, name) => { + const camelized = camelCase(name) + const toggle = `controlledToggle${camelized}` + const controlledName = `controlled${camelized}` + const uncontrolledName = `uncontrolled${camelized}` + res[name] = function () { + return this[toggle] ? this[controlledName] : this[uncontrolledName] + } + return res +}, {}) + +const controlledOrUncontrolledToggle = (obj, name) => { + const camelized = camelCase(name) + const toggle = `controlledToggle${camelized}` + const controlledName = `controlled${camelized}` + const uncontrolledName = `uncontrolled${camelized}` + if (obj[toggle]) { + obj[toggle]() + } else { + obj[uncontrolledName] = !obj[uncontrolledName] + } +} + const StatusContent = { name: 'StatusContent', props: [ @@ -31,9 +56,22 @@ const StatusContent = { 'focused', 'noHeading', 'fullContent', - 'singleLine' + 'singleLine', + 'controlledShowingTall', + 'controlledExpandingSubject', + 'controlledToggleShowingTall', + 'controlledToggleExpandingSubject' ], + data () { + return { + uncontrolledShowingTall: this.fullContent || (this.inConversation && this.focused), + uncontrolledShowingLongSubject: false, + // not as computed because it sets the initial state which will be changed later + uncontrolledExpandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject + } + }, computed: { + ...controlledOrUncontrolledGetters(['showingTall', 'expandingSubject', 'showingLongSubject']), hideAttachments () { return (this.mergedConfig.hideAttachments && !this.inConversation) || (this.mergedConfig.hideAttachmentsInConv && this.inConversation) @@ -71,6 +109,25 @@ const StatusContent = { Gallery, LinkPreview, StatusBody + }, + methods: { + toggleShowingTall () { + controlledOrUncontrolledToggle(this, 'showingTall') + }, + toggleExpandingSubject () { + controlledOrUncontrolledToggle(this, 'expandingSubject') + }, + toggleShowMore () { + if (this.mightHideBecauseTall) { + this.toggleShowingTall() + } else if (this.mightHideBecauseSubject) { + this.toggleExpandingSubject() + } + }, + setMedia () { + const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments + return () => this.$store.dispatch('setMedia', attachments) + } } } -- cgit v1.2.3-70-g09d2 From 0aaef50ee5decd5c735e08c8193c6fb8caf2d2e2 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Sat, 7 Aug 2021 18:59:48 -0400 Subject: Lint --- src/components/conversation/conversation.js | 12 +++++++----- src/components/status_content/status_content.js | 1 - 2 files changed, 7 insertions(+), 6 deletions(-) (limited to 'src/components/status_content') diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index a1991888..95525dc1 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -146,7 +146,7 @@ const conversation = { return a }, { - forest: {}, + forest: {} }) debug('threads = ', threads) @@ -217,7 +217,7 @@ const conversation = { topLevel () { const topLevel = this.conversation.reduce((tl, cur) => tl.filter(k => this.getReplies(cur.id).map(v => v.id).indexOf(k.id) === -1), this.conversation) - debug("toplevel =", topLevel) + debug('toplevel =', topLevel) return topLevel }, showingTopLevel () { @@ -282,7 +282,6 @@ const conversation = { statusContentProperties () { return this.conversation.reduce((a, k) => { const id = k.id - const depth = this.depths[id] const props = (() => { if (this.statusContentPropertiesObject[id]) { return this.statusContentPropertiesObject[id] @@ -290,7 +289,7 @@ const conversation = { return { showingTall: false, expandingSubject: false, - showingLongSubject: false, + showingLongSubject: false } })() @@ -448,7 +447,7 @@ const conversation = { cur = this.parentOf(cur) } // nothing found, fall back to toplevel - return topLevel[0].id + return this.topLevel[0] ? this.topLevel[0].id : undefined }, diveIntoStatus (id, preventScroll) { this.diveHistory = [...this.diveHistory, id] @@ -473,6 +472,9 @@ const conversation = { } }, tryScrollTo (id) { + if (!id) { + return + } if (this.isPage) { // set statusId this.$router.push({ name: 'conversation', params: { id } }) diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js index 65ec85c4..527a4cf5 100644 --- a/src/components/status_content/status_content.js +++ b/src/components/status_content/status_content.js @@ -39,7 +39,6 @@ const controlledOrUncontrolledGetters = list => list.reduce((res, name) => { const controlledOrUncontrolledToggle = (obj, name) => { const camelized = camelCase(name) const toggle = `controlledToggle${camelized}` - const controlledName = `controlled${camelized}` const uncontrolledName = `uncontrolled${camelized}` if (obj[toggle]) { obj[toggle]() -- cgit v1.2.3-70-g09d2 From 0db5a5a581aa6560637dd85886dfd9d7934f40fa Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Thu, 9 Sep 2021 00:03:10 -0400 Subject: Fix controlled status display toggles --- src/components/status_body/status_body.js | 16 +++++++++------- src/components/status_content/status_content.js | 8 ++------ src/components/status_content/status_content.vue | 6 ++++++ 3 files changed, 17 insertions(+), 13 deletions(-) (limited to 'src/components/status_content') diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js index 91c33135..b8f6f9a0 100644 --- a/src/components/status_body/status_body.js +++ b/src/components/status_body/status_body.js @@ -26,14 +26,16 @@ const StatusContent = { 'focused', 'noHeading', 'fullContent', - 'singleLine' + 'singleLine', + 'showingTall', + 'expandingSubject', + 'showingLongSubject', + 'toggleShowingTall', + 'toggleExpandingSubject', + 'toggleShowingLongSubject' ], data () { return { - showingTall: this.fullContent || (this.inConversation && this.focused), - showingLongSubject: false, - // not as computed because it sets the initial state which will be changed later - expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject, postLength: this.status.text.length, parseReadyDone: false } @@ -115,9 +117,9 @@ const StatusContent = { }, toggleShowMore () { if (this.mightHideBecauseTall) { - this.showingTall = !this.showingTall + this.toggleShowingTall() } else if (this.mightHideBecauseSubject) { - this.expandingSubject = !this.expandingSubject + this.toggleExpandingSubject() } }, generateTagLink (tag) { diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js index 527a4cf5..cf72ccb8 100644 --- a/src/components/status_content/status_content.js +++ b/src/components/status_content/status_content.js @@ -116,12 +116,8 @@ const StatusContent = { toggleExpandingSubject () { controlledOrUncontrolledToggle(this, 'expandingSubject') }, - toggleShowMore () { - if (this.mightHideBecauseTall) { - this.toggleShowingTall() - } else if (this.mightHideBecauseSubject) { - this.toggleExpandingSubject() - } + toggleShowingLongSubject () { + controlledOrUncontrolledToggle(this, 'showingLongSubject') }, setMedia () { const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index 69635aad..0a09cda4 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -8,6 +8,12 @@ :status="status" :compact="compact" :single-line="singleLine" + :showing-tall="showingTall" + :expanding-subject="expandingSubject" + :showing-long-subject="showingLongSubject" + :toggle-showing-tall="toggleShowingTall" + :toggle-expanding-subject="toggleExpandingSubject" + :toggle-showing-long-subject="toggleShowingLongSubject" @parseReady="$emit('parseReady', $event)" >
-- cgit v1.2.3-70-g09d2 From a511250b63b337f4f541a77e57cf6fb7ecbd5d1a Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Mon, 7 Mar 2022 19:28:38 -0500 Subject: Make $status-margin fallback only --- src/components/conversation/conversation.vue | 8 ++++---- src/components/status/status.scss | 18 +++++++++--------- src/components/status_content/status_content.vue | 4 ---- src/components/thread_tree/thread_tree.vue | 4 ++-- 4 files changed, 15 insertions(+), 19 deletions(-) (limited to 'src/components/status_content') diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 20dea4f9..7628ceaa 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -194,7 +194,7 @@ .Conversation { .conversation-dive-to-top-level-box { - padding: $status-margin; + padding: var(--status-margin, $status-margin); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border, $fallback--border); @@ -206,7 +206,7 @@ } .thread-ancestors { - margin-left: $status-margin; + margin-left: var(--status-margin, $status-margin); border-left: 2px solid var(--border, $fallback--border); } @@ -216,7 +216,7 @@ color: var(--text); } .thread-ancestor-dive-box { - padding-left: $status-margin; + padding-left: var(--status-margin, $status-margin); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border, $fallback--border); @@ -229,7 +229,7 @@ } } .thread-ancestor-dive-box-inner { - padding: $status-margin; + padding: var(--status-margin, $status-margin); } .conversation-status { diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 80bc392d..3f647b25 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -27,7 +27,7 @@ } .gravestone { - padding: $status-margin; + padding: var(--status-margin, $status-margin); color: $fallback--faint; color: var(--faint, $fallback--faint); display: flex; @@ -40,7 +40,7 @@ .status-container { display: flex; - padding: $status-margin; + padding: var(--status-margin, $status-margin); &.-repeat { padding-top: 0; @@ -48,7 +48,7 @@ } .pin { - padding: $status-margin $status-margin 0; + padding: var(--status-margin, $status-margin) var(--status-margin, $status-margin) 0; display: flex; align-items: center; justify-content: flex-end; @@ -64,7 +64,7 @@ } .left-side { - margin-right: $status-margin; + margin-right: var(--status-margin, $status-margin); } .right-side { @@ -73,7 +73,7 @@ } .usercard { - margin-bottom: $status-margin; + margin-bottom: var(--status-margin, $status-margin); } .status-username { @@ -239,7 +239,7 @@ } .repeat-info { - padding: 0.4em $status-margin; + padding: 0.4em var(--status-margin, $status-margin); .repeat-icon { color: $fallback--cGreen; @@ -285,7 +285,7 @@ position: relative; width: 100%; display: flex; - margin-top: $status-margin; + margin-top: var(--status-margin, $status-margin); > * { max-width: 4em; @@ -353,7 +353,7 @@ } .favs-repeated-users { - margin-top: $status-margin; + margin-top: var(--status-margin, $status-margin); } .stats { @@ -380,7 +380,7 @@ } .stat-count { - margin-right: $status-margin; + margin-right: var(--status-margin, $status-margin); user-select: none; .stat-title { diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index 0a09cda4..9e7d7956 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -58,10 +58,6 @@