From 0507eb6550830f7b76910d51200675de0aa9b1de Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 15 Aug 2021 21:04:49 +0300
Subject: [PATCH] ability to move attachments around when making a new post

---
 src/components/attachment/attachment.js       |  8 +++++++
 src/components/attachment/attachment.vue      | 24 +++++++++++++++++--
 src/components/gallery/gallery.js             |  2 ++
 src/components/gallery/gallery.vue            | 10 ++++----
 .../post_status_form/post_status_form.js      | 13 +++++++++-
 .../post_status_form/post_status_form.vue     |  2 ++
 src/i18n/en.json                              |  7 ++++++
 7 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index fea7c6f8..f9c8d981 100644
--- 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
index 82a72a8d..4abf63dd 100644
--- 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
index 15436d61..094b3e57 100644
--- 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
index 18b94d58..f9cad8a9 100644
--- 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
index 1a12db9c..fe07309f 100644
--- 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
index 87e6d2ab..2e0980a2 100644
--- 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
index a4f24c64..0ccd0da7 100644
--- 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": {