logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: 0507eb6550830f7b76910d51200675de0aa9b1de
parent 830a03a0d13738ed1677d364fdf03821fbc507ab
Author: Henry Jameson <me@hjkos.com>
Date:   Sun, 15 Aug 2021 21:04:49 +0300

ability to move attachments around when making a new post

Diffstat:

Msrc/components/attachment/attachment.js8++++++++
Msrc/components/attachment/attachment.vue24++++++++++++++++++++++--
Msrc/components/gallery/gallery.js2++
Msrc/components/gallery/gallery.vue10++++++----
Msrc/components/post_status_form/post_status_form.js13++++++++++++-
Msrc/components/post_status_form/post_status_form.vue2++
Msrc/i18n/en.json7+++++++
7 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js @@ -42,6 +42,8 @@ const Attachment = { 'size', 'setMedia', 'remove', + 'shiftUp', + 'shiftDn', 'edit' ], data () { @@ -154,6 +156,12 @@ const Attachment = { onRemove () { this.remove && this.remove(this.attachment) }, + onShiftUp () { + this.shiftUp && this.shiftUp(this.attachment) + }, + onShiftDn () { + this.shiftDn && this.shiftDn(this.attachment) + }, stopFlash () { this.$refs.flash.closePlayer() }, diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue @@ -30,7 +30,7 @@ </button> </div> <div - v-if="size !== 'hide' && !hideDescription && (edit || localDescription)" + v-if="size !== 'hide' && !hideDescription && (edit || localDescription || showDescription)" class="description-container" :class="{ '-static': !edit }" > @@ -83,6 +83,7 @@ v-if="type === 'flash' && flashLoaded" class="button-unstyled attachment-button" @click.prevent="stopFlash" + :title="$t('status.attachment_stop_flash')" > <FAIcon icon="stop" /> </button> @@ -98,6 +99,7 @@ v-if="!useModal" class="button-unstyled attachment-button" @click.prevent="openModalForce" + :title="$t('status.show_attachment_in_modal')" > <FAIcon icon="search-plus" /> </button> @@ -105,13 +107,31 @@ v-if="nsfw && hideNsfwLocal" class="button-unstyled attachment-button" @click.prevent="toggleHidden" + :title="$t('status.hide_attachment')" > <FAIcon icon="times" /> </button> <button + v-if="shiftUp" + class="button-unstyled attachment-button" + @click.prevent="onShiftUp" + :title="$t('status.move_up')" + > + <FAIcon icon="chevron-left" /> + </button> + <button + v-if="shiftDn" + class="button-unstyled attachment-button" + @click.prevent="onShiftDn" + :title="$t('status.move_down')" + > + <FAIcon icon="chevron-right" /> + </button> + <button v-if="remove" class="button-unstyled attachment-button" @click.prevent="onRemove" + :title="$t('status.remove_attachment')" > <FAIcon icon="trash-alt" /> </button> @@ -209,7 +229,7 @@ </span> </div> <div - v-if="size !== 'hide' && !hideDescription && (edit || localDescription)" + v-if="size !== 'hide' && !hideDescription && (edit || (localDescription && showDescription))" class="description-container" :class="{ '-static': !edit }" > diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js @@ -12,6 +12,8 @@ const Gallery = { 'size', 'editable', 'removeAttachment', + 'shiftUpAttachment', + 'shiftDnAttachment', 'editAttachment', 'grid' ], diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue @@ -6,8 +6,8 @@ > <div class="gallery-rows"> <div - v-for="(row, index) in rows" - :key="index" + v-for="(row, rowIndex) in rows" + :key="rowIndex" class="gallery-row" :style="rowStyle(row)" :class="{ '-audio': row.audio, '-minimal': row.minimal, '-grid': grid }" @@ -16,8 +16,8 @@ class="gallery-row-inner" :class="{ '-grid': grid }" > - <attachment - v-for="attachment in row.items" + <Attachment + v-for="(attachment, attachmentIndex) in row.items" :key="attachment.id" class="gallery-item" :nsfw="nsfw" @@ -26,6 +26,8 @@ :size="size" :editable="editable" :remove="removeAttachment" + :shiftUp="!(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment" + :shiftDn="!(attachmentIndex === row.items.length - 1 && rowIndex === rows.length - 1) && shiftDnAttachment" :edit="editAttachment" :description="descriptions && descriptions[attachment.id]" :hide-description="size === 'small' || tooManyAttachments && hidingLong" diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js @@ -391,9 +391,20 @@ const PostStatusForm = { this.$emit('resize') }, editAttachment (fileInfo, newText) { - console.log(fileInfo, newText) this.newStatus.mediaDescriptions[fileInfo.id] = newText }, + shiftUpMediaFile (fileInfo) { + const { files } = this.newStatus + const index = this.newStatus.files.indexOf(fileInfo) + files.splice(index, 1) + files.splice(index - 1, 0, fileInfo) + }, + shiftDnMediaFile (fileInfo) { + const { files } = this.newStatus + const index = this.newStatus.files.indexOf(fileInfo) + files.splice(index, 1) + files.splice(index + 1, 0, fileInfo) + }, uploadFailed (errString, templateArgs) { templateArgs = templateArgs || {} this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs) diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue @@ -298,6 +298,8 @@ :editable="true" :edit-attachment="editAttachment" :remove-attachment="removeMediaFile" + :shift-up-attachment="newStatus.files.length > 1 && shiftUpMediaFile" + :shift-dn-attachment="newStatus.files.length > 1 && shiftDnMediaFile" @play="$emit('mediaplay', attachment.id)" @pause="$emit('mediapause', attachment.id)" /> diff --git a/src/i18n/en.json b/src/i18n/en.json @@ -721,6 +721,13 @@ "many_attachments": "Post has {number} attachment(s)", "collapse_attachments": "Collapse attachments", "show_all_attachments": "Show all attachments", + "show_attachment_in_modal": "Show in media modal", + "show_attachment_description": "Preview description (open attachment for full description)", + "hide_attachment": "Hide attachment", + "remove_attachment": "Remove attachment", + "attachment_stop_flash": "Stop Flash player", + "move_up": "Shift attachment left", + "move_down": "Shift attachment right", "open_gallery": "Open gallery" }, "user_card": {