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',
remotePacks: 'Remote packs',
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: {
inviteTokens: 'Invite tokens',

View file

@ -1,111 +1,56 @@
<template>
<div>
<h2>{{ name }}</h2>
<prop-editing-row name="Share pack">
<el-collapse-item :title="name" :name="name">
<el-form label-width="120px" size="small">
<el-form-item :label="$t('settings.sharePack')">
<el-switch v-model="share" :disabled="!isLocal" />
</prop-editing-row>
<prop-editing-row name="Homepage">
</el-form-item>
<el-form-item :label="$t('settings.homepage')">
<el-input v-if="isLocal" v-model="homepage" />
<el-input v-else :value="homepage" />
</prop-editing-row>
<prop-editing-row name="Description">
<el-input v-if="isLocal" :rows="2" v-model="description" type="textarea" />
<el-input v-else :rows="2" :value="description" type="textarea" />
</prop-editing-row>
<prop-editing-row name="License">
</el-form-item>
<el-form-item :label="$t('settings.description')">
<el-input v-if="isLocal" v-model="description" type="textarea" />
<el-input v-else :value="description" type="textarea" />
</el-form-item>
<el-form-item :label="$t('settings.license')">
<el-input v-if="isLocal" v-model="license" />
<el-input v-else :value="license" />
</prop-editing-row>
<prop-editing-row name="Fallback source">
</el-form-item>
<el-form-item :label="$t('settings.fallbackSrc')">
<el-input v-if="isLocal" v-model="fallbackSrc" />
<el-input v-else :value="fallbackSrc" />
</prop-editing-row>
<prop-editing-row v-if="fallbackSrc && fallbackSrc.trim() !== ''" name="Fallback source SHA">
</el-form-item>
<el-form-item
v-if="fallbackSrc && fallbackSrc.trim() !== ''"
:label="$t('settings.fallbackSrcSha')">
{{ pack.pack["fallback-src-sha256"] }}
</prop-editing-row>
<el-button v-if="isLocal" type="success" @click="savePackMetadata">Save pack metadata</el-button>
<el-collapse v-model="shownPackEmoji" class="contents-collapse">
<el-collapse-item :name="name" title="Show pack contents">
<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-form-item>
<el-form-item class="save-pack-button">
<el-button v-if="isLocal" type="primary" @click="savePackMetadata">{{ $t('settings.savePackMetadata') }}</el-button>
</el-form-item>
</el-form>
</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>
<style>
.shared-pack-dl-box {
margin: 1em;
}
.dl-as-input {
margin: 1em;
max-width: 30%;
}
.contents-collapse {
margin: 1em;
}
.pack-actions {
margin-top: 1em;
}
.new-emoji-uploader {
margin-bottom: 3em;
}
.el-collapse-item__content {
padding-bottom: 0;
}
.el-collapse-item__header {
height: 36px;
}
.emoji-pack-card {
margin-top: 5px;
}
</style>
<script>
import PropEditingRow from './PropertyEditingRow.vue'
import SingleEmojiEditor from './SingleEmojiEditor.vue'
import NewEmojiUploader from './NewEmojiUploader.vue'
export default {
components: { PropEditingRow, SingleEmojiEditor, NewEmojiUploader },
components: { SingleEmojiEditor, NewEmojiUploader },
props: {
name: {
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>
</div>
</el-form-item>
<el-form-item v-if="localPacks.length > 0" :label="$t('settings.packs')">
<div v-for="(pack, name) in localPacks" :key="name">
<el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('settings.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" />
<el-divider />
</div>
</el-collapse>
</el-form-item>
<div class="line"/>
<el-form-item :label="$t('settings.remotePacks')">
@ -44,11 +43,10 @@
</el-button>
</div>
</el-form-item>
<el-form-item v-if="remotePacks.length > 0" :label="$t('settings.packs')">
<div v-for="(pack, name) in remotePacks" :key="name">
<el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('settings.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="true" />
<el-divider />
</div>
</el-collapse>
</el-form-item>
</el-form>
</div>
@ -62,7 +60,9 @@ export default {
data() {
return {
remoteInstanceAddress: '',
newPackName: ''
newPackName: '',
activeLocalPack: '',
activeRemotePack: ''
}
},
computed: {