diff options
Diffstat (limited to 'src/components/settings_modal/admin_tabs/emoji_tab.vue')
| -rw-r--r-- | src/components/settings_modal/admin_tabs/emoji_tab.vue | 278 |
1 files changed, 278 insertions, 0 deletions
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..5231f860 --- /dev/null +++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue @@ -0,0 +1,278 @@ +<template> + <div + class="emoji-tab" + :label="$t('admin_dash.tabs.emoji')" + > + <div class="setting-item"> + <h2>{{ $t('admin_dash.tabs.emoji') }}</h2> + + <ul class="setting-list"> + <h3>{{ $t('admin_dash.emoji.global_actions') }}</h3> + + <li class="btn-group setting-item"> + <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> + </li> + + <li class="btn-group setting-item"> + <button + class="button button-default btn" + type="button" + @click="$refs.remotePackPopover.showPopover"> + {{ $t('admin_dash.emoji.remote_packs') }} + + <Popover + ref="remotePackPopover" + popover-class="emoji-tab-edit-popover popover-default" + trigger="click" + placement="bottom" + bound-to-selector=".emoji-tab" + :bound-to="{ x: 'container' }" + :offset="{ y: 5 }" + > + <template #content> + <div class="emoji-tab-popover-input"> + <h3>{{ $t('admin_dash.emoji.remote_pack_instance') }}</h3> + <input v-model="remotePackInstance" :placeholder="$t('admin_dash.emoji.remote_pack_instance')"> + <button + class="button button-default btn emoji-tab-popover-button" + type="button" + @click="listRemotePacks"> + {{ $t('admin_dash.emoji.do_list') }} + </button> + </div> + </template> + </Popover> + </button> + </li> + + <h3>{{ $t('admin_dash.emoji.emoji_packs') }}</h3> + + <li> + <h4>{{ $t('admin_dash.emoji.edit_pack') }}</h4> + + <Select class="form-control" v-model="packName"> + <option value="" disabled hidden>{{ $t('admin_dash.emoji.emoji_pack') }}</option> + <option v-for="(pack, listPackName) in knownPacks" :label="listPackName" :key="listPackName"> + {{ listPackName }} + </option> + </Select> + + <button + class="button button-default btn emoji-tab-popover-button" + type="button" + @click="$refs.createPackPopover.showPopover"> + {{ $t('admin_dash.emoji.create_pack') }} + </button> + <Popover + ref="createPackPopover" + popover-class="emoji-tab-edit-popover popover-default" + trigger="click" + placement="bottom" + bound-to-selector=".emoji-tab" + :bound-to="{ x: 'container' }" + :offset="{ y: 5 }" + > + <template #content> + <div class="emoji-tab-popover-input"> + <h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3> + <input v-model="newPackName" :placeholder="$t('admin_dash.emoji.new_pack_name')"> + <button + class="button button-default btn emoji-tab-popover-button" + type="button" + @click="createEmojiPack"> + {{ $t('admin_dash.emoji.create') }} + </button> + </div> + </template> + </Popover> + </li> + </ul> + + <div v-if="pack"> + <div class="pack-info-wrapper"> + <ul class="setting-list"> + <li> + <label> + {{ $t('admin_dash.emoji.description') }} + <ModifiedIndicator :changed="metaEdited('description')" message-key="admin_dash.emoji.metadata_changed" /> + + <textarea + v-model="packMeta.description" + :disabled="pack.remote !== undefined" + class="bio resize-height" /> + </label> + </li> + <li> + <label> + {{ $t('admin_dash.emoji.homepage') }} + <ModifiedIndicator :changed="metaEdited('homepage')" message-key="admin_dash.emoji.metadata_changed" /> + + <input + class="emoji-info-input" v-model="packMeta.homepage" + :disabled="pack.remote !== undefined"> + </label> + </li> + <li> + <label> + {{ $t('admin_dash.emoji.fallback_src') }} + <ModifiedIndicator :changed="metaEdited('fallback-src')" message-key="admin_dash.emoji.metadata_changed" /> + + <input class="emoji-info-input" v-model="packMeta['fallback-src']" :disabled="pack.remote !== undefined"> + </label> + </li> + <li> + <label> + {{ $t('admin_dash.emoji.fallback_sha256') }} + + <input :disabled="true" class="emoji-info-input" v-model="packMeta['fallback-src-sha256']"> + </label> + </li> + <li> + <Checkbox :disabled="pack.remote !== undefined" v-model="packMeta['share-files']"> + {{ $t('admin_dash.emoji.share') }} + </Checkbox> + + <ModifiedIndicator :changed="metaEdited('share-files')" message-key="admin_dash.emoji.metadata_changed" /> + </li> + <li class="btn-group"> + <button + class="button button-default btn" + type="button" + v-if="pack.remote === undefined" + @click="savePackMetadata"> + {{ $t('admin_dash.emoji.save_meta') }} + </button> + <button + class="button button-default btn" + type="button" + v-if="pack.remote === undefined" + @click="savePackMetadata"> + {{ $t('admin_dash.emoji.revert_meta') }} + </button> + + <button + class="button button-default btn" + v-if="pack.remote === undefined" + type="button" + @click="deleteModalVisible = true"> + {{ $t('admin_dash.emoji.delete_pack') }} + + <ConfirmModal + v-if="deleteModalVisible" + :title="$t('admin_dash.emoji.delete_title')" + :cancel-text="$t('status.delete_confirm_cancel_button')" + :confirm-text="$t('status.delete_confirm_accept_button')" + @cancelled="deleteModalVisible = false" + @accepted="deleteEmojiPack" > + {{ $t('admin_dash.emoji.delete_confirm', [packName]) }} + </ConfirmModal> + </button> + + <button + class="button button-default btn" + type="button" + v-if="pack.remote !== undefined" + @click="$refs.dlPackPopover.showPopover"> + {{ $t('admin_dash.emoji.download_pack') }} + + <Popover + ref="dlPackPopover" + trigger="click" + placement="bottom" + bound-to-selector=".emoji-tab" + popover-class="emoji-tab-edit-popover popover-default" + :bound-to="{ x: 'container' }" + :offset="{ y: 5 }" + > + <template #content> + <h3>{{ $t('admin_dash.emoji.downloading_pack', [packName]) }}</h3> + <div> + <div> + <div class="emoji-tab-popover-input"> + <label> + {{ $t('admin_dash.emoji.download_as_name') }} + <input class="emoji-data-input" + v-model="remotePackDownloadAs" + :placeholder="$t('admin_dash.emoji.download_as_name_full')"> + </label> + + <div v-if="downloadWillReplaceLocal" class="warning"> + <em>{{ $t('admin_dash.emoji.replace_warning') }}</em> + </div> + </div> + + <button + class="button button-default btn" + type="button" + @click="downloadRemotePack"> + {{ $t('admin_dash.emoji.download') }} + </button> + </div> + </div> + </template> + </Popover> + </button> + </li> + </ul> + </div> + + <ul class="setting-list"> + <h4> + {{ $t('admin_dash.emoji.files') }} + + <ModifiedIndicator v-if="pack" + :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)" + message-key="admin_dash.emoji.emoji_changed"/> + </h4> + + <div class="emoji-list" v-if="pack"> + <EmojiEditingPopover + v-if="pack.remote === undefined" + placement="bottom" new-upload + :title="$t('admin_dash.emoji.adding_new')" + :packName="packName" + @updatePackFiles="updatePackFiles" @displayError="displayError" + > + <template #trigger> + <FAIcon icon="plus" size="2x" :title="$t('admin_dash.emoji.add_file')" /> + </template> + </EmojiEditingPopover> + + <EmojiEditingPopover + placement="top" ref="emojiPopovers" + v-for="(file, shortcode) in pack.files" :key="shortcode" + :title="$t('admin_dash.emoji.editing', [shortcode])" + :disabled="pack.remote !== undefined" + :shortcode="shortcode" :file="file" :packName="packName" + @updatePackFiles="updatePackFiles" @displayError="displayError" + > + <template #trigger> + <StillImage + class="emoji" + :src="emojiAddr(file)" + :title="`:${shortcode}:`" + :alt="`:${shortcode}:`" + /> + </template> + </EmojiEditingPopover> + </div> + </ul> + </div> + </div> + </div> +</template> + +<script src="./emoji_tab.js"></script> + +<style lang="scss" src="./emoji_tab.scss"></style> |