From a2541bb4e01a2f1497db89cd9923b0b5552a6eca Mon Sep 17 00:00:00 2001 From: floatingghost Date: Mon, 25 Jul 2022 16:25:41 +0000 Subject: [PATCH] Add quotes (#59) Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/59 --- .../post_status_form/post_status_form.js | 9 ++- src/components/quote_button/quote_button.js | 16 ++++ src/components/quote_button/quote_button.vue | 55 ++++++++++++++ src/components/quote_card/quote_card.js | 32 ++++++++ src/components/quote_card/quote_card.vue | 76 +++++++++++++++++++ .../quote_card_content/quote_card_content.vue | 22 ++++++ .../settings_modal/tabs/version_tab.js | 2 +- src/components/status/status.js | 12 ++- src/components/status/status.scss | 13 ++++ src/components/status/status.vue | 20 +++++ src/components/status_body/status_body.scss | 5 +- .../status_content/status_content.js | 4 +- .../status_content/status_content.vue | 9 ++- src/i18n/en.json | 1 + src/services/api/api.service.js | 4 + .../entity_normalizer.service.js | 3 + .../status_poster/status_poster.service.js | 2 + 17 files changed, 274 insertions(+), 11 deletions(-) create mode 100644 src/components/quote_button/quote_button.js create mode 100644 src/components/quote_button/quote_button.vue create mode 100644 src/components/quote_card/quote_card.js create mode 100644 src/components/quote_card/quote_card.vue create mode 100644 src/components/quote_card_content/quote_card_content.vue diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 19504169..4e59e430 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -56,6 +56,7 @@ const pxStringToNumber = (str) => { const PostStatusForm = { props: [ 'replyTo', + 'quoteId', 'repliedUser', 'attentions', 'copyMessageScope', @@ -99,12 +100,12 @@ const PostStatusForm = { this.updateIdempotencyKey() this.resize(this.$refs.textarea) - if (this.replyTo) { + if (this.replyTo || this.quoteId) { const textLength = this.$refs.textarea.value.length this.$refs.textarea.setSelectionRange(textLength, textLength) } - if (this.replyTo || this.autoFocus) { + if (this.replyTo || this.quoteId || this.autoFocus) { this.$refs.textarea.focus() } }, @@ -112,7 +113,7 @@ const PostStatusForm = { const preset = this.$route.query.message let statusText = preset || '' - if (this.replyTo) { + if (this.replyTo || this.quoteId) { const currentUser = this.$store.state.users.currentUser statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser) } @@ -314,6 +315,7 @@ const PostStatusForm = { media: newStatus.files, store: this.$store, inReplyToStatusId: this.replyTo, + quoteId: this.quoteId, contentType: newStatus.contentType, poll, idempotencyKey: this.idempotencyKey @@ -347,6 +349,7 @@ const PostStatusForm = { media: [], store: this.$store, inReplyToStatusId: this.replyTo, + quoteId: this.quoteId, contentType: newStatus.contentType, poll: {}, preview: true diff --git a/src/components/quote_button/quote_button.js b/src/components/quote_button/quote_button.js new file mode 100644 index 00000000..f5bf7e3a --- /dev/null +++ b/src/components/quote_button/quote_button.js @@ -0,0 +1,16 @@ +import { library } from '@fortawesome/fontawesome-svg-core' +import { faQuoteLeft } from '@fortawesome/free-solid-svg-icons' + +library.add(faQuoteLeft) + +const QuoteButton = { + name: 'QuoteButton', + props: ['status', 'quoting', 'visibility'], + computed: { + loggedIn () { + return !!this.$store.state.users.currentUser + } + } +} + +export default QuoteButton diff --git a/src/components/quote_button/quote_button.vue b/src/components/quote_button/quote_button.vue new file mode 100644 index 00000000..7a4c6b4b --- /dev/null +++ b/src/components/quote_button/quote_button.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/src/components/quote_card/quote_card.js b/src/components/quote_card/quote_card.js new file mode 100644 index 00000000..8f1a58a1 --- /dev/null +++ b/src/components/quote_card/quote_card.js @@ -0,0 +1,32 @@ +import { mapGetters } from 'vuex' +import QuoteCardContent from '../quote_card_content/quote_card_content.vue' + +const QuoteCard = { + name: 'QuoteCard', + props: [ + 'status' + ], + data () { + return { + imageLoaded: false + } + }, + computed: { + ...mapGetters([ + 'mergedConfig' + ]), + statusLink () { + return { + name: 'conversation', + params: { + id: this.status.id + } + } + } + }, + components: { + QuoteCardContent + } +} + +export default QuoteCard diff --git a/src/components/quote_card/quote_card.vue b/src/components/quote_card/quote_card.vue new file mode 100644 index 00000000..64f8b6a9 --- /dev/null +++ b/src/components/quote_card/quote_card.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/src/components/quote_card_content/quote_card_content.vue b/src/components/quote_card_content/quote_card_content.vue new file mode 100644 index 00000000..c5950547 --- /dev/null +++ b/src/components/quote_card_content/quote_card_content.vue @@ -0,0 +1,22 @@ + + + diff --git a/src/components/settings_modal/tabs/version_tab.js b/src/components/settings_modal/tabs/version_tab.js index ce0b4d35..d69b131d 100644 --- a/src/components/settings_modal/tabs/version_tab.js +++ b/src/components/settings_modal/tabs/version_tab.js @@ -1,7 +1,7 @@ import { extractCommit } from 'src/services/version/version.service' const pleromaFeCommitUrl = 'https://akkoma.dev/AkkomaGang/pleroma-fe/commit/' -const pleromaBeCommitUrl = 'https://akkoma.dev/AkkomaGang/akkoma/commits/' +const pleromaBeCommitUrl = 'https://akkoma.dev/AkkomaGang/akkoma/commit/' const VersionTab = { data () { diff --git a/src/components/status/status.js b/src/components/status/status.js index d1339652..dcf93688 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -1,4 +1,5 @@ import ReplyButton from '../reply_button/reply_button.vue' +import QuoteButton from '../quote_button/quote_button.vue' import FavoriteButton from '../favorite_button/favorite_button.vue' import ReactButton from '../react_button/react_button.vue' import RetweetButton from '../retweet_button/retweet_button.vue' @@ -115,7 +116,8 @@ const Status = { StatusContent, RichContent, MentionLink, - MentionsLine + MentionsLine, + QuoteButton }, props: [ 'statusoid', @@ -145,6 +147,8 @@ const Status = { 'controlledToggleShowingLongSubject', 'controlledReplying', 'controlledToggleReplying', + 'controlledQuoting', + 'controlledToggleQuoting', 'controlledMediaPlaying', 'controlledSetMediaPlaying', 'dive' @@ -152,6 +156,7 @@ const Status = { data () { return { uncontrolledReplying: false, + uncontrolledQuoting: false, unmuted: false, userExpanded: false, uncontrolledMediaPlaying: [], @@ -161,7 +166,7 @@ const Status = { } }, computed: { - ...controlledOrUncontrolledGetters(['replying', 'mediaPlaying']), + ...controlledOrUncontrolledGetters(['replying', 'quoting', 'mediaPlaying']), muteWords () { return this.mergedConfig.muteWords }, @@ -418,6 +423,9 @@ const Status = { toggleReplying () { controlledOrUncontrolledToggle(this, 'replying') }, + toggleQuoting () { + controlledOrUncontrolledToggle(this, 'quoting') + }, gotoOriginal (id) { if (this.inConversation) { this.$emit('goto', id) diff --git a/src/components/status/status.scss b/src/components/status/status.scss index b3ad3818..cc9d4eb7 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -101,6 +101,10 @@ .status-heading { margin-bottom: 0.5em; + + .emoji { + --emoji-size: 16px; + } } .heading-name-row { @@ -355,6 +359,15 @@ flex: 1; } + .quote-form { + padding-top: 0; + padding-bottom: 0; + } + + .quote-body { + flex: 1; + } + .favs-repeated-users { margin-top: var(--status-margin, $status-margin); } diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 67ce999a..6c80e293 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -430,6 +430,12 @@ :status="status" @toggle="toggleReplying" /> + +
+ +
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss index 8a5598b0..8a218fb2 100644 --- a/src/components/status_body/status_body.scss +++ b/src/components/status_body/status_body.scss @@ -6,9 +6,8 @@ .emoji { --_still_image-label-scale: 0.5; - - width: 50px; - height: 50px; + --emoji-size: 50px; + --emoji-size: 50px; } ._mfm_x2_ { diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js index 89f0aa51..3cd50622 100644 --- a/src/components/status_content/status_content.js +++ b/src/components/status_content/status_content.js @@ -3,6 +3,7 @@ import Poll from '../poll/poll.vue' import Gallery from '../gallery/gallery.vue' import StatusBody from 'src/components/status_body/status_body.vue' import LinkPreview from '../link-preview/link-preview.vue' +import QuoteCard from '../quote_card/quote_card.vue' import { mapGetters, mapState } from 'vuex' import { library } from '@fortawesome/fontawesome-svg-core' import { @@ -109,7 +110,8 @@ const StatusContent = { Poll, Gallery, LinkPreview, - StatusBody + StatusBody, + QuoteCard }, methods: { toggleShowingTall () { diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue index 4ed01d3a..4f9c85bb 100644 --- a/src/components/status_content/status_content.vue +++ b/src/components/status_content/status_content.vue @@ -40,7 +40,14 @@ @play="$emit('mediaplay', attachment.id)" @pause="$emit('mediapause', attachment.id)" /> - +
+ +