From 2f383c2c0197b94b30fdc4c5e0c742c7e104be20 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 8 Jun 2021 14:34:47 +0300 Subject: moved mentions into a separate component - MentionLine, added collapsing of mentions when there's too many of 'em --- src/components/mentions_line/mentions_line.scss | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 src/components/mentions_line/mentions_line.scss (limited to 'src/components/mentions_line/mentions_line.scss') diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss new file mode 100644 index 00000000..735502de --- /dev/null +++ b/src/components/mentions_line/mentions_line.scss @@ -0,0 +1,15 @@ +.MentionsLine { + .showMoreLess { + &.-newStyle { + line-height: 1.5; + font-size: inherit; + display: inline-block; + padding-top: 0; + padding-bottom: 0; + } + + &.-oldStyle { + color: var(--link); + } + } +} -- cgit v1.2.3-70-g09d2 From f883d2f75cd3c404115bd2c98b6d3c8d7ff10ef6 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 11 Jun 2021 03:11:58 +0300 Subject: better handling of hellthreads with mentions at bottom --- src/components/mention_link/mention_link.js | 6 - src/components/mention_link/mention_link.scss | 4 - src/components/mentions_line/mentions_line.scss | 1 + src/components/rich_content/rich_content.jsx | 198 ++++++++++++----------- src/components/status/status.js | 16 +- src/components/status/status.vue | 6 +- src/components/status_body/status_body.js | 24 ++- src/components/status_body/status_body.vue | 13 +- src/components/status_content/status_content.js | 7 +- src/components/status_content/status_content.vue | 5 +- 10 files changed, 138 insertions(+), 142 deletions(-) (limited to 'src/components/mentions_line/mentions_line.scss') diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index 00b9e388..eec116db 100644 --- a/src/components/mention_link/mention_link.js +++ b/src/components/mention_link/mention_link.js @@ -28,11 +28,6 @@ const MentionLink = { userScreenName: { required: false, type: String - }, - firstMention: { - required: false, - type: Boolean, - default: false } }, methods: { @@ -89,7 +84,6 @@ const MentionLink = { { '-you': this.isYou, '-highlighted': this.highlight, - '-firstMention': this.firstMention, '-oldStyle': this.oldStyle }, this.highlightType diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index 9df1ccfe..1be3e7c5 100644 --- a/src/components/mention_link/mention_link.scss +++ b/src/components/mention_link/mention_link.scss @@ -38,10 +38,6 @@ .new { margin-right: 0.25em; - &.-firstMention { - display: none; - } - &.-you { & .shortName, & .full { diff --git a/src/components/mentions_line/mentions_line.scss b/src/components/mentions_line/mentions_line.scss index 735502de..59f75fbb 100644 --- a/src/components/mentions_line/mentions_line.scss +++ b/src/components/mentions_line/mentions_line.scss @@ -1,5 +1,6 @@ .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 590fea0f..8972c494 100644 --- a/src/components/rich_content/rich_content.jsx +++ b/src/components/rich_content/rich_content.jsx @@ -33,22 +33,23 @@ export default Vue.component('RichContent', { default: false }, // Whether to hide last mentions (hellthreads) - hideLastMentions: { - required: false, - type: Boolean, - default: false - }, - // Whether to hide first mentions - hideFirstMentions: { + hideMentions: { required: false, type: Boolean, default: false } }, + // NEVER EVER TOUCH DATA INSIDE RENDER render (h) { // Pre-process HTML - const html = preProcessPerLine(this.html, this.greentext, this.hideLastMentions) - console.log(this.hideFirstMentions, this.hideLastMentions) + const { newHtml: html, lastMentions } = preProcessPerLine(this.html, this.greentext, this.hideLastMentions) + const firstMentions = [] // Mentions that appear in the beginning of post body + const lastTags = [] // Tags that appear at the end of post body + const writtenMentions = [] // All mentions that appear in post body + const writtenTags = [] // All tags that appear in post body + // unique index for vue "tag" property + let mentionIndex = 0 + let tagsIndex = 0 const renderImage = (tag) => { return } + const renderHashtag = (attrs, children, encounteredTextReverse) => { + const linkData = getLinkData(attrs, children, tagsIndex++) + writtenTags.push(linkData) + attrs.target = '_blank' + if (!encounteredTextReverse) { + lastTags.push(linkData) + attrs['data-parser-last'] = true + } + return + { children.map(processItem) } + + } + const renderMention = (attrs, children, encounteredText) => { - return (this.hideFirstMentions && !encounteredText) - ? '' - : + } } // We stop treating mentions as "first" ones when we encounter // non-whitespace text let encounteredText = false - // Processor to use with mini_html_converter + // Processor to use with html_tree_converter const processItem = (item, index, array, what) => { // Handle text nodes - just add emoji if (typeof item === 'string') { @@ -104,12 +122,22 @@ export default Vue.component('RichContent', { if (Array.isArray(item)) { const [opener, children] = item const Tag = getTagName(opener) + const attrs = getAttrs(opener) switch (Tag) { + case 'span': // replace images with StillImage + if (attrs['class'] && attrs['class'].includes('lastMentions')) { + if (firstMentions.length > 0) { + break + } else { + return '' + } + } else { + break + } case 'img': // replace images with StillImage return renderImage(opener) case 'a': // replace mentions with MentionLink if (!this.handleLinks) break - const attrs = getAttrs(opener) if (attrs['class'] && attrs['class'].includes('mention')) { return renderMention(attrs, children, encounteredText) } else if (attrs['class'] && attrs['class'].includes('hashtag')) { @@ -132,17 +160,9 @@ export default Vue.component('RichContent', { } } } + // Processor for back direction (for finding "last" stuff, just easier this way) let encounteredTextReverse = false - const renderHashtag = (attrs, children, encounteredTextReverse) => { - attrs.target = '_blank' - if (!encounteredTextReverse) { - attrs['data-parser-last'] = true - } - return - { children.map(processItem) } - - } const processItemReverse = (item, index, array, what) => { // Handle text nodes - just add emoji if (typeof item === 'string') { @@ -166,14 +186,37 @@ export default Vue.component('RichContent', { } return item } - return + + const event = { + firstMentions, + lastMentions, + lastTags, + writtenMentions, + writtenTags + } + + const result = { this.$slots.prefix } { convertHtmlToTree(html).map(processItem).reverse().map(processItemReverse).reverse() } { this.$slots.suffix } + + // DO NOT MOVE TO UPDATE. BAD IDEA. + this.$emit('parseReady', event) + + return result } }) +const getLinkData = (attrs, children, index) => { + return { + index, + url: attrs.href, + hashtag: attrs['data-tag'], + content: flattenDeep(children).join('') + } +} + /** Pre-processing HTML * * Currently this does two things: @@ -183,13 +226,13 @@ export default Vue.component('RichContent', { * * @param {String} html - raw HTML to process * @param {Boolean} greentext - whether to enable greentexting or not - * @param {Boolean} removeLastMentions - whether to remove last mentions */ -export const preProcessPerLine = (html, greentext, removeLastMentions) => { - // Only mark first (last) encounter - let lastMentionsMarked = false +export const preProcessPerLine = (html, greentext) => { + const lastMentions = [] - return convertHtmlToLines(html).reverse().map((item, index, array) => { + const newHtml = convertHtmlToLines(html).reverse().map((item, index, array) => { + // Going over each line in reverse to detect last mentions, + // keeping non-text stuff as-is if (!item.text) return item const string = item.text @@ -205,6 +248,7 @@ export const preProcessPerLine = (html, greentext, removeLastMentions) => { } } + // Converting that line part into tree const tree = convertHtmlToTree(string) // If line has loose text, i.e. text outside a mention or a tag @@ -215,18 +259,23 @@ export const preProcessPerLine = (html, greentext, removeLastMentions) => { if (Array.isArray(item)) { const [opener, children, closer] = item const tag = getTagName(opener) + // If we have a link we probably have mentions if (tag === 'a') { const attrs = getAttrs(opener) if (attrs['class'] && attrs['class'].includes('mention')) { + // Got mentions hasMentions = true return [opener, children, closer] } else { + // Not a mention? Means we have loose text or whatever hasLooseText = true return [opener, children, closer] } } else if (tag === 'span' || tag === 'p') { - return [opener, [...children].reverse().map(process).reverse(), closer] + // For span and p we need to go deeper + return [opener, [...children].map(process), closer] } else { + // Everything else equals to a loose text hasLooseText = true return [opener, children, closer] } @@ -234,82 +283,43 @@ export const preProcessPerLine = (html, greentext, removeLastMentions) => { if (typeof item === 'string') { if (item.trim() !== '') { + // only meaningful strings are loose text hasLooseText = true } return item } } - const result = [...tree].reverse().map(process).reverse() + // We now processed our tree, now we need to mark line as lastMentions + const result = [...tree].map(process) - if (removeLastMentions && hasMentions && !hasLooseText && !lastMentionsMarked) { - lastMentionsMarked = true - return '' + // Only check last (first since list is reversed) line + if (hasMentions && !hasLooseText && index === 0) { + let mentionIndex = 0 + const process = (item) => { + if (Array.isArray(item)) { + const [opener, children] = item + const tag = getTagName(opener) + if (tag === 'a') { + const attrs = getAttrs(opener) + lastMentions.push(getLinkData(attrs, children, mentionIndex++)) + } else if (children) { + children.forEach(process) + } + } + } + result.forEach(process) + // we DO need mentions here so that we conditionally remove them if don't + // have first mentions + return ['', flattenDeep(result).join(''), ''].join('') } else { return flattenDeep(result).join('') } }).reverse().join('') + + return { newHtml, lastMentions } } export const getHeadTailLinks = (html) => { // Exported object properties - const firstMentions = [] // Mentions that appear in the beginning of post body - const lastMentions = [] // Mentions that appear at the end of post body - const lastTags = [] // Tags that appear at the end of post body - const writtenMentions = [] // All mentions that appear in post body - const writtenTags = [] // All tags that appear in post body - - let encounteredText = false - let processingFirstMentions = true - let index = 0 // unique index for vue "tag" property - - const getLinkData = (attrs, children, index) => { - return { - index, - url: attrs.href, - hashtag: attrs['data-tag'], - content: flattenDeep(children).join('') - } - } - - // Processor to use with html_tree_converter - const processItem = (item) => { - // Handle text nodes - stop treating mentions as "first" when text encountered - if (typeof item === 'string') { - const emptyText = item.trim() === '' - if (emptyText) return - if (!encounteredText) { - encounteredText = true - processingFirstMentions = false - } - // Encountered text? That means tags we've been collectings aren't "last"! - lastTags.splice(0) - lastMentions.splice(0) - return - } - // Handle tag nodes - if (Array.isArray(item)) { - const [opener, children] = item - const Tag = getTagName(opener) - if (Tag !== 'a') return children && children.forEach(processItem) - const attrs = getAttrs(opener) - if (attrs['class']) { - const linkData = getLinkData(attrs, children, index++) - if (attrs['class'].includes('mention')) { - if (processingFirstMentions) { - firstMentions.push(linkData) - } - writtenMentions.push(linkData) - lastMentions.push(linkData) - } else if (attrs['class'].includes('hashtag')) { - lastTags.push(linkData) - writtenTags.push(linkData) - } - return // Stop processing, we don't care about link's contents - } - children && children.forEach(processItem) - } - } - convertHtmlToTree(html).forEach(processItem) - return { firstMentions, writtenMentions, writtenTags, lastTags, lastMentions } } diff --git a/src/components/status/status.js b/src/components/status/status.js index bab818fc..5b178c2e 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -19,7 +19,6 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_p import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import { muteWordHits } from '../../services/status_parser/status_parser.js' import { unescape, uniqBy } from 'lodash' -import { getHeadTailLinks } from 'src/components/rich_content/rich_content.jsx' import { library } from '@fortawesome/fontawesome-svg-core' import { @@ -101,7 +100,8 @@ const Status = { userExpanded: false, mediaPlaying: [], suspendable: true, - error: null + error: null, + headTailLinks: null } }, computed: { @@ -168,9 +168,6 @@ const Status = { muteWordHits () { return muteWordHits(this.status, this.muteWords) }, - headTailLinks () { - return getHeadTailLinks(this.status.raw_html) - }, mentions () { return this.status.attentions.filter(attn => { return attn.screen_name !== this.replyToName && @@ -182,6 +179,7 @@ const Status = { })) }, alsoMentions () { + if (!this.headTailLinks) return [] const set = new Set(this.headTailLinks.writtenMentions.map(m => m.url)) return this.headTailLinks.writtenMentions.filter(mention => { return !set.has(mention.url) @@ -196,9 +194,6 @@ const Status = { hasMentionsLine () { return this.mentionsLine.length > 0 }, - hideLastMentions () { - return this.headTailLinks.firstMentions.length === 0 - }, muted () { if (this.statusoid.user.id === this.currentUser.id) return false const { status } = this @@ -346,6 +341,9 @@ const Status = { }, removeMediaPlaying (id) { this.mediaPlaying = this.mediaPlaying.filter(mediaId => mediaId !== id) + }, + setHeadTailLinks (headTailLinks) { + this.headTailLinks = headTailLinks } }, watch: { @@ -356,7 +354,7 @@ const Status = { // Post is above screen, match its top to screen top window.scrollBy(0, rect.top - 100) } else if (rect.height >= (window.innerHeight - 50)) { - // Post we want to see is taller than screen so match its top to screen top + // Post we wahttp://localhost:8080/users/hj/dmsnt to see is taller than screen so match its top to screen top window.scrollBy(0, rect.top - 100) } else if (rect.bottom > window.innerHeight - 50) { // Post is below screen, match its bottom to screen bottom diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 0190d864..507e4192 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -305,11 +305,11 @@ :no-heading="noHeading" :highlight="highlight" :focused="isFocused" - :hide-first-mentions="mentionsOwnLine && isReply" - :hide-last-mentions="hideLastMentions" - :head-tail-links="headTailLinks" + :hide-mentions="mentionsOwnLine && (isReply || true)" @mediaplay="addMediaPlaying($event)" @mediapause="removeMediaPlaying($event)" + @parseReady="setHeadTailLinks" + ref="content" />
fileType.fileType(file.mimetype)) }, - mentionsFirst () { - return this.headTailLinksComputed.firstMentions - }, - mentionsLast () { - return this.headTailLinksComputed.lastMentions - }, ...mapGetters(['mergedConfig']) }, components: { @@ -107,6 +98,11 @@ 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.vue b/src/components/status_body/status_body.vue index bd599a8c..68f6701f 100644 --- a/src/components/status_body/status_body.vue +++ b/src/components/status_body/status_body.vue @@ -48,20 +48,21 @@ :html="status.raw_html" :emoji="status.emojis" :handle-links="true" + :hide-mentions="hideMentions" :greentext="mergedConfig.greentext" - :hide-first-mentions="hideFirstMentions" - :hide-last-mentions="hideLastMentions" + @parseReady="setHeadTailLinks" + ref="text" > diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js index 64cc6d44..11a4974b 100644 --- a/src/components/status_content/status_content.js +++ b/src/components/status_content/status_content.js @@ -32,9 +32,7 @@ const StatusContent = { 'noHeading', 'fullContent', 'singleLine', - 'hideFirstMentions', - 'hideLastMentions', - 'headTailLinks' + 'hideMentions' ], computed: { hideAttachments () { @@ -94,6 +92,9 @@ const StatusContent = { StatusBody }, methods: { + setHeadTailLinks (headTailLinks) { + this.$emit('parseReady', headTailLinks) + }, setMedia () { const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments return () => this.$store.dispatch('setMedia', attachments) diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index c32bbbfb..feb34d2c 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -4,9 +4,8 @@
-- cgit v1.2.3-70-g09d2 From 418f029789f5e1cc22fd7db4f269088633d90050 Mon Sep 17 00:00:00 2001 From: Henry Jameson 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/mentions_line/mentions_line.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: Thu, 12 Aug 2021 02:49:37 +0300 Subject: remove new options for style and separate line, now groups all chained mentions on a mentionsline regardless of placement. fixes spacing --- src/components/mention_link/mention_link.js | 6 +- src/components/mention_link/mention_link.scss | 41 --- src/components/mention_link/mention_link.vue | 3 +- src/components/mentions_line/mentions_line.js | 15 +- src/components/mentions_line/mentions_line.scss | 15 +- src/components/mentions_line/mentions_line.vue | 6 +- src/components/rich_content/rich_content.jsx | 128 ++----- src/components/settings_modal/tabs/general_tab.vue | 10 - src/components/status/status.js | 5 +- src/components/status/status.vue | 1 - src/components/status_body/status_body.js | 3 +- src/components/status_body/status_body.vue | 1 - src/components/status_content/status_content.js | 3 +- src/components/status_content/status_content.vue | 1 - src/modules/config.js | 2 - test/unit/specs/components/rich_content.spec.js | 399 +-------------------- 16 files changed, 55 insertions(+), 584 deletions(-) (limited to 'src/components/mentions_line/mentions_line.scss') diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js index eec116db..a60a8040 100644 --- a/src/components/mention_link/mention_link.js +++ b/src/components/mention_link/mention_link.js @@ -65,9 +65,6 @@ const MentionLink = { highlightClass () { if (this.highlight) return highlightClass(this.user) }, - oldStyle () { - return !this.mergedConfig.mentionsNewStyle - }, style () { if (this.highlight) { const { @@ -83,8 +80,7 @@ const MentionLink = { return [ { '-you': this.isYou, - '-highlighted': this.highlight, - '-oldStyle': this.oldStyle + '-highlighted': this.highlight }, this.highlightType ] diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index 5f5da98f..ec2689f8 100644 --- a/src/components/mention_link/mention_link.scss +++ b/src/components/mention_link/mention_link.scss @@ -10,10 +10,6 @@ border-radius: 2px; } - .original { - margin-right: 0.25em; - } - .full { position: absolute; display: inline-block; @@ -41,8 +37,6 @@ } .new { - margin-right: 0.25em; - &.-you { & .shortName, & .full { @@ -61,41 +55,6 @@ margin: 0; } - &:not(.-oldStyle) { - .short { - padding-left: 0.25em; - padding-right: 0; - padding-top: 0; - padding-bottom: 0; - line-height: 1.5; - font-size: inherit; - - .at { - color: var(--faint); - opacity: 0.8; - padding-right: 0.25em; - vertical-align: -20%; - } - } - - .you { - padding-right: 0.25em; - } - - .userName { - display: inline-block; - color: var(--link); - line-height: inherit; - margin-left: 0; - padding-left: 0.125em; - padding-right: 0.25em; - padding-top: 0; - padding-bottom: 0; - border-top-right-radius: var(--btnRadius); - border-bottom-right-radius: var(--btnRadius); - } - } - &.-striped { & .userName, & .full { diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index 514b7475..625eb727 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -18,8 +18,7 @@ :class="classnames" >