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/settings-label-position' into 'develop'

Browse source 
Update setting's label position and shorten suggestions in select inputs

Closes #101

See merge request pleroma/admin-fe!124
This commit is contained in:
Angelina Filippova 2020-04-27 22:38:04 +00:00
commit 99ce098c37
24 changed files with 297 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -16,6 +16,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Make Instance Reboot button's positon fixed on Settings page
- Update jest and babel-jest
- Generate an invite link when an invite token has been generated
- Put labels on top of inputs in mobile version
- Shorten suggestions for a series of select inputs: Rewrite policy, Pleroma Authenticator, Captcha Method, Mailer adapter, Metadata providers, Rich Media parsers, TTL setters, Scrub policy, Uploader, Filters and Federation publisher modules
### Fixed

7
src/views/settings/components/ActivityPub.vue
View file

@ -1,10 +1,10 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="activitypubData" :model="activitypubData" :label-width="labelWidth" data-search=":activitypub">
<el-form ref="activitypubData" :model="activitypubData" :label-position="labelPosition" :label-width="labelWidth" data-search=":activitypub">
<setting :setting-group="activitypub" :data="activitypubData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="userData" :model="userData" :label-width="labelWidth" data-search=":user">
<el-form ref="userData" :model="userData" :label-position="labelPosition" :label-width="labelWidth" data-search=":user">
<setting :setting-group="user" :data="userData"/>
</el-form>
<div class="submit-button-container">
@ -41,6 +41,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

11
src/views/settings/components/Authentication.vue
View file

@ -1,18 +1,18 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="pleromaAuthenticatorData" :model="pleromaAuthenticatorData" :label-width="labelWidth">
<el-form ref="pleromaAuthenticatorData" :model="pleromaAuthenticatorData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="pleromaAuthenticator" :data="pleromaAuthenticatorData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="authData" :model="authData" :label-width="labelWidth">
<el-form ref="authData" :model="authData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="auth" :data="authData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="ldapData" :model="ldapData" :label-width="labelWidth">
<el-form ref="ldapData" :model="ldapData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="ldap" :data="ldapData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="oauth2" :model="oauth2Data" :label-width="labelWidth">
<el-form ref="oauth2" :model="oauth2Data" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="oauth2" :data="oauth2Data"/>
</el-form>
<div class="submit-button-container">
@ -49,6 +49,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

5
src/views/settings/components/AutoLinker.vue
View file

@ -1,6 +1,6 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="autoLinker" :model="autoLinkerData" :label-width="labelWidth">
<el-form ref="autoLinker" :model="autoLinkerData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="autoLinker" :data="autoLinkerData"/>
</el-form>
<div class="submit-button-container">
@ -37,6 +37,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

7
src/views/settings/components/Captcha.vue
View file

@ -1,10 +1,10 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="captchaData" :model="captchaData" :label-width="labelWidth">
<el-form ref="captchaData" :model="captchaData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="captcha" :data="captchaData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="kocaptchaData" :model="kocaptchaData" :label-width="labelWidth">
<el-form ref="kocaptchaData" :model="kocaptchaData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="kocaptcha" :data="kocaptchaData"/>
</el-form>
<div class="submit-button-container">
@ -47,6 +47,9 @@ export default {
kocaptchaData() {
return _.get(this.settings.settings, [':pleroma', 'Pleroma.Captcha.Kocaptcha']) || {}
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

5
src/views/settings/components/Esshd.vue
View file

@ -1,6 +1,6 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="esshdData" :model="esshdData" :label-width="labelWidth">
<el-form ref="esshdData" :model="esshdData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="esshd" :data="esshdData"/>
</el-form>
<div class="submit-button-container">
@ -37,6 +37,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

21
src/views/settings/components/Frontend.vue
View file

@ -1,33 +1,33 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="frontendData" :model="frontendData" :label-width="labelWidth">
<el-form ref="frontendData" :model="frontendData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="frontend" :data="frontendData"/>
</el-form>
<el-form ref="staticFeData" :model="staticFeData" :label-width="labelWidth">
<el-form ref="staticFeData" :model="staticFeData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="staticFe" :data="staticFeData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="assetsData" :model="assetsData" :label-width="labelWidth">
<el-form ref="assetsData" :model="assetsData" :label-position="labelPosition" :label-width="labelWidth">
<el-form-item class="grouped-settings-header">
<span class="label-font">{{ $t('settings.assets') }}</span>
<span class="label-font label-with-margin">{{ $t('settings.assets') }}</span>
</el-form-item>
<setting :setting-group="assets" :data="assetsData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="emojiData" :model="emojiData" :label-width="labelWidth">
<el-form ref="emojiData" :model="emojiData" :label-position="labelPosition" :label-width="labelWidth">
<el-form-item data-search=":emoji" class="grouped-settings-header">
<span class="label-font">{{ $t('settings.emoji') }}</span>
<span class="label-font label-with-margin">{{ $t('settings.emoji') }}</span>
</el-form-item>
<setting :setting-group="emoji" :data="emojiData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="chatData" :model="chatData" :label-width="labelWidth">
<el-form ref="chatData" :model="chatData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="chat" :data="chatData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="markupData" :model="markupData" :label-width="labelWidth">
<el-form ref="markupData" :model="markupData" :label-position="labelPosition" :label-width="labelWidth">
<el-form-item data-search=":markup" class="grouped-settings-header">
<span class="label-font">{{ $t('settings.markup') }}</span>
<span class="label-font label-with-margin">{{ $t('settings.markup') }}</span>
</el-form-item>
<setting :setting-group="markup" :data="markupData"/>
</el-form>
@ -83,6 +83,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

5
src/views/settings/components/Gopher.vue
View file

@ -1,6 +1,6 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form v-if="!loading" ref="gopher" :model="gopherData" :label-width="labelWidth">
<el-form v-if="!loading" ref="gopher" :model="gopherData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="gopher" :data="gopherData"/>
</el-form>
<div class="submit-button-container">
@ -37,6 +37,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

15
src/views/settings/components/Http.vue
View file

@ -1,24 +1,24 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="httpData" :model="httpData" :label-width="labelWidth">
<el-form ref="httpData" :model="httpData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="http" :data="httpData"/>
</el-form>
<el-form ref="corsPlugData" :model="corsPlugData" :label-width="labelWidth">
<el-form ref="corsPlugData" :model="corsPlugData" :label-position="labelPosition" :label-width="labelWidth">
<el-form-item data-search=":cors_plug" class="grouped-settings-header">
<span class="label-font">{{ $t('settings.corsPlug') }}</span>
<span class="label-font label-with-margin">{{ $t('settings.corsPlug') }}</span>
</el-form-item>
<setting :setting-group="corsPlug" :data="corsPlugData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="httpSignatures" :model="httpSignaturesData" :label-width="labelWidth">
<el-form ref="httpSignatures" :model="httpSignaturesData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="httpSignatures" :data="httpSignaturesData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="httpSecurityData" :model="httpSecurityData" :label-width="labelWidth">
<el-form ref="httpSecurityData" :model="httpSecurityData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="httpSecurity" :data="httpSecurityData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="webCacheTtl" :model="webCacheTtlData" :label-width="labelWidth">
<el-form ref="webCacheTtl" :model="webCacheTtlData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="webCacheTtl" :data="webCacheTtlData"/>
</el-form>
<div class="submit-button-container">
@ -73,6 +73,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

35
src/views/settings/components/Inputs.vue
View file

@ -25,10 +25,10 @@
:nested="true"/>
</el-form-item>
</div>
<el-form-item v-if="setting.type !== 'keyword'" :label-width="customLabelWidth" :class="labelClass">
<el-form-item v-if="setting.type !== 'keyword'" :label-width="customLabelWidth" :class="labelClass" :style="isDesktop ? '' : `margin-left:${margin}px`">
<span slot="label">
{{ setting.label }}
<el-tooltip v-if="canBeDeleted && isDesktop" :content="$t('settings.removeFromDB')" placement="bottom-end">
<el-tooltip v-if="canBeDeleted && (isDesktop || isMobile)" :content="$t('settings.removeFromDB')" placement="bottom-end">
<el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeSetting"/>
</el-tooltip>
</span>
@ -55,7 +55,7 @@
:data-search="setting.key || setting.group"
@change="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)"/>
<el-select
v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes('dropdown'))"
v-if="!reducedSelects && (setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes('dropdown')))"
:value="inputValue === false ? 'false' : inputValue"
:data-search="setting.key || setting.group"
clearable
@ -67,8 +67,8 @@
:key="index"/>
</el-select>
<el-select
v-if="renderMultipleSelect(setting.type)"
:value="setting.key === ':rewrite_policy' ? rewritePolicyValue : inputValue"
v-if="!reducedSelects && renderMultipleSelect(setting.type)"
:value="inputValue"
:data-search="setting.key || setting.group"
multiple
filterable
@ -104,8 +104,9 @@
<prune-input v-if="setting.key === ':prune'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
<rate-limit-input v-if="settingGroup.key === ':rate_limit'" :data="data" :setting-group="settingGroup" :setting="setting"/>
<reg-invites-input v-if="[':registrations_open', ':invites_enabled'].includes(setting.key)" :data="data" :setting-group="settingGroup" :setting="setting"/>
<select-input-with-reduced-labels v-if="reducedSelects" :data="data" :setting-group="settingGroup" :setting="setting"/>
<!-------------------->
<el-tooltip v-if="canBeDeleted && (isMobile || isTablet)" :content="$t('settings.removeFromDB')" placement="bottom-end" class="delete-setting-button-container">
<el-tooltip v-if="canBeDeleted && isTablet" :content="$t('settings.removeFromDB')" placement="bottom-end" class="delete-setting-button-container">
<el-button icon="el-icon-delete" circle size="mini" class="delete-setting-button" @click="removeSetting"/>
</el-tooltip>
</div>
@ -129,7 +130,8 @@ import {
ProxyUrlInput,
PruneInput,
RateLimitInput,
RegInvitesInput } from './inputComponents'
RegInvitesInput,
SelectInputWithReducedLabels } from './inputComponents'
import { processNested } from '@/store/modules/normalizers'
import _ from 'lodash'
import marked from 'marked'
@ -146,7 +148,8 @@ export default {
ProxyUrlInput,
PruneInput,
RateLimitInput,
RegInvitesInput
RegInvitesInput,
SelectInputWithReducedLabels
},
props: {
customLabelWidth: {
@ -250,8 +253,20 @@ export default {
keywordData() {
return Array.isArray(this.data) ? this.data : []
},
rewritePolicyValue() {
return typeof this.data[this.setting.key] === 'string' ? [this.data[this.setting.key]] : this.data[this.setting.key]
reducedSelects() {
return [
':filters',
':uploader',
':federation_publisher_modules',
':scrub_policy',
':ttl_setters',
':parsers',
':providers',
':method',
':rewrite_policy',
'Pleroma.Web.Auth.Authenticator'
].includes(this.setting.key) ||
(this.settingGroup.key === 'Pleroma.Emails.Mailer' && this.setting.key === ':adapter')
},
settings() {
return this.$store.state.settings.settings

19
src/views/settings/components/Instance.vue
View file

@ -1,33 +1,33 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="instanceData" :model="instanceData" :label-width="labelWidth">
<el-form ref="instanceData" :model="instanceData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="instance" :data="instanceData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="adminToken" :model="adminTokenData" :label-width="labelWidth">
<el-form ref="adminToken" :model="adminTokenData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="adminToken" :data="adminTokenData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="scheduledActivity" :model="scheduledActivityData" :label-width="labelWidth">
<el-form ref="scheduledActivity" :model="scheduledActivityData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="scheduledActivity" :data="scheduledActivityData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="manifest" :model="manifestData" :label-width="labelWidth">
<el-form ref="manifest" :model="manifestData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="manifest" :data="manifestData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="pleromaUser" :model="pleromaUserData" :label-width="labelWidth" data-search="Pleroma.User">
<el-form ref="pleromaUser" :model="pleromaUserData" :label-position="labelPosition" :label-width="labelWidth" data-search="Pleroma.User">
<setting :setting-group="pleromaUser" :data="pleromaUserData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="uriSchemes" :model="uriSchemesData" :label-width="labelWidth">
<el-form ref="uriSchemes" :model="uriSchemesData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="uriSchemes" :data="uriSchemesData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="feed" :model="feedData" :label-width="labelWidth">
<el-form ref="feed" :model="feedData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="feed" :data="feedData"/>
</el-form>
<el-form ref="streamer" :model="streamerData" :label-width="labelWidth">
<el-form ref="streamer" :model="streamerData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="streamer" :data="streamerData"/>
</el-form>
<div class="submit-button-container">
@ -78,6 +78,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

9
src/views/settings/components/JobQueue.vue
View file

@ -1,12 +1,12 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="obanQueuesData" :model="obanQueuesData" :label-width="labelWidth">
<el-form ref="obanQueuesData" :model="obanQueuesData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="obanQueues" :data="obanQueuesData"/>
</el-form>
<el-form ref="workersData" :model="workersData" :label-width="labelWidth">
<el-form ref="workersData" :model="workersData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="workers" :data="workersData"/>
</el-form>
<el-form ref="activityExpiration" :model="activityExpirationData" :label-width="labelWidth">
<el-form ref="activityExpiration" :model="activityExpirationData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="activityExpiration" :data="activityExpirationData"/>
</el-form>
<div class="submit-button-container">
@ -43,6 +43,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

11
src/views/settings/components/Logger.vue
View file

@ -1,18 +1,18 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="loggerData" :model="loggerData" :label-width="labelWidth">
<el-form ref="loggerData" :model="loggerData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="logger" :data="loggerData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="consoleData" :model="consoleData" :label-width="labelWidth">
<el-form ref="consoleData" :model="consoleData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="console" :data="consoleData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="exsysloggerData" :model="exsysloggerData" :label-width="labelWidth">
<el-form ref="exsysloggerData" :model="exsysloggerData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="exsyslogger" :data="exsysloggerData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="quackData" :model="quackData" :label-width="labelWidth">
<el-form ref="quackData" :model="quackData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="quack" :data="quackData"/>
</el-form>
<div class="submit-button-container">
@ -55,6 +55,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

23
src/views/settings/components/MRF.vue
View file

@ -1,40 +1,40 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="mrfSimple" :model="mrfSimpleData" :label-width="labelWidth">
<el-form ref="mrfSimple" :model="mrfSimpleData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="mrfSimple" :data="mrfSimpleData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="mrfRejectnonpublic" :model="mrfRejectnonpublicData" :label-width="labelWidth">
<el-form ref="mrfRejectnonpublic" :model="mrfRejectnonpublicData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="mrfRejectnonpublic" :data="mrfRejectnonpublicData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="mrfHellthread" :model="mrfHellthreadData" :label-width="labelWidth">
<el-form ref="mrfHellthread" :model="mrfHellthreadData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="mrfHellthread" :data="mrfHellthreadData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="mrfKeyword" :model="mrfKeywordData" :label-width="labelWidth">
<el-form ref="mrfKeyword" :model="mrfKeywordData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="mrfKeyword" :data="mrfKeywordData"/>
</el-form>
<el-form ref="mrfSubchain" :model="mrfSubchainData" :label-width="labelWidth">
<el-form ref="mrfSubchain" :model="mrfSubchainData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="mrfSubchain" :data="mrfSubchainData"/>
</el-form>
<el-form ref="mrfMention" :model="mrfMentionData" :label-width="labelWidth">
<el-form ref="mrfMention" :model="mrfMentionData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="mrfMention" :data="mrfMentionData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="mrfNormalizeMarkup" :model="mrfNormalizeMarkupData" :label-width="labelWidth">
<el-form ref="mrfNormalizeMarkup" :model="mrfNormalizeMarkupData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="mrfNormalizeMarkup" :data="mrfNormalizeMarkupData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="mrfVocabulary" :model="mrfVocabularyData" :label-width="labelWidth">
<el-form ref="mrfVocabulary" :model="mrfVocabularyData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="mrfVocabulary" :data="mrfVocabularyData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="mrfObjectAge" :model="mrfObjectAgeData" :label-width="labelWidth">
<el-form ref="mrfObjectAge" :model="mrfObjectAgeData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="mrfObjectAge" :data="mrfObjectAgeData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="modules" :model="modulesData" :label-width="labelWidth">
<el-form ref="modules" :model="modulesData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="modules" :data="modulesData"/>
</el-form>
<div class="submit-button-container">
@ -65,6 +65,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

13
src/views/settings/components/Mailer.vue
View file

@ -1,20 +1,20 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="mailer" :model="mailerData" :label-width="labelWidth">
<el-form ref="mailer" :model="mailerData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="mailer" :data="mailerData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="swoosh" :model="swooshData" :label-width="labelWidth">
<el-form ref="swoosh" :model="swooshData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="swoosh" :data="swooshData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="emailNotifications" :model="emailNotificationsData" :label-width="labelWidth">
<el-form ref="emailNotifications" :model="emailNotificationsData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="emailNotifications" :data="emailNotificationsData"/>
</el-form>
<el-form ref="userEmail" :model="userEmailData" :label-width="labelWidth">
<el-form ref="userEmail" :model="userEmailData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="userEmail" :data="userEmailData"/>
</el-form>
<el-form ref="newUsersDigestEmail" :model="newUsersDigestEmailData" :label-width="labelWidth">
<el-form ref="newUsersDigestEmail" :model="newUsersDigestEmailData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="newUsersDigestEmail" :data="newUsersDigestEmailData"/>
</el-form>
<div class="submit-button-container">
@ -53,6 +53,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

5
src/views/settings/components/MediaProxy.vue
View file

@ -1,6 +1,6 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form v-if="!loading" ref="mediaProxy" :model="mediaProxyData" :label-width="labelWidth">
<el-form v-if="!loading" ref="mediaProxy" :model="mediaProxyData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="mediaProxy" :data="mediaProxyData"/>
</el-form>
<div class="submit-button-container">
@ -31,6 +31,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

7
src/views/settings/components/Metadata.vue
View file

@ -1,10 +1,10 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="metadata" :model="metadataData" :label-width="labelWidth">
<el-form ref="metadata" :model="metadataData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="metadata" :data="metadataData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="richMedia" :model="richMediaData" :label-width="labelWidth">
<el-form ref="richMedia" :model="richMediaData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="richMedia" :data="richMediaData"/>
</el-form>
<div class="submit-button-container">
@ -35,6 +35,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

7
src/views/settings/components/Other.vue
View file

@ -1,9 +1,9 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="mimeTypes" :model="mimeTypesData" :label-width="labelWidth">
<el-form ref="mimeTypes" :model="mimeTypesData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="mimeTypes" :data="mimeTypesData"/>
</el-form>
<el-form ref="remoteIp" :model="remoteIpData" :label-width="labelWidth">
<el-form ref="remoteIp" :model="remoteIpData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="remoteIp" :data="remoteIpData"/>
</el-form>
<div class="submit-button-container">
@ -34,6 +34,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

5
src/views/settings/components/RateLimiters.vue
View file

@ -1,6 +1,6 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form v-if="!loading" ref="rateLimiters" :model="rateLimitersData" :label-width="labelWidth">
<el-form v-if="!loading" ref="rateLimiters" :model="rateLimitersData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="rateLimiters" :data="rateLimitersData"/>
</el-form>
<div class="submit-button-container">
@ -37,6 +37,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

15
src/views/settings/components/Upload.vue
View file

@ -1,24 +1,24 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form ref="uploadData" :model="uploadData" :label-width="labelWidth">
<el-form ref="uploadData" :model="uploadData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="upload" :data="uploadData"/>
</el-form>
<el-form v-if="showUploadersLocal" ref="uploadersLocal" :model="uploadersLocalData" :label-width="labelWidth">
<el-form v-if="showUploadersLocal" ref="uploadersLocal" :model="uploadersLocalData" :label-position="labelPosition" :label-width="labelWidth">
<el-form-item class="grouped-settings-header">
<span class="label-font">Pleroma.Uploaders.Local</span>
<span class="label-font label-with-margin">Pleroma.Uploaders.Local</span>
</el-form-item>
<setting :setting-group="uploadersLocal" :data="uploadersLocalData"/>
<el-divider class="divider thick-line"/>
</el-form>
<el-form v-if="showUploadersS3" ref="uploadersS3" :model="uploadersS3Data" :label-width="labelWidth">
<el-form v-if="showUploadersS3" ref="uploadersS3" :model="uploadersS3Data" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="uploadersS3" :data="uploadersS3Data"/>
<el-divider class="divider thick-line"/>
</el-form>
<el-form ref="uploadFilterMogrify" :model="uploadFilterMogrifyData" :label-width="labelWidth">
<el-form ref="uploadFilterMogrify" :model="uploadFilterMogrifyData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="uploadFilterMogrify" :data="uploadFilterMogrifyData"/>
</el-form>
<el-divider class="divider thick-line"/>
<el-form ref="uploadAnonymizeFilename" :model="uploadAnonymizeFilenameData" :label-width="labelWidth">
<el-form ref="uploadAnonymizeFilename" :model="uploadAnonymizeFilenameData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="uploadAnonymizeFilename" :data="uploadAnonymizeFilenameData"/>
</el-form>
<div class="submit-button-container">
@ -49,6 +49,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

5
src/views/settings/components/WebPush.vue
View file

@ -1,6 +1,6 @@
<template>
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
<el-form v-if="!loading" ref="vapidDetailsData" :model="vapidDetailsData" :label-width="labelWidth">
<el-form v-if="!loading" ref="vapidDetailsData" :model="vapidDetailsData" :label-position="labelPosition" :label-width="labelWidth">
<setting :setting-group="vapidDetails" :data="vapidDetailsData"/>
</el-form>
<div class="submit-button-container">
@ -31,6 +31,9 @@ export default {
isTablet() {
return this.$store.state.app.device === 'tablet'
},
labelPosition() {
return this.isMobile ? 'top' : 'right'
},
labelWidth() {
if (this.isMobile) {
return '120px'

120
src/views/settings/components/inputComponents/SelectInputWithReducedLabels.vue Normal file
View file

@ -0,0 +1,120 @@
<template>
<div class="input">
<el-select
v-if="renderMultipleSelect(setting.type)"
:value="inputValue"
:data-search="setting.key"
multiple
filterable
allow-create
class="input"
@change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
<el-option v-for="(option, index) in options(setting.suggestions)" :key="index" :value="option.value" :label="option.label" />
</el-select>
<el-select
v-if="setting.type === 'module' || (setting.type.includes('atom') && setting.type.includes('dropdown'))"
:value="inputValue"
:data-search="setting.key || setting.group"
clearable
class="input"
@change="updateSetting($event, settingGroup.group, settingGroup.key, setting.key, setting.type)">
<el-option
v-for="(option, index) in options(setting.suggestions)"
:value="option.value"
:label="option.label"
:key="index"/>
</el-select>
</div>
</template>
<script>
export default {
name: 'SelectInputWithReducedLabels',
props: {
data: {
type: [Array, Object],
default: function() {
return {}
}
},
setting: {
type: Object,
default: function() {
return {}
}
},
settingGroup: {
type: Object,
default: function() {
return {}
}
}
},
computed: {
inputValue() {
if (this.setting.key === 'Pleroma.Web.Auth.Authenticator') {
return this.data.value
} else if (this.setting.key === ':rewrite_policy') {
return typeof this.data[this.setting.key] === 'string'
? [this.data[this.setting.key]]
: this.data[this.setting.key]
} else {
return this.data[this.setting.key]
}
},
isMobile() {
return this.$store.state.app.device === 'mobile'
}
},
methods: {
options(suggestions) {
const prefixes = {
':rewrite_policy': 'Pleroma.Web.ActivityPub.MRF.',
'Pleroma.Web.Auth.Authenticator': 'Pleroma.Web.Auth.',
':method': 'Pleroma.Captcha.',
':adapter': 'Swoosh.Adapters.',
':providers': 'Pleroma.Web.Metadata.Providers.',
':parsers': 'Pleroma.Web.RichMedia.Parsers.',
':ttl_setters': 'Pleroma.Web.RichMedia.Parser.',
':scrub_policy': 'Pleroma.HTML.',
':federation_publisher_modules': 'Pleroma.Web.',
':uploader': 'Pleroma.Uploaders.',
':filters': 'Pleroma.Upload.Filter.'
}
return suggestions.map(element => {
const label = element.split(prefixes[this.setting.key])[1]
? element.split(prefixes[this.setting.key])[1]
: element
return { value: element, label }
})
},
renderMultipleSelect(type) {
return Array.isArray(type) && this.setting.key !== ':backends' && this.setting.key !== ':args' && (
type.includes('module') ||
(type.includes('list') && type.includes('string')) ||
(type.includes('list') && type.includes('atom')) ||
(type.includes('regex') && type.includes('string')) ||
this.setting.key === ':args'
)
},
rewritePolicyOptions(suggestions) {
return suggestions.map(element => {
const label = element.split('Pleroma.Web.ActivityPub.MRF.')[1]
? element.split('Pleroma.Web.ActivityPub.MRF.')[1]
: element
return { value: element, label }
})
},
updateSetting(value, group, key, input, type) {
this.$store.dispatch('UpdateSettings', { group, key, input, value, type })
this.$store.dispatch('UpdateState', { group, key, input, value })
}
}
}
</script>
<style rel='stylesheet/scss' lang='scss'>
@import '../../styles/main';
@include settings
</style>

1
src/views/settings/components/inputComponents/index.js
View file

@ -8,3 +8,4 @@ export { default as ProxyUrlInput } from './ProxyUrlInput'
export { default as PruneInput } from './PruneInput'
export { default as RateLimitInput } from './RateLimitInput'
export { default as RegInvitesInput } from './RegInvitesInput'
export { default as SelectInputWithReducedLabels } from './SelectInputWithReducedLabels'

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

@ -54,6 +54,9 @@
padding-left: 10px;
padding-right: 10px;
}
.el-tabs__header {
z-index: 3000;
}
.esshd-list {
margin: 0;
}
@ -324,7 +327,7 @@
position: fixed;
bottom: 0px;
right: 0;
z-index: 10000;
z-index: 2000;
}
.switch-input {
height: 36px;
@ -394,7 +397,7 @@
}
.description > p {
line-height: 18px;
margin: 0 5px 7px 0;
margin: 0 5px 7px 15px;
code {
display: inline;
line-height: 18px;
@ -429,7 +432,7 @@
width: 100%;
.el-form-item:first-child {
margin: 0;
padding: 0 15px 10px 0;
padding: 0 15px 10px 15px;
}
.el-form-item.crontab-container:first-child {
margin: 0;
@ -450,6 +453,9 @@
display: flex;
justify-content: space-between;
}
.label-with-margin {
margin-left: 15px;
}
.limit-input {
width: 45%;
}
@ -527,10 +533,16 @@
padding: 0 5px 0 5px
}
.el-form-item__label:not(.no-top-margin) {
padding-left: 3px;
padding-right: 10px;
padding-bottom: 5px;
line-height: 22px;
margin-top: 7px;
width: 100%;
span {
width: 100%;
display: flex;
justify-content: space-between;
align-items: baseline;
}
}
.el-message {
min-width: 80%;
@ -563,6 +575,12 @@
.line {
margin-bottom: 10px;
}
.mascot-form-item {
.el-form-item__label:not(.no-top-margin) {
margin: 0;
padding: 0;
}
}
.mascot-container {
margin-bottom: 5px;
}