From 2e35289c3376881ca17b9330113c816a3327f245 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 3 May 2020 17:36:12 +0300 Subject: initial work on settings modal --- src/components/tab_switcher/tab_switcher.js | 7 +- src/components/tab_switcher/tab_switcher.scss | 220 ++++++++++++++++++-------- 2 files changed, 160 insertions(+), 67 deletions(-) (limited to 'src/components/tab_switcher') diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js index 008e1e95..97791de3 100644 --- a/src/components/tab_switcher/tab_switcher.js +++ b/src/components/tab_switcher/tab_switcher.js @@ -24,6 +24,11 @@ export default Vue.component('tab-switcher', { required: false, type: Boolean, default: false + }, + sideTabBar: { + required: false, + type: Boolean, + default: false } }, data () { @@ -105,7 +110,7 @@ export default Vue.component('tab-switcher', { }) return ( -
+
{tabs}
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index df585faa..a443531e 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -2,7 +2,116 @@ .tab-switcher { display: flex; - flex-direction: column; + + &.top-tabs { + flex-direction: column; + > .tabs { + width: 100%; + overflow-y: hidden; + overflow-x: auto; + padding-top: 5px; + flex-direction: row; + &::after, &::before { + content: ''; + flex: 1 1 auto; + border-bottom: 1px solid; + border-bottom-color: $fallback--border; + border-bottom-color: var(--border, $fallback--border); + } + .tab-wrapper { + height: 28px; + + &:not(.active)::after { + left: 0; + right: 0; + bottom: 0; + border-bottom: 1px solid; + border-bottom-color: $fallback--border; + border-bottom-color: var(--border, $fallback--border); + } + } + .tab { + width: 100%; + min-width: 1px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding-bottom: 99px; + margin-bottom: 6px - 99px; + } + } + .contents.scrollable-tabs { + flex-basis: 0; + } + } + + &.side-tabs { + flex-direction: row; + > .contents { + flex: 0 1 80%; + } + > .tabs { + flex: 1 0 auto; + overflow-y: auto; + overflow-x: hidden; + padding-top: 5px; + flex-direction: column; + &::after { + content: ''; + flex: 1 1 auto; + border-right: 1px solid; + border-right-color: $fallback--border; + border-right-color: var(--border, $fallback--border); + } + .tab-wrapper { + min-width: 10em; + &:not(.active)::after { + top: 0; + right: 0; + bottom: 0; + border-right: 1px solid; + border-right-color: $fallback--border; + border-right-color: var(--border, $fallback--border); + } + } + .tab { + box-sizing: content-box; + width: 100%; + margin-bottom: 5px; + min-width: 10em; + min-width: 1px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + // padding-right: 200px; + // margin-right: 6px - 200px; + margin-left: 6px; + } + + .tab-wrapper { + min-width: 10em; + &:not(.active)::after { + top: 0; + right: 0; + bottom: 0; + border-right: 1px solid; + border-right-color: $fallback--border; + border-right-color: var(--border, $fallback--border); + } + } + .tab { + box-sizing: content-box; + width: 100%; + margin-bottom: 5px; + min-width: 10em; + min-width: 1px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + // padding-right: 200px; + // margin-right: 6px - 200px; + margin-left: 6px; + } + } + } + .contents { flex: 1 0 auto; @@ -13,86 +122,65 @@ } &.scrollable-tabs { - flex-basis: 0; overflow-y: auto; } } + + .tab { + position: relative; + white-space: nowrap; + + padding: 6px 1em; + color: $fallback--text; + color: var(--tabText, $fallback--text); + background-color: $fallback--fg; + background-color: var(--tab, $fallback--fg); + + &:not(.active) { + z-index: 4; + + &:hover { + z-index: 6; + } + } + + &.active { + background: transparent; + z-index: 5; + color: $fallback--text; + color: var(--tabActiveText, $fallback--text); + } + + img { + max-height: 26px; + vertical-align: top; + margin-top: -5px; + } + } + + .tabs { display: flex; position: relative; - width: 100%; - overflow-y: hidden; - overflow-x: auto; - padding-top: 5px; box-sizing: border-box; &::after, &::before { display: block; - content: ''; flex: 1 1 auto; - border-bottom: 1px solid; - border-bottom-color: $fallback--border; - border-bottom-color: var(--border, $fallback--border); } + } - .tab-wrapper { - height: 28px; - position: relative; - display: flex; - flex: 0 0 auto; - - .tab { - width: 100%; - min-width: 1px; - position: relative; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - padding: 6px 1em; - padding-bottom: 99px; - margin-bottom: 6px - 99px; - white-space: nowrap; - - color: $fallback--text; - color: var(--tabText, $fallback--text); - background-color: $fallback--fg; - background-color: var(--tab, $fallback--fg); - - &:not(.active) { - z-index: 4; - - &:hover { - z-index: 6; - } - } - - &.active { - background: transparent; - z-index: 5; - color: $fallback--text; - color: var(--tabActiveText, $fallback--text); - } - - img { - max-height: 26px; - vertical-align: top; - margin-top: -5px; - } - } + .tab-wrapper { + position: relative; + display: flex; + flex: 0 0 auto; - &:not(.active) { - &::after { - content: ''; - position: absolute; - left: 0; - right: 0; - bottom: 0; - z-index: 7; - border-bottom: 1px solid; - border-bottom-color: $fallback--border; - border-bottom-color: var(--border, $fallback--border); - } + &:not(.active) { + &::after { + content: ''; + position: absolute; + z-index: 7; } } - } } -- cgit v1.2.3-70-g09d2 From bcebec478e43b3851e85c94335940e8fc7546cc8 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 10 May 2020 06:46:06 +0300 Subject: 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 --------- src/components/settings_modal/settings_modal.js | 42 +- src/components/settings_modal/settings_modal.scss | 30 +- src/components/settings_modal/settings_modal.vue | 26 +- .../settings_modal/tabs/data_import_export.js | 65 -- .../settings_modal/tabs/data_import_export.vue | 43 - .../settings_modal/tabs/data_import_export_tab.js | 65 ++ .../settings_modal/tabs/data_import_export_tab.vue | 43 + .../settings_modal/tabs/filtering_tab.js | 26 + .../settings_modal/tabs/filtering_tab.vue | 86 ++ src/components/settings_modal/tabs/general_tab.js | 32 + src/components/settings_modal/tabs/general_tab.vue | 272 ++++++ .../tabs/helpers/shared_computed_object.js | 69 ++ .../settings_modal/tabs/mutes_and_blocks.js | 124 --- .../settings_modal/tabs/mutes_and_blocks.vue | 173 ---- .../settings_modal/tabs/mutes_and_blocks_tab.js | 124 +++ .../settings_modal/tabs/mutes_and_blocks_tab.vue | 173 ++++ .../settings_modal/tabs/notifications.js | 27 - .../settings_modal/tabs/notifications.vue | 42 - .../settings_modal/tabs/notifications_tab.js | 27 + .../settings_modal/tabs/notifications_tab.vue | 42 + src/components/settings_modal/tabs/profile.js | 179 ---- src/components/settings_modal/tabs/profile.scss | 82 -- src/components/settings_modal/tabs/profile.vue | 213 ----- src/components/settings_modal/tabs/profile_tab.js | 179 ++++ .../settings_modal/tabs/profile_tab.scss | 82 ++ src/components/settings_modal/tabs/profile_tab.vue | 213 +++++ src/components/settings_modal/tabs/security.js | 106 --- src/components/settings_modal/tabs/security.vue | 143 --- .../settings_modal/tabs/security_tab/confirm.js | 9 + .../settings_modal/tabs/security_tab/confirm.vue | 22 + .../settings_modal/tabs/security_tab/mfa.js | 155 ++++ .../settings_modal/tabs/security_tab/mfa.vue | 174 ++++ .../tabs/security_tab/mfa_backup_codes.js | 17 + .../tabs/security_tab/mfa_backup_codes.vue | 35 + .../settings_modal/tabs/security_tab/mfa_totp.js | 49 ++ .../settings_modal/tabs/security_tab/mfa_totp.vue | 43 + .../tabs/security_tab/security_tab.js | 106 +++ .../tabs/security_tab/security_tab.vue | 143 +++ .../settings_modal/tabs/theme_tab/preview.vue | 117 +++ .../settings_modal/tabs/theme_tab/theme_tab.js | 759 ++++++++++++++++ .../settings_modal/tabs/theme_tab/theme_tab.scss | 339 ++++++++ .../settings_modal/tabs/theme_tab/theme_tab.vue | 956 +++++++++++++++++++++ src/components/settings_modal/tabs/version_tab.js | 24 + src/components/settings_modal/tabs/version_tab.vue | 31 + src/components/style_switcher/preview.vue | 117 --- src/components/style_switcher/style_switcher.js | 758 ---------------- src/components/style_switcher/style_switcher.scss | 335 -------- src/components/style_switcher/style_switcher.vue | 956 --------------------- src/components/tab_switcher/tab_switcher.scss | 6 + src/components/user_card/user_card.vue | 11 +- src/components/user_settings/confirm.js | 9 - src/components/user_settings/confirm.vue | 22 - src/components/user_settings/mfa.js | 155 ---- src/components/user_settings/mfa.vue | 173 ---- src/components/user_settings/mfa_backup_codes.js | 17 - src/components/user_settings/mfa_backup_codes.vue | 33 - src/components/user_settings/mfa_totp.js | 49 -- src/components/user_settings/mfa_totp.vue | 43 - src/components/user_settings/user_settings.js | 140 --- src/components/user_settings/user_settings.vue | 119 --- src/i18n/en.json | 4 +- 65 files changed, 4509 insertions(+), 4761 deletions(-) delete mode 100644 src/components/settings/settings.js delete mode 100644 src/components/settings/settings.vue delete mode 100644 src/components/settings_modal/tabs/data_import_export.js delete mode 100644 src/components/settings_modal/tabs/data_import_export.vue create mode 100644 src/components/settings_modal/tabs/data_import_export_tab.js create mode 100644 src/components/settings_modal/tabs/data_import_export_tab.vue 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 delete mode 100644 src/components/settings_modal/tabs/mutes_and_blocks.js delete mode 100644 src/components/settings_modal/tabs/mutes_and_blocks.vue create mode 100644 src/components/settings_modal/tabs/mutes_and_blocks_tab.js create mode 100644 src/components/settings_modal/tabs/mutes_and_blocks_tab.vue delete mode 100644 src/components/settings_modal/tabs/notifications.js delete mode 100644 src/components/settings_modal/tabs/notifications.vue create mode 100644 src/components/settings_modal/tabs/notifications_tab.js create mode 100644 src/components/settings_modal/tabs/notifications_tab.vue delete mode 100644 src/components/settings_modal/tabs/profile.js delete mode 100644 src/components/settings_modal/tabs/profile.scss delete mode 100644 src/components/settings_modal/tabs/profile.vue create mode 100644 src/components/settings_modal/tabs/profile_tab.js create mode 100644 src/components/settings_modal/tabs/profile_tab.scss create mode 100644 src/components/settings_modal/tabs/profile_tab.vue delete mode 100644 src/components/settings_modal/tabs/security.js delete mode 100644 src/components/settings_modal/tabs/security.vue create mode 100644 src/components/settings_modal/tabs/security_tab/confirm.js create mode 100644 src/components/settings_modal/tabs/security_tab/confirm.vue create mode 100644 src/components/settings_modal/tabs/security_tab/mfa.js create mode 100644 src/components/settings_modal/tabs/security_tab/mfa.vue create mode 100644 src/components/settings_modal/tabs/security_tab/mfa_backup_codes.js create mode 100644 src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue create mode 100644 src/components/settings_modal/tabs/security_tab/mfa_totp.js create mode 100644 src/components/settings_modal/tabs/security_tab/mfa_totp.vue create mode 100644 src/components/settings_modal/tabs/security_tab/security_tab.js create mode 100644 src/components/settings_modal/tabs/security_tab/security_tab.vue create mode 100644 src/components/settings_modal/tabs/theme_tab/preview.vue create mode 100644 src/components/settings_modal/tabs/theme_tab/theme_tab.js create mode 100644 src/components/settings_modal/tabs/theme_tab/theme_tab.scss create mode 100644 src/components/settings_modal/tabs/theme_tab/theme_tab.vue 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/style_switcher/preview.vue delete mode 100644 src/components/style_switcher/style_switcher.js delete mode 100644 src/components/style_switcher/style_switcher.scss delete mode 100644 src/components/style_switcher/style_switcher.vue delete mode 100644 src/components/user_settings/confirm.js delete mode 100644 src/components/user_settings/confirm.vue delete mode 100644 src/components/user_settings/mfa.js delete mode 100644 src/components/user_settings/mfa.vue delete mode 100644 src/components/user_settings/mfa_backup_codes.js delete mode 100644 src/components/user_settings/mfa_backup_codes.vue delete mode 100644 src/components/user_settings/mfa_totp.js delete mode 100644 src/components/user_settings/mfa_totp.vue delete mode 100644 src/components/user_settings/user_settings.js delete mode 100644 src/components/user_settings/user_settings.vue (limited to 'src/components/tab_switcher') 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 @@ -