From 8e9f5d7580d5a248e280b110218aa23052827789 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 7 Jun 2021 19:50:26 +0300 Subject: renamed StatusText to StatusBody for clarity, fixed chats --- src/components/status_body/status_body.scss | 112 ++++++++++++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 src/components/status_body/status_body.scss (limited to 'src/components/status_body/status_body.scss') diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss new file mode 100644 index 00000000..6282919c --- /dev/null +++ b/src/components/status_body/status_body.scss @@ -0,0 +1,112 @@ +@import '../../_variables.scss'; + +.StatusBody { + .emoji { + --_still_image-label-scale: 0.5; + } + + .summary { + display: block; + font-style: italic; + padding-bottom: 0.5em; + } + + .text { + &.-single-line { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + height: 1.4em; + } + } + + .summary-wrapper { + margin-bottom: 0.5em; + border-style: solid; + border-width: 0 0 1px 0; + border-color: var(--border, $fallback--border); + flex-grow: 0; + + &.-tall { + position: relative; + + .summary { + max-height: 2em; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + } + + .text-wrapper { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + + &.-tall-status { + position: relative; + height: 220px; + overflow-x: hidden; + overflow-y: hidden; + z-index: 1; + + .text { + min-height: 0; + mask: + linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, + linear-gradient(to top, white, white); + + /* Autoprefixed seem to ignore this one, and also syntax is different */ + -webkit-mask-composite: xor; + mask-composite: exclude; + } + } + } + + & .tall-status-hider, + & .tall-subject-hider, + & .status-unhider, + & .cw-status-hider { + display: inline-block; + word-break: break-all; + width: 100%; + text-align: center; + } + + .tall-status-hider { + position: absolute; + height: 70px; + margin-top: 150px; + line-height: 110px; + z-index: 2; + } + + .tall-subject-hider { + // position: absolute; + padding-bottom: 0.5em; + } + + & .status-unhider, + & .cw-status-hider { + word-break: break-all; + + svg { + color: inherit; + } + } + + .greentext { + color: $fallback--cGreen; + color: var(--postGreentext, $fallback--cGreen); + } + + /* Not sure if this is necessary */ + video { + max-width: 100%; + max-height: 400px; + vertical-align: middle; + object-fit: contain; + } + +} -- cgit v1.2.3-70-g09d2 From 60903272366e1f236041841af3dca86628901a35 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 7 Jun 2021 20:02:09 +0300 Subject: moved some post styles into status body since they inferfere with usernames --- src/components/rich_content/rich_content.scss | 7 ------- src/components/status_body/status_body.scss | 11 +++++++++++ 2 files changed, 11 insertions(+), 7 deletions(-) (limited to 'src/components/status_body/status_body.scss') diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss index a486babf..12cb9776 100644 --- a/src/components/rich_content/rich_content.scss +++ b/src/components/rich_content/rich_content.scss @@ -1,11 +1,4 @@ .RichContent { - font-family: var(--postFont, sans-serif); - line-height: 1.4em; - white-space: pre-wrap; - overflow-wrap: break-word; - word-wrap: break-word; - word-break: break-word; - blockquote { margin: 0.2em 0 0.2em 2em; font-style: italic; diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 6282919c..b65e3b27 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -1,10 +1,21 @@ @import '../../_variables.scss'; .StatusBody { + .emoji { --_still_image-label-scale: 0.5; } + & .text, + & .summary { + font-family: var(--postFont, sans-serif); + white-space: pre-wrap; + overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-word; + line-height: 1.4em; + } + .summary { display: block; font-style: italic; -- cgit v1.2.3-70-g09d2 From 566964992a394f1d0462557f70e284f2493d82bf Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 8 Jun 2021 19:37:18 +0300 Subject: fix long posts having weird gradient --- src/components/status_body/status_body.scss | 2 +- src/components/status_body/status_body.vue | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'src/components/status_body/status_body.scss') diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index b65e3b27..10b4c186 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -62,7 +62,7 @@ overflow-y: hidden; z-index: 1; - .text { + .text-wrapper { min-height: 0; mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue index 421a3820..fae2d594 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -40,6 +40,7 @@ {{ $t("general.show_more") }} Date: Fri, 11 Jun 2021 11:49:32 +0300 Subject: fixed console errors, improved user-selecting, added cyantexting --- src/components/mention_link/mention_link.scss | 5 +++++ src/components/mention_link/mention_link.vue | 4 ++-- src/components/status_body/status_body.scss | 4 ++++ src/services/theme_data/pleromafe.js | 6 ++++++ 4 files changed, 17 insertions(+), 2 deletions(-) (limited to 'src/components/status_body/status_body.scss') diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index 1be3e7c5..5f5da98f 100644 --- a/src/components/mention_link/mention_link.scss +++ b/src/components/mention_link/mention_link.scss @@ -28,6 +28,11 @@ z-index: 1; margin-top: 0.25em; padding: 0.5em; + user-select: all; + } + + .short { + user-select: none; } & .short, diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index 062ad4bc..3449f4bd 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -23,7 +23,7 @@ > diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 10b4c186..310185ae 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -112,6 +112,10 @@ color: var(--postGreentext, $fallback--cGreen); } + .cyantext { + color: var(--postCyantext, $fallback--cBlue); + } + /* Not sure if this is necessary */ video { max-width: 100%; diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js index 14aac975..c2983be7 100644 --- a/src/services/theme_data/pleromafe.js +++ b/src/services/theme_data/pleromafe.js @@ -369,6 +369,12 @@ export const SLOT_INHERITANCE = { textColor: 'preserve' }, + postCyantext: { + depends: ['cBlue'], + layer: 'bg', + textColor: 'preserve' + }, + border: { depends: ['fg'], opacity: 'border', -- cgit v1.2.3-70-g09d2 From 647e4476f90be087dda099c588f2f8acc089c1ee Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sat, 12 Jun 2021 16:25:37 +0300 Subject: fix long post fader --- src/components/status_body/status_body.scss | 3 +-- src/components/status_body/status_body.vue | 5 ++++- 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'src/components/status_body/status_body.scss') diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 310185ae..da5d4dd3 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -62,7 +62,7 @@ overflow-y: hidden; z-index: 1; - .text-wrapper { + .rich-content-wrapper { min-height: 0; mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, @@ -123,5 +123,4 @@ vertical-align: middle; object-fit: contain; } - } diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue index 7e699a45..b84541d7 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -38,7 +38,10 @@ > {{ $t("general.show_more") }} - + Date: Sat, 12 Jun 2021 20:42:17 +0300 Subject: review + fixes --- src/components/mention_link/mention_link.vue | 2 -- src/components/mentions_line/mentions_line.scss | 1 + src/components/rich_content/rich_content.jsx | 21 ++++++++++++++++ .../settings_modal/tabs/theme_tab/theme_tab.js | 2 +- src/components/status/status.js | 6 ++--- src/components/status_body/status_body.scss | 8 ------- src/components/status_body/status_body.vue | 4 ++-- .../entity_normalizer/entity_normalizer.service.js | 6 ----- test/unit/specs/components/rich_content.spec.js | 28 ++++++++++++++++++++++ .../entity_normalizer/entity_normalizer.spec.js | 8 ------- 10 files changed, 55 insertions(+), 31 deletions(-) (limited to 'src/components/status_body/status_body.scss') diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index 3449f4bd..e4d395fa 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -41,12 +41,10 @@ class="full popover-default" :class="[highlightType]" > - - diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss index 59f75fbb..90d1e0a4 100644 --- a/src/components/mentions_line/mentions_line.scss +++ b/src/components/mentions_line/mentions_line.scss @@ -1,6 +1,7 @@ .MentionsLine { .showMoreLess { white-space: normal; + &.-newStyle { line-height: 1.5; font-size: inherit; diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx index ef15aaeb..0aae7a55 100644 --- a/src/components/rich_content/rich_content.jsx +++ b/src/components/rich_content/rich_content.jsx @@ -8,6 +8,25 @@ import MentionLink from 'src/components/mention_link/mention_link.vue' import './rich_content.scss' +/** + * RichContent, The Über-powered component for rendering Post HTML. + * + * This takes post HTML and does multiple things to it: + * - Converts mention links to -s + * - Removes mentions from beginning and end (hellthread style only) + * - Replaces emoji shortcodes with 'd images. + * + * Stuff like removing mentions from beginning and end is done so that they could + * be either replaced by collapsible or moved to separate place. + * There are two problems with this component's architecture: + * 1. Parsing HTML and rendering are inseparable. Attempts to separate the two + * proven to be a massive overcomplication due to amount of things done here. + * 2. We need to output both render and some extra data, which seems to be imp- + * possible in vue. Current solution is to emit 'parseReady' event when parsing + * is done within render() function. + * + * Apart from that one small hiccup with emit in render this _should_ be vue3-ready + */ export default Vue.component('RichContent', { name: 'RichContent', props: { @@ -241,8 +260,10 @@ export const preProcessPerLine = (html, greentext, handleLinks) => { .replace(/@\w+/gi, '') // remove mentions (even failed ones) .trim() if (cleanedString.startsWith('>')) { + nonEmptyIndex += 1 return `${string}` } else if (cleanedString.startsWith('<')) { + nonEmptyIndex += 1 return `${string}` } } diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js index 63416e93..85749045 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js @@ -474,7 +474,7 @@ export default { this.loadThemeFromLocalStorage(false, true) break case 'file': - console.error('Forcing snapshout from file is not supported yet') + console.error('Forcing snapshot from file is not supported yet') break } this.dismissWarning() diff --git a/src/components/status/status.js b/src/components/status/status.js index 5b178c2e..ae734493 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -35,8 +35,7 @@ import { faStar, faEyeSlash, faEye, - faThumbtack, - faAt + faThumbtack } from '@fortawesome/free-solid-svg-icons' library.add( @@ -53,8 +52,7 @@ library.add( faEllipsisH, faEyeSlash, faEye, - faThumbtack, - faAt + faThumbtack ) const Status = { diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index da5d4dd3..81a687f1 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -115,12 +115,4 @@ .cyantext { color: var(--postCyantext, $fallback--cBlue); } - - /* Not sure if this is necessary */ - video { - max-width: 100%; - max-height: 400px; - vertical-align: middle; - object-fit: contain; - } } diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue index aac44e42..0eb11ad0 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -2,7 +2,7 @@
@@ -39,7 +39,7 @@ {{ $t("general.show_more") }} { } output.summary_raw_html = escape(data.spoiler_text) - output.summary_html = addEmojis(escape(data.spoiler_text), data.emojis) output.external_url = data.url output.poll = data.poll if (output.poll) { @@ -449,11 +448,6 @@ export const parseChatMessage = (message) => { output.chat_id = message.chat_id output.emojis = message.emojis output.content = message.content - if (message.content) { - output.content = addEmojis(message.content, message.emojis) - } else { - output.content = '' - } if (message.attachment) { output.attachments = [parseAttachment(message.attachment)] } else { diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js index 05c0b259..f2c3f04e 100644 --- a/test/unit/specs/components/rich_content.spec.js +++ b/test/unit/specs/components/rich_content.spec.js @@ -354,4 +354,32 @@ describe('RichContent', () => { expect(wrapper.html()).to.eql(compwrap(html)) }) + + it('Greentext + last mentions', () => { + const html = [ + '>quote', + makeMention('lol'), + '>quote', + '>quote' + ].join('\n') + const expected = [ + '>quote', + stubMention('lol'), + '>quote', + '>quote' + ].join('\n') + + const wrapper = shallowMount(RichContent, { + localVue, + propsData: { + handleLinks: true, + greentext: true, + emoji: [], + html + } + }) + + expect(wrapper.html()).to.eql(compwrap(expected)) + }) + }) diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js index c8965785..8a5a6ef9 100644 --- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js +++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js @@ -231,14 +231,6 @@ describe('API Entities normalizer', () => { expect(parsedRepeat).to.have.property('retweeted_status') expect(parsedRepeat).to.have.deep.property('retweeted_status.id', 'deadbeef') }) - - it('adds emojis to subject line', () => { - const post = makeMockStatusMasto({ emojis: makeMockEmojiMasto(), spoiler_text: 'CW: 300 IQ :thinking:' }) - - const parsedPost = parseStatus(post) - - expect(parsedPost).to.have.property('summary_html').that.contains(' Date: Mon, 14 Jun 2021 10:30:08 +0300 Subject: do the impossible, fix the unfixable --- src/components/rich_content/rich_content.jsx | 16 +++- src/components/status_body/status_body.js | 12 +-- src/components/status_body/status_body.scss | 2 +- src/components/status_body/status_body.vue | 31 +++----- src/components/status_content/status_content.js | 3 - src/components/status_content/status_content.vue | 2 +- test/unit/specs/components/rich_content.spec.js | 91 +++++++++++++++++++++- .../html_converter/html_line_converter.spec.js | 2 +- 8 files changed, 118 insertions(+), 41 deletions(-) (limited to 'src/components/status_body/status_body.scss') diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx index ffb36f50..4144d895 100644 --- a/src/components/rich_content/rich_content.jsx +++ b/src/components/rich_content/rich_content.jsx @@ -5,6 +5,7 @@ import { convertHtmlToTree } from 'src/services/html_converter/html_tree_convert import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js' import StillImage from 'src/components/still-image/still-image.vue' import MentionLink from 'src/components/mention_link/mention_link.vue' +import MentionsLine from 'src/components/mentions_line/mentions_line.vue' import './rich_content.scss' @@ -51,6 +52,11 @@ export default Vue.component('RichContent', { required: false, type: Boolean, default: false + }, + hideMentions: { + required: false, + type: Boolean, + default: false } }, // NEVER EVER TOUCH DATA INSIDE RENDER @@ -64,6 +70,7 @@ export default Vue.component('RichContent', { // unique index for vue "tag" property let mentionIndex = 0 let tagsIndex = 0 + let firstMentionReplaced = false const renderImage = (tag) => { return + } else { + return '' + } } else { return 1 && lastMentions.length > 1) { break } else { - return '' + return !this.hideMentions ? : '' } } else { break diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js index 26491e1b..9ee7a109 100644 --- a/src/components/status_body/status_body.js +++ b/src/components/status_body/status_body.js @@ -1,6 +1,5 @@ import fileType from 'src/services/file_type/file_type.service' import RichContent from 'src/components/rich_content/rich_content.jsx' -import MentionsLine from 'src/components/mentions_line/mentions_line.vue' import { mapGetters } from 'vuex' import { library } from '@fortawesome/fontawesome-svg-core' import { set } from 'vue' @@ -36,9 +35,6 @@ const StatusContent = { showingLongSubject: false, // not as computed because it sets the initial state which will be changed later expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject, - headTailLinks: null, - firstMentions: [], - lastMentions: [] } }, computed: { @@ -81,8 +77,7 @@ const StatusContent = { ...mapGetters(['mergedConfig']) }, components: { - RichContent, - MentionsLine + RichContent }, mounted () { this.status.attentions && this.status.attentions.forEach(attn => { @@ -98,11 +93,6 @@ const StatusContent = { this.expandingSubject = !this.expandingSubject } }, - setHeadTailLinks (headTailLinks) { - set(this, 'headTailLinks', headTailLinks) - set(this, 'firstMentions', headTailLinks.firstMentions) - set(this, 'lastMentions', headTailLinks.lastMentions) - }, generateTagLink (tag) { return `/tag/${tag}` } diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 81a687f1..c7732bfe 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -62,7 +62,7 @@ overflow-y: hidden; z-index: 1; - .rich-content-wrapper { + .media-body { min-height: 0; mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue index 3dc4916c..2be46303 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -38,28 +38,17 @@ > {{ $t("general.show_more") }} - - - - - + :class="{ '-single-line': singleLine }" + class="text media-body" + :html="status.raw_html" + :emoji="status.emojis" + :handle-links="true" + :hide-mentions="hideMentions" + :greentext="mergedConfig.greentext" + @parseReady="$emit('parseReady', $event)" + />