qbism/qb-admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'feature/move-emojipacks' into 'develop'

Browse source 
Move and fix Emoji packs

Closes #74 and #71

See merge request pleroma/admin-fe!87
This commit is contained in:
Angelina Filippova 2020-02-01 13:18:20 +00:00
commit 2bed82547d
8 changed files with 229 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
src/lang/en.js
View file

@ -350,56 +350,8 @@ export default {
followRelay: 'Follow new relay', followRelay: 'Follow new relay',
instanceUrl: 'Instance URL', instanceUrl: 'Instance URL',
success: 'Settings changed successfully!', success: 'Settings changed successfully!',
emojiPacks: 'Emoji packs',
reloadEmoji: 'Reload emoji',
importPacks: 'Import packs from the server filesystem',
importEmojiTooltip: 'Importing from the filesystem will scan the directories and import those without pack.json but with emoji.txt or without neither',
localPacks: 'Local packs',
refreshLocalPacks: 'Refresh local packs',
createLocalPack: 'Create a new local pack',
packs: 'Packs',
remotePacks: 'Remote packs',
remoteInstanceAddress: 'Remote instance address',
refreshRemote: 'Refresh remote packs',
sharePack: 'Share pack',
homepage: 'Homepage',
description: 'Description', description: 'Description',
license: 'License',
fallbackSrc: 'Fallback source',
fallbackSrcSha: 'Fallback source SHA',
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',
showPackContents: 'Show pack contents',
manageEmoji: 'Manage existing emoji',
file: 'File',
update: 'Update',
remove: 'Remove',
removeFromDB: 'Remove setting from the DB', removeFromDB: 'Remove setting from the DB',
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',
thisWillDownload: 'This will download the',
downloadToCurrentInstance: 'pack to the current instance under the name',
canBeChanged: 'can be changed below',
willBeUsable: 'It will then be usable and shareable from the current instance',
downloadPack: 'Download pack',
deletePack: 'Delete pack',
downloadSharedPack: 'Download shared pack to current instance',
downloadAsOptional: 'Download as (optional)',
downloadPackArchive: 'Download pack archive',
successfullyDownloaded: 'Successfully downloaded', successfullyDownloaded: 'Successfully downloaded',
successfullyImported: 'Successfully imported', successfullyImported: 'Successfully imported',
nowNewPacksToImport: 'No new packs to import', nowNewPacksToImport: 'No new packs to import',
@ -433,5 +385,58 @@ export default {
emailSent: 'Invite was sent', emailSent: 'Invite was sent',
submitFormError: 'There are invalid values in the form. Please fix them before continuing.', submitFormError: 'There are invalid values in the form. Please fix them before continuing.',
inviteViaEmailAlert: 'To send invite via email make sure to enable `invites_enabled` and disable `registrations_open`' inviteViaEmailAlert: 'To send invite via email make sure to enable `invites_enabled` and disable `registrations_open`'
},
emoji: {
emojiPacks: 'Emoji packs',
reloaded: 'Emoji reloaded successfully!',
refreshed: 'Emoji refreshed successfully!',
importEmojiTooltip: 'Importing from the filesystem will scan the directories and import those without pack.json but with emoji.txt or without neither',
reloadEmoji: 'Reload emoji',
importPacks: 'Import packs from the server filesystem',
localPacks: 'Local packs',
refreshLocalPacks: 'Refresh local packs',
createLocalPack: 'Create a new local pack',
remotePacks: 'Remote packs',
remoteInstanceAddress: 'Remote instance address',
refreshRemote: 'Refresh remote packs',
sharePack: 'Share pack',
required: 'required',
homepage: 'Homepage',
description: 'Description',
packs: 'Packs',
license: 'License',
shortcode: 'Shortcode',
fallbackSrc: 'Fallback source',
fallbackSrcSha: 'Fallback source SHA',
savePackMetadata: 'Save pack metadata',
deletePack: 'Delete pack',
downloadPack: 'Download pack',
downloadPackArchive: 'Download pack archive',
addNewEmoji: 'Add new emoji to the pack',
manageEmoji: 'Manage existing emoji',
thisWillDownload: 'This will download the',
downloadToCurrentInstance: 'pack to the current instance under the name',
canBeChanged: 'can be changed below',
willBeUsable: 'It will then be usable and shareable from the current instance',
downloadAsOptional: 'Download as (optional)',
downloadSharedPack: 'Download shared pack to current instance',
optional: 'optional',
uploadFile: 'Upload a file',
url: 'URL',
clickToUpload: 'Click to upload',
upload: 'Upload',
customFilename: 'Custom filename',
customFilenameDesc: 'Custom file name (optional)',
file: 'File',
localPack: 'Local pack',
leaveEmptyShortcode: 'leave empty to use the same shortcode',
leaveEmptyFilename: 'leave empty to use the same filename',
update: 'Update',
remove: 'Remove',
selectLocalPack: 'Select the local pack to copy to',
specifyShortcode: 'Specify a custom shortcode',
specifyFilename: 'Specify a custom filename',
copy: 'Copy',
copyToLocalPack: 'Copy to local pack'
} }
} }

