From 4d112b70fd0cc360b97e3a7c53c94a4045cef635 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 13 Aug 2018 14:46:28 +0300 Subject: fixed custom emoji in nickname. changed icons on right side to be more streamlined. adjusted CSS so that all text in header of post is on same baseline and all icons/images are middle-aligned. --- src/components/status/status.vue | 50 ++++++++++++++++++++++++++++++---------- 1 file changed, 38 insertions(+), 12 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index e2fb5d36..1e31aa2b 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -11,8 +11,8 @@
- - {{retweeter}} + + {{retweeter}} {{$t('timeline.repeated')}}
@@ -57,8 +57,10 @@ - - +
+ +
+ @@ -141,6 +143,7 @@ margin-top: 0.25em; margin-left: 0.5em; z-index: 50; + .status { flex: 1; border: 0; @@ -155,6 +158,7 @@ text-align: center; border-width: 1px; border-style: solid; + i { font-size: 2em; } @@ -196,6 +200,7 @@ .media-heading { flex-wrap: nowrap; + line-height: 16px; } .media-heading-left { @@ -218,12 +223,20 @@ flex: 1 0; display: flex; flex-wrap: wrap; - align-content: center; + align-items: baseline; + + .user-name { + margin-right: 0.2em; + img { + width: 14px; + height: 14px; + vertical-align: middle + } + } } + .links { display: flex; - padding-top: 1px; - margin-left: 0.2em; font-size: 12px; color: $fallback--link; color: var(--link, $fallback--link); @@ -247,17 +260,18 @@ } .media-heading-right { + display: inline-flex; flex-shrink: 0; - display: flex; flex-wrap: nowrap; - max-height: 1.5em; - margin-left: 0.25em; + margin-left: .25em; + .timeago { margin-right: 0.2em; font-size: 12px; - padding-top: 1px; + align-self: last baseline; } - i { + + > * { margin-left: 0.2em; } } @@ -318,6 +332,7 @@ .retweet-info { padding: 0.4em 0.6em 0 0.6em; margin: 0; + .avatar { border-radius: $fallback--avatarAltRadius; border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); @@ -333,9 +348,20 @@ display: flex; align-content: center; flex-wrap: wrap; + + .user-name { + font-weight: bold; + img { + width: 14px; + height: 14px; + vertical-align: middle; + } + } + i { padding: 0 0.2em; } + a { max-width: 100%; overflow: hidden; -- cgit v1.2.3-70-g09d2 From d417cb35bbd2a7603c5c655aa76d3df13a6f92ae Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 13 Aug 2018 15:36:10 +0300 Subject: fix potential stretched spurdo --- src/components/status/status.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 1e31aa2b..4b168db0 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -227,10 +227,12 @@ .user-name { margin-right: 0.2em; + img { width: 14px; height: 14px; - vertical-align: middle + vertical-align: middle; + object-fit: contain } } } @@ -351,10 +353,12 @@ .user-name { font-weight: bold; + img { width: 14px; height: 14px; vertical-align: middle; + object-fit: contain } } -- cgit v1.2.3-70-g09d2 From d94b77b8636aa04d76b6075f63282fa670a72b60 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 15 Aug 2018 13:02:39 +0300 Subject: fix for timeago being ass when post has replies. added hover colors for clickable icons on the right side. Reverted line-height to its original value --- src/components/status/status.vue | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 4b168db0..b8993b0d 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -200,7 +200,7 @@ .media-heading { flex-wrap: nowrap; - line-height: 16px; + line-height: 18px; } .media-heading-left { @@ -226,7 +226,7 @@ align-items: baseline; .user-name { - margin-right: 0.2em; + margin-right: .45em; img { width: 14px; @@ -266,6 +266,7 @@ flex-shrink: 0; flex-wrap: nowrap; margin-left: .25em; + align-self: baseline; .timeago { margin-right: 0.2em; @@ -276,6 +277,10 @@ > * { margin-left: 0.2em; } + a:hover i { + color: $fallback--fg; + color: var(--fg, $fallback--fg); + } } a { -- cgit v1.2.3-70-g09d2 From 1121f32c48d06105c976f91545ededca05b283e8 Mon Sep 17 00:00:00 2001 From: ensra Date: Mon, 20 Aug 2018 02:59:06 +0100 Subject: Add support for configurable CW clickthrough. --- src/components/settings/settings.js | 4 +++ src/components/settings/settings.vue | 4 +++ src/components/status/status.js | 52 +++++++++++++++++++++++++++--------- src/components/status/status.vue | 10 ++++--- src/i18n/messages.js | 1 + src/modules/config.js | 1 + 6 files changed, 55 insertions(+), 17 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index 169b9080..89be1624 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -15,6 +15,7 @@ const settings = { streamingLocal: this.$store.state.config.streaming, pauseOnUnfocusedLocal: this.$store.state.config.pauseOnUnfocused, hoverPreviewLocal: this.$store.state.config.hoverPreview, + expandCWLocal: this.$store.state.config.expandCW, stopGifs: this.$store.state.config.stopGifs, loopSilentAvailable: // Firefox @@ -65,6 +66,9 @@ const settings = { value = filter(value.split('\n'), (word) => trim(word).length > 0) this.$store.dispatch('setOption', { name: 'muteWords', value }) }, + expandCWLocal (value) { + this.$store.dispatch('setOption', { name: 'expandCW', value }) + }, stopGifs (value) { this.$store.dispatch('setOption', { name: 'stopGifs', value }) } diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 6b65b14b..389b2be9 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -34,6 +34,10 @@ +
  • + + +
    • diff --git a/src/components/status/status.js b/src/components/status/status.js index a2d6f41f..4321803e 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -22,15 +22,18 @@ const Status = { 'noHeading', 'inlineExpanded' ], - data: () => ({ - replying: false, - expanded: false, - unmuted: false, - userExpanded: false, - preview: null, - showPreview: false, - showingTall: false - }), + data () { + return { + replying: false, + expanded: false, + unmuted: false, + userExpanded: false, + preview: null, + showPreview: false, + showingTall: false, + expandingCW: this.$store.state.config.expandCW + } + }, computed: { muteWords () { return this.$store.state.config.muteWords @@ -98,12 +101,27 @@ const Status = { // // Using max-height + overflow: auto for status components resulted in false positives // very often with japanese characters, and it was very annoying. + tallStatus () { + const lengthScore = this.status.statusnet_html.split(/ 20 + }, + hideCWStatus () { + if (this.tallStatus && this.$store.state.config.expandCW) { + return false + } + return !this.expandingCW && this.status.summary + }, hideTallStatus () { + if (this.status.summary && !this.$store.state.config.expandCW) { + return false + } if (this.showingTall) { return false } - const lengthScore = this.status.statusnet_html.split(/ 20 + return this.tallStatus + }, + showingMore () { + return this.showingTall || (this.status.summary && this.expandingCW) }, attachmentSize () { if ((this.$store.state.config.hideAttachments && !this.inConversation) || @@ -163,8 +181,16 @@ const Status = { toggleUserExpanded () { this.userExpanded = !this.userExpanded }, - toggleShowTall () { - this.showingTall = !this.showingTall + toggleShowMore () { + if (this.showingTall) { + this.showingTall = false + } else if (this.expandingCW) { + this.expandingCW = false + } else if (this.hideTallStatus) { + this.showingTall = true + } else if (this.hideCWStatus) { + this.expandingCW = true + } }, replyEnter (id, event) { this.showPreview = true diff --git a/src/components/status/status.vue b/src/components/status/status.vue index b8993b0d..ee081671 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -76,9 +76,11 @@
    - Show more -
    - Show less + Show more +
    +
    + Show more + Show less
    @@ -310,7 +312,7 @@ } } - .tall-status-unhider { + .status-unhider, .cw-status-hider { width: 100%; text-align: center; } diff --git a/src/i18n/messages.js b/src/i18n/messages.js index 32d886fa..67ed973d 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -317,6 +317,7 @@ const en = { hide_attachments_in_tl: 'Hide attachments in timeline', hide_attachments_in_convo: 'Hide attachments in conversations', nsfw_clickthrough: 'Enable clickthrough NSFW attachment hiding', + expand_cw: 'Expand posts with subjects by default', stop_gifs: 'Play-on-hover GIFs', autoload: 'Enable automatic loading when scrolled to the bottom', streaming: 'Enable automatic streaming of new posts when scrolled to the top', diff --git a/src/modules/config.js b/src/modules/config.js index fe31ab01..eafe90ce 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -7,6 +7,7 @@ const defaultState = { hideAttachments: false, hideAttachmentsInConv: false, hideNsfw: true, + expandCW: false, loopVideo: true, loopVideoSilentOnly: true, autoLoad: true, -- cgit v1.2.3-70-g09d2 From 3ec8e43a9704b2945d58395dba997adfa2106df5 Mon Sep 17 00:00:00 2001 From: ensra Date: Mon, 20 Aug 2018 03:41:40 +0100 Subject: Rename expandCW to collapseMessageWithSubject. Add option to config.json, disabled by default. --- src/components/settings/settings.js | 6 +++--- src/components/settings/settings.vue | 8 ++++---- src/components/status/status.js | 20 ++++++++++---------- src/components/status/status.vue | 4 ++-- src/i18n/messages.js | 2 +- src/main.js | 4 +++- src/modules/config.js | 2 +- static/config.json | 3 ++- 8 files changed, 26 insertions(+), 23 deletions(-) (limited to 'src/components/status/status.vue') diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index 89be1624..c85ef59f 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -15,7 +15,7 @@ const settings = { streamingLocal: this.$store.state.config.streaming, pauseOnUnfocusedLocal: this.$store.state.config.pauseOnUnfocused, hoverPreviewLocal: this.$store.state.config.hoverPreview, - expandCWLocal: this.$store.state.config.expandCW, + collapseMessageWithSubjectLocal: this.$store.state.config.collapseMessageWithSubject, stopGifs: this.$store.state.config.stopGifs, loopSilentAvailable: // Firefox @@ -66,8 +66,8 @@ const settings = { value = filter(value.split('\n'), (word) => trim(word).length > 0) this.$store.dispatch('setOption', { name: 'muteWords', value }) }, - expandCWLocal (value) { - this.$store.dispatch('setOption', { name: 'expandCW', value }) + collapseMessageWithSubjectLocal (value) { + this.$store.dispatch('setOption', { name: 'collapseMessageWithSubject', value }) }, stopGifs (value) { this.$store.dispatch('setOption', { name: 'stopGifs', value }) diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index 389b2be9..170f5773 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -16,6 +16,10 @@

    {{$t('nav.timeline')}}

      +
    • + + +
    • @@ -34,10 +38,6 @@
      • -
    • - - -
    diff --git a/src/components/status/status.js b/src/components/status/status.js index 07aae7e8..9670f69d 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -31,7 +31,7 @@ const Status = { preview: null, showPreview: false, showingTall: false, - expandingCW: this.$store.state.config.expandCW + expandingSubject: !this.$store.state.config.collapseMessageWithSubject } }, computed: { @@ -105,14 +105,14 @@ const Status = { const lengthScore = this.status.statusnet_html.split(/ 20 }, - hideCWStatus () { - if (this.tallStatus && this.$store.state.config.expandCW) { + hideSubjectStatus () { + if (this.tallStatus && !this.$store.state.config.collapseMessageWithSubject) { return false } - return !this.expandingCW && this.status.summary + return !this.expandingSubject && this.status.summary }, hideTallStatus () { - if (this.status.summary && !this.$store.state.config.expandCW) { + if (this.status.summary && this.$store.state.config.collapseMessageWithSubject) { return false } if (this.showingTall) { @@ -121,7 +121,7 @@ const Status = { return this.tallStatus }, showingMore () { - return this.showingTall || (this.status.summary && this.expandingCW) + return this.showingTall || (this.status.summary && this.expandingSubject) }, attachmentSize () { if ((this.$store.state.config.hideAttachments && !this.inConversation) || @@ -184,12 +184,12 @@ const Status = { toggleShowMore () { if (this.showingTall) { this.showingTall = false - } else if (this.expandingCW) { - this.expandingCW = false + } else if (this.expandingSubject) { + this.expandingSubject = false } else if (this.hideTallStatus) { this.showingTall = true - } else if (this.hideCWStatus) { - this.expandingCW = true + } else if (this.hideSubjectStatus) { + this.expandingSubject = true } }, replyEnter (id, event) { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index ee081671..e7d5ed7a 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -77,9 +77,9 @@
    Show more -
    +
    - Show more + Show more Show less
    diff --git a/src/i18n/messages.js b/src/i18n/messages.js index 67ed973d..2fa0f910 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -317,7 +317,7 @@ const en = { hide_attachments_in_tl: 'Hide attachments in timeline', hide_attachments_in_convo: 'Hide attachments in conversations', nsfw_clickthrough: 'Enable clickthrough NSFW attachment hiding', - expand_cw: 'Expand posts with subjects by default', + collapse_subject: 'Collapse posts with subjects', stop_gifs: 'Play-on-hover GIFs', autoload: 'Enable automatic loading when scrolled to the bottom', streaming: 'Enable automatic streaming of new posts when scrolled to the top', diff --git a/src/main.js b/src/main.js index df271ce3..06f8a6ec 100644 --- a/src/main.js +++ b/src/main.js @@ -45,6 +45,7 @@ Vue.use(VueChatScroll) const persistedStateOptions = { paths: [ + 'config.collapseMessageWithSubject', 'config.hideAttachments', 'config.hideAttachmentsInConv', 'config.hideNsfw', @@ -95,7 +96,7 @@ window.fetch('/api/statusnet/config.json') window.fetch('/static/config.json') .then((res) => res.json()) .then((data) => { - const {theme, background, logo, showWhoToFollowPanel, whoToFollowProvider, whoToFollowLink, showInstanceSpecificPanel, scopeOptionsEnabled} = data + const {theme, background, logo, showWhoToFollowPanel, whoToFollowProvider, whoToFollowLink, showInstanceSpecificPanel, scopeOptionsEnabled, collapseMessageWithSubject} = data store.dispatch('setOption', { name: 'theme', value: theme }) store.dispatch('setOption', { name: 'background', value: background }) store.dispatch('setOption', { name: 'logo', value: logo }) @@ -104,6 +105,7 @@ window.fetch('/static/config.json') store.dispatch('setOption', { name: 'whoToFollowLink', value: whoToFollowLink }) store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel }) store.dispatch('setOption', { name: 'scopeOptionsEnabled', value: scopeOptionsEnabled }) + store.dispatch('setOption', { name: 'collapseMessageWithSubject', value: collapseMessageWithSubject }) if (data['chatDisabled']) { store.dispatch('disableChat') } diff --git a/src/modules/config.js b/src/modules/config.js index eafe90ce..60210a95 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -4,10 +4,10 @@ import StyleSetter from '../services/style_setter/style_setter.js' const defaultState = { name: 'Pleroma FE', colors: {}, + collapseMessageWithSubject: false, hideAttachments: false, hideAttachmentsInConv: false, hideNsfw: true, - expandCW: false, loopVideo: true, loopVideoSilentOnly: true, autoLoad: true, diff --git a/static/config.json b/static/config.json index 4dacfebe..62b85aae 100644 --- a/static/config.json +++ b/static/config.json @@ -11,5 +11,6 @@ "whoToFollowLink": "https://vinayaka.distsn.org/?{{host}}+{{user}}", "whoToFollowLinkDummy2": "https://followlink.osa-p.net/recommend.html", "showInstanceSpecificPanel": false, - "scopeOptionsEnabled": false + "scopeOptionsEnabled": false, + "collapseMessageWithSubject": false } -- cgit v1.2.3-70-g09d2