diff --git a/src/components/bookmark_folder_edit/bookmark_folder_edit.js b/src/components/bookmark_folder_edit/bookmark_folder_edit.js index 8c5d3cfd4fff301a734f5ebec95c3de9893dd7af..95c015764518523cd1ee4b605d941f66676a1595 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 30bbde09342b0a6deca9c738edb87e918aa1e304..b6a768d414fa18a6612687d1e8863748d5f3fdb9 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 @@ </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 { diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 9ea5c877add16ca1fe55ca90756323241121566c..d3d6563ab96c94df4229fa30f08a5c3c3eadd3f3 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 5a9bee32ddfe62c4caeba2c073af99e72535a97f..cc55a6d024e17cd1f8b89ac20a9a1aca30edf101 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 5dde58a7b581ba5cf539936087ff78db2cc3d644..c276adf4b023f4830b79f4a985c855ce81874fae 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 }) {