parent
6391a6a4ea
commit
f9c85c0c49
@ -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
|
@ -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;
|
||||
}
|
||||
}
|
@ -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>
|
Loading…
Reference in new issue