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
@@ -29,22 +29,45 @@
@@ -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 {
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
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 5a9bee32..cc55a6d0 100644
--- a/src/i18n/en.json
+++ b/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",
- "update_folder": "Save changes"
+ "error": "Error manipulating bookmark folders: {0}"
}
}
diff --git a/src/modules/bookmark_folders.js b/src/modules/bookmark_folders.js
index 5dde58a7..c276adf4 100644
--- a/src/modules/bookmark_folders.js
+++ b/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 }) {