Merge remote-tracking branch 'origin/develop' into misc-style-fixes-or-changes

+ better comment

src/components/settings_modal/admin_tabs/emoji_tab.js

@@ -145,9 +145,9 @@ const EmojiTab = {
       })
     },
 
-    updatePackFiles (newFiles) {
-      this.pack.files = newFiles
-      this.sortPackFiles(this.packName)
+    updatePackFiles (newFiles, packName) {
+      this.knownPacks[packName].files = newFiles
+      this.sortPackFiles(packName)
     },
 
     loadPacksPaginated (listFunction) {

src/components/settings_modal/admin_tabs/emoji_tab.vue

@@ -387,11 +387,12 @@
               ref="emojiPopovers"
               :key="shortcode"
               placement="top"
-              :title="$t('admin_dash.emoji.editing', [shortcode])"
-              :disabled="pack.remote !== undefined"
+              :title="$t(`admin_dash.emoji.${pack.remote === undefined ? 'editing' : 'copying'}`, [shortcode])"
               :shortcode="shortcode"
               :file="file"
               :pack-name="packName"
+              :remote="pack.remote"
+              :known-local-packs="knownLocalPacks"
               @update-pack-files="updatePackFiles"
               @display-error="displayError"
             >

src/components/settings_modal/helpers/emoji_editing_popover.vue

@@ -7,7 +7,6 @@
     popover-class="emoji-tab-edit-popover popover-default"
     :bound-to="{ x: 'container' }"
     :offset="{ y: 5 }"
-    :disabled="disabled"
     :class="{'emoji-unsaved': isEdited}"
   >
     <template #trigger>
@@ -28,17 +27,26 @@
         class="emoji"
       />
 
-      <div
-        v-if="newUpload"
-        class="emoji-tab-popover-input"
-      >
-        <input
-          type="file"
-          accept="image/*"
-          class="emoji-tab-popover-file input"
-          @change="uploadFile = $event.target.files"
-        >
+      <div v-if="newUpload" class="emoji-tab-popover-new-upload">
+        <h4>{{ $t('admin_dash.emoji.emoji_source') }}</h4>
+
+        <div class="emoji-tab-popover-input">
+          <input
+            type="file"
+            accept="image/*"
+            class="emoji-tab-popover-file input"
+            @change="uploadFile = $event.target.files"
+          >
+        </div>
+        <div class="emoji-tab-popover-input ">
+          <input
+            v-model="uploadURL"
+            :placeholder="$t('admin_dash.emoji.upload_url')"
+            class="emoji-data-input input"
+          >
+        </div>
       </div>
+
       <div>
         <div class="emoji-tab-popover-input">
           <label>
@@ -63,16 +71,50 @@
           </label>
         </div>
 
+        <div
+          v-if="remote !== undefined"
+          class="emoji-tab-popover-input"
+        >
+          <label>
+            {{ $t('admin_dash.emoji.copy_to') }}
+
+            <SelectComponent
+              v-model="copyToPack"
+              class="form-control"
+            >
+              <option
+                value=""
+                disabled
+                hidden
+              >
+                {{ $t('admin_dash.emoji.emoji_pack') }}
+              </option>
+              <option
+                v-for="(pack, listPackName) in knownLocalPacks"
+                :key="listPackName"
+                :label="listPackName"
+              >
+                {{ listPackName }}
+              </option>
+            </SelectComponent>
+          </label>
+        </div>
+
+        <!--
+             For local emojis, disable the button if nothing was edited.
+             For remote emojis, also disable it if a local pack is not selected.
+             Remote emojis are processed by the same function that uploads new ones, as that is effectively what it does
+        -->
         <button
           class="button button-default btn"
           type="button"
-          :disabled="newUpload ? uploadFile.length == 0 : !isEdited"
-          @click="newUpload ? uploadEmoji() : saveEditedEmoji()"
+          :disabled="saveButtonDisabled"
+          @click="(newUpload || remote !== undefined) ? uploadEmoji() : saveEditedEmoji()"
         >
           {{ $t('admin_dash.emoji.save') }}
         </button>
 
-        <template v-if="!newUpload">
+        <template v-if="!newUpload && remote === undefined">
           <button
             class="button button-default btn emoji-tab-popover-button"
             type="button"
@@ -107,19 +149,16 @@
 import Popover from 'components/popover/popover.vue'
 import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
 import StillImage from 'components/still-image/still-image.vue'
+import SelectComponent from 'components/select/select.vue'
 
 export default {
-  components: { Popover, ConfirmModal, StillImage },
+  components: { Popover, ConfirmModal, StillImage, SelectComponent },
   inject: ['emojiAddr'],
   props: {
     placement: {
       type: String,
       required: true
     },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
 
     newUpload: Boolean,
 
@@ -140,21 +179,35 @@ export default {
       type: String,
       // Only exists when this is not a new upload
       default: ''
+    },
+
+    // Only exists for emojis from remote packs
+    remote: {
+      type: Object,
+      default: undefined
+    },
+    knownLocalPacks: {
+      type: Object,
+      default: undefined
     }
   },
   emits: ['updatePackFiles', 'displayError'],
   data () {
     return {
       uploadFile: [],
+      uploadURL: '',
       editedShortcode: this.shortcode,
       editedFile: this.file,
-      deleteModalVisible: false
+      deleteModalVisible: false,
+      copyToPack: ''
     }
   },
   computed: {
     emojiPreview () {
       if (this.newUpload && this.uploadFile.length > 0) {
         return URL.createObjectURL(this.uploadFile[0])
+      } else if (this.newUpload && this.uploadURL !== '') {
+        return this.uploadURL
       } else if (!this.newUpload) {
         return this.emojiAddr(this.file)
       }
@@ -163,6 +216,12 @@ export default {
     },
     isEdited () {
       return !this.newUpload && (this.editedShortcode !== this.shortcode || this.editedFile !== this.file)
+    },
+    saveButtonDisabled() {
+      if (this.remote === undefined)
+        return this.newUpload ? (this.uploadURL === "" && this.uploadFile.length == 0) : !this.isEdited
+      else
+        return this.copyToPack === ""
     }
   },
   methods: {
@@ -181,9 +240,12 @@ export default {
       }).then(resp => this.$emit('updatePackFiles', resp))
     },
     uploadEmoji () {
+      let packName = this.remote === undefined ? this.packName : this.copyToPack
       this.$store.state.api.backendInteractor.addNewEmojiFile({
-        packName: this.packName,
-        file: this.uploadFile[0],
+        packName: packName,
+        file: this.remote === undefined
+            ? (this.uploadURL !== "" ? this.uploadURL : this.uploadFile[0])
+            : this.emojiAddr(this.file),
         shortcode: this.editedShortcode,
         filename: this.editedFile
       }).then(resp => resp.json()).then(resp => {
@@ -192,7 +254,7 @@ export default {
           return
         }
 
-        this.$emit('updatePackFiles', resp)
+        this.$emit('updatePackFiles', resp, packName)
         this.$refs.emojiPopover.hidePopover()
 
         this.editedFile = ''
@@ -215,7 +277,7 @@ export default {
           return
         }
 
-        this.$emit('updatePackFiles', resp)
+        this.$emit('updatePackFiles', resp, this.packName)
       })
     }
   }
@@ -228,9 +290,22 @@ export default {
     padding-right: 0.5em;
     padding-bottom: 0.5em;
 
+    .emoji-tab-popover-new-upload {
+      margin-bottom: 2em;
+    }
+
     .emoji {
       width: 2.3em;
       height: 2.3em;
     }
+
+    .Select {
+      display: inline-block;
+    }
+
+    h4 {
+      margin-bottom: 1em;
+      margin-top: 1em;
+    }
   }
 </style>