diff options
Diffstat (limited to 'src/components')
5 files changed, 190 insertions, 1 deletions
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js new file mode 100644 index 00000000..f9d3b24e --- /dev/null +++ b/src/components/settings_modal/admin_tabs/emoji_tab.js @@ -0,0 +1,62 @@ +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' + +const EmojiTab = { + components: { + TabSwitcher, + StringSetting, + Checkbox, + StillImage + }, + + data () { + return { + knownPacks: { }, + editedParts: { } + } + }, + + methods: { + reloadEmoji () { + this.$store.state.api.backendInteractor.reloadEmoji() + }, + importFromFS () { + this.$store.state.api.backendInteractor.importEmojiFromFS() + }, + emojiAddr (packName, name) { + return `${this.$store.state.instance.server}/emoji/${encodeURIComponent(packName)}/${name}` + }, + editEmoji (packName, shortcode) { + if (this.editedParts[packName] === undefined) { this.editedParts[packName] = {} } + + this.editedParts[packName][shortcode] = { + shortcode, file: this.knownPacks[packName].files[shortcode] + } + }, + saveEditedEmoji (packName, shortcode) { + const edited = this.editedParts[packName][shortcode] + + this.$store.state.api.backendInteractor.updateEmojiFile( + { 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] + }) + } + }, + + mounted () { + this.$store.state.api.backendInteractor.listEmojiPacks() + .then(data => data.json()) + .then(packData => { + this.knownPacks = packData.packs + console.log(this.knownPacks) + }) + } +} + +export default EmojiTab diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss new file mode 100644 index 00000000..397580af --- /dev/null +++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss @@ -0,0 +1,24 @@ +.emoji-tab { + .btn-group .btn { + margin-left: 0.5em; + } + + .pack-info-wrapper { + margin-top: 1em; + } + + .emoji-info-input { + width: 100%; + } + + .emoji-data-input { + width: 40%; + margin-left: 0.5em; + margin-right: 0.5em; + } + + .emoji { + width: 32px; + height: 32px; + } +} diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue new file mode 100644 index 00000000..699e4afe --- /dev/null +++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue @@ -0,0 +1,93 @@ +<template> + <div + class="emoji-tab" + :label="$t('admin_dash.tabs.emoji')" + > + <div class="setting-item"> + <h2>{{ $t('admin_dash.tabs.emoji') }}</h2> + + <span class="btn-group"> + <button + class="button button-default btn" + type="button" + @click="reloadEmoji"> + {{ $t('admin_dash.emoji.reload') }} + </button> + <button + class="button button-default btn" + type="button" + @click="importFromFS"> + {{ $t('admin_dash.emoji.importFS') }} + </button> + </span> + + <tab-switcher :scrollable-tabs="true" v-if="Object.keys(knownPacks).length > 0"> + <div v-for="(pack, packName) in knownPacks" :label="packName" :key="packName"> + <div class="pack-info-wrapper"> + <ul class="setting-list"> + <li> + <div>Description</div> + <textarea + v-model="pack.pack.description" + class="bio resize-height" /> + </li> + <li> + <div>Homepage</div> + <input class="emoji-info-input" v-model="pack.pack.homepage"> + </li> + <li> + <div>Fallback source</div> + <input class="emoji-info-input" v-model="pack.pack['fallback-src']"> + </li> + <li> + <Checkbox v-model="pack.pack['can-download']">Downloadable</Checkbox> + </li> + </ul> + </div> + + <h2>Files</h2> + + <ul class="setting-list"> + <li v-for="(file, shortcode) in pack.files" :key="shortcode"> + <StillImage + class="emoji img" + :src="emojiAddr(packName, file)" + :title="`:${shortcode}:`" + :alt="`:${shortcode}:`" + /> + + <template v-if="editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined"> + <input class="emoji-data-input" + v-model="editedParts[packName][shortcode].shortcode"> + <input class="emoji-data-input" + v-model="editedParts[packName][shortcode].file"> + + <button + class="button button-default btn" + type="button" + @click="saveEditedEmoji(packName, shortcode)"> + Save + </button> + </template> + <template v-else> + <input disabled class="emoji-data-input" :value="shortcode"> + <input disabled class="emoji-data-input" :value="file"> + + <button + class="button button-default btn" + type="button" + @click="editEmoji(packName, shortcode)"> + Edit + </button> + </template> + </li> + </ul> + </div> + </tab-switcher> + </div> + </div> +</template> + +<script src="./emoji_tab.js"></script> + +<style lang="scss" src="./emoji_tab.scss"></style> diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js index f94721ec..ce835bf2 100644 --- a/src/components/settings_modal/settings_modal_admin_content.js +++ b/src/components/settings_modal/settings_modal_admin_content.js @@ -3,6 +3,7 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' import InstanceTab from './admin_tabs/instance_tab.vue' import LimitsTab from './admin_tabs/limits_tab.vue' import FrontendsTab from './admin_tabs/frontends_tab.vue' +import EmojiTab from './admin_tabs/emoji_tab.vue' import { library } from '@fortawesome/fontawesome-svg-core' import { @@ -33,7 +34,8 @@ const SettingsModalAdminContent = { InstanceTab, LimitsTab, - FrontendsTab + FrontendsTab, + EmojiTab }, computed: { user () { diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue index a7a2ac9a..ba2d0a30 100644 --- a/src/components/settings_modal/settings_modal_admin_content.vue +++ b/src/components/settings_modal/settings_modal_admin_content.vue @@ -60,6 +60,14 @@ > <FrontendsTab /> </div> + + <div + :label="$t('admin_dash.tabs.emoji')" + icon="laptop-code" + data-tab-name="emoji" + > + <EmojiTab /> + </div> </tab-switcher> </template> |