Add form for entering or changing emoji pack metadata

This commit is contained in:
Angelina Filippova 2019-10-06 02:17:50 +03:00
parent 30a1a25ff7
commit 932d20cfc6
4 changed files with 58 additions and 133 deletions

View file

@ -323,7 +323,14 @@ export default {
packs: 'Packs', packs: 'Packs',
remotePacks: 'Remote packs', remotePacks: 'Remote packs',
remoteInstanceAddress: 'Remote instance address', remoteInstanceAddress: 'Remote instance address',
refreshRemote: 'Refresh remote packs' refreshRemote: 'Refresh remote packs',
sharePack: 'Share pack',
homepage: 'Homepage',
description: 'Description',
license: 'License',
fallbackSrc: 'Fallback source',
fallbackSrcSha: 'Fallback source SHA',
savePackMetadata: 'Save pack metadata'
}, },
invites: { invites: {
inviteTokens: 'Invite tokens', inviteTokens: 'Invite tokens',

View file

@ -1,111 +1,56 @@
<template> <template>
<div> <el-collapse-item :title="name" :name="name">
<h2>{{ name }}</h2> <el-form label-width="120px" size="small">
<el-form-item :label="$t('settings.sharePack')">
<prop-editing-row name="Share pack"> <el-switch v-model="share" :disabled="!isLocal" />
<el-switch v-model="share" :disabled="!isLocal" /> </el-form-item>
</prop-editing-row> <el-form-item :label="$t('settings.homepage')">
<prop-editing-row name="Homepage"> <el-input v-if="isLocal" v-model="homepage" />
<el-input v-if="isLocal" v-model="homepage" /> <el-input v-else :value="homepage" />
<el-input v-else :value="homepage" /> </el-form-item>
</prop-editing-row> <el-form-item :label="$t('settings.description')">
<prop-editing-row name="Description"> <el-input v-if="isLocal" v-model="description" type="textarea" />
<el-input v-if="isLocal" :rows="2" v-model="description" type="textarea" /> <el-input v-else :value="description" type="textarea" />
<el-input v-else :rows="2" :value="description" type="textarea" /> </el-form-item>
</prop-editing-row> <el-form-item :label="$t('settings.license')">
<prop-editing-row name="License"> <el-input v-if="isLocal" v-model="license" />
<el-input v-if="isLocal" v-model="license" /> <el-input v-else :value="license" />
<el-input v-else :value="license" /> </el-form-item>
</prop-editing-row> <el-form-item :label="$t('settings.fallbackSrc')">
<prop-editing-row name="Fallback source"> <el-input v-if="isLocal" v-model="fallbackSrc" />
<el-input v-if="isLocal" v-model="fallbackSrc" /> <el-input v-else :value="fallbackSrc" />
<el-input v-else :value="fallbackSrc" /> </el-form-item>
</prop-editing-row> <el-form-item
v-if="fallbackSrc && fallbackSrc.trim() !== ''"
<prop-editing-row v-if="fallbackSrc && fallbackSrc.trim() !== ''" name="Fallback source SHA"> :label="$t('settings.fallbackSrcSha')">
{{ pack.pack["fallback-src-sha256"] }} {{ pack.pack["fallback-src-sha256"] }}
</prop-editing-row> </el-form-item>
<el-form-item class="save-pack-button">
<el-button v-if="isLocal" type="success" @click="savePackMetadata">Save pack metadata</el-button> <el-button v-if="isLocal" type="primary" @click="savePackMetadata">{{ $t('settings.savePackMetadata') }}</el-button>
</el-form-item>
<el-collapse v-model="shownPackEmoji" class="contents-collapse"> </el-form>
<el-collapse-item :name="name" title="Show pack contents"> </el-collapse-item>
<new-emoji-uploader v-if="isLocal" :pack-name="name" class="new-emoji-uploader" />
<h4>Manage existing emoji</h4>
<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>
<div v-if="!isLocal" class="shared-pack-dl-box">
<div>
This will download the "{{ name }}" pack to the current instance under the name
"{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" (can be changed below).
It will then be usable and shareable from the current instance.
</div>
<el-button type="primary" @click="downloadFromInstance">
Download shared pack to current instance
</el-button>
<el-input v-model="downloadSharedAs" class="dl-as-input" placeholder="Download as (optional)" />
</div>
<el-link
v-if="pack.pack['can-download']"
:href="`//${host}/api/pleroma/emoji/packs/${name}/download_shared`"
type="primary"
target="_blank">
Download pack archive
</el-link>
<div v-if="isLocal" class="pack-actions">
<el-button type="danger" @click="deletePack">
Delete the local pack
</el-button>
</div>
</div>
</template> </template>
<style> <style>
.shared-pack-dl-box { .el-collapse-item__content {
margin: 1em; padding-bottom: 0;
} }
.el-collapse-item__header {
.dl-as-input { height: 36px;
margin: 1em; }
max-width: 30%; .emoji-pack-card {
} margin-top: 5px;
}
.contents-collapse {
margin: 1em;
}
.pack-actions {
margin-top: 1em;
}
.new-emoji-uploader {
margin-bottom: 3em;
}
</style> </style>
<script> <script>
import PropEditingRow from './PropertyEditingRow.vue'
import SingleEmojiEditor from './SingleEmojiEditor.vue' import SingleEmojiEditor from './SingleEmojiEditor.vue'
import NewEmojiUploader from './NewEmojiUploader.vue' import NewEmojiUploader from './NewEmojiUploader.vue'
export default { export default {
components: { PropEditingRow, SingleEmojiEditor, NewEmojiUploader }, components: { SingleEmojiEditor, NewEmojiUploader },
props: { props: {
name: { name: {
type: String, type: String,

View file

@ -1,27 +0,0 @@
<template>
<el-row :gutter="20" class="prop-row">
<el-col :span="4">
<b>{{ name }}</b>
</el-col>
<el-col :span="10">
<slot/>
</el-col>
</el-row>
</template>
<style>
.prop-row {
margin-bottom: 1em;
}
</style>
<script>
export default {
props: {
name: {
type: String,
required: true
}
}
}
</script>

View file

@ -24,11 +24,10 @@
</el-button> </el-button>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item v-if="localPacks.length > 0" :label="$t('settings.packs')"> <el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('settings.packs')">
<div v-for="(pack, name) in localPacks" :key="name"> <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" /> <emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
<el-divider /> </el-collapse>
</div>
</el-form-item> </el-form-item>
<div class="line"/> <div class="line"/>
<el-form-item :label="$t('settings.remotePacks')"> <el-form-item :label="$t('settings.remotePacks')">
@ -44,11 +43,10 @@
</el-button> </el-button>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item v-if="remotePacks.length > 0" :label="$t('settings.packs')"> <el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('settings.packs')">
<div v-for="(pack, name) in remotePacks" :key="name"> <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="true" /> <emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
<el-divider /> </el-collapse>
</div>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
@ -62,7 +60,9 @@ export default {
data() { data() {
return { return {
remoteInstanceAddress: '', remoteInstanceAddress: '',
newPackName: '' newPackName: '',
activeLocalPack: '',
activeRemotePack: ''
} }
}, },
computed: { computed: {