From 9bc103042b4c515ce0b73dfba0f68b70b35c2ae0 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Mon, 7 Oct 2019 03:09:53 +0300
Subject: [PATCH] Add form for uploading new emoji
---
src/lang/en.js | 11 +-
src/views/emojiPacks/components/EmojiPack.vue | 12 +-
.../components/NewEmojiUploader.vue | 129 +++++++++---------
src/views/emojiPacks/index.vue | 4 +-
4 files changed, 85 insertions(+), 71 deletions(-)
diff --git a/src/lang/en.js b/src/lang/en.js
index a84a4ec3..1250f0df 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -330,7 +330,16 @@ export default {
license: 'License',
fallbackSrc: 'Fallback source',
fallbackSrcSha: 'Fallback source SHA',
- savePackMetadata: 'Save pack metadata'
+ savePackMetadata: 'Save pack metadata',
+ addNewEmoji: 'Add new emoji to the pack',
+ shortcode: 'Shortcode',
+ uploadFile: 'Upload a file',
+ customFilename: 'Custom filename',
+ optional: 'optional',
+ customFilenameDesc: 'Custom file name (optional)',
+ url: 'URL',
+ required: 'required',
+ clickToUpload: 'Click to upload'
},
invites: {
inviteTokens: 'Invite tokens',
diff --git a/src/views/emojiPacks/components/EmojiPack.vue b/src/views/emojiPacks/components/EmojiPack.vue
index 71708ee3..5003a61c 100644
--- a/src/views/emojiPacks/components/EmojiPack.vue
+++ b/src/views/emojiPacks/components/EmojiPack.vue
@@ -1,6 +1,6 @@
<template>
<el-collapse-item :title="name" :name="name">
- <el-form label-width="120px" size="small">
+ <el-form label-width="120px" label-position="left" size="small">
<el-form-item :label="$t('settings.sharePack')">
<el-switch v-model="share" :disabled="!isLocal" />
</el-form-item>
@@ -29,6 +29,11 @@
<el-button v-if="isLocal" type="primary" @click="savePackMetadata">{{ $t('settings.savePackMetadata') }}</el-button>
</el-form-item>
</el-form>
+ <el-collapse v-model="showPackContent" class="contents-collapse">
+ <el-collapse-item :name="name" title="Show pack contents">
+ <new-emoji-uploader v-if="isLocal" :pack-name="name"/>
+ </el-collapse-item>
+ </el-collapse>
</el-collapse-item>
</template>
@@ -38,6 +43,9 @@
}
.el-collapse-item__header {
height: 36px;
+ font-size: 14px;
+ font-weight: 700;
+ color: #606266;
}
.emoji-pack-card {
margin-top: 5px;
@@ -72,7 +80,7 @@ export default {
data() {
return {
- shownPackEmoji: [],
+ showPackContent: [],
downloadSharedAs: ''
}
},
diff --git a/src/views/emojiPacks/components/NewEmojiUploader.vue b/src/views/emojiPacks/components/NewEmojiUploader.vue
index d62011de..0770e332 100644
--- a/src/views/emojiPacks/components/NewEmojiUploader.vue
+++ b/src/views/emojiPacks/components/NewEmojiUploader.vue
@@ -1,49 +1,53 @@
<template>
- <div>
- <h4>Add new emoji to the pack</h4>
-
- <el-row :gutter="20">
- <el-col :span="4" class="new-emoji-col">
- <el-input v-model="shortcode" placeholder="Shortcode" />
- </el-col>
-
- <el-col :span="8">
- <div>
- <h5>Upload a file</h5>
- </div>
- File name
- <el-input v-model="customFileName" size="mini" placeholder="Custom file name (optional)"/>
- <input ref="fileUpload" type="file" accept="image/*" >
-
- <div class="or">
- or
- </div>
-
- <div>
- <h5>Enter a URL</h5>
- </div>
- <el-input v-model="imageUploadURL" placeholder="Image URL" />
-
- <small>
- (If both are filled, the file is used)
- </small>
- </el-col>
-
- <el-col :span="4" class="new-emoji-col">
- <el-button :disabled="shortcode.trim() == ''" @click="upload">Upload</el-button>
- </el-col>
- </el-row>
- </div>
+ <el-form label-width="130px" label-position="left" size="small">
+ <div class="add-new-emoji">{{ $t('settings.addNewEmoji') }}</div>
+ <el-form-item :label="$t('settings.shortcode')">
+ <el-input v-model="shortcode" :placeholder="$t('settings.required')"/>
+ </el-form-item>
+ <el-form-item :label="$t('settings.customFilename')">
+ <el-input v-model="customFileName" :placeholder="$t('settings.optional')"/>
+ </el-form-item>
+ <el-form-item :label="$t('settings.uploadFile')">
+ <!-- <div class="upload-file-url">
+ <el-input v-model="imageUploadURL" :placeholder="$t('settings.url')"/>
+ <el-button :disabled="shortcodePresent" class="upload-button" @click="uploadEmoji">{{ $t('settings.upload') }}</el-button>
+ </div>
+ <div class="upload-container">
+ <p class="text">or</p>-->
+ <el-upload
+ :http-request="uploadEmoji"
+ :multiple="false"
+ :show-file-list="false"
+ action="add">
+ <el-button :disabled="shortcodePresent" type="primary">{{ $t('settings.clickToUpload') }}</el-button>
+ </el-upload>
+ <!-- </div> -->
+ </el-form-item>
+ </el-form>
</template>
<style>
- .new-emoji-col {
- margin-top: 8em;
- }
-
- .or {
- margin: 1em;
- }
+.add-new-emoji {
+ height: 36px;
+ font-size: 14px;
+ font-weight: 700;
+ color: #606266;
+}
+.text {
+ line-height: 20px;
+ margin-right: 15px
+}
+.upload-container {
+ display: flex;
+ align-items: baseline;
+}
+.upload-button {
+ margin-left: 10px;
+}
+.upload-file-url {
+ display: flex;
+ justify-content: space-between
+}
</style>
<script>
@@ -54,7 +58,6 @@ export default {
required: true
}
},
-
data() {
return {
shortcode: '',
@@ -62,31 +65,25 @@ export default {
customFileName: ''
}
},
-
+ computed: {
+ shortcodePresent() {
+ return this.shortcode.trim() === ''
+ }
+ },
methods: {
- upload() {
- let file = null
-
- if (this.$refs.fileUpload.files.length > 0) {
- file = this.$refs.fileUpload.files[0]
- } else if (this.imageUploadURL.trim() !== '') {
- file = this.imageUploadURL
- }
-
- if (file !== null) {
- this.$store.dispatch('UpdateAndSavePackFile', {
- action: 'add',
- packName: this.packName,
- shortcode: this.shortcode,
- file: file,
- fileName: this.customFileName
- }).then(() => {
- this.shortcode = ''
- this.imageUploadURL = ''
+ uploadEmoji({ file }) {
+ this.$store.dispatch('UpdateAndSavePackFile', {
+ action: 'add',
+ packName: this.packName,
+ shortcode: this.shortcode,
+ file,
+ fileName: this.customFileName
+ }).then(() => {
+ this.shortcode = ''
+ this.imageUploadURL = ''
- this.$store.dispatch('ReloadEmoji')
- })
- }
+ this.$store.dispatch('ReloadEmoji')
+ })
}
}
}
diff --git a/src/views/emojiPacks/index.vue b/src/views/emojiPacks/index.vue
index 41854e70..6a8c7f31 100644
--- a/src/views/emojiPacks/index.vue
+++ b/src/views/emojiPacks/index.vue
@@ -61,8 +61,8 @@ export default {
return {
remoteInstanceAddress: '',
newPackName: '',
- activeLocalPack: '',
- activeRemotePack: ''
+ activeLocalPack: [],
+ activeRemotePack: []
}
},
computed: {
--
GitLab