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

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

@ -6,15 +6,16 @@
</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-tab-pane :label="$t('emoji.localPacks')" name="local">
<el-form :label-width="labelWidth" class="emoji-packs-form"> <el-form :label-width="labelWidth" class="emoji-packs-form">
<el-form-item :label="$t('emoji.localPacks')"> <el-form-item :label="$t('emoji.localPacks')">
<el-button type="primary" @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button> <el-button type="primary" @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button>
@ -35,7 +36,10 @@
<local-emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" /> <local-emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
</el-collapse> </el-collapse>
</el-form-item> </el-form-item>
<el-divider class="divider"/> </el-form>
</el-tab-pane>
<el-tab-pane :label="$t('emoji.remotePacks')" name="remote">
<el-form :label-width="labelWidth" class="emoji-packs-form">
<el-form-item :label="$t('emoji.remotePacks')"> <el-form-item :label="$t('emoji.remotePacks')">
<div class="create-pack"> <div class="create-pack">
<el-input <el-input
@ -56,6 +60,8 @@
</el-collapse> </el-collapse>
</el-form-item> </el-form-item>
</el-form> </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%;