From bcebec478e43b3851e85c94335940e8fc7546cc8 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 10 May 2020 06:46:06 +0300 Subject: [PATCH] moved stuff from settings, cleaned up naming for tabs, added close and peek --- src/App.scss | 48 -- src/components/modal/modal.vue | 16 +- src/components/settings/settings.js | 128 ------ src/components/settings/settings.vue | 424 ------------------ .../settings_modal/settings_modal.js | 42 +- .../settings_modal/settings_modal.scss | 30 +- .../settings_modal/settings_modal.vue | 26 +- ...rt_export.js => data_import_export_tab.js} | 10 +- ..._export.vue => data_import_export_tab.vue} | 2 +- .../settings_modal/tabs/filtering_tab.js | 26 ++ .../settings_modal/tabs/filtering_tab.vue | 86 ++++ .../settings_modal/tabs/general_tab.js | 32 ++ .../settings_modal/tabs/general_tab.vue | 272 +++++++++++ .../tabs/helpers/shared_computed_object.js | 69 +++ ..._and_blocks.js => mutes_and_blocks_tab.js} | 18 +- ...nd_blocks.vue => mutes_and_blocks_tab.vue} | 8 +- ...{notifications.js => notifications_tab.js} | 6 +- ...otifications.vue => notifications_tab.vue} | 2 +- .../tabs/{profile.js => profile_tab.js} | 16 +- .../tabs/{profile.scss => profile_tab.scss} | 0 .../tabs/{profile.vue => profile_tab.vue} | 4 +- .../tabs/security_tab}/confirm.js | 0 .../tabs/security_tab}/confirm.vue | 0 .../tabs/security_tab}/mfa.js | 0 .../tabs/security_tab}/mfa.vue | 11 +- .../tabs/security_tab}/mfa_backup_codes.js | 0 .../tabs/security_tab}/mfa_backup_codes.vue | 18 +- .../tabs/security_tab}/mfa_totp.js | 0 .../tabs/security_tab}/mfa_totp.vue | 0 .../security_tab.js} | 10 +- .../security_tab.vue} | 2 +- .../tabs/theme_tab}/preview.vue | 0 .../tabs/theme_tab/theme_tab.js} | 27 +- .../tabs/theme_tab/theme_tab.scss} | 18 +- .../tabs/theme_tab/theme_tab.vue} | 168 +++---- .../settings_modal/tabs/version_tab.js | 24 + .../settings_modal/tabs/version_tab.vue | 31 ++ src/components/tab_switcher/tab_switcher.scss | 6 + src/components/user_card/user_card.vue | 11 +- src/components/user_settings/user_settings.js | 140 ------ .../user_settings/user_settings.vue | 119 ----- src/i18n/en.json | 4 +- 42 files changed, 801 insertions(+), 1053 deletions(-) delete mode 100644 src/components/settings/settings.js delete mode 100644 src/components/settings/settings.vue rename src/components/settings_modal/tabs/{data_import_export.js => data_import_export_tab.js} (86%) rename src/components/settings_modal/tabs/{data_import_export.vue => data_import_export_tab.vue} (96%) create mode 100644 src/components/settings_modal/tabs/filtering_tab.js create mode 100644 src/components/settings_modal/tabs/filtering_tab.vue create mode 100644 src/components/settings_modal/tabs/general_tab.js create mode 100644 src/components/settings_modal/tabs/general_tab.vue create mode 100644 src/components/settings_modal/tabs/helpers/shared_computed_object.js rename src/components/settings_modal/tabs/{mutes_and_blocks.js => mutes_and_blocks_tab.js} (83%) rename src/components/settings_modal/tabs/{mutes_and_blocks.vue => mutes_and_blocks_tab.vue} (97%) rename src/components/settings_modal/tabs/{notifications.js => notifications_tab.js} (80%) rename src/components/settings_modal/tabs/{notifications.vue => notifications_tab.vue} (96%) rename src/components/settings_modal/tabs/{profile.js => profile_tab.js} (90%) rename src/components/settings_modal/tabs/{profile.scss => profile_tab.scss} (100%) rename src/components/settings_modal/tabs/{profile.vue => profile_tab.vue} (98%) rename src/components/{user_settings => settings_modal/tabs/security_tab}/confirm.js (100%) rename src/components/{user_settings => settings_modal/tabs/security_tab}/confirm.vue (100%) rename src/components/{user_settings => settings_modal/tabs/security_tab}/mfa.js (100%) rename src/components/{user_settings => settings_modal/tabs/security_tab}/mfa.vue (97%) rename src/components/{user_settings => settings_modal/tabs/security_tab}/mfa_backup_codes.js (100%) rename src/components/{user_settings => settings_modal/tabs/security_tab}/mfa_backup_codes.vue (69%) rename src/components/{user_settings => settings_modal/tabs/security_tab}/mfa_totp.js (100%) rename src/components/{user_settings => settings_modal/tabs/security_tab}/mfa_totp.vue (100%) rename src/components/settings_modal/tabs/{security.js => security_tab/security_tab.js} (92%) rename src/components/settings_modal/tabs/{security.vue => security_tab/security_tab.vue} (98%) rename src/components/{style_switcher => settings_modal/tabs/theme_tab}/preview.vue (100%) rename src/components/{style_switcher/style_switcher.js => settings_modal/tabs/theme_tab/theme_tab.js} (96%) rename src/components/{style_switcher/style_switcher.scss => settings_modal/tabs/theme_tab/theme_tab.scss} (97%) rename src/components/{style_switcher/style_switcher.vue => settings_modal/tabs/theme_tab/theme_tab.vue} (92%) create mode 100644 src/components/settings_modal/tabs/version_tab.js create mode 100644 src/components/settings_modal/tabs/version_tab.vue delete mode 100644 src/components/user_settings/user_settings.js delete mode 100644 src/components/user_settings/user_settings.vue diff --git a/src/App.scss b/src/App.scss index 7db9461c..120eea53 100644 --- a/src/App.scss +++ b/src/App.scss @@ -860,54 +860,6 @@ nav { } } -// DELETE -.setting-item { - border-bottom: 2px solid var(--fg, $fallback--fg); - margin: 1em 1em 1.4em; - padding-bottom: 1.4em; - - > div { - margin-bottom: .5em; - &:last-child { - margin-bottom: 0; - } - } - - &:last-child { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 1em; - } - - select { - min-width: 10em; - } - - - textarea { - width: 100%; - max-width: 100%; - height: 100px; - } - - .unavailable, - .unavailable i { - color: var(--cRed, $fallback--cRed); - color: $fallback--cRed; - } - - .btn { - min-height: 28px; - min-width: 10em; - padding: 0 2em; - } - - .number-input { - max-width: 6em; - } -} -// DELETE - .select-multiple { display: flex; .option-list { diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue index cee24241..e5ecc0c0 100644 --- a/src/components/modal/modal.vue +++ b/src/components/modal/modal.vue @@ -3,6 +3,7 @@ v-show="isOpen" v-body-scroll-lock="isOpen" class="modal-view" + :class="{ 'modal-background': !noBackground }" @click.self="$emit('backdropClicked')" > @@ -15,6 +16,10 @@ export default { isOpen: { type: Boolean, default: true + }, + noBackground: { + type: Boolean, + default: false } } } @@ -32,10 +37,19 @@ export default { justify-content: center; align-items: center; overflow: auto; + pointer-events: none; animation-duration: 0.2s; - background-color: rgba(0, 0, 0, 0.5); animation-name: modal-background-fadein; + > * { + pointer-events: initial; + } + + &.modal-background { + pointer-events: initial; + background-color: rgba(0, 0, 0, 0.5); + } + body:not(.scroll-locked) & { opacity: 0; } diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js deleted file mode 100644 index 31a9e9be..00000000 --- a/src/components/settings/settings.js +++ /dev/null @@ -1,128 +0,0 @@ -/* eslint-env browser */ -import { filter, trim } from 'lodash' - -import TabSwitcher from '../tab_switcher/tab_switcher.js' -import StyleSwitcher from '../style_switcher/style_switcher.vue' -import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue' -import { extractCommit } from '../../services/version/version.service' -import { instanceDefaultProperties, defaultState as configDefaultState } from '../../modules/config.js' -import Checkbox from '../checkbox/checkbox.vue' - -const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/' -const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/' - -const multiChoiceProperties = [ - 'postContentType', - 'subjectLineBehavior' -] - -const settings = { - data () { - const instance = this.$store.state.instance - - return { - loopSilentAvailable: - // Firefox - Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') || - // Chrome-likes - Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') || - // Future spec, still not supported in Nightly 63 as of 08/2018 - Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'), - - backendVersion: instance.backendVersion, - frontendVersion: instance.frontendVersion - } - }, - components: { - TabSwitcher, - StyleSwitcher, - InterfaceLanguageSwitcher, - Checkbox - }, - computed: { - user () { - return this.$store.state.users.currentUser - }, - currentSaveStateNotice () { - return this.$store.state.interface.settings.currentSaveStateNotice - }, - postFormats () { - return this.$store.state.instance.postFormats || [] - }, - instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel }, - frontendVersionLink () { - return pleromaFeCommitUrl + this.frontendVersion - }, - backendVersionLink () { - return pleromaBeCommitUrl + extractCommit(this.backendVersion) - }, - // Getting localized values for instance-default properties - ...instanceDefaultProperties - .filter(key => multiChoiceProperties.includes(key)) - .map(key => [ - key + 'DefaultValue', - function () { - return this.$store.getters.instanceDefaultConfig[key] - } - ]) - .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}), - ...instanceDefaultProperties - .filter(key => !multiChoiceProperties.includes(key)) - .map(key => [ - key + 'LocalizedValue', - function () { - return this.$t('settings.values.' + this.$store.getters.instanceDefaultConfig[key]) - } - ]) - .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}), - // Generating computed values for vuex properties - ...Object.keys(configDefaultState) - .map(key => [key, { - get () { return this.$store.getters.mergedConfig[key] }, - set (value) { - this.$store.dispatch('setOption', { name: key, value }) - } - }]) - .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}), - // Special cases (need to transform values or perform actions first) - muteWordsString: { - get () { return this.$store.getters.mergedConfig.muteWords.join('\n') }, - set (value) { - this.$store.dispatch('setOption', { - name: 'muteWords', - value: filter(value.split('\n'), (word) => trim(word).length > 0) - }) - } - }, - useStreamingApi: { - get () { return this.$store.getters.mergedConfig.useStreamingApi }, - set (value) { - const promise = value - ? this.$store.dispatch('enableMastoSockets') - : this.$store.dispatch('disableMastoSockets') - - promise.then(() => { - this.$store.dispatch('setOption', { name: 'useStreamingApi', value }) - }).catch((e) => { - console.error('Failed starting MastoAPI Streaming socket', e) - this.$store.dispatch('disableMastoSockets') - this.$store.dispatch('setOption', { name: 'useStreamingApi', value: false }) - }) - } - } - }, - // Updating nested properties - watch: { - notificationVisibility: { - handler (value) { - this.$store.dispatch('setOption', { - name: 'notificationVisibility', - value: this.$store.getters.mergedConfig.notificationVisibility - }) - }, - deep: true - } - } -} - -export default settings diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue deleted file mode 100644 index 9e14b449..00000000 --- a/src/components/settings/settings.vue +++ /dev/null @@ -1,424 +0,0 @@ -