From 433ea02a18c0328b8079a40657220633c09e363a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 18 Apr 2021 14:58:02 +0300 Subject: [PATCH 1/3] Changed some of TabSwitcher's internals for easier Vue3 migration --- .../settings_modal/settings_modal_content.js | 2 +- .../tabs/mutes_and_blocks_tab.js | 2 +- .../tabs/theme_tab/theme_tab.js | 2 +- .../sticker_picker/sticker_picker.js | 2 +- .../{tab_switcher.js => tab_switcher.jsx} | 57 ++++++++++++------- src/components/user_profile/user_profile.js | 2 +- 6 files changed, 41 insertions(+), 26 deletions(-) rename src/components/tab_switcher/{tab_switcher.js => tab_switcher.jsx} (68%) diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js index 9dcf1b5ac3..7e36658098 100644 --- a/src/components/settings_modal/settings_modal_content.js +++ b/src/components/settings_modal/settings_modal_content.js @@ -1,4 +1,4 @@ -import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' +import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' import DataImportExportTab from './tabs/data_import_export_tab.vue' import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue' diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js index 40a87b813a..6cfeea35ae 100644 --- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js +++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js @@ -2,7 +2,7 @@ import get from 'lodash/get' import map from 'lodash/map' import reject from 'lodash/reject' import Autosuggest from 'src/components/autosuggest/autosuggest.vue' -import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' +import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' import BlockCard from 'src/components/block_card/block_card.vue' import MuteCard from 'src/components/mute_card/mute_card.vue' import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue' diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js index 8960c56651..727513f4ca 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js @@ -34,7 +34,7 @@ import OpacityInput from 'src/components/opacity_input/opacity_input.vue' import ShadowControl from 'src/components/shadow_control/shadow_control.vue' import FontControl from 'src/components/font_control/font_control.vue' import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue' -import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' +import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' import Checkbox from 'src/components/checkbox/checkbox.vue' import Preview from './preview.vue' diff --git a/src/components/sticker_picker/sticker_picker.js b/src/components/sticker_picker/sticker_picker.js index 8daf3f073c..3a2d391458 100644 --- a/src/components/sticker_picker/sticker_picker.js +++ b/src/components/sticker_picker/sticker_picker.js @@ -1,6 +1,6 @@ /* eslint-env browser */ import statusPosterService from '../../services/status_poster/status_poster.service.js' -import TabSwitcher from '../tab_switcher/tab_switcher.js' +import TabSwitcher from '../tab_switcher/tab_switcher.jsx' const StickerPicker = { components: { diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.jsx similarity index 68% rename from src/components/tab_switcher/tab_switcher.js rename to src/components/tab_switcher/tab_switcher.jsx index 12aac8e667..68eee12239 100644 --- a/src/components/tab_switcher/tab_switcher.js +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -1,10 +1,12 @@ -import Vue from 'vue' import { mapState } from 'vuex' import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome' import './tab_switcher.scss' -export default Vue.component('tab-switcher', { +// TODO VUE3: change data to props +const findFirstUsable = (slots) => slots.findIndex(_ => _.data && _.data.attrs) + +export default { name: 'TabSwitcher', props: { renderOnlyFocused: { @@ -34,11 +36,17 @@ export default Vue.component('tab-switcher', { } }, data () { + console.log(this.$slots.default) return { - active: this.$slots.default.findIndex(_ => _.tag) + // TODO VUE3: add () after 'default' + active: findFirstUsable(this.$slots.default) } }, computed: { + slots () { + // TODO VUE3: add () at the end + return this.$slots.default + }, activeIndex () { // In case of controlled component if (this.activeTab) { @@ -55,9 +63,11 @@ export default Vue.component('tab-switcher', { }) }, beforeUpdate () { - const currentSlot = this.$slots.default[this.active] - if (!currentSlot.tag) { - this.active = this.$slots.default.findIndex(_ => _.tag) + console.log(this.slots, this.active) + const currentSlot = this.slots[this.active] + // TODO VUE3: change data to props + if (!currentSlot.data) { + this.active = findFirstUsable(this.slots) } }, methods: { @@ -69,7 +79,7 @@ export default Vue.component('tab-switcher', { }, setTab (index) { if (typeof this.onSwitch === 'function') { - this.onSwitch.call(null, this.$slots.default[index].key) + this.onSwitch.call(null, this.slots[index].key) } this.active = index if (this.scrollableTabs) { @@ -77,27 +87,30 @@ export default Vue.component('tab-switcher', { } } }, + // TODO VUE3: remove 'h' here render (h) { - const tabs = this.$slots.default + const tabs = this.slots .map((slot, index) => { - if (!slot.tag) return + // TODO VUE3 change to slot.props + const props = slot.data && slot.data.attrs + if (!props) return const classesTab = ['tab', 'button-default'] const classesWrapper = ['tab-wrapper'] if (this.activeIndex === index) { classesTab.push('active') classesWrapper.push('active') } - if (slot.data.attrs.image) { + if (props.image) { return (
) @@ -105,25 +118,27 @@ export default Vue.component('tab-switcher', { return (
) }) - const contents = this.$slots.default.map((slot, index) => { - if (!slot.tag) return + const contents = this.slots.map((slot, index) => { + // TODO VUE3 change to slot.props + const props = slot.data && slot.data.attrs + if (!props) return const active = this.activeIndex === index const classes = [ active ? 'active' : 'hidden' ] - if (slot.data.attrs.fullHeight) { + if (props.fullHeight) { classes.push('full-height') } const renderSlot = (!this.renderOnlyFocused || active) @@ -134,7 +149,7 @@ export default Vue.component('tab-switcher', {
{ this.sideTabBar - ?

{slot.data.attrs.label}

+ ?

{props.label}

: '' } {renderSlot} @@ -153,4 +168,4 @@ export default Vue.component('tab-switcher', {
) } -}) +} diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index c0b55a6cec..c5ccf7478a 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -3,7 +3,7 @@ import UserCard from '../user_card/user_card.vue' import FollowCard from '../follow_card/follow_card.vue' import Timeline from '../timeline/timeline.vue' import Conversation from '../conversation/conversation.vue' -import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js' +import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx' import List from '../list/list.vue' import withLoadMore from '../../hocs/with_load_more/with_load_more' import { library } from '@fortawesome/fontawesome-svg-core' From b0789fd6fd280a3dc8cefb4cb2410abec4be9ae6 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 18 Apr 2021 15:03:28 +0300 Subject: [PATCH 2/3] fix theme tab, remove console.logs --- src/components/tab_switcher/tab_switcher.jsx | 21 ++++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx index 68eee12239..44221d50aa 100644 --- a/src/components/tab_switcher/tab_switcher.jsx +++ b/src/components/tab_switcher/tab_switcher.jsx @@ -36,17 +36,12 @@ export default { } }, data () { - console.log(this.$slots.default) return { // TODO VUE3: add () after 'default' active: findFirstUsable(this.$slots.default) } }, computed: { - slots () { - // TODO VUE3: add () at the end - return this.$slots.default - }, activeIndex () { // In case of controlled component if (this.activeTab) { @@ -63,11 +58,10 @@ export default { }) }, beforeUpdate () { - console.log(this.slots, this.active) - const currentSlot = this.slots[this.active] + const currentSlot = this.slots()[this.active] // TODO VUE3: change data to props if (!currentSlot.data) { - this.active = findFirstUsable(this.slots) + this.active = findFirstUsable(this.slots()) } }, methods: { @@ -77,9 +71,14 @@ export default { this.setTab(index) } }, + // DO NOT put it to computed, it doesn't work (caching?) + slots () { + // TODO VUE3: add () at the end + return this.$slots.default + }, setTab (index) { if (typeof this.onSwitch === 'function') { - this.onSwitch.call(null, this.slots[index].key) + this.onSwitch.call(null, this.slots()[index].key) } this.active = index if (this.scrollableTabs) { @@ -89,7 +88,7 @@ export default { }, // TODO VUE3: remove 'h' here render (h) { - const tabs = this.slots + const tabs = this.slots() .map((slot, index) => { // TODO VUE3 change to slot.props const props = slot.data && slot.data.attrs @@ -132,7 +131,7 @@ export default { ) }) - const contents = this.slots.map((slot, index) => { + const contents = this.slots().map((slot, index) => { // TODO VUE3 change to slot.props const props = slot.data && slot.data.attrs if (!props) return From 33777fab47b65975d343d219c0b1866ba6849b3f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 18 Apr 2021 15:39:06 +0300 Subject: [PATCH 3/3] small refactoring to uncouple tab-switcher from settings modal --- .../settings_modal/settings_modal_content.js | 3 +++ .../settings_modal/settings_modal_content.vue | 1 + src/components/tab_switcher/tab_switcher.jsx | 14 ++++++++++---- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js index 7e36658098..deb7729853 100644 --- a/src/components/settings_modal/settings_modal_content.js +++ b/src/components/settings_modal/settings_modal_content.js @@ -53,6 +53,9 @@ const SettingsModalContent = { }, open () { return this.$store.state.interface.settingsModalState !== 'hidden' + }, + bodyLock () { + return this.$store.state.interface.settingsModalState === 'visible' } }, methods: { diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue index c9ed2a3824..0be76d22c4 100644 --- a/src/components/settings_modal/settings_modal_content.vue +++ b/src/components/settings_modal/settings_modal_content.vue @@ -4,6 +4,7 @@ class="settings_tab-switcher" :side-tab-bar="true" :scrollable-tabs="true" + :body-scroll-lock="bodyLock" >
state.interface.settingsModalState }) @@ -161,7 +163,11 @@ export default {
{tabs}
-
+
{contents}