Allow to change bookmark folder emoji

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

3 files changed, 106 insertions, 18 deletions

diff --git a/src/components/bookmark_folder_edit/bookmark_folder_edit.js b/src/components/bookmark_folder_edit/bookmark_folder_edit.js
index 8c5d3cfd..95c01576 100644
--- a/src/components/bookmark_folder_edit/bookmark_folder_edit.js
+++ b/src/components/bookmark_folder_edit/bookmark_folder_edit.js
@@ -1,3 +1,4 @@
+import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import apiService from '../../services/api/api.service'
 
 const BookmarkFolderEdit = {
@@ -9,9 +10,13 @@ const BookmarkFolderEdit = {
       emojiUrl: null,
       emojiDraft: '',
       emojiUrlDraft: null,
+      emojiPickerExpanded: false,
       reallyDelete: false
     }
   },
+  components: {
+    EmojiPicker
+  },
   created () {
     if (!this.id) return
     const credentials = this.$store.state.users.currentUser.credentials
@@ -31,20 +36,30 @@ const BookmarkFolderEdit = {
     }
   },
   methods: {
+    selectEmoji (event) {
+      this.emojiDraft = event.insertion
+      this.emojiUrlDraft = event.insertionUrl
+    },
+    showEmojiPicker () {
+      if (!this.emojiPickerExpanded) {
+        this.$refs.picker.showPicker()
+      }
+    },
+    onShowPicker () {
+      this.emojiPickerExpanded = true
+    },
+    onClosePicker () {
+      this.emojiPickerExpanded = false
+    },
     updateFolder () {
       this.$store.dispatch('setBookmarkFolder', { folderId: this.id, name: this.nameDraft, emoji: this.emojiDraft })
-        .then((folder) => {
-          this.nameDraft = this.name = folder.name
-          this.emojiDraft = this.emoji = folder.emoji
-          this.emojiUrlDraft = this.emojiUrl = folder.emoji_url
+        .then(() => {
+          this.$router.push({ name: 'bookmark-folders' })
         })
     },
     createFolder () {
       this.$store.dispatch('createBookmarkFolder', { name: this.nameDraft, emoji: this.emojiDraft })
-        .then((folder) => {
-          return folder.id
-        })
-        .then((folderId) => {
+        .then(() => {
           this.$router.push({ name: 'bookmark-folders' })
         })
         .catch((e) => {
diff --git a/src/components/bookmark_folder_edit/bookmark_folder_edit.vue b/src/components/bookmark_folder_edit/bookmark_folder_edit.vue
index 30bbde09..b6a768d4 100644
--- a/src/components/bookmark_folder_edit/bookmark_folder_edit.vue
+++ b/src/components/bookmark_folder_edit/bookmark_folder_edit.vue
@@ -30,21 +30,44 @@
     </div>
     <div class="panel-body">
       <div class="input-wrap">
+        <label for="folder-edit-title">{{ $t('bookmark_folders.emoji') }}</label>
+        <button
+          class="input input-emoji"
+          :title="$t('bookmark_folder.emoji_pick')"
+          @click="showEmojiPicker"
+        >
+          <img
+            v-if="emojiUrlDraft"
+            class="iconEmoji iconEmoji-image"
+            :src="emojiUrlDraft"
+            :alt="emojiDraft"
+            :title="emojiDraft"
+          >
+          <span
+            v-else-if="emojiDraft"
+            class="iconEmoji"
+          >
+            <span>
+              {{ emojiDraft }}
+            </span>
+          </span>
+        </button>
+        <EmojiPicker
+          ref="picker"
+          class="emoji-picker-panel"
+          @emoji="selectEmoji"
+          @show="onShowPicker"
+          @close="onClosePicker"
+        />
+      </div>
+      <div class="input-wrap">
         <label for="folder-edit-title">{{ $t('bookmark_folders.name') }}</label>
-        {{ ' ' }}
         <input
           id="folder-edit-title"
           ref="name"
           v-model="nameDraft"
           class="input"
         >
-        <button
-          v-if="id"
-          class="btn button-default follow-button"
-          @click="updateFolder"
-        >
-          {{ $t('bookmark_folders.update_folder') }}
-        </button>
       </div>
     </div>
     <div class="panel-footer">
@@ -78,6 +101,16 @@
           {{ $t('general.no') }}
         </button>
       </template>
+      <div
+        v-if="id && !reallyDelete"
+      >
+        <button
+          class="btn button-default follow-button"
+          @click="updateFolder"
+        >
+          {{ $t('bookmark_folders.update_folder') }}
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -98,8 +131,48 @@
 
   .panel-body {
     display: flex;
+    gap: 0.5em;
+  }
+
+  .emoji-picker-panel {
+    position: absolute;
+    z-index: 20;
+    margin-top: 2px;
+
+    &.hide {
+      display: none;
+    }
+  }
+
+  .input-emoji {
+    height: 2.5em;
+    width: 2.5em;
+    padding: 0;
+
+    .iconEmoji {
+      display: inline-block;
+      text-align: center;
+      object-fit: contain;
+      vertical-align: middle;
+      height: 2.5em;
+      width: 2.5em;
+
+      > span {
+        font-size: 1.5rem;
+        line-height: 2.5rem;
+      }
+    }
+
+    img.iconEmoji {
+      padding: 0.25em;
+      box-sizing: border-box;
+    }
+  }
+
+  .input-wrap {
+    display: flex;
     flex-direction: column;
-    overflow: hidden;
+    gap: 0.5em;
   }
 
   .go-back-button {
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 9ea5c877..d3d6563a 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -180,7 +180,7 @@ const EmojiPicker = {
       if (!this.keepOpen) {
         this.$refs.popover.hidePopover()
       }
-      this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
+      this.$emit('emoji', { insertion: value, insertionUrl: emoji.imageUrl, keepOpen: this.keepOpen })
     },
     onScroll (startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
       const target = this.$refs['emoji-groups'].$el