From 091532d577ae9a23f7a43f681bfd344f040c7738 Mon Sep 17 00:00:00 2001 From: Ekaterina Vaartis Date: Sun, 7 Jan 2024 02:45:49 +0300 Subject: [PATCH] Editing emojis in popover, pack creation/deletion Also fixed some API calls since they weren't working apparently --- .../settings_modal/admin_tabs/emoji_tab.js | 117 ++++++++-- .../settings_modal/admin_tabs/emoji_tab.scss | 22 ++ .../settings_modal/admin_tabs/emoji_tab.vue | 206 ++++++++++++------ .../settings_modal_admin_content.vue | 2 +- src/services/api/api.service.js | 14 +- 5 files changed, 272 insertions(+), 89 deletions(-) diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js index f9d3b24e0c..874d1c3bb6 100644 --- a/src/components/settings_modal/admin_tabs/emoji_tab.js +++ b/src/components/settings_modal/admin_tabs/emoji_tab.js @@ -1,20 +1,46 @@ +import { clone } from 'lodash' import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' import StringSetting from '../helpers/string_setting.vue' import Checkbox from 'components/checkbox/checkbox.vue' import StillImage from 'components/still-image/still-image.vue' +import Select from 'components/select/select.vue' +import Popover from 'components/popover/popover.vue' +import ConfirmModal from 'components/confirm_modal/confirm_modal.vue' +import ModifiedIndicator from '../helpers/modified_indicator.vue' const EmojiTab = { components: { TabSwitcher, StringSetting, Checkbox, - StillImage + StillImage, + Select, + Popover, + ConfirmModal, + ModifiedIndicator }, data () { return { knownPacks: { }, - editedParts: { } + editedParts: { }, + editedMetadata: { }, + packName: '', + newPackName: '', + deleteModalVisible: false + } + }, + + computed: { + pack () { + return this.packName !== '' ? this.knownPacks[this.packName] : undefined + }, + packMeta () { + if (this.editedMetadata[this.packName] === undefined) { + this.editedMetadata[this.packName] = clone(this.knownPacks[this.packName].pack) + } + + return this.editedMetadata[this.packName] } }, @@ -25,37 +51,90 @@ const EmojiTab = { importFromFS () { this.$store.state.api.backendInteractor.importEmojiFromFS() }, - emojiAddr (packName, name) { - return `${this.$store.state.instance.server}/emoji/${encodeURIComponent(packName)}/${name}` + emojiAddr (name) { + return `${this.$store.state.instance.server}/emoji/${encodeURIComponent(this.packName)}/${name}` }, - editEmoji (packName, shortcode) { - if (this.editedParts[packName] === undefined) { this.editedParts[packName] = {} } - this.editedParts[packName][shortcode] = { - shortcode, file: this.knownPacks[packName].files[shortcode] + createEmojiPack () { + this.$store.state.api.backendInteractor.createEmojiPack( + { name: this.newPackName } + ).then(resp => resp.json()).then(resp => { + if (resp === 'ok') { + return this.refreshPackList() + } else { + return Promise.reject(resp) + } + }).then(done => { + this.$refs.createPackPopover.hidePopover() + + this.packName = this.newPackName + this.newPackName = '' + }) + }, + deleteEmojiPack () { + this.$store.state.api.backendInteractor.deleteEmojiPack( + { name: this.packName } + ).then(resp => resp.json()).then(resp => { + if (resp === 'ok') { + return this.refreshPackList() + } else { + return Promise.reject(resp) + } + }).then(done => { + delete this.editedMetadata[this.packName] + delete this.editedParts[this.packName] + + this.deleteModalVisible = false + this.packName = '' + }) + }, + + metaEdited (prop) { + return this.pack && this.packMeta[prop] !== this.pack.pack[prop] + }, + savePackMetadata () { + this.$store.state.api.backendInteractor.saveEmojiPackMetadata({ name: this.packName, newData: this.packMeta }).then( + resp => resp.json() + ).then(resp => { + // Update actual pack data + this.pack.pack = resp + // Delete edited pack data, should auto-update itself + delete this.editedMetadata[this.packName] + }) + }, + + editEmoji (shortcode) { + if (this.editedParts[this.packName] === undefined) { this.editedParts[this.packName] = {} } + + if (this.editedParts[this.packName][shortcode] === undefined) { + this.editedParts[this.packName][shortcode] = { + shortcode, file: this.knownPacks[this.packName].files[shortcode] + } } }, - saveEditedEmoji (packName, shortcode) { - const edited = this.editedParts[packName][shortcode] + saveEditedEmoji (shortcode) { + const edited = this.editedParts[this.packName][shortcode] this.$store.state.api.backendInteractor.updateEmojiFile( - { packName, shortcode, newShortcode: edited.shortcode, newFilename: edited.file, force: false } + { packName: this.packName, shortcode, newShortcode: edited.shortcode, newFilename: edited.file, force: false } ).then(resp => resp.ok ? resp.json() : resp.text().then(respText => Promise.reject(respText)) ).then(resp => { - this.knownPacks[packName].files = resp - delete this.editedParts[packName][shortcode] + this.knownPacks[this.packName].files = resp + delete this.editedParts[this.packName][shortcode] }) + }, + refreshPackList () { + return this.$store.state.api.backendInteractor.listEmojiPacks() + .then(data => data.json()) + .then(packData => { + this.knownPacks = packData.packs + }) } }, mounted () { - this.$store.state.api.backendInteractor.listEmojiPacks() - .then(data => data.json()) - .then(packData => { - this.knownPacks = packData.packs - console.log(this.knownPacks) - }) + this.refreshPackList() } } diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss index 397580af40..89bf2f7f17 100644 --- a/src/components/settings_modal/admin_tabs/emoji_tab.scss +++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss @@ -1,3 +1,5 @@ +@import "src/variables"; + .emoji-tab { .btn-group .btn { margin-left: 0.5em; @@ -21,4 +23,24 @@ width: 32px; height: 32px; } + + .emoji-unsaved { + box-shadow: 2px 3px 5px var(--cBlue, $fallback--cBlue); + } + + .emoji-list { + display: flex; + flex-wrap: wrap; + gap: 1em 1em; + } +} + +.emoji-tab-edit-popover { + padding-left: 0.5em; + padding-right: 0.5em; + padding-bottom: 0.5em; +} + +.emoji-tab-popover-button { + margin-left: 0.5em; } diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue index 699e4afe6c..534f881a44 100644 --- a/src/components/settings_modal/admin_tabs/emoji_tab.vue +++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue @@ -6,84 +6,166 @@

{{ $t('admin_dash.tabs.emoji') }}

- - - - +