diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/boot/after_store.js | 1 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.js | 38 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 34 | ||||
| -rw-r--r-- | src/components/post_status_modal/post_status_modal.js | 4 | ||||
| -rw-r--r-- | src/components/post_status_modal/post_status_modal.vue | 2 | ||||
| -rw-r--r-- | src/components/rich_content/rich_content.jsx | 54 | ||||
| -rw-r--r-- | src/components/status/status.js | 28 | ||||
| -rw-r--r-- | src/components/status/status.scss | 18 | ||||
| -rw-r--r-- | src/components/status/status.vue | 39 | ||||
| -rw-r--r-- | src/i18n/en.json | 7 | ||||
| -rw-r--r-- | src/modules/instance.js | 1 | ||||
| -rw-r--r-- | src/modules/postStatus.js | 6 | ||||
| -rw-r--r-- | src/modules/statuses.js | 4 | ||||
| -rw-r--r-- | src/services/api/api.service.js | 4 | ||||
| -rw-r--r-- | src/services/entity_normalizer/entity_normalizer.service.js | 4 | ||||
| -rw-r--r-- | src/services/status_poster/status_poster.service.js | 2 |
16 files changed, 221 insertions, 25 deletions
diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 9c1f007b..395d4834 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -259,6 +259,7 @@ const getNodeInfo = async ({ store }) => { store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') }) store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits }) store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled }) + store.dispatch('setInstanceOption', { name: 'quotingAvailable', value: features.includes('quote_posting') }) const uploadLimits = metadata.uploadLimits store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) }) diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index b75fee69..ba49961d 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -156,11 +156,13 @@ const PostStatusForm = { poll: this.statusPoll || {}, mediaDescriptions: this.statusMediaDescriptions || {}, visibility: this.statusScope || scope, - contentType: statusContentType + contentType: statusContentType, + quoting: false } } return { + randomSeed: `${Math.random()}`.replace('.', '-'), dropFiles: [], uploadingFiles: false, error: null, @@ -265,6 +267,30 @@ const PostStatusForm = { isEdit () { return typeof this.statusId !== 'undefined' && this.statusId.trim() !== '' }, + quotable () { + if (!this.$store.state.instance.quotingAvailable) { + return false + } + + if (!this.replyTo) { + return false + } + + const repliedStatus = this.$store.state.statuses.allStatusesObject[this.replyTo] + if (!repliedStatus) { + return false + } + + if (repliedStatus.visibility === 'public' || + repliedStatus.visibility === 'unlisted' || + repliedStatus.visibility === 'local') { + return true + } else if (repliedStatus.visibility === 'private') { + return repliedStatus.user.id === this.$store.state.users.currentUser.id + } + + return false + }, ...mapGetters(['mergedConfig']), ...mapState({ mobileLayout: state => state.interface.mobileLayout @@ -292,7 +318,8 @@ const PostStatusForm = { visibility: newStatus.visibility, contentType: newStatus.contentType, poll: {}, - mediaDescriptions: {} + mediaDescriptions: {}, + quoting: false } this.pollFormVisible = false this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile() @@ -340,6 +367,8 @@ const PostStatusForm = { return } + const replyOrQuoteAttr = newStatus.quoting ? 'quoteId' : 'inReplyToStatusId' + const postingOptions = { status: newStatus.status, spoilerText: newStatus.spoilerText || null, @@ -347,7 +376,7 @@ const PostStatusForm = { sensitive: newStatus.nsfw, media: newStatus.files, store: this.$store, - inReplyToStatusId: this.replyTo, + [replyOrQuoteAttr]: this.replyTo, contentType: newStatus.contentType, poll, idempotencyKey: this.idempotencyKey @@ -373,6 +402,7 @@ const PostStatusForm = { } const newStatus = this.newStatus this.previewLoading = true + const replyOrQuoteAttr = newStatus.quoting ? 'quoteId' : 'inReplyToStatusId' statusPoster.postStatus({ status: newStatus.status, spoilerText: newStatus.spoilerText || null, @@ -380,7 +410,7 @@ const PostStatusForm = { sensitive: newStatus.nsfw, media: [], store: this.$store, - inReplyToStatusId: this.replyTo, + [replyOrQuoteAttr]: this.replyTo, contentType: newStatus.contentType, poll: {}, preview: true diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 86c1f907..9b108a5a 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -126,6 +126,36 @@ class="preview-status" /> </div> + <div + v-if="quotable" + role="radiogroup" + class="btn-group reply-or-quote-selector" + > + <button + :id="`reply-or-quote-option-${randomSeed}-reply`" + class="btn button-default reply-or-quote-option" + :class="{ toggled: !newStatus.quoting }" + tabindex="0" + role="radio" + :aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`" + :aria-checked="!newStatus.quoting" + @click="newStatus.quoting = false" + > + {{ $t('post_status.reply_option') }} + </button> + <button + :id="`reply-or-quote-option-${randomSeed}-quote`" + class="btn button-default reply-or-quote-option" + :class="{ toggled: newStatus.quoting }" + tabindex="0" + role="radio" + :aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`" + :aria-checked="newStatus.quoting" + @click="newStatus.quoting = true" + > + {{ $t('post_status.quote_option') }} + </button> + </div> <EmojiInput v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)" v-model="newStatus.spoilerText" @@ -420,6 +450,10 @@ margin: 0; } + .reply-or-quote-selector { + margin-bottom: 0.5em; + } + .text-format { .only-format { color: $fallback--faint; diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js index b44354db..8970dd9b 100644 --- a/src/components/post_status_modal/post_status_modal.js +++ b/src/components/post_status_modal/post_status_modal.js @@ -44,6 +44,10 @@ const PostStatusModal = { methods: { closeModal () { this.$store.dispatch('closePostStatusModal') + }, + resetAndClose () { + this.$store.dispatch('resetPostStatusModal') + this.$store.dispatch('closePostStatusModal') } } } diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue index dbcd321e..bc2cad4a 100644 --- a/src/components/post_status_modal/post_status_modal.vue +++ b/src/components/post_status_modal/post_status_modal.vue @@ -12,7 +12,7 @@ <PostStatusForm class="panel-body" v-bind="params" - @posted="closeModal" + @posted="resetAndClose" /> </div> </Modal> diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx index b16ab242..ff14a58a 100644 --- a/src/components/rich_content/rich_content.jsx +++ b/src/components/rich_content/rich_content.jsx @@ -8,6 +8,27 @@ import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue' import './rich_content.scss' +const MAYBE_LINE_BREAKING_ELEMENTS = [ + 'blockquote', + 'br', + 'hr', + 'ul', + 'ol', + 'li', + 'p', + 'table', + 'tbody', + 'td', + 'th', + 'thead', + 'tr', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5' +] + /** * RichContent, The Über-powered component for rendering Post HTML. * @@ -166,25 +187,22 @@ export default { !(children && typeof children[0] === 'string' && children[0].match(/^\s/)) ? lastSpacing : '' - switch (Tag) { - case 'br': + if (MAYBE_LINE_BREAKING_ELEMENTS.includes(Tag)) { + // all the elements that can cause a line change + currentMentions = null + } else if (Tag === 'img') { // replace images with StillImage + return ['', [mentionsLinePadding, renderImage(opener)], ''] + } else if (Tag === 'a' && this.handleLinks) { // replace mentions with MentionLink + if (fullAttrs.class && fullAttrs.class.includes('mention')) { + // Handling mentions here + return renderMention(attrs, children) + } else { currentMentions = null - break - case 'img': // replace images with StillImage - return ['', [mentionsLinePadding, renderImage(opener)], ''] - case 'a': // replace mentions with MentionLink - if (!this.handleLinks) break - if (fullAttrs.class && fullAttrs.class.includes('mention')) { - // Handling mentions here - return renderMention(attrs, children) - } else { - currentMentions = null - break - } - case 'span': - if (this.handleLinks && fullAttrs.class && fullAttrs.class.includes('h-card')) { - return ['', children.map(processItem), ''] - } + } + } else if (Tag === 'span') { + if (this.handleLinks && fullAttrs.class && fullAttrs.class.includes('h-card')) { + return ['', children.map(processItem), ''] + } } if (children !== undefined) { diff --git a/src/components/status/status.js b/src/components/status/status.js index 9a9bca7a..e722a635 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -133,6 +133,7 @@ const Status = { 'showPinned', 'inProfile', 'profileUserId', + 'inQuote', 'simpleTree', 'controlledThreadDisplayStatus', @@ -159,7 +160,8 @@ const Status = { uncontrolledMediaPlaying: [], suspendable: true, error: null, - headTailLinks: null + headTailLinks: null, + displayQuote: !this.inQuote } }, computed: { @@ -401,6 +403,18 @@ const Status = { }, editingAvailable () { return this.$store.state.instance.editingAvailable + }, + hasVisibleQuote () { + return this.status.quote_url && this.status.quote_visible + }, + hasInvisibleQuote () { + return this.status.quote_url && !this.status.quote_visible + }, + quotedStatus () { + return this.status.quote_id ? this.$store.state.statuses.allStatusesObject[this.status.quote_id] : undefined + }, + shouldDisplayQuote () { + return this.quotedStatus && this.displayQuote } }, methods: { @@ -469,6 +483,18 @@ const Status = { window.scrollBy(0, rect.bottom - window.innerHeight + 50) } } + }, + toggleDisplayQuote () { + if (this.shouldDisplayQuote) { + this.displayQuote = false + } else if (!this.quotedStatus) { + this.$store.dispatch('fetchStatus', this.status.quote_id) + .then(() => { + this.displayQuote = true + }) + } else { + this.displayQuote = true + } } }, watch: { diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 44812867..760c6ac1 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -422,4 +422,22 @@ } } } + + .quoted-status { + margin-top: 0.5em; + border: 1px solid var(--border, $fallback--border); + border-radius: var(--attachmentRadius, $fallback--attachmentRadius); + + &.-unavailable-prompt { + padding: 0.5em; + } + } + + .display-quoted-status-button { + margin: 0.5em; + + &-icon { + color: inherit; + } + } } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 35b15362..c49a9e7b 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -364,6 +364,45 @@ @parseReady="setHeadTailLinks" /> + <article + v-if="hasVisibleQuote" + class="quoted-status" + > + <button + class="button-unstyled -link display-quoted-status-button" + :aria-expanded="shouldDisplayQuote" + @click="toggleDisplayQuote" + > + {{ shouldDisplayQuote ? $t('status.hide_quote') : $t('status.display_quote') }} + <FAIcon + class="display-quoted-status-button-icon" + :icon="shouldDisplayQuote ? 'chevron-up' : 'chevron-down'" + /> + </button> + <Status + v-if="shouldDisplayQuote" + :statusoid="quotedStatus" + :in-quote="true" + /> + </article> + <p + v-else-if="hasInvisibleQuote" + class="quoted-status -unavailable-prompt" + > + <i18n-t keypath="status.invisible_quote"> + <template #link> + <bdi> + <a + :href="status.quote_url" + target="_blank" + > + {{ status.quote_url }} + </a> + </bdi> + </template> + </i18n-t> + </p> + <div v-if="inConversation && !isPreview && replies && replies.length" class="replies" diff --git a/src/i18n/en.json b/src/i18n/en.json index a7ab451f..2358a4ce 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -261,6 +261,8 @@ "post_status": { "edit_status": "Edit status", "new_status": "Post new status", + "reply_option": "Reply to this status", + "quote_option": "Quote this status", "account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.", "account_not_locked_warning_link": "locked", "attachments_sensitive": "Mark attachments as sensitive", @@ -1028,7 +1030,10 @@ "show_all_conversation": "Show full conversation ({numStatus} other status) | Show full conversation ({numStatus} other statuses)", "show_only_conversation_under_this": "Only show replies to this status", "status_history": "Status history", - "reaction_count_label": "{num} person reacted | {num} people reacted" + "reaction_count_label": "{num} person reacted | {num} people reacted", + "hide_quote": "Hide the quoted status", + "display_quote": "Display the quoted status", + "invisible_quote": "Quoted status unavailable: {link}" }, "user_card": { "approve": "Approve", diff --git a/src/modules/instance.js b/src/modules/instance.js index bb0292da..1ee64552 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -128,6 +128,7 @@ const defaultState = { mediaProxyAvailable: false, suggestionsEnabled: false, suggestionsWeb: '', + quotingAvailable: false, // Html stuff instanceSpecificPanelContent: '', diff --git a/src/modules/postStatus.js b/src/modules/postStatus.js index 638c1fb2..d3bea137 100644 --- a/src/modules/postStatus.js +++ b/src/modules/postStatus.js @@ -10,6 +10,9 @@ const postStatus = { }, closePostStatusModal (state) { state.modalActivated = false + }, + resetPostStatusModal (state) { + state.params = null } }, actions: { @@ -18,6 +21,9 @@ const postStatus = { }, closePostStatusModal ({ commit }) { commit('closePostStatusModal') + }, + resetPostStatusModal ({ commit }) { + commit('resetPostStatusModal') } } } diff --git a/src/modules/statuses.js b/src/modules/statuses.js index ed21a730..186bba3c 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -229,6 +229,10 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us timelineObject.newStatusCount += 1 } + if (status.quote) { + addStatus(status.quote, /* showImmediately = */ false, /* addToTimeline = */ false) + } + return status } diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index ac715678..c6bca10b 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -827,6 +827,7 @@ const postStatus = ({ poll, mediaIds = [], inReplyToStatusId, + quoteId, contentType, preview, idempotencyKey @@ -859,6 +860,9 @@ const postStatus = ({ if (inReplyToStatusId) { form.append('in_reply_to_id', inReplyToStatusId) } + if (quoteId) { + form.append('quote_id', quoteId) + } if (preview) { form.append('preview', 'true') } diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index adefc5a5..610ba1ab 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -325,6 +325,10 @@ export const parseStatus = (data) => { output.thread_muted = pleroma.thread_muted output.emoji_reactions = pleroma.emoji_reactions output.parent_visible = pleroma.parent_visible === undefined ? true : pleroma.parent_visible + output.quote = pleroma.quote ? parseStatus(pleroma.quote) : undefined + output.quote_id = pleroma.quote_id ? pleroma.quote_id : (output.quote ? output.quote.id : undefined) + output.quote_url = pleroma.quote_url + output.quote_visible = pleroma.quote_visible } else { output.text = data.content output.summary = data.spoiler_text diff --git a/src/services/status_poster/status_poster.service.js b/src/services/status_poster/status_poster.service.js index 1eb10bb6..aaef5a7a 100644 --- a/src/services/status_poster/status_poster.service.js +++ b/src/services/status_poster/status_poster.service.js @@ -10,6 +10,7 @@ const postStatus = ({ poll, media = [], inReplyToStatusId = undefined, + quoteId = undefined, contentType = 'text/plain', preview = false, idempotencyKey = '' @@ -24,6 +25,7 @@ const postStatus = ({ sensitive, mediaIds, inReplyToStatusId, + quoteId, contentType, poll, preview, |
