Oneric/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Pull requests Activity

Improve interface for Emoji packs

Browse source
This commit is contained in:
Angelina Filippova 2019-10-05 15:11:19 +03:00
parent 4e2b24ea4b
commit 30a1a25ff7
2 changed files with 89 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/lang/en.js
View file

@ -313,7 +313,17 @@ export default {
database: 'Database', database: 'Database',
other: 'Other', other: 'Other',
success: 'Settings changed successfully!', success: 'Settings changed successfully!',
emojiPacks: 'Emoji packs' emojiPacks: 'Emoji packs',
reloadEmoji: 'Reload emoji',
importPacks: 'Import packs from the server filesystem',
importEmojiTooltip: 'Importing from the filesystem will scan the directories and import those without pack.json but with emoji.txt or without neither',
localPacks: 'Local packs',
refreshLocalPacks: 'Refresh local packs',
createLocalPack: 'Create a new local pack',
packs: 'Packs',
remotePacks: 'Remote packs',
remoteInstanceAddress: 'Remote instance address',
refreshRemote: 'Refresh remote packs'
}, },
invites: { invites: {
inviteTokens: 'Invite tokens', inviteTokens: 'Invite tokens',

159
src/views/emojiPacks/index.vue
View file

@ -1,123 +1,89 @@
<template> <template>
<el-container class="emoji-packs-container"> <div>
<el-header> <div class="button-container">
<h1> <el-button type="primary" @click="reloadEmoji">{{ $t('settings.reloadEmoji') }}</el-button>
Emoji packs <el-tooltip :content="$t('settings.importEmojiTooltip')" effects="dark" placement="bottom">
</h1> <el-button type="primary" @click="importFromFS">
</el-header> {{ $t('settings.importPacks') }}
<el-row class="local-packs-actions">
<el-button type="primary" @click="reloadEmoji">
Reload emoji
</el-button>
<el-tooltip effects="dark" content="Importing from the filesystem will scan the directories and import those without pack.json but with emoji.txt or without neither" placement="bottom">
<el-button type="success" @click="importFromFS">
Import packs from the server filesystem
</el-button> </el-button>
</el-tooltip> </el-tooltip>
</el-row>
<el-tabs v-model="activeName">
<el-tab-pane label="Local packs" name="local">
<div>
Local packs can be viewed and downloaded for backup here.
</div> </div>
<div class="line"/>
<div class="local-packs-actions"> <el-form :label-width="labelWidth">
<el-popover <el-form-item :label="$t('settings.localPacks')">
v-model="createNewPackVisible" <el-button type="primary" @click="refreshLocalPacks">{{ $t('settings.refreshLocalPacks') }}</el-button>
placement="bottom" </el-form-item>
trigger="click"> <el-form-item :label="$t('settings.createLocalPack')">
<div class="create-pack">
<el-input v-model="newPackName" placeholder="Name" /> <el-input v-model="newPackName" :placeholder="$t('users.name')" />
<el-button <el-button
:disabled="newPackName.trim() === ''" :disabled="newPackName.trim() === ''"
class="create-pack-button" class="create-pack-button"
type="success"
@click="createLocalPack"> @click="createLocalPack">
Create {{ $t('users.create') }}
</el-button>
<el-button slot="reference" type="success">
Create a new local pack
</el-button>
</el-popover>
<el-button type="primary" @click="refreshLocalPacks">
Refresh local packs
</el-button> </el-button>
</div> </div>
</el-form-item>
<div v-for="(pack, name) in $store.state.emojiPacks.localPacks" :key="name"> <el-form-item v-if="localPacks.length > 0" :label="$t('settings.packs')">
<div v-for="(pack, name) in localPacks" :key="name">
<emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" /> <emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
<el-divider /> <el-divider />
</div> </div>
</el-tab-pane> </el-form-item>
<div class="line"/>
<el-tab-pane label="Remote packs" name="remote"> <el-form-item :label="$t('settings.remotePacks')">
<div class="create-pack">
<el-input <el-input
v-model="remoteInstanceAddress" v-model="remoteInstanceAddress"
class="remote-instance-input" :placeholder="$t('settings.remoteInstanceAddress')" />
placeholder="Remote instance address" /> <el-button
<el-button type="primary" @click="refreshRemotePacks"> :disabled="remoteInstanceAddress.trim() === ''"
Refresh remote packs class="create-pack-button"
@click="refreshRemotePacks">
{{ $t('settings.refreshRemote') }}
</el-button> </el-button>
</div>
<div v-for="(pack, name) in $store.state.emojiPacks.remotePacks" :key="name"> </el-form-item>
<emoji-pack :name="name" :pack="pack" :host="remoteInstanceAddress" :is-local="false" /> <el-form-item v-if="remotePacks.length > 0" :label="$t('settings.packs')">
<div v-for="(pack, name) in remotePacks" :key="name">
<emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
<el-divider /> <el-divider />
</div> </div>
</el-form-item>
</el-tab-pane> </el-form>
</el-tabs> </div>
</el-container>
</template> </template>
<style>
.emoji-packs-container {
margin: 22px 0 0 15px;
}
.local-packs-actions {
margin-top: 1em;
margin-bottom: 1em;
}
.remote-instance-input {
max-width: 10%;
}
.create-pack-button {
margin-top: 1em;
}
</style>
<script> <script>
import EmojiPack from './components/EmojiPack' import EmojiPack from './components/EmojiPack'
export default { export default {
components: { EmojiPack }, components: { EmojiPack },
data() { data() {
return { return {
activeName: 'local',
remoteInstanceAddress: '', remoteInstanceAddress: '',
downloadFromState: null, newPackName: ''
}
newPackName: '', },
createNewPackVisible: false computed: {
isMobile() {
return this.$store.state.app.device === 'mobile'
},
labelWidth() {
return this.isMobile ? '100px' : '210px'
},
localPacks() {
return this.$store.state.emojiPacks.localPacks
},
remotePacks() {
return this.$store.state.emojiPacks.remotePacks
} }
}, },
mounted() { mounted() {
this.refreshLocalPacks() this.refreshLocalPacks()
}, },
methods: { methods: {
createLocalPack() { createLocalPack() {
this.createNewPackVisible = false
this.$store.dispatch('CreatePack', { name: this.newPackName }) this.$store.dispatch('CreatePack', { name: this.newPackName })
.then(() => { .then(() => {
this.newPackName = '' this.newPackName = ''
@ -126,19 +92,15 @@ export default {
this.$store.dispatch('ReloadEmoji') this.$store.dispatch('ReloadEmoji')
}) })
}, },
refreshLocalPacks() { refreshLocalPacks() {
this.$store.dispatch('SetLocalEmojiPacks') this.$store.dispatch('SetLocalEmojiPacks')
}, },
refreshRemotePacks() { refreshRemotePacks() {
this.$store.dispatch('SetRemoteEmojiPacks', { remoteInstance: this.remoteInstanceAddress }) this.$store.dispatch('SetRemoteEmojiPacks', { remoteInstance: this.remoteInstanceAddress })
}, },
reloadEmoji() { reloadEmoji() {
this.$store.dispatch('ReloadEmoji') this.$store.dispatch('ReloadEmoji')
}, },
importFromFS() { importFromFS() {
this.$store.dispatch('ImportFromFS') this.$store.dispatch('ImportFromFS')
.then(() => { .then(() => {
@ -149,3 +111,22 @@ export default {
} }
} }
</script> </script>
<style rel='stylesheet/scss' lang='scss'>
.button-container {
margin: 0 0 22px 20px;
}
.create-pack {
display: flex;
justify-content: space-between
}
.create-pack-button {
margin-left: 10px;
}
.line {
width: 100%;
height: 0;
border: 1px solid #eee;
margin-bottom: 22px;
}
</style>