From 61dd1a3b4935d0466bfd77e026c19461d62b124f Mon Sep 17 00:00:00 2001 From: eugenijm Date: Thu, 23 Jul 2020 09:06:50 +0300 Subject: Add body 100% width for the preview, refactor the modalActivated watcher, use body scroll lock for the setting tab content --- src/components/tab_switcher/tab_switcher.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components/tab_switcher/tab_switcher.js') diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js index 7891cb78..919eb7cd 100644 --- a/src/components/tab_switcher/tab_switcher.js +++ b/src/components/tab_switcher/tab_switcher.js @@ -134,7 +134,7 @@ export default Vue.component('tab-switcher', {
{tabs}
-
+
{contents}
-- cgit v1.2.3-70-g09d2 From 2298ad0011e8507a138d967ed142641981e1e297 Mon Sep 17 00:00:00 2001 From: eugenijm Date: Thu, 23 Jul 2020 09:41:22 +0300 Subject: Use bock-scroll-lock directive for the settings modal --- src/App.scss | 17 ----------------- src/components/settings_modal/settings_modal.js | 12 ------------ src/components/settings_modal/settings_modal.scss | 3 +-- src/components/tab_switcher/tab_switcher.js | 11 +++++++++-- 4 files changed, 10 insertions(+), 33 deletions(-) (limited to 'src/components/tab_switcher/tab_switcher.js') diff --git a/src/App.scss b/src/App.scss index 336c4998..e2e2d079 100644 --- a/src/App.scss +++ b/src/App.scss @@ -943,23 +943,6 @@ nav { line-height: 1.3rem; } -.settings-modal-layout { - @media all and (max-width: 800px) { - height: 100%; - - body { - height: 100vh; - width: 100%; - overflow-y: hidden; - position: fixed; - } - - #app { - height: 100%; - } - } -} - .chat-layout { // Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens). overflow: hidden; diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js index 4f54d6a3..f0d49c91 100644 --- a/src/components/settings_modal/settings_modal.js +++ b/src/components/settings_modal/settings_modal.js @@ -36,18 +36,6 @@ const SettingsModal = { modalPeeked () { return this.$store.state.interface.settingsModalState === 'minimized' } - }, - watch: { - // This is the only way to access the element. - modalActivated (newValue) { - let html = document.querySelector('html') - if (!html) return - if (newValue) { - html.classList.add('settings-modal-layout') - } else { - html.classList.remove('settings-modal-layout') - } - } } } diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss index f32db4bd..cdb32fd7 100644 --- a/src/components/settings_modal/settings_modal.scss +++ b/src/components/settings_modal/settings_modal.scss @@ -1,7 +1,6 @@ @import 'src/_variables.scss'; .settings-modal { overflow: hidden; - height: 100%; &.peek { .settings-modal-panel { @@ -16,7 +15,7 @@ transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px)); @media all and (max-width: 800px) { - transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 100px)); + transform: translateY(calc(100% - 50px)); } } } diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js index 919eb7cd..19206610 100644 --- a/src/components/tab_switcher/tab_switcher.js +++ b/src/components/tab_switcher/tab_switcher.js @@ -1,4 +1,5 @@ import Vue from 'vue' +import { mapState } from 'vuex' import './tab_switcher.scss' @@ -44,7 +45,13 @@ export default Vue.component('tab-switcher', { } else { return this.active } - } + }, + bodyLocked () { + return this.settingsModalState === 'visible' + }, + ...mapState({ + settingsModalState: state => state.interface.settingsModalState + }) }, beforeUpdate () { const currentSlot = this.$slots.default[this.active] @@ -134,7 +141,7 @@ export default Vue.component('tab-switcher', {
{tabs}
-
+
{contents}
-- cgit v1.2.3-70-g09d2 From 77d65d6cecfae1bdbf5e5b7d8c882d39846b91f1 Mon Sep 17 00:00:00 2001 From: eugenijm Date: Thu, 23 Jul 2020 12:20:48 +0300 Subject: Ensures the minimized modal is always 50px above the mobile browser bottom bar regardless of whether or not it is visible. --- src/components/settings_modal/settings_modal.scss | 3 +++ src/components/tab_switcher/tab_switcher.js | 4 ++-- 2 files changed, 5 insertions(+), 2 deletions(-) (limited to 'src/components/tab_switcher/tab_switcher.js') diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss index cdb32fd7..90446b36 100644 --- a/src/components/settings_modal/settings_modal.scss +++ b/src/components/settings_modal/settings_modal.scss @@ -15,6 +15,9 @@ transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px)); @media all and (max-width: 800px) { + /* For mobile, the modal takes 100% of the available screen. + This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible. + */ transform: translateY(calc(100% - 50px)); } } diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js index 19206610..40b5b3ca 100644 --- a/src/components/tab_switcher/tab_switcher.js +++ b/src/components/tab_switcher/tab_switcher.js @@ -46,7 +46,7 @@ export default Vue.component('tab-switcher', { return this.active } }, - bodyLocked () { + settingsModalVisible () { return this.settingsModalState === 'visible' }, ...mapState({ @@ -141,7 +141,7 @@ export default Vue.component('tab-switcher', {
{tabs}
-
+
{contents}
-- cgit v1.2.3-70-g09d2 From f281663b4972ac82b0392b1ab31b2106f9dceac7 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Thu, 3 Sep 2020 15:45:13 +0300 Subject: Add hacky functionality to open specific settings tabs --- .../post_status_form/post_status_form.js | 3 +++ .../post_status_form/post_status_form.vue | 7 ++++-- .../settings_modal/settings_modal_content.js | 28 ++++++++++++++++++++++ .../settings_modal/settings_modal_content.vue | 9 +++++++ src/components/tab_switcher/tab_switcher.js | 23 ++++++++++-------- src/modules/interface.js | 11 +++++++++ 6 files changed, 69 insertions(+), 12 deletions(-) (limited to 'src/components/tab_switcher/tab_switcher.js') diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index e7094bec..ad149506 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -555,6 +555,9 @@ const PostStatusForm = { }, updateIdempotencyKey () { this.idempotencyKey = Date.now().toString() + }, + openProfileTab () { + this.$store.dispatch('openSettingsModalTab', 'profile') } } } diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 520c03ea..d67d9ae9 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -23,9 +23,12 @@ tag="p" class="visibility-notice" > - + {{ $t('post_status.account_not_locked_warning_link') }} - +

{ + return elm.data && elm.data.attrs['data-tab-name'] === targetTab + }) + if (tabIndex >= 0) { + this.$refs.tabSwitcher.setTab(tabIndex) + } + } + // Clear the state of target tab, so that next time settings is opened + // it doesn't force it. + this.$store.dispatch('clearSettingsModalTargetTab') + } + }, + mounted () { + this.onOpen() + }, + watch: { + open: function (value) { + if (value) this.onOpen() } } } diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue index 2156844f..bc30a0ff 100644 --- a/src/components/settings_modal/settings_modal_content.vue +++ b/src/components/settings_modal/settings_modal_content.vue @@ -8,6 +8,7 @@

@@ -15,6 +16,7 @@ v-if="isLoggedIn" :label="$t('settings.profile_tab')" icon="user" + data-tab-name="profile" > @@ -22,18 +24,21 @@ v-if="isLoggedIn" :label="$t('settings.security_tab')" icon="lock" + data-tab-name="security" >
@@ -41,6 +46,7 @@ v-if="isLoggedIn" :label="$t('settings.notifications')" icon="bell-ringing-o" + data-tab-name="notifications" > @@ -48,6 +54,7 @@ v-if="isLoggedIn" :label="$t('settings.data_import_export_tab')" icon="download" + data-tab-name="dataImportExport" > @@ -56,12 +63,14 @@ :label="$t('settings.mutes_and_blocks')" :fullHeight="true" icon="eye-off" + data-tab-name="mutesAndBlocks" >
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js index 40b5b3ca..9c1da354 100644 --- a/src/components/tab_switcher/tab_switcher.js +++ b/src/components/tab_switcher/tab_switcher.js @@ -60,16 +60,19 @@ export default Vue.component('tab-switcher', { } }, methods: { - activateTab (index) { + clickTab (index) { return (e) => { e.preventDefault() - if (typeof this.onSwitch === 'function') { - this.onSwitch.call(null, this.$slots.default[index].key) - } - this.active = index - if (this.scrollableTabs) { - this.$refs.contents.scrollTop = 0 - } + this.setTab(index) + } + }, + setTab (index) { + if (typeof this.onSwitch === 'function') { + this.onSwitch.call(null, this.$slots.default[index].key) + } + this.active = index + if (this.scrollableTabs) { + this.$refs.contents.scrollTop = 0 } } }, @@ -88,7 +91,7 @@ export default Vue.component('tab-switcher', {