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

Load emoji packs that are open in collapse

Browse source
This commit is contained in:
Angelina Filippova 2020-03-29 20:42:24 +03:00
parent ca9e84ad4b
commit 2a38907ebe
3 changed files with 74 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/store/modules/emojiPacks.js
View file

@ -15,11 +15,15 @@ import Vue from 'vue'
const packs = { const packs = {
state: { state: {
activeCollapseItems: [],
localPacks: {}, localPacks: {},
remoteInstance: '', remoteInstance: '',
remotePacks: {} remotePacks: {}
}, },
mutations: { mutations: {
SET_ACTIVE_COLLAPSE_ITEMS: (state, items) => {
state.activeCollapseItems = items
},
SET_LOCAL_PACKS: (state, packs) => { SET_LOCAL_PACKS: (state, packs) => {
state.localPacks = packs state.localPacks = packs
}, },
@ -99,6 +103,9 @@ const packs = {
commit('UPDATE_LOCAL_PACK_PACK', { name: packName, pack: result.data }) commit('UPDATE_LOCAL_PACK_PACK', { name: packName, pack: result.data })
} }
}, },
SetActiveCollapseItems({ commit, state }, activeItems) {
commit('SET_ACTIVE_COLLAPSE_ITEMS', activeItems)
},
async SetLocalEmojiPacks({ commit, getters }) { async SetLocalEmojiPacks({ commit, getters }) {
const { data } = await listPacks(getters.authHost) const { data } = await listPacks(getters.authHost)
commit('SET_LOCAL_PACKS', data) commit('SET_LOCAL_PACKS', data)

119
src/views/emojiPacks/components/RemoteEmojiPack.vue
View file

@ -1,62 +1,64 @@
<template> <template>
<el-collapse-item :title="name" :name="name" class="has-background"> <el-collapse-item :title="name" :name="name" class="has-background">
<el-form :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata remote-pack-metadata"> <div v-if="loadRemotePack">
<el-form-item :label=" $t('emoji.sharePack')"> <el-form :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata remote-pack-metadata">
<el-switch v-model="share" disabled /> <el-form-item :label=" $t('emoji.sharePack')">
</el-form-item> <el-switch v-model="share" disabled />
<el-form-item v-if="homepage" :label=" $t('emoji.homepage')"> </el-form-item>
<span>{{ homepage }}</span> <el-form-item v-if="homepage" :label=" $t('emoji.homepage')">
</el-form-item> <span>{{ homepage }}</span>
<el-form-item v-if="description" :label=" $t('emoji.description')"> </el-form-item>
<span>{{ description }}</span> <el-form-item v-if="description" :label=" $t('emoji.description')">
</el-form-item> <span>{{ description }}</span>
<el-form-item v-if="license" :label=" $t('emoji.license')"> </el-form-item>
<span>{{ license }}</span> <el-form-item v-if="license" :label=" $t('emoji.license')">
</el-form-item> <span>{{ license }}</span>
<el-form-item v-if="fallbackSrc" :label=" $t('emoji.fallbackSrc')"> </el-form-item>
<span>{{ fallbackSrc }}</span> <el-form-item v-if="fallbackSrc" :label=" $t('emoji.fallbackSrc')">
</el-form-item> <span>{{ fallbackSrc }}</span>
<el-form-item </el-form-item>
v-if="fallbackSrc && fallbackSrc.trim() !== ''" <el-form-item
:label=" $t('emoji.fallbackSrcSha')"> v-if="fallbackSrc && fallbackSrc.trim() !== ''"
{{ pack.pack["fallback-src-sha256"] }} :label=" $t('emoji.fallbackSrcSha')">
</el-form-item> {{ pack.pack["fallback-src-sha256"] }}
<el-form-item> </el-form-item>
<el-link <el-form-item>
v-if="pack.pack['can-download']" <el-link
:href="pack.pack['fallback-src']" v-if="pack.pack['can-download']"
:underline="false" :href="pack.pack['fallback-src']"
type="primary" :underline="false"
target="_blank"> type="primary"
<el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button> target="_blank">
</el-link> <el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button>
</el-form-item> </el-link>
</el-form> </el-form-item>
<el-collapse v-model="showPackContent" class="contents-collapse"> </el-form>
<el-collapse-item v-if="Object.keys(pack.files).length > 0" :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background"> <el-collapse v-model="showPackContent" class="contents-collapse">
<single-emoji-editor <el-collapse-item v-if="Object.keys(pack.files).length > 0" :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background">
v-for="(file, ename) in pack.files" <single-emoji-editor
:key="ename" v-for="(file, ename) in pack.files"
:host="host" :key="ename"
:pack-name="name" :host="host"
:name="ename" :pack-name="name"
:file="file" :name="ename"
:is-local="isLocal" /> :file="file"
</el-collapse-item> :is-local="isLocal" />
<el-collapse-item :title=" $t('emoji.downloadPack')" name="downloadPack" class="no-background"> </el-collapse-item>
<p> <el-collapse-item :title=" $t('emoji.downloadPack')" name="downloadPack" class="no-background">
{{ $t('emoji.thisWillDownload') }} "{{ name }}" {{ $t('emoji.downloadToCurrentInstance') }} <p>
"{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" ({{ $t('emoji.canBeChanged') }}). {{ $t('emoji.thisWillDownload') }} "{{ name }}" {{ $t('emoji.downloadToCurrentInstance') }}
{{ $t('emoji.willBeUsable') }}. "{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" ({{ $t('emoji.canBeChanged') }}).
</p> {{ $t('emoji.willBeUsable') }}.
<div class="download-shared-pack"> </p>
<el-input v-model="downloadSharedAs" :placeholder=" $t('emoji.downloadAsOptional')"/> <div class="download-shared-pack">
<el-button type="primary" class="download-shared-pack-button" @click="downloadFromInstance(pack.pack['homepage'])"> <el-input v-model="downloadSharedAs" :placeholder=" $t('emoji.downloadAsOptional')"/>
{{ isDesktop ? $t('emoji.downloadSharedPack') : $t('emoji.downloadSharedPackMobile') }} <el-button type="primary" class="download-shared-pack-button" @click="downloadFromInstance(pack.pack['homepage'])">
</el-button> {{ isDesktop ? $t('emoji.downloadSharedPack') : $t('emoji.downloadSharedPackMobile') }}
</div> </el-button>
</el-collapse-item> </div>
</el-collapse> </el-collapse-item>
</el-collapse>
</div>
</el-collapse-item> </el-collapse-item>
</template> </template>
@ -108,6 +110,9 @@ export default {
return '120px' return '120px'
} }
}, },
loadRemotePack() {
return this.$store.state.emojiPacks.activeCollapseItems.includes(this.name)
},
share: { share: {
get() { return this.pack.pack['share-files'] }, get() { return this.pack.pack['share-files'] },
set(value) { set(value) {

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

@ -46,7 +46,7 @@
</div> </div>
</el-form-item> </el-form-item>
<el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('emoji.packs')"> <el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('emoji.packs')">
<el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack"> <el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack" @change="setActiveCollapseItems">
<remote-emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="false" /> <remote-emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="false" />
</el-collapse> </el-collapse>
</el-form-item> </el-form-item>
@ -139,6 +139,10 @@ export default {
type: 'success', type: 'success',
message: i18n.t('emoji.reloaded') message: i18n.t('emoji.reloaded')
}) })
},
setActiveCollapseItems(activeItems) {
const items = Array.isArray(activeItems) ? activeItems : [activeItems]
this.$store.dispatch('SetActiveCollapseItems', items)
} }
} }
} }