diff --git a/CHANGELOG.md b/CHANGELOG.md index d5e5b985677a43475a6192a58ee869cb13f6220a..babde03d680dabea16a131b6ac3628fb916ecd51 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/src/views/settings/components/ActivityPub.vue b/src/views/settings/components/ActivityPub.vue index 8cd3e459bdd9ac2722702a99776e653562a052cf..4e5ab1b81f74573af8a5aa174201467db0d48076 100644 --- a/src/views/settings/components/ActivityPub.vue +++ b/src/views/settings/components/ActivityPub.vue @@ -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' diff --git a/src/views/settings/components/Authentication.vue b/src/views/settings/components/Authentication.vue index 5d7b3689e387d385eb1cba3b89987b0c9d55e0c3..69e5f1432fc4bfe78837de6e7db68104de3906d6 100644 --- a/src/views/settings/components/Authentication.vue +++ b/src/views/settings/components/Authentication.vue @@ -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' diff --git a/src/views/settings/components/AutoLinker.vue b/src/views/settings/components/AutoLinker.vue index a7f9b3aef10507e8a5f24b8170155356e9394874..56f5e586a9edde4df8ec726585c7cd8b905f9cd0 100644 --- a/src/views/settings/components/AutoLinker.vue +++ b/src/views/settings/components/AutoLinker.vue @@ -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' diff --git a/src/views/settings/components/Captcha.vue b/src/views/settings/components/Captcha.vue index a5d44431d9b1249f819322befbe15039cc6711ac..5e91074aa0584f05d1773d9c5063aa8ae5f8cfe6 100644 --- a/src/views/settings/components/Captcha.vue +++ b/src/views/settings/components/Captcha.vue @@ -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' diff --git a/src/views/settings/components/Esshd.vue b/src/views/settings/components/Esshd.vue index b2d1d2b517748643398e90c38dcb5decf329b18e..6404515ec3969742eb26233ca53ab1beee0ed17c 100644 --- a/src/views/settings/components/Esshd.vue +++ b/src/views/settings/components/Esshd.vue @@ -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' diff --git a/src/views/settings/components/Frontend.vue b/src/views/settings/components/Frontend.vue index 62bae33022fe653d7136dc7f29b475fef4e2dd8d..2af44656e0441a8761f038f734219ab65719fdf2 100644 --- a/src/views/settings/components/Frontend.vue +++ b/src/views/settings/components/Frontend.vue @@ -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' diff --git a/src/views/settings/components/Gopher.vue b/src/views/settings/components/Gopher.vue index fa2a33c03fab68b20864449f019410e10c36396a..26b64997e5635d0ec9e24221add986b5b1fb5f1e 100644 --- a/src/views/settings/components/Gopher.vue +++ b/src/views/settings/components/Gopher.vue @@ -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' diff --git a/src/views/settings/components/Http.vue b/src/views/settings/components/Http.vue index 670613d99ee1a3c250112dba4b932cc4d8e1d46c..39042b61e0650bcff7d3bc7967094ac4dda15f2a 100644 --- a/src/views/settings/components/Http.vue +++ b/src/views/settings/components/Http.vue @@ -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' diff --git a/src/views/settings/components/Inputs.vue b/src/views/settings/components/Inputs.vue index 497fb5bb70a47209532737642a9bff07065d232b..744276dc60755192295e57957ba4332758370374 100644 --- a/src/views/settings/components/Inputs.vue +++ b/src/views/settings/components/Inputs.vue @@ -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 diff --git a/src/views/settings/components/Instance.vue b/src/views/settings/components/Instance.vue index 6696c4a6a082ab59f740d5583bf94d549af44db3..02abe6553e19fbb8c6a3a7ace5576c155b8e5dfa 100644 --- a/src/views/settings/components/Instance.vue +++ b/src/views/settings/components/Instance.vue @@ -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' diff --git a/src/views/settings/components/JobQueue.vue b/src/views/settings/components/JobQueue.vue index 414640d68488751cf6bccb6a90f377e41dba302d..f4ee922237ec6a1926e19a403972a38964170204 100644 --- a/src/views/settings/components/JobQueue.vue +++ b/src/views/settings/components/JobQueue.vue @@ -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' diff --git a/src/views/settings/components/Logger.vue b/src/views/settings/components/Logger.vue index 6e05d6a3f3e0a0c132aba56b385dc2fd40775874..b9fb891e0df0d446e676f71437871d05ae27a14d 100644 --- a/src/views/settings/components/Logger.vue +++ b/src/views/settings/components/Logger.vue @@ -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' diff --git a/src/views/settings/components/MRF.vue b/src/views/settings/components/MRF.vue index d13d517802300f1a715ea519d1cf681a07f18785..94d3762e15925628f0ec64996725e069f974fc3d 100644 --- a/src/views/settings/components/MRF.vue +++ b/src/views/settings/components/MRF.vue @@ -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' diff --git a/src/views/settings/components/Mailer.vue b/src/views/settings/components/Mailer.vue index 9767fc23ad842d501776efc76992d19e91863554..0a438693ff4b3c9223e7d1de18cea4af7aa526b3 100644 --- a/src/views/settings/components/Mailer.vue +++ b/src/views/settings/components/Mailer.vue @@ -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' diff --git a/src/views/settings/components/MediaProxy.vue b/src/views/settings/components/MediaProxy.vue index d5105eef2161b72efee0ee63e5f439e87c3185ca..720180b2bc73c477a0db8f451203ab5cbcdd7115 100644 --- a/src/views/settings/components/MediaProxy.vue +++ b/src/views/settings/components/MediaProxy.vue @@ -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' diff --git a/src/views/settings/components/Metadata.vue b/src/views/settings/components/Metadata.vue index a72d7add01ede9ba2f4455457911b0646967d542..b4aef7c8e34d4542615aad4283ca81708afdd40a 100644 --- a/src/views/settings/components/Metadata.vue +++ b/src/views/settings/components/Metadata.vue @@ -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' diff --git a/src/views/settings/components/Other.vue b/src/views/settings/components/Other.vue index 129b9e615ee61c1c91b591019d3ebd2c8228054a..2eee5468cc95145777569f7dfde8f1fe01f9bc4f 100644 --- a/src/views/settings/components/Other.vue +++ b/src/views/settings/components/Other.vue @@ -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' diff --git a/src/views/settings/components/RateLimiters.vue b/src/views/settings/components/RateLimiters.vue index 6237b16dd67050ae76b106407b3f19960db3c246..1b0283c9b3c482fab024643f4df2b285e6705178 100644 --- a/src/views/settings/components/RateLimiters.vue +++ b/src/views/settings/components/RateLimiters.vue @@ -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' diff --git a/src/views/settings/components/Upload.vue b/src/views/settings/components/Upload.vue index 05950cff254d40ebaff9cef8167c9157c0c29b71..b557fb5a7e70b5b32d0488f9f93f0fba105238c3 100644 --- a/src/views/settings/components/Upload.vue +++ b/src/views/settings/components/Upload.vue @@ -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' diff --git a/src/views/settings/components/WebPush.vue b/src/views/settings/components/WebPush.vue index 2fd7446d01b36dd6e791f6e99341b1dfe497e270..9c76a608f5e77cfa80d1c9894eaac97f5a56b7ab 100644 --- a/src/views/settings/components/WebPush.vue +++ b/src/views/settings/components/WebPush.vue @@ -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' diff --git a/src/views/settings/components/inputComponents/SelectInputWithReducedLabels.vue b/src/views/settings/components/inputComponents/SelectInputWithReducedLabels.vue new file mode 100644 index 0000000000000000000000000000000000000000..622eb896455c8eaeea76273ae4db927cf0de2e3a --- /dev/null +++ b/src/views/settings/components/inputComponents/SelectInputWithReducedLabels.vue @@ -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> diff --git a/src/views/settings/components/inputComponents/index.js b/src/views/settings/components/inputComponents/index.js index 3b6f7aa1c7d6b12a3db7e860ea4f2c8152bf789f..13c92c3f39ba4de16f140cb359a4cdc205adc51e 100644 --- a/src/views/settings/components/inputComponents/index.js +++ b/src/views/settings/components/inputComponents/index.js @@ -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' diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss index 7c9e3bbbc7d2c7a1f2ab9c36d082cffbabeacd04..fde1749977523cbec6538effc024ac2cefb02855 100644 --- a/src/views/settings/styles/main.scss +++ b/src/views/settings/styles/main.scss @@ -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; }