15
src/router/index.js
View file

@ -63,6 +63,20 @@ const invites = {
] ]
} }
const emojiPacksDisabled = disabledFeatures.includes('emoji-packs')
const emojiPacks = {
path: '/emoji_packs',
component: Layout,
children: [
{
path: 'index',
component: () => import('@/views/emojiPacks/index'),
name: 'Emoji Packs',
meta: { title: 'Emoji Packs', icon: 'eye-open', noCache: true }
}
]
}
const moderationLogDisabled = disabledFeatures.includes('moderation-log') const moderationLogDisabled = disabledFeatures.includes('moderation-log')
const moderationLog = { const moderationLog = {
path: '/moderation_log', path: '/moderation_log',
@ -143,6 +157,7 @@ export const asyncRouterMap = [
...(statusesDisabled ? [] : [statuses]), ...(statusesDisabled ? [] : [statuses]),
...(reportsDisabled ? [] : [reports]), ...(reportsDisabled ? [] : [reports]),
...(invitesDisabled ? [] : [invites]), ...(invitesDisabled ? [] : [invites]),
...(emojiPacksDisabled ? [] : [emojiPacks]),
...(moderationLogDisabled ? [] : [moderationLog]), ...(moderationLogDisabled ? [] : [moderationLog]),
...(settingsDisabled ? [] : [settings]), ...(settingsDisabled ? [] : [settings]),
{ {

48
src/views/emojiPacks/components/EmojiPack.vue
View file

@ -1,29 +1,29 @@
<template> <template>
<el-collapse-item :title="name" :name="name" class="has-background"> <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="120px" label-position="left" size="small" class="emoji-pack-metadata">
<el-form-item :label="$t('settings.sharePack')"> <el-form-item :label=" $t('emoji.sharePack')">
<el-switch v-model="share" /> <el-switch v-model="share" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('settings.homepage')"> <el-form-item :label=" $t('emoji.homepage')">
<el-input v-model="homepage" /> <el-input v-model="homepage" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('settings.description')"> <el-form-item :label=" $t('emoji.description')">
<el-input v-model="description" type="textarea" /> <el-input v-model="description" type="textarea" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('settings.license')"> <el-form-item :label=" $t('emoji.license')">
<el-input v-model="license" /> <el-input v-model="license" />
</el-form-item> </el-form-item>
<el-form-item :label="$t('settings.fallbackSrc')"> <el-form-item :label=" $t('emoji.fallbackSrc')">
<el-input v-model="fallbackSrc" /> <el-input v-model="fallbackSrc" />
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="fallbackSrc && fallbackSrc.trim() !== ''" v-if="fallbackSrc && fallbackSrc.trim() !== ''"
:label="$t('settings.fallbackSrcSha')"> :label=" $t('emoji.fallbackSrcSha')">
{{ pack.pack["fallback-src-sha256"] }} {{ pack.pack["fallback-src-sha256"] }}
</el-form-item> </el-form-item>
<el-form-item class="save-pack-button"> <el-form-item class="save-pack-button">
<el-button type="primary" @click="savePackMetadata">{{ $t('settings.savePackMetadata') }}</el-button> <el-button type="primary" @click="savePackMetadata">{{ $t('emoji.savePackMetadata') }}</el-button>
<el-button @click="deletePack">{{ $t('settings.deletePack') }}</el-button> <el-button @click="deletePack">{{ $t('emoji.deletePack') }}</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-link <el-link
@ -32,29 +32,29 @@
:underline="false" :underline="false"
type="primary" type="primary"
target="_blank"> target="_blank">
<el-button class="download-archive">{{ $t('settings.downloadPackArchive') }}</el-button> <el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button>
</el-link> </el-link>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-form v-if="!isLocal" label-width="120px" label-position="left" size="small" class="emoji-pack-metadata"> <el-form v-if="!isLocal" label-width="120px" label-position="left" size="small" class="emoji-pack-metadata">
<el-form-item :label="$t('settings.sharePack')"> <el-form-item :label=" $t('emoji.sharePack')">
<el-switch v-model="share" disabled /> <el-switch v-model="share" disabled />
</el-form-item> </el-form-item>
<el-form-item v-if="homepage" :label="$t('settings.homepage')"> <el-form-item v-if="homepage" :label=" $t('emoji.homepage')">
<span>{{ homepage }}</span> <span>{{ homepage }}</span>
</el-form-item> </el-form-item>
<el-form-item v-if="description" :label="$t('settings.description')"> <el-form-item v-if="description" :label=" $t('emoji.description')">
<span>{{ description }}</span> <span>{{ description }}</span>
</el-form-item> </el-form-item>
<el-form-item v-if="license" :label="$t('settings.license')"> <el-form-item v-if="license" :label=" $t('emoji.license')">
<span>{{ license }}</span> <span>{{ license }}</span>
</el-form-item> </el-form-item>
<el-form-item v-if="fallbackSrc" :label="$t('settings.fallbackSrc')"> <el-form-item v-if="fallbackSrc" :label=" $t('emoji.fallbackSrc')">
<span>{{ fallbackSrc }}</span> <span>{{ fallbackSrc }}</span>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="fallbackSrc && fallbackSrc.trim() !== ''" v-if="fallbackSrc && fallbackSrc.trim() !== ''"
:label="$t('settings.fallbackSrcSha')"> :label=" $t('emoji.fallbackSrcSha')">
{{ pack.pack["fallback-src-sha256"] }} {{ pack.pack["fallback-src-sha256"] }}
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@ -64,15 +64,15 @@
:underline="false" :underline="false"
type="primary" type="primary"
target="_blank"> target="_blank">
<el-button class="download-archive">{{ $t('settings.downloadPackArchive') }}</el-button> <el-button class="download-archive">{{ $t('emoji.downloadPackArchive') }}</el-button>
</el-link> </el-link>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-collapse v-model="showPackContent" class="contents-collapse"> <el-collapse v-model="showPackContent" class="contents-collapse">
<el-collapse-item v-if="isLocal" :title="$t('settings.addNewEmoji')" name="addEmoji" class="no-background"> <el-collapse-item v-if="isLocal" :title=" $t('emoji.addNewEmoji')" name="addEmoji" class="no-background">
<new-emoji-uploader :pack-name="name"/> <new-emoji-uploader :pack-name="name"/>
</el-collapse-item> </el-collapse-item>
<el-collapse-item v-if="Object.keys(pack.files).length > 0" :title="$t('settings.manageEmoji')" name="manageEmoji" class="no-background"> <el-collapse-item v-if="Object.keys(pack.files).length > 0" :title=" $t('emoji.manageEmoji')" name="manageEmoji" class="no-background">
<single-emoji-editor <single-emoji-editor
v-for="(file, ename) in pack.files" v-for="(file, ename) in pack.files"
:key="ename" :key="ename"
@ -82,16 +82,16 @@
:file="file" :file="file"
:is-local="isLocal" /> :is-local="isLocal" />
</el-collapse-item> </el-collapse-item>
<el-collapse-item v-if="!isLocal" :title="$t('settings.downloadPack')" name="downloadPack" class="no-background"> <el-collapse-item v-if="!isLocal" :title=" $t('emoji.downloadPack')" name="downloadPack" class="no-background">
<p> <p>
{{ $t('settings.thisWillDownload') }} "{{ name }}" {{ $t('settings.downloadToCurrentInstance') }} {{ $t('emoji.thisWillDownload') }} "{{ name }}" {{ $t('emoji.downloadToCurrentInstance') }}
"{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" ({{ $t('settings.canBeChanged') }}). "{{ downloadSharedAs.trim() === '' ? name : downloadSharedAs }}" ({{ $t('emoji.canBeChanged') }}).
{{ $t('settings.willBeUsable') }}. {{ $t('emoji.willBeUsable') }}.
</p> </p>
<div class="download-shared-pack"> <div class="download-shared-pack">
<el-input v-model="downloadSharedAs" :placeholder="$t('settings.downloadAsOptional')"/> <el-input v-model="downloadSharedAs" :placeholder=" $t('emoji.downloadAsOptional')"/>
<el-button type="primary" class="download-shared-pack-button" @click="downloadFromInstance"> <el-button type="primary" class="download-shared-pack-button" @click="downloadFromInstance">
{{ $t('settings.downloadSharedPack') }} {{ $t('emoji.downloadSharedPack') }}
</el-button> </el-button>
</div> </div>
</el-collapse-item> </el-collapse-item>

16
src/views/emojiPacks/components/NewEmojiUploader.vue
View file

@ -1,15 +1,15 @@
<template> <template>
<el-form label-width="130px" label-position="left" size="small"> <el-form label-width="130px" label-position="left" size="small">
<el-form-item :label="$t('settings.shortcode')"> <el-form-item :label="$t('emoji.shortcode')">
<el-input v-model="shortcode" :placeholder="$t('settings.required')"/> <el-input v-model="shortcode" :placeholder="$t('emoji.required')"/>
</el-form-item> </el-form-item>
<el-form-item :label="$t('settings.customFilename')"> <el-form-item :label="$t('emoji.customFilename')">
<el-input v-model="customFileName" :placeholder="$t('settings.optional')"/> <el-input v-model="customFileName" :placeholder="$t('emoji.optional')"/>
</el-form-item> </el-form-item>
<el-form-item :label="$t('settings.uploadFile')"> <el-form-item :label="$t('emoji.uploadFile')">
<div class="upload-file-url"> <div class="upload-file-url">
<el-input v-model="imageUploadURL" :placeholder="$t('settings.url')"/> <el-input v-model="imageUploadURL" :placeholder="$t('emoji.url')"/>
<el-button :disabled="shortcodePresent" type="primary" class="upload-button" @click="uploadEmoji">{{ $t('settings.upload') }}</el-button> <el-button :disabled="shortcodePresent" type="primary" class="upload-button" @click="uploadEmoji">{{ $t('emoji.upload') }}</el-button>
</div> </div>
<div class="upload-container"> <div class="upload-container">
<p class="text">or</p> <p class="text">or</p>
@ -18,7 +18,7 @@
:multiple="false" :multiple="false"
:show-file-list="false" :show-file-list="false"
action="add"> action="add">
<el-button :disabled="shortcodePresent" type="primary">{{ $t('settings.clickToUpload') }}</el-button> <el-button :disabled="shortcodePresent" type="primary">{{ $t('emoji.clickToUpload') }}</el-button>
</el-upload> </el-upload>
</div> </div>
</el-form-item> </el-form-item>

45
src/views/emojiPacks/components/SingleEmojiEditor.vue
View file

@ -4,11 +4,11 @@
<img <img
:src="addressOfEmojiInPack(host, packName, file)" :src="addressOfEmojiInPack(host, packName, file)"
class="emoji-preview-img"> class="emoji-preview-img">
<el-input v-model="emojiName" :placeholder="$t('settings.shortcode')" class="emoji-info"/> <el-input v-model="emojiName" :placeholder="$t('emoji.shortcode')" class="emoji-info"/>
<el-input v-model="emojiFile" :placeholder="$t('settings.file')" class="emoji-info"/> <el-input v-model="emojiFile" :placeholder="$t('emoji.file')" class="emoji-info"/>
<div class="emoji-buttons"> <div class="emoji-buttons">
<el-button type="primary" class="emoji-button" @click="update">{{ $t('settings.update') }}</el-button> <el-button type="primary" @click="update">{{ $t('emoji.update') }}</el-button>
<el-button class="emoji-button" @click="remove">{{ $t('settings.remove') }}</el-button> <el-button @click="remove">{{ $t('emoji.remove') }}</el-button>
</div> </div>
</div> </div>
@ -16,27 +16,27 @@
<img <img
:src="addressOfEmojiInPack(host, packName, file)" :src="addressOfEmojiInPack(host, packName, file)"
class="emoji-preview-img"> class="emoji-preview-img">
<el-input :value="emojiName" :placeholder="$t('settings.shortcode')" class="emoji-info"/> <el-input :value="emojiName" :placeholder="$t('emoji.shortcode')" class="emoji-info"/>
<el-input :value="emojiFile" :placeholder="$t('settings.file')" 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">
<p>{{ $t('settings.selectLocalPack') }}</p> <p>{{ $t('emoji.selectLocalPack') }}</p>
<el-select v-model="copyToLocalPackName" :placeholder="$t('settings.localPack')"> <el-select v-model="copyToLocalPackName" :placeholder="$t('emoji.localPack')">
<el-option <el-option
v-for="(_pack, name) in localPacks" v-for="(_pack, name) in localPacks"
:key="name" :key="name"
:label="name" :label="name"
:value="name" /> :value="name" />
</el-select> </el-select>
<p>{{ $t('settings.specifyShortcode') }}</p> <p>{{ $t('emoji.specifyShortcode') }}</p>
<el-input v-model="copyToShortcode" :placeholder="$t('settings.leaveEmptyShortcode')"/> <el-input v-model="copyToShortcode" :placeholder="$t('emoji.leaveEmptyShortcode')"/>
<p>{{ $t('settings.specifyFilename') }}</p> <p>{{ $t('emoji.specifyFilename') }}</p>
<el-input v-model="copyToFilename" :placeholder="$t('settings.leaveEmptyFilename')"/> <el-input v-model="copyToFilename" :placeholder="$t('emoji.leaveEmptyFilename')"/>
<el-button <el-button
:disabled="!copyToLocalPackName" :disabled="!copyToLocalPackName"
type="primary" type="primary"
class="copy-to-local-button" class="copy-to-local-button"
@click="copyToLocal">{{ $t('settings.copy') }}</el-button> @click="copyToLocal">{{ $t('emoji.copy') }}</el-button>
<el-button slot="reference" type="primary" class="emoji-button">{{ $t('settings.copyToLocalPack') }}</el-button> <el-button slot="reference" type="primary" class="emoji-button">{{ $t('emoji.copyToLocalPack') }}</el-button>
</el-popover> </el-popover>
</div> </div>
</div> </div>
@ -155,23 +155,22 @@ export default {
.copy-popover { .copy-popover {
width: 330px width: 330px
} }
.emoji-button {
margin-left: 10px
}
.emoji-buttons { .emoji-buttons {
min-width: 210px place-self: center;
min-width: 200px
} }
.emoji-container { .emoji-container {
display: flex; display: grid;
justify-content: space-between; grid-template-columns: 75px auto auto 195px;
align-items: center; grid-column-gap: 15px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.emoji-preview-img { .emoji-preview-img {
max-width: 5em; max-width: 100%;
place-self: center;
} }
.emoji-info { .emoji-info {
margin-left: 10px place-self: center;
} }
.copy-to-local-button { .copy-to-local-button {
margin-top: 12px; margin-top: 12px;

65
src/views/emojiPacks/index.vue
View file

@ -1,19 +1,20 @@
<template> <template>
<div> <div class="emoji-packs">
<h1 class="emoji-packs-header">{{ $t('emoji.emojiPacks') }}</h1>
<div class="button-container"> <div class="button-container">
<el-button type="primary" @click="reloadEmoji">{{ $t('settings.reloadEmoji') }}</el-button> <el-button type="primary" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button>
<el-tooltip :content="$t('settings.importEmojiTooltip')" effects="dark" placement="bottom"> <el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom">
<el-button type="primary" @click="importFromFS"> <el-button type="primary" @click="importFromFS">
{{ $t('settings.importPacks') }} {{ $t('emoji.importPacks') }}
</el-button> </el-button>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="line"/> <div class="line"/>
<el-form :label-width="labelWidth"> <el-form label-width="180px" class="emoji-packs-form">
<el-form-item :label="$t('settings.localPacks')"> <el-form-item :label="$t('emoji.localPacks')">
<el-button type="primary" @click="refreshLocalPacks">{{ $t('settings.refreshLocalPacks') }}</el-button> <el-button type="primary" @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button>
</el-form-item> </el-form-item>
<el-form-item :label="$t('settings.createLocalPack')"> <el-form-item :label="$t('emoji.createLocalPack')">
<div class="create-pack"> <div class="create-pack">
<el-input v-model="newPackName" :placeholder="$t('users.name')" /> <el-input v-model="newPackName" :placeholder="$t('users.name')" />
<el-button <el-button
@ -24,26 +25,26 @@
</el-button> </el-button>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('settings.packs')"> <el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('emoji.packs')">
<el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack"> <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-collapse> </el-collapse>
</el-form-item> </el-form-item>
<div class="line"/> <div class="line"/>
<el-form-item :label="$t('settings.remotePacks')"> <el-form-item :label="$t('emoji.remotePacks')">
<div class="create-pack"> <div class="create-pack">
<el-input <el-input
v-model="remoteInstanceAddress" v-model="remoteInstanceAddress"
:placeholder="$t('settings.remoteInstanceAddress')" /> :placeholder="$t('emoji.remoteInstanceAddress')" />
<el-button <el-button
:disabled="remoteInstanceAddress.trim() === ''" :disabled="remoteInstanceAddress.trim() === ''"
class="create-pack-button" class="create-pack-button"
@click="refreshRemotePacks"> @click="refreshRemotePacks">
{{ $t('settings.refreshRemote') }} {{ $t('emoji.refreshRemote') }}
</el-button> </el-button>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('settings.packs')"> <el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('emoji.packs')">
<el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack"> <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="false" /> <emoji-pack :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="false" />
</el-collapse> </el-collapse>
@ -54,6 +55,7 @@
<script> <script>
import EmojiPack from './components/EmojiPack' import EmojiPack from './components/EmojiPack'
import i18n from '@/lang'
export default { export default {
components: { EmojiPack }, components: { EmojiPack },
@ -93,13 +95,29 @@ export default {
}) })
}, },
refreshLocalPacks() { refreshLocalPacks() {
this.$store.dispatch('SetLocalEmojiPacks') try {
this.$store.dispatch('SetLocalEmojiPacks')
} catch (e) {
return
}
this.$message({
type: 'success',
message: i18n.t('emoji.refreshed')
})
}, },
refreshRemotePacks() { refreshRemotePacks() {
this.$store.dispatch('SetRemoteEmojiPacks', { remoteInstance: this.remoteInstanceAddress }) this.$store.dispatch('SetRemoteEmojiPacks', { remoteInstance: this.remoteInstanceAddress })
}, },
reloadEmoji() { async reloadEmoji() {
this.$store.dispatch('ReloadEmoji') try {
this.$store.dispatch('ReloadEmoji')
} catch (e) {
return
}
this.$message({
type: 'success',
message: i18n.t('emoji.reloaded')
})
}, },
importFromFS() { importFromFS() {
this.$store.dispatch('ImportFromFS') this.$store.dispatch('ImportFromFS')
@ -114,7 +132,7 @@ export default {
<style rel='stylesheet/scss' lang='scss'> <style rel='stylesheet/scss' lang='scss'>
.button-container { .button-container {
margin: 0 0 22px 20px; margin: 0 0 22px 15px;
} }
.create-pack { .create-pack {
display: flex; display: flex;
@ -123,10 +141,23 @@ export default {
.create-pack-button { .create-pack-button {
margin-left: 10px; margin-left: 10px;
} }
.emoji-packs-form {
margin: 0 30px;
}
.emoji-packs-header {
margin: 22px 0 20px 15px;
}
.line { .line {
width: 100%; width: 100%;
height: 0; height: 0;
border: 1px solid #eee; border: 1px solid #eee;
margin-bottom: 22px; margin-bottom: 22px;
} }
@media only screen and (min-width: 1824px) {
.emoji-packs {
max-width: 1824px;
margin: auto;
}
}
</style> </style>

69
src/views/settings/index.vue
View file

@ -2,64 +2,64 @@
<div class="settings-container"> <div class="settings-container">
<h1>{{ $t('settings.settings') }}</h1> <h1>{{ $t('settings.settings') }}</h1>
<el-tabs v-model="activeTab" :tab-position="tabPosition"> <el-tabs v-model="activeTab" :tab-position="tabPosition">
<el-tab-pane :label="$t('settings.activityPub')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.activityPub')" :disabled="configDisabled" lazy>
<activity-pub/> <activity-pub/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.auth')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.auth')" :disabled="configDisabled" lazy>
<authentication/> <authentication/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.autoLinker')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.autoLinker')" :disabled="configDisabled" lazy>
<auto-linker/> <auto-linker/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.esshd')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.esshd')" :disabled="configDisabled" lazy>
<esshd/> <esshd/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.captcha')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.captcha')" :disabled="configDisabled" lazy>
<captcha/> <captcha/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.frontend')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.frontend')" :disabled="configDisabled" lazy>
<frontend/> <frontend/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.gopher')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.gopher')" :disabled="configDisabled" lazy>
<gopher/> <gopher/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.http')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.http')" :disabled="configDisabled" lazy>
<http/> <http/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.instance')" :disabled="confidDisabled" name="instance"> <el-tab-pane :label="$t('settings.instance')" :disabled="configDisabled" name="instance">
<instance/> <instance/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.jobQueue')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.jobQueue')" :disabled="configDisabled" lazy>
<job-queue/> <job-queue/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.logger')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.logger')" :disabled="configDisabled" lazy>
<logger/> <logger/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.mailer')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.mailer')" :disabled="configDisabled" lazy>
<mailer/> <mailer/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.mediaProxy')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.mediaProxy')" :disabled="configDisabled" lazy>
<media-proxy/> <media-proxy/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.metadata')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.metadata')" :disabled="configDisabled" lazy>
<metadata/> <metadata/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.mrf')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.mrf')" :disabled="configDisabled" lazy>
<mrf/> <mrf/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.rateLimiters')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.rateLimiters')" :disabled="configDisabled" lazy>
<rate-limiters/> <rate-limiters/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.relays')" lazy name="relays"> <el-tab-pane :label="$t('settings.relays')" lazy name="relays">
<relays/> <relays/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.webPush')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.webPush')" :disabled="configDisabled" lazy>
<web-push/> <web-push/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.upload')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.upload')" :disabled="configDisabled" lazy>
<upload/> <upload/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('settings.other')" :disabled="confidDisabled" lazy> <el-tab-pane :label="$t('settings.other')" :disabled="configDisabled" lazy>
<other/> <other/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@ -67,7 +67,28 @@
</template> </template>
<script> <script>
import { ActivityPub, Authentication, AutoLinker, Captcha, Esshd, Frontend, Gopher, Http, Instance, JobQueue, Logger, Mailer, MediaProxy, Metadata, Mrf, Other, RateLimiters, Relays, Upload, WebPush } from './components' import {
ActivityPub,
Authentication,
AutoLinker,
Captcha,
Esshd,
Frontend,
Gopher,
Http,
Instance,
JobQueue,
Logger,
Mailer,
MediaProxy,
Metadata,
Mrf,
Other,
RateLimiters,
Relays,
Upload,
WebPush
} from './components'
export default { export default {
components: { components: {
@ -101,7 +122,7 @@ export default {
this.$store.dispatch('SetActiveTab', tab) this.$store.dispatch('SetActiveTab', tab)
} }
}, },
confidDisabled() { configDisabled() {
return this.$store.state.settings.configDisabled return this.$store.state.settings.configDisabled
}, },
isMobile() { isMobile() {
@ -126,4 +147,10 @@ export default {
margin: 22px 0 0 15px; margin: 22px 0 0 15px;
} }
} }
@media only screen and (min-width: 1824px) {
.settings-container {
max-width: 1824px;
margin: auto;
}
}
</style> </style>

13
src/views/settings/styles/main.scss
View file

@ -191,6 +191,15 @@
margin-right: 10px margin-right: 10px
} }
@media only screen and (min-width: 1824px) {
.submit-button-container {
max-width: 1637px;
margin-left: auto;
margin-right: auto;
right: auto;
}
}
@media only screen and (max-width: 760px), @media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) { (min-device-width: 768px) and (max-device-width: 1024px) {
.el-form-item { .el-form-item {
@ -212,8 +221,8 @@
overflow: hidden; overflow: hidden;
} }
.name-input { .name-input {
width: 40%; width: 40%;
margin-right: 5px margin-right: 5px
} }
p.expl { p.expl {
line-height: 20px; line-height: 20px;