Merge branch 'fix/list-remote-emoji' into 'develop'
Fix listing remote emoji Closes #79 See merge request pleroma/admin-fe!95
This commit is contained in:
Angelina Filippova
commit
dbc3bc1191
6 changed files with 251 additions and 61 deletions
|
|
@ -416,7 +416,7 @@ export default {
|
|||
shortcode: 'Shortcode',
|
||||
fallbackSrc: 'Fallback source',
|
||||
fallbackSrcSha: 'Fallback source SHA',
|
||||
savePackMetadata: 'Save pack metadata',
|
||||
saveMetadata: 'Save metadata',
|
||||
deletePack: 'Delete pack',
|
||||
downloadPack: 'Download pack',
|
||||
downloadPackArchive: 'Download pack archive',
|
||||
|
|
@ -428,6 +428,7 @@ export default {
|
|||
willBeUsable: 'It will then be usable and shareable from the current instance',
|
||||
downloadAsOptional: 'Download as (optional)',
|
||||
downloadSharedPack: 'Download shared pack to current instance',
|
||||
downloadSharedPackMobile: 'Download pack to instance',
|
||||
optional: 'optional',
|
||||
uploadFile: 'Upload a file',
|
||||
url: 'URL',
|
||||
|
|
|
|||
|
|
@ -16,24 +16,25 @@ import Vue from 'vue'
|
|||
const packs = {
|
||||
state: {
|
||||
localPacks: {},
|
||||
remoteInstance: '',
|
||||
remotePacks: {}
|
||||
},
|
||||
mutations: {
|
||||
SET_LOCAL_PACKS: (state, packs) => {
|
||||
state.localPacks = packs
|
||||
},
|
||||
SET_REMOTE_INSTANCE: (state, name) => {
|
||||
state.remoteInstance = name
|
||||
},
|
||||
SET_REMOTE_PACKS: (state, packs) => {
|
||||
state.remotePacks = packs
|
||||
},
|
||||
|
||||
UPDATE_LOCAL_PACK_VAL: (state, { name, key, value }) => {
|
||||
Vue.set(state.localPacks[name]['pack'], key, value)
|
||||
},
|
||||
|
||||
UPDATE_LOCAL_PACK_PACK: (state, { name, pack }) => {
|
||||
state.localPacks[name]['pack'] = pack
|
||||
},
|
||||
|
||||
UPDATE_LOCAL_PACK_FILES: (state, { name, files }) => {
|
||||
// Use vue.set in case "files" was null
|
||||
Vue.set(
|
||||
|
|
@ -105,6 +106,7 @@ const packs = {
|
|||
async SetRemoteEmojiPacks({ commit, getters }, { remoteInstance }) {
|
||||
const { data } = await listRemotePacks(getters.authHost, getters.token, remoteInstance)
|
||||
|
||||
commit('SET_REMOTE_INSTANCE', remoteInstance)
|
||||
commit('SET_REMOTE_PACKS', data)
|
||||
},
|
||||
async UpdateAndSavePackFile({ commit, getters }, args) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<el-collapse-item :title="name" :name="name" class="has-background">
|
||||
<el-form v-if="isLocal" label-width="120px" label-position="left" size="small" class="emoji-pack-metadata">
|
||||
<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>
|
||||
|
|
@ -21,11 +21,13 @@
|
|||
:label=" $t('emoji.fallbackSrcSha')">
|
||||
{{ pack.pack["fallback-src-sha256"] }}
|
||||
</el-form-item>
|
||||
<el-form-item class="save-pack-button">
|
||||
<el-button type="primary" @click="savePackMetadata">{{ $t('emoji.savePackMetadata') }}</el-button>
|
||||
<el-button @click="deletePack">{{ $t('emoji.deletePack') }}</el-button>
|
||||
</el-form-item>
|
||||
<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`"
|
||||
|
|
@ -34,9 +36,9 @@
|
|||
target="_blank">
|
||||
<el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button>
|
||||
</el-link>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form v-if="!isLocal" label-width="120px" label-position="left" size="small" class="emoji-pack-metadata">
|
||||
</div>
|
||||
</div>
|
||||
<el-form v-if="!isLocal" :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>
|
||||
|
|
@ -91,7 +93,7 @@
|
|||
<div class="download-shared-pack">
|
||||
<el-input v-model="downloadSharedAs" :placeholder=" $t('emoji.downloadAsOptional')"/>
|
||||
<el-button type="primary" class="download-shared-pack-button" @click="downloadFromInstance">
|
||||
{{ $t('emoji.downloadSharedPack') }}
|
||||
{{ isDesktop ? $t('emoji.downloadSharedPack') : $t('emoji.downloadSharedPackMobile') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
|
|
@ -104,7 +106,6 @@ import SingleEmojiEditor from './SingleEmojiEditor.vue'
|
|||
import NewEmojiUploader from './NewEmojiUploader.vue'
|
||||
|
||||
export default {
|
||||
|
||||
components: { SingleEmojiEditor, NewEmojiUploader },
|
||||
props: {
|
||||
name: {
|
||||
|
|
@ -132,6 +133,24 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
isDesktop() {
|
||||
return this.$store.state.app.device === 'desktop'
|
||||
},
|
||||
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) {
|
||||
|
|
@ -221,6 +240,18 @@ export default {
|
|||
.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;
|
||||
|
|
@ -251,7 +282,54 @@ export default {
|
|||
.no-background .el-collapse-item__header {
|
||||
background: white;
|
||||
}
|
||||
.save-pack-button {
|
||||
margin-bottom: 5px
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<el-form label-width="130px" label-position="left" size="small">
|
||||
<el-form :label-position="isMobile ? 'top' : 'left'" label-width="130px" size="small" class="new-emoji-uploader-form">
|
||||
<el-form-item :label="$t('emoji.shortcode')">
|
||||
<el-input v-model="shortcode" :placeholder="$t('emoji.required')"/>
|
||||
</el-form-item>
|
||||
|
|
@ -25,30 +25,6 @@
|
|||
</el-form>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.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>
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -65,6 +41,9 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
isDesktop() {
|
||||
return this.$store.state.app.device === 'desktop'
|
||||
},
|
||||
shortcodePresent() {
|
||||
return this.shortcode.trim() === ''
|
||||
}
|
||||
|
|
@ -88,3 +67,34 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel='stylesheet/scss' lang='scss'>
|
||||
.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;
|
||||
}
|
||||
@media only screen and (max-width:480px) {
|
||||
.new-emoji-uploader-form {
|
||||
label.el-form-item__label {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="isLocal" class="emoji-container">
|
||||
<div v-if="isLocal" :class="isMobile ? 'emoji-container-flex' : 'emoji-container-grid'">
|
||||
<img
|
||||
:src="addressOfEmojiInPack(host, packName, file)"
|
||||
class="emoji-preview-img">
|
||||
|
|
@ -8,19 +8,19 @@
|
|||
<el-input v-model="emojiFile" :placeholder="$t('emoji.file')" class="emoji-info"/>
|
||||
<div class="emoji-buttons">
|
||||
<el-button type="primary" @click="update">{{ $t('emoji.update') }}</el-button>
|
||||
<el-button @click="remove">{{ $t('emoji.remove') }}</el-button>
|
||||
<el-button class="remove-emoji-button" @click="remove">{{ $t('emoji.remove') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!isLocal" class="emoji-container">
|
||||
<div v-if="!isLocal" :class="isMobile ? 'emoji-container-flex' : 'remote-emoji-container-grid'">
|
||||
<img
|
||||
:src="addressOfEmojiInPack(host, packName, file)"
|
||||
:src="addressOfEmojiInPack(remoteInstance, packName, file)"
|
||||
class="emoji-preview-img">
|
||||
<el-input :value="emojiName" :placeholder="$t('emoji.shortcode')" class="emoji-info"/>
|
||||
<el-input :value="emojiFile" :placeholder="$t('emoji.file')" class="emoji-info"/>
|
||||
<el-popover v-model="copyPopoverVisible" placement="left-start" popper-class="copy-popover">
|
||||
<el-popover v-model="copyPopoverVisible" placement="left-start" popper-class="copy-popover" class="copy-pack-container">
|
||||
<p>{{ $t('emoji.selectLocalPack') }}</p>
|
||||
<el-select v-model="copyToLocalPackName" :placeholder="$t('emoji.localPack')">
|
||||
<el-select v-model="copyToLocalPackName" :placeholder="$t('emoji.localPack')" class="copy-pack-select">
|
||||
<el-option
|
||||
v-for="(_pack, name) in localPacks"
|
||||
:key="name"
|
||||
|
|
@ -34,7 +34,6 @@
|
|||
<el-button
|
||||
:disabled="!copyToLocalPackName"
|
||||
type="primary"
|
||||
class="copy-to-local-button"
|
||||
@click="copyToLocal">{{ $t('emoji.copy') }}</el-button>
|
||||
<el-button slot="reference" type="primary" class="emoji-button">{{ $t('emoji.copyToLocalPack') }}</el-button>
|
||||
</el-popover>
|
||||
|
|
@ -93,8 +92,14 @@ export default {
|
|||
},
|
||||
set(val) { this.newFile = val }
|
||||
},
|
||||
isDesktop() {
|
||||
return this.$store.state.app.device === 'desktop'
|
||||
},
|
||||
localPacks() {
|
||||
return this.$store.state.emojiPacks.localPacks
|
||||
},
|
||||
remoteInstance() {
|
||||
return this.$store.state.emojiPacks.remoteInstance
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -151,7 +156,7 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style rel='stylesheet/scss' lang='scss'>
|
||||
.copy-popover {
|
||||
width: 330px
|
||||
}
|
||||
|
|
@ -159,9 +164,9 @@ export default {
|
|||
place-self: center;
|
||||
min-width: 200px
|
||||
}
|
||||
.emoji-container {
|
||||
.emoji-container-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 75px auto auto 195px;
|
||||
grid-template-columns: 75px auto auto 200px;
|
||||
grid-column-gap: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -172,8 +177,56 @@ export default {
|
|||
.emoji-info {
|
||||
place-self: center;
|
||||
}
|
||||
.copy-to-local-button {
|
||||
margin-top: 12px;
|
||||
float: right;
|
||||
.copy-pack-container {
|
||||
place-self: center stretch;
|
||||
}
|
||||
.copy-pack-select {
|
||||
width: 100%;
|
||||
}
|
||||
.remote-emoji-container-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 75px auto auto 160px;
|
||||
grid-column-gap: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@media only screen and (max-width:480px) {
|
||||
.emoji-container-flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #dcdfe6;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
border-radius: 4px;
|
||||
padding: 15px;
|
||||
margin: 0 15px 15px 0;
|
||||
}
|
||||
.emoji-preview-img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.emoji-info {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.emoji-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
button {
|
||||
padding: 10px 5px;
|
||||
width: 47%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:801px) and (min-width: 481px) {
|
||||
.emoji-container-grid {
|
||||
grid-column-gap: 10px;
|
||||
}
|
||||
.emoji-buttons {
|
||||
.el-button+.el-button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.remote-emoji-container-grid {
|
||||
grid-column-gap: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="emoji-packs">
|
||||
<h1 class="emoji-packs-header">{{ $t('emoji.emojiPacks') }}</h1>
|
||||
<div class="button-container">
|
||||
<el-button type="primary" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button>
|
||||
<el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom">
|
||||
<div class="emoji-packs-header-button-container">
|
||||
<el-button type="primary" class="reload-emoji-button" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button>
|
||||
<el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom" class="import-pack-button">
|
||||
<el-button type="primary" @click="importFromFS">
|
||||
{{ $t('emoji.importPacks') }}
|
||||
</el-button>
|
||||
|
|
@ -76,9 +76,9 @@ export default {
|
|||
},
|
||||
labelWidth() {
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
return '105px'
|
||||
} else if (this.isTablet) {
|
||||
return '200px'
|
||||
return '180px'
|
||||
} else {
|
||||
return '240px'
|
||||
}
|
||||
|
|
@ -140,7 +140,8 @@ export default {
|
|||
</script>
|
||||
|
||||
<style rel='stylesheet/scss' lang='scss'>
|
||||
.button-container {
|
||||
.emoji-packs-header-button-container {
|
||||
display: flex;
|
||||
margin: 0 0 22px 15px;
|
||||
}
|
||||
.create-pack {
|
||||
|
|
@ -156,6 +157,9 @@ export default {
|
|||
.emoji-packs-header {
|
||||
margin: 22px 0 20px 15px;
|
||||
}
|
||||
.import-pack-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
|
|
@ -169,4 +173,46 @@ export default {
|
|||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:480px) {
|
||||
.create-pack {
|
||||
height: 82px;
|
||||
flex-direction: column;
|
||||
}
|
||||
.create-pack-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
.divider {
|
||||
margin: 15px 0;
|
||||
}
|
||||
.el-message {
|
||||
min-width: 80%;
|
||||
}
|
||||
.el-message-box {
|
||||
width: 80%;
|
||||
}
|
||||
.emoji-packs-form {
|
||||
margin: 0 7px;
|
||||
label {
|
||||
padding-right: 8px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.emoji-packs-header {
|
||||
margin: 15px;
|
||||
}
|
||||
.emoji-packs-header-button-container {
|
||||
height: 82px;
|
||||
flex-direction: column;
|
||||
.el-button+.el-button {
|
||||
margin: 7px 0 0 0;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
.reload-emoji-button {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue