From 759dab47297594218acc43855cdfaa810841b933 Mon Sep 17 00:00:00 2001 From: Angelina Filippova <linakirsanova@gmail.com> Date: Sat, 28 Mar 2020 01:31:07 +0300 Subject: [PATCH] Split Emoji pack component into local and remote emoji pack --- .../emojiPacks/components/LocalEmojiPack.vue | 276 ++++++++++++++++++ .../{EmojiPack.vue => RemoteEmojiPack.vue} | 65 +---- src/views/emojiPacks/index.vue | 23 +- 3 files changed, 291 insertions(+), 73 deletions(-) create mode 100644 src/views/emojiPacks/components/LocalEmojiPack.vue rename src/views/emojiPacks/components/{EmojiPack.vue => RemoteEmojiPack.vue} (71%) diff --git a/src/views/emojiPacks/components/LocalEmojiPack.vue b/src/views/emojiPacks/components/LocalEmojiPack.vue new file mode 100644 index 00000000..917ff4dd --- /dev/null +++ b/src/views/emojiPacks/components/LocalEmojiPack.vue @@ -0,0 +1,276 @@ +<template> + <el-collapse-item :title="name" :name="name" class="has-background"> + <el-form :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata"> + <el-form-item :label=" $t('emoji.sharePack')"> + <el-switch v-model="share" /> + </el-form-item> + <el-form-item :label=" $t('emoji.homepage')"> + <el-input v-model="homepage" /> + </el-form-item> + <el-form-item :label=" $t('emoji.description')"> + <el-input v-model="description" type="textarea" /> + </el-form-item> + <el-form-item :label=" $t('emoji.license')"> + <el-input v-model="license" /> + </el-form-item> + <el-form-item :label=" $t('emoji.fallbackSrc')"> + <el-input v-model="fallbackSrc" /> + </el-form-item> + <el-form-item + v-if="fallbackSrc && fallbackSrc.trim() !== ''" + :label=" $t('emoji.fallbackSrcSha')"> + {{ pack.pack["fallback-src-sha256"] }} + </el-form-item> + </el-form> + <div class="pack-button-container"> + <div class="save-pack-button-container"> + <el-button type="primary" class="save-pack-button" @click="savePackMetadata">{{ $t('emoji.saveMetadata') }}</el-button> + <el-button class="delete-pack-button" @click="deletePack">{{ $t('emoji.deletePack') }}</el-button> + </div> + <div class="download-pack-button-container"> + <el-link + v-if="pack.pack['can-download']" + :href="`//${host}/api/pleroma/emoji/packs/${name}/download_shared`" + :underline="false" + type="primary" + target="_blank"> + <el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button> + </el-link> + </div> + </div> + <el-collapse v-model="showPackContent" class="contents-collapse"> + <el-collapse-item v-if="isLocal" :title=" $t('emoji.addNewEmoji')" name="addEmoji" class="no-background"> + <new-emoji-uploader :pack-name="name"/> + </el-collapse-item> + <el-collapse-item v-if="Object.keys(pack.files).length > 0" :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background"> + <single-emoji-editor + v-for="(file, ename) in pack.files" + :key="ename" + :host="host" + :pack-name="name" + :name="ename" + :file="file" + :is-local="isLocal" /> + </el-collapse-item> + </el-collapse> + </el-collapse-item> +</template> + +<script> +import SingleEmojiEditor from './SingleEmojiEditor.vue' +import NewEmojiUploader from './NewEmojiUploader.vue' + +export default { + components: { SingleEmojiEditor, NewEmojiUploader }, + props: { + name: { + type: String, + required: true + }, + pack: { + type: Object, + required: true + }, + host: { + type: String, + required: true + }, + isLocal: { + type: Boolean, + required: true + } + }, + data() { + return { + showPackContent: [] + } + }, + computed: { + isMobile() { + return this.$store.state.app.device === 'mobile' + }, + isTablet() { + return this.$store.state.app.device === 'tablet' + }, + labelWidth() { + if (this.isMobile) { + return '90px' + } else if (this.isTablet) { + return '120px' + } else { + return '120px' + } + }, + share: { + get() { return this.pack.pack['share-files'] }, + set(value) { + this.$store.dispatch( + 'UpdateLocalPackVal', + { name: this.name, key: 'share-files', value } + ) + } + }, + homepage: { + get() { return this.pack.pack['homepage'] }, + set(value) { + this.$store.dispatch( + 'UpdateLocalPackVal', + { name: this.name, key: 'homepage', value } + ) + } + }, + description: { + get() { return this.pack.pack['description'] }, + set(value) { + this.$store.dispatch( + 'UpdateLocalPackVal', + { name: this.name, key: 'description', value } + ) + } + }, + license: { + get() { return this.pack.pack['license'] }, + set(value) { + this.$store.dispatch( + 'UpdateLocalPackVal', + { name: this.name, key: 'license', value } + ) + } + }, + fallbackSrc: { + get() { return this.pack.pack['fallback-src'] }, + set(value) { + if (value.trim() !== '') { + this.$store.dispatch( + 'UpdateLocalPackVal', + { name: this.name, key: 'fallback-src', value } + ) + } else { + this.$store.dispatch( + 'UpdateLocalPackVal', + { name: this.name, key: 'fallback-src', value: null } + ) + this.$store.dispatch( + 'UpdateLocalPackVal', + { name: this.name, key: 'fallback-src-sha256', value: null } + ) + } + } + } + }, + methods: { + deletePack() { + this.$confirm('This will delete the pack, are you sure?', 'Warning', { + confirmButtonText: 'Yes, delete the pack', + cancelButtonText: 'No, leave it be', + type: 'warning' + }).then(() => { + this.$store.dispatch('DeletePack', { name: this.name }) + .then(() => this.$store.dispatch('ReloadEmoji')) + .then(() => this.$store.dispatch('SetLocalEmojiPacks')) + }).catch(() => {}) + }, + savePackMetadata() { + this.$store.dispatch('SavePackMetadata', { packName: this.name }) + } + } +} +</script> + +<style rel='stylesheet/scss' lang='scss'> +.download-archive { + width: 250px +} +.download-pack-button-container { + width: 265px; + .el-link { + width: inherit; + span { + width: inherit; + .download-archive { + width: inherit; + } + } + } +} +.download-shared-pack { + display: flex; + margin-bottom: 10px; +} +.download-shared-pack-button { + margin-left: 10px; +} +.el-collapse-item__content { + padding-bottom: 0; +} +.el-collapse-item__header { + height: 36px; + font-size: 14px; + font-weight: 700; + color: #606266; +} +.emoji-pack-card { + margin-top: 5px; +} +.emoji-pack-metadata { + .el-form-item { + margin-bottom: 10px; + } +} +.has-background .el-collapse-item__header { + background: #f6f6f6; +} +.no-background .el-collapse-item__header { + background: white; +} +.pack-button-container { + margin: 0 0 18px 120px; +} +.save-pack-button-container { + margin-bottom: 8px; + width: 265px; + display: flex; + justify-content: space-between; +} +@media only screen and (max-width:480px) { + .delete-pack-button { + width: 45%; + } + .download-pack-button-container { + width: 100%; + } + .download-shared-pack { + flex-direction: column; + } + .download-shared-pack-button { + margin-left: 0; + margin-top: 10px; + padding: 10px; + } + .pack-button-container { + width: 100%; + margin: 0 0 22px 0; + } + .remote-pack-metadata { + .el-form-item__content { + line-height: 24px; + margin-top: 4px; + } + } + .save-pack-button { + width: 54%; + } + .save-pack-button-container { + margin-bottom: 8px; + width: 100%; + display: flex; + justify-content: space-between; + button { + padding: 10px 5px; + } + .el-button+.el-button { + margin-left: 3px; + } + } +} +</style> diff --git a/src/views/emojiPacks/components/EmojiPack.vue b/src/views/emojiPacks/components/RemoteEmojiPack.vue similarity index 71% rename from src/views/emojiPacks/components/EmojiPack.vue rename to src/views/emojiPacks/components/RemoteEmojiPack.vue index d31fcf8a..cb63ec3d 100644 --- a/src/views/emojiPacks/components/EmojiPack.vue +++ b/src/views/emojiPacks/components/RemoteEmojiPack.vue @@ -1,44 +1,6 @@ <template> <el-collapse-item :title="name" :name="name" class="has-background"> - <el-form v-if="isLocal" :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata"> - <el-form-item :label=" $t('emoji.sharePack')"> - <el-switch v-model="share" /> - </el-form-item> - <el-form-item :label=" $t('emoji.homepage')"> - <el-input v-model="homepage" /> - </el-form-item> - <el-form-item :label=" $t('emoji.description')"> - <el-input v-model="description" type="textarea" /> - </el-form-item> - <el-form-item :label=" $t('emoji.license')"> - <el-input v-model="license" /> - </el-form-item> - <el-form-item :label=" $t('emoji.fallbackSrc')"> - <el-input v-model="fallbackSrc" /> - </el-form-item> - <el-form-item - v-if="fallbackSrc && fallbackSrc.trim() !== ''" - :label=" $t('emoji.fallbackSrcSha')"> - {{ pack.pack["fallback-src-sha256"] }} - </el-form-item> - </el-form> - <div v-if="isLocal" class="pack-button-container"> - <div class="save-pack-button-container"> - <el-button type="primary" class="save-pack-button" @click="savePackMetadata">{{ $t('emoji.saveMetadata') }}</el-button> - <el-button class="delete-pack-button" @click="deletePack">{{ $t('emoji.deletePack') }}</el-button> - </div> - <div class="download-pack-button-container"> - <el-link - v-if="pack.pack['can-download']" - :href="`//${host}/api/pleroma/emoji/packs/${name}/download_shared`" - :underline="false" - type="primary" - target="_blank"> - <el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button> - </el-link> - </div> - </div> - <el-form v-if="!isLocal" :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata remote-pack-metadata"> + <el-form :label-width="labelWidth" label-position="left" size="small" class="emoji-pack-metadata remote-pack-metadata"> <el-form-item :label=" $t('emoji.sharePack')"> <el-switch v-model="share" disabled /> </el-form-item> @@ -71,9 +33,6 @@ </el-form-item> </el-form> <el-collapse v-model="showPackContent" class="contents-collapse"> - <el-collapse-item v-if="isLocal" :title=" $t('emoji.addNewEmoji')" name="addEmoji" class="no-background"> - <new-emoji-uploader :pack-name="name"/> - </el-collapse-item> <el-collapse-item v-if="Object.keys(pack.files).length > 0" :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background"> <single-emoji-editor v-for="(file, ename) in pack.files" @@ -84,7 +43,7 @@ :file="file" :is-local="isLocal" /> </el-collapse-item> - <el-collapse-item v-if="!isLocal" :title=" $t('emoji.downloadPack')" name="downloadPack" class="no-background"> + <el-collapse-item :title=" $t('emoji.downloadPack')" name="downloadPack" class="no-background"> <p> {{ $t('emoji.thisWillDownload') }} "{{ name }}" {{ $t('emoji.downloadToCurrentInstance') }} "{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" ({{ $t('emoji.canBeChanged') }}). @@ -103,10 +62,9 @@ <script> import SingleEmojiEditor from './SingleEmojiEditor.vue' -import NewEmojiUploader from './NewEmojiUploader.vue' export default { - components: { SingleEmojiEditor, NewEmojiUploader }, + components: { SingleEmojiEditor }, props: { name: { type: String, @@ -125,7 +83,6 @@ export default { required: true } }, - data() { return { showPackContent: [], @@ -216,22 +173,6 @@ export default { { instanceAddress, packName: this.name, as: this.downloadSharedAs } ).then(() => this.$store.dispatch('ReloadEmoji')) .then(() => this.$store.dispatch('SetLocalEmojiPacks')) - }, - - deletePack() { - this.$confirm('This will delete the pack, are you sure?', 'Warning', { - confirmButtonText: 'Yes, delete the pack', - cancelButtonText: 'No, leave it be', - type: 'warning' - }).then(() => { - this.$store.dispatch('DeletePack', { name: this.name }) - .then(() => this.$store.dispatch('ReloadEmoji')) - .then(() => this.$store.dispatch('SetLocalEmojiPacks')) - }).catch(() => {}) - }, - - savePackMetadata() { - this.$store.dispatch('SavePackMetadata', { packName: this.name }) } } } diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue index 2757e3a4..70c832ed 100644 --- a/src/views/emojiPacks/index.vue +++ b/src/views/emojiPacks/index.vue @@ -27,7 +27,7 @@ </el-form-item> <el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('emoji.packs')"> <el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack"> - <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-form-item> <el-divider class="divider"/> @@ -46,7 +46,7 @@ </el-form-item> <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"> - <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-form-item> </el-form> @@ -54,11 +54,12 @@ </template> <script> -import EmojiPack from './components/EmojiPack' +import LocalEmojiPack from './components/LocalEmojiPack' +import RemoteEmojiPack from './components/RemoteEmojiPack' import i18n from '@/lang' export default { - components: { EmojiPack }, + components: { LocalEmojiPack, RemoteEmojiPack }, data() { return { remoteInstanceAddress: '', @@ -103,6 +104,13 @@ export default { this.$store.dispatch('ReloadEmoji') }) }, + importFromFS() { + this.$store.dispatch('ImportFromFS') + .then(() => { + this.$store.dispatch('SetLocalEmojiPacks') + this.$store.dispatch('ReloadEmoji') + }) + }, refreshLocalPacks() { try { this.$store.dispatch('SetLocalEmojiPacks') @@ -127,13 +135,6 @@ export default { type: 'success', message: i18n.t('emoji.reloaded') }) - }, - importFromFS() { - this.$store.dispatch('ImportFromFS') - .then(() => { - this.$store.dispatch('SetLocalEmojiPacks') - this.$store.dispatch('ReloadEmoji') - }) } } }