Allow to change bookmark folder emoji

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

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) => {
+        .then(() => {
-          this.nameDraft = this.name = folder.name
+          this.$router.push({ name: 'bookmark-folders' })
-          this.emojiDraft = this.emoji = folder.emoji
-          this.emojiUrlDraft = this.emojiUrl = folder.emoji_url
         })
     },
     createFolder () {
       this.$store.dispatch('createBookmarkFolder', { name: this.nameDraft, emoji: this.emojiDraft })
-        .then((folder) => {
+        .then(() => {
-          return folder.id
-        })
-        .then((folderId) => {
           this.$router.push({ name: 'bookmark-folders' })
         })
         .catch((e) => {

src/components/bookmark_folder_edit/bookmark_folder_edit.vue

@@ -29,22 +29,45 @@
       </div>
     </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>
@@ -97,9 +130,49 @@
   }
 
   .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 {

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

src/i18n/en.json

@@ -1409,15 +1409,16 @@
     "tooltip": "This domain contains non-ascii characters."
   },
   "bookmark_folders": {
-    "create": "Create folder",
+    "select_folder": "Select bookmark folder",
     "creating_folder": "Creating bookmark folder",
-    "delete": "Delete folder",
     "editing_folder": "Editing folder {folderName}",
-    "error": "Error manipulating bookmark folders: {0}",
+    "emoji": "Emoji",
     "name": "Folder name",
     "new": "New Folder",
+    "create": "Create folder",
+    "delete": "Delete folder",
+    "update_folder": "Save changes",
     "really_delete": "Do you really want to delete the folder?",
-    "select_folder": "Select bookmark folder",
+    "error": "Error manipulating bookmark folders: {0}"
-    "update_folder": "Save changes"
   }
 }

src/modules/bookmark_folders.js

@@ -8,14 +8,14 @@ export const mutations = {
   setBookmarkFolders (state, value) {
     state.allFolders = value
   },
-  setBookmarkFolder (state, { id, name, emoji, emojiUrl }) {
+  setBookmarkFolder (state, { id, name, emoji, emoji_url: emojiUrl }) {
     const entry = find(state.allFolders, { id })
     if (!entry) {
-      state.allFolders.push({ id, name, emoji, emojiUrl })
+      state.allFolders.push({ id, name, emoji, emoji_url: emojiUrl })
     } else {
       entry.name = name
       entry.emoji = emoji
-      entry.emojiUrl = emojiUrl
+      entry.emoji_url = emojiUrl
     }
   },
   deleteBookmarkFolder (state, { folderId }) {