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.js | 147 ++++++++++++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 src/components/status_body/status_body.js (limited to 'src/components/status_body/status_body.js') diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js new file mode 100644 index 00000000..232afccb --- /dev/null +++ b/src/components/status_body/status_body.js @@ -0,0 +1,147 @@ +import fileType from 'src/services/file_type/file_type.service' +import RichContent from 'src/components/rich_content/rich_content.jsx' +import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js' +import { extractTagFromUrl } from 'src/services/matcher/matcher.service.js' +import { mapGetters } from 'vuex' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faFile, + faMusic, + faImage, + faLink, + faPollH +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faFile, + faMusic, + faImage, + faLink, + faPollH +) + +const StatusContent = { + name: 'StatusContent', + props: [ + 'status', + 'focused', + 'noHeading', + 'fullContent', + 'singleLine' + ], + 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 + } + }, + computed: { + localCollapseSubjectDefault () { + return this.mergedConfig.collapseMessageWithSubject + }, + // This is a bit hacky, but we want to approximate post height before rendering + // so we count newlines (masto uses

for paragraphs, GS uses
between them) + // as well as approximate line count by counting characters and approximating ~80 + // per line. + // + // 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 + }, + longSubject () { + return this.status.summary.length > 240 + }, + // When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status. + mightHideBecauseSubject () { + return !!this.status.summary && this.localCollapseSubjectDefault + }, + mightHideBecauseTall () { + return this.tallStatus && !(this.status.summary && this.localCollapseSubjectDefault) + }, + hideSubjectStatus () { + return this.mightHideBecauseSubject && !this.expandingSubject + }, + hideTallStatus () { + return this.mightHideBecauseTall && !this.showingTall + }, + showingMore () { + return (this.mightHideBecauseTall && this.showingTall) || (this.mightHideBecauseSubject && this.expandingSubject) + }, + postBodyHtml () { + const html = this.status.raw_html + + if (this.mergedConfig.greentext) { + try { + if (html.includes('>')) { + // This checks if post has '>' at the beginning, excluding mentions so that @mention >impying works + return processHtml(html, (string) => { + if (string.includes('>') && + string + .replace(/<[^>]+?>/gi, '') // remove all tags + .replace(/@\w+/gi, '') // remove mentions (even failed ones) + .trim() + .startsWith('>')) { + return `${string}` + } else { + return string + } + }) + } else { + return html + } + } catch (e) { + console.error('Failed to process status html', e) + return html + } + } else { + return html + } + }, + attachmentTypes () { + return this.status.attachments.map(file => fileType.fileType(file.mimetype)) + }, + ...mapGetters(['mergedConfig']) + }, + components: { + RichContent + }, + mounted () { + this.status.attentions && this.status.attentions.forEach(attn => { + const { id } = attn + this.$store.dispatch('fetchUserIfMissing', id) + }) + }, + methods: { + linkClicked (event) { + const target = event.target.closest('.status-content a') + if (target) { + if (target.rel.match(/(?:^|\s)tag(?:$|\s)/) || target.className.match(/hashtag/)) { + // Extract tag name from dataset or link url + const tag = target.dataset.tag || extractTagFromUrl(target.href) + if (tag) { + const link = this.generateTagLink(tag) + this.$router.push(link) + return + } + } + window.open(target.href, '_blank') + } + }, + toggleShowMore () { + if (this.mightHideBecauseTall) { + this.showingTall = !this.showingTall + } else if (this.mightHideBecauseSubject) { + this.expandingSubject = !this.expandingSubject + } + }, + generateTagLink (tag) { + return `/tag/${tag}` + } + } +} + +export default StatusContent -- cgit v1.2.3-70-g09d2 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/mention_link/mention_link.scss | 10 ++--- src/components/mention_link/mention_link.vue | 3 +- src/components/mentions_line/mentions_line.js | 51 +++++++++++++++++++++++++ src/components/mentions_line/mentions_line.scss | 15 ++++++++ src/components/mentions_line/mentions_line.vue | 42 ++++++++++++++++++++ src/components/status/status.js | 10 +++-- src/components/status/status.vue | 10 ++--- src/components/status_body/status_body.js | 10 ++++- src/components/status_body/status_body.vue | 25 ++++++++---- src/i18n/en.json | 3 +- 10 files changed, 151 insertions(+), 28 deletions(-) create mode 100644 src/components/mentions_line/mentions_line.js create mode 100644 src/components/mentions_line/mentions_line.scss create mode 100644 src/components/mentions_line/mentions_line.vue (limited to 'src/components/status_body/status_body.js') diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss index 5b5218f7..eed4d5be 100644 --- a/src/components/mention_link/mention_link.scss +++ b/src/components/mention_link/mention_link.scss @@ -40,6 +40,10 @@ .new { margin-right: 0.25em; + &.-firstMention { + display: none; + } + &.-you { & .shortName, & .full { @@ -115,12 +119,6 @@ } } - &:not(.-oldPlace) { - .new.-firstMention { - display: none; - } - } - &:hover .new .full { opacity: 1; pointer-events: initial; diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue index 0dae1f53..d2f4129d 100644 --- a/src/components/mention_link/mention_link.vue +++ b/src/components/mention_link/mention_link.vue @@ -23,7 +23,8 @@ @click.prevent="onClick" > - {{ $t('status.you')}} + + {{ $t('status.you') }} ({ expanded: false }), + components: { + MentionLink + }, + computed: { + oldStyle () { + return this.mergedConfig.mentionsOldStyle + }, + limit () { + return 1 + }, + mentions () { + return this.attentions.slice(0, this.limit) + }, + extraMentions () { + return this.attentions.slice(this.limit) + }, + manyMentions () { + return this.extraMentions.length > 0 + }, + buttonClasses () { + return [ + this.oldStyle + ? 'button-unstyled' + : 'button-default -sublime', + this.oldStyle + ? '-oldStyle' + : '-newStyle' + ] + }, + ...mapGetters(['mergedConfig']), + }, + methods: { + toggleShowMore () { + this.expanded = !this.expanded + } + } +} + +export default MentionsLine 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); + } + } +} diff --git a/src/components/mentions_line/mentions_line.vue b/src/components/mentions_line/mentions_line.vue new file mode 100644 index 00000000..6d114f2d --- /dev/null +++ b/src/components/mentions_line/mentions_line.vue @@ -0,0 +1,42 @@ + + +