interru/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Put managing local and remote packs on tabs

Browse source
This commit is contained in:
Angelina Filippova 2020-06-19 21:40:08 +03:00
parent 51020a6699
commit 8d23e36a54
1 changed files with 61 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,56 +6,62 @@
</div> </div>
<div class="emoji-header-container"> <div class="emoji-header-container">
<div class="emoji-packs-header-button-container"> <div class="emoji-packs-header-button-container">
<el-button type="primary" class="reload-emoji-button" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button> <el-button class="reload-emoji-button" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button>
<el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom" popper-class="import-pack-button"> <el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom" popper-class="import-pack-button">
<el-button type="primary" @click="importFromFS"> <el-button @click="importFromFS">
{{ $t('emoji.importPacks') }} {{ $t('emoji.importPacks') }}
</el-button> </el-button>
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
<el-divider class="divider"/> <el-tabs v-model="activeTab" type="card" class="emoji-packs-tabs">
<el-form :label-width="labelWidth" class="emoji-packs-form"> <el-tab-pane :label="$t('emoji.localPacks')" name="local">
<el-form-item :label="$t('emoji.localPacks')"> <el-form :label-width="labelWidth" class="emoji-packs-form">
<el-button type="primary" @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button> <el-form-item :label="$t('emoji.localPacks')">
</el-form-item> <el-button type="primary" @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button>
<el-form-item :label="$t('emoji.createLocalPack')"> </el-form-item>
<div class="create-pack"> <el-form-item :label="$t('emoji.createLocalPack')">
<el-input v-model="newPackName" :placeholder="$t('users.name')" /> <div class="create-pack">
<el-button <el-input v-model="newPackName" :placeholder="$t('users.name')" />
:disabled="newPackName.trim() === ''" <el-button
class="create-pack-button" :disabled="newPackName.trim() === ''"
@click="createLocalPack"> class="create-pack-button"
{{ $t('users.create') }} @click="createLocalPack">
</el-button> {{ $t('users.create') }}
</div> </el-button>
</el-form-item> </div>
<el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('emoji.packs')"> </el-form-item>
<el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack" @change="setActiveCollapseItems"> <el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('emoji.packs')">
<local-emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" /> <el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack" @change="setActiveCollapseItems">
</el-collapse> <local-emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
</el-form-item> </el-collapse>
<el-divider class="divider"/> </el-form-item>
<el-form-item :label="$t('emoji.remotePacks')"> </el-form>
<div class="create-pack"> </el-tab-pane>
<el-input <el-tab-pane :label="$t('emoji.remotePacks')" name="remote">
v-model="remoteInstanceAddress" <el-form :label-width="labelWidth" class="emoji-packs-form">
:placeholder="$t('emoji.remoteInstanceAddress')" /> <el-form-item :label="$t('emoji.remotePacks')">
<el-button <div class="create-pack">
v-loading.fullscreen.lock="fullscreenLoading" <el-input
:disabled="remoteInstanceAddress.trim() === ''" v-model="remoteInstanceAddress"
class="create-pack-button" :placeholder="$t('emoji.remoteInstanceAddress')" />
@click="refreshRemotePacks"> <el-button
{{ $t('emoji.refreshRemote') }} v-loading.fullscreen.lock="fullscreenLoading"
</el-button> :disabled="remoteInstanceAddress.trim() === ''"
</div> class="create-pack-button"
</el-form-item> @click="refreshRemotePacks">
<el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('emoji.packs')"> {{ $t('emoji.refreshRemote') }}
<el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack" @change="setActiveCollapseItems"> </el-button>
<remote-emoji-pack :name="name" :pack="sortPack(pack)" :host="$store.getters.authHost" :is-local="false" /> </div>
</el-collapse> </el-form-item>
</el-form-item> <el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('emoji.packs')">
</el-form> <el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack" @change="setActiveCollapseItems">
<remote-emoji-pack :name="name" :pack="sortPack(pack)" :host="$store.getters.authHost" :is-local="false" />
</el-collapse>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div> </div>
</template> </template>
@ -69,6 +75,7 @@ export default {
components: { LocalEmojiPack, RebootButton, RemoteEmojiPack }, components: { LocalEmojiPack, RebootButton, RemoteEmojiPack },
data() { data() {
return { return {
activeTab: 'local',
newPackName: '', newPackName: '',
activeLocalPack: [], activeLocalPack: [],
activeRemotePack: [], activeRemotePack: [],
@ -164,6 +171,13 @@ export default {
</script> </script>
<style rel='stylesheet/scss' lang='scss'> <style rel='stylesheet/scss' lang='scss'>
.create-pack {
display: flex;
justify-content: space-between
}
.create-pack-button {
margin-left: 10px;
}
.emoji-header-container { .emoji-header-container {
display: flex; display: flex;
align-items: center; align-items: center;
@ -173,13 +187,6 @@ export default {
.emoji-packs-header-button-container { .emoji-packs-header-button-container {
display: flex; display: flex;
} }
.create-pack {
display: flex;
justify-content: space-between
}
.create-pack-button {
margin-left: 10px;
}
.emoji-packs-form { .emoji-packs-form {
margin: 0 30px; margin: 0 30px;
} }
@ -189,6 +196,9 @@ export default {
justify-content: space-between; justify-content: space-between;
margin: 10px 15px 15px 15px; margin: 10px 15px 15px 15px;
} }
.emoji-packs-tabs {
margin: 0 15px 15px 15px;
}
.import-pack-button { .import-pack-button {
margin-left: 10px; margin-left: 10px;
width: 30%; width: 30%;