Skip to content
Snippets Groups Projects
Commit 12e836ff authored by Angelina Filippova's avatar Angelina Filippova
Browse files

Rework managing emojis

parent 9bc10304
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/lang/en.js
+ 14
− 1
View file @ 12e836ff
......@@ -339,7 +339,20 @@ export default {
customFilenameDesc: 'Custom file name (optional)',
url: 'URL',
required: 'required',
clickToUpload: 'Click to upload'
clickToUpload: 'Click to upload',
showPackContents: 'Show pack contents',
manageEmoji: 'Manage existing emoji',
file: 'File',
update: 'Update',
remove: 'Remove',
selectLocalPack: 'Select the local pack to copy to',
localPack: 'Local pack',
specifyShortcode: 'Specify a custom shortcode',
specifyFilename: 'Specify a custom filename',
leaveEmptyShortcode: 'leave empty to use the same shortcode',
leaveEmptyFilename: 'leave empty to use the same filename',
copy: 'Copy',
copyToLocalPack: 'Copy to local pack'
},
invites: {
inviteTokens: 'Invite tokens',
......
src/views/emojiPacks/components/EmojiPack.vue
+ 11
− 1
View file @ 12e836ff
......@@ -30,9 +30,19 @@
</el-form-item>
</el-form>
<el-collapse v-model="showPackContent" class="contents-collapse">
<el-collapse-item :name="name" title="Show pack contents">
<el-collapse-item :title="$t('settings.addNewEmoji')" name="addEmoji">
<new-emoji-uploader v-if="isLocal" :pack-name="name"/>
</el-collapse-item>
<el-collapse-item :title="$t('settings.manageEmoji')" name="manageEmoji">
<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>
......
src/views/emojiPacks/components/NewEmojiUploader.vue
+ 0
− 1
View file @ 12e836ff
<template>
<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>
......
src/views/emojiPacks/components/SingleEmojiEditor.vue
+ 70
− 65
View file @ 12e836ff
<template>
<el-row :gutter="20">
<el-col :span="4">
<el-input v-if="isLocal" v-model="modifyingName" placeholder="Name/Shortcode" />
<el-input v-else :value="modifyingName" placeholder="Name/Shortcode" />
</el-col>
<el-col :span="6">
<el-input v-if="isLocal" v-model="modifyingFile" placeholder="File"/>
<el-input v-else :value="modifyingFile" placeholder="File"/>
</el-col>
<el-col v-if="isLocal" :span="2">
<el-button type="primary" @click="update">Update</el-button>
</el-col>
<el-col v-if="isLocal" :span="2">
<el-button type="danger" @click="remove">Remove</el-button>
</el-col>
<el-col v-if="!isLocal" :span="4">
<el-popover v-model="copyToLocalVisible" placement="bottom">
<p>Select the local pack to copy to</p>
<el-select v-model="copyToLocalPackName" placeholder="Local pack">
<div>
<div v-if="isLocal" class="emoji-container">
<img
:src="addressOfEmojiInPack(host, packName, file)"
class="emoji-preview-img">
<el-input v-model="emojiName" :placeholder="$t('settings.shortcode')" class="emoji-info"/>
<el-input v-model="emojiFile" :placeholder="$t('settings.file')" class="emoji-info"/>
<div class="emoji-buttons">
<el-button type="primary" class="emoji-button" @click="update">{{ $t('settings.update') }}</el-button>
<el-button class="emoji-button" @click="remove">{{ $t('settings.remove') }}</el-button>
</div>
</div>
<div v-if="!isLocal" class="emoji-container">
<img
:src="addressOfEmojiInPack(host, packName, file)"
class="emoji-preview-img">
<el-input :value="emojiName" :placeholder="$t('settings.shortcode')" class="emoji-info"/>
<el-input :value="emojiFile" :placeholder="$t('settings.file')" class="emoji-info"/>
<el-popover v-model="copyPopoverVisible" placement="left-start" popper-class="copy-popover">
<p>{{ $t('settings.selectLocalPack') }}</p>
<el-select v-model="copyToLocalPackName" :placeholder="$t('settings.localPack')">
<el-option
v-for="(_pack, name) in $store.state.emojiPacks.localPacks"
v-for="(_pack, name) in localPacks"
:key="name"
:label="name"
:value="name" />
</el-select>
<p>Specify a custom shortcode (leave empty to use the same shortcode)</p>
<el-input v-model="copyToShortcode" placeholder="Shortcode (optional)" />
<p>Specify a custom filename (leavy empty to use the same filename)</p>
<el-input v-model="copyToFilename" placeholder="Filename (optional)" />
<p>{{ $t('settings.specifyShortcode') }}</p>
<el-input v-model="copyToShortcode" :placeholder="$t('settings.leaveEmptyShortcode')"/>
<p>{{ $t('settings.specifyFilename') }}</p>
<el-input v-model="copyToFilename" :placeholder="$t('settings.leaveEmptyFilename')"/>
<el-button
:disabled="!copyToLocalPackName"
type="success"
type="primary"
class="copy-to-local-button"
@click="copyToLocal">Copy</el-button>
<el-button slot="reference" type="primary">Copy to local pack...</el-button>
@click="copyToLocal">{{ $t('settings.copy') }}</el-button>
<el-button slot="reference" type="primary" class="emoji-button">{{ $t('settings.copyToLocalPack') }}</el-button>
</el-popover>
</el-col>
<el-col :span="2">
<img
:src="addressOfEmojiInPack(host, packName, file)"
class="emoji-preview-img">
</el-col>
</el-row>
</div>
</div>
</template>
<style>
.emoji-preview-img {
max-width: 5em;
}
.copy-to-local-button {
margin-top: 2em;
float: right;
}
</style>
<script>
import { addressOfEmojiInPack } from '@/api/emojiPacks'
export default {
props: {
host: {
......@@ -89,33 +68,33 @@ export default {
required: true
}
},
data() {
return {
newName: null,
newFile: null,
copyToLocalPackName: null,
copyToLocalVisible: false,
copyPopoverVisible: false,
copyToShortcode: '',
copyToFilename: ''
}
},
computed: {
modifyingName: {
emojiName: {
get() {
// Return a modified name if it was actually modified, otherwise return the old name
// Return a modified name if it was modified, otherwise return the old name
return this.newName !== null ? this.newName : this.name
},
set(val) { this.newName = val }
},
modifyingFile: {
emojiFile: {
get() {
// Return a modified name if it was actually modified, otherwise return the old name
// Return a modified name if it was modified, otherwise return the old name
return this.newFile !== null ? this.newFile : this.file
},
set(val) { this.newFile = val }
},
localPacks() {
return this.$store.state.emojiPacks.localPacks
}
},
methods: {
......@@ -124,8 +103,8 @@ export default {
action: 'update',
packName: this.packName,
oldName: this.name,
newName: this.modifyingName,
newFilename: this.modifyingFile
newName: this.emojiName,
newFilename: this.emojiFile
}).then(() => {
this.newName = null
this.newFile = null
......@@ -151,7 +130,6 @@ export default {
})
})
},
copyToLocal() {
this.$store.dispatch('UpdateAndSavePackFile', {
action: 'add',
......@@ -168,8 +146,35 @@ export default {
this.$store.dispatch('ReloadEmoji')
})
},
addressOfEmojiInPack
}
}
</script>
<style>
.copy-popover {
width: 330px
}
.emoji-button {
margin-left: 10px
}
.emoji-buttons {
min-width: 210px
}
.emoji-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.emoji-preview-img {
max-width: 5em;
}
.emoji-info {
margin-left: 10px
}
.copy-to-local-button {
margin-top: 12px;
float: right;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment