commit: 9f0fc431dc6f6b1405b5e4e9d78bd366f5f4c806
parent 2b6de423d5a02413924f18910b1ce3538a5a1625
Author: marcin mikołajczak <git@mkljczk.pl>
Date: Thu, 26 Sep 2024 01:58:52 +0200
Allow to change bookmark folder emoji
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
Diffstat:
5 files changed, 115 insertions(+), 26 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 }) {
