commit: 180da297f628afa608b3a6ea7bb35edb02a7d7a7
parent b774472fff61810a7c9b8f162375bfe5087c2f55
Author: Henry Jameson <me@hjkos.com>
Date: Sun, 25 Apr 2021 12:51:45 +0300
Merge branch 'vue3compat-tabswitcher' into vue3-again
* vue3compat-tabswitcher:
small refactoring to uncouple tab-switcher from settings modal
fix theme tab, remove console.logs
Changed some of TabSwitcher's internals for easier Vue3 migration
Diffstat:
8 files changed, 185 insertions(+), 161 deletions(-)
diff --git 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'
@@ -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
@@ -4,6 +4,7 @@
class="settings_tab-switcher"
:side-tab-bar="true"
:scrollable-tabs="true"
+ :body-scroll-lock="bodyLock"
>
<div
:label="$t('settings.general')"
diff --git 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
@@ -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
@@ -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.js
@@ -1,156 +0,0 @@
-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', {
- name: 'TabSwitcher',
- props: {
- renderOnlyFocused: {
- required: false,
- type: Boolean,
- default: false
- },
- onSwitch: {
- required: false,
- type: Function,
- default: undefined
- },
- activeTab: {
- required: false,
- type: String,
- default: undefined
- },
- scrollableTabs: {
- required: false,
- type: Boolean,
- default: false
- },
- sideTabBar: {
- required: false,
- type: Boolean,
- default: false
- }
- },
- data () {
- return {
- active: this.$slots.default.findIndex(_ => _.tag)
- }
- },
- computed: {
- activeIndex () {
- // In case of controlled component
- if (this.activeTab) {
- return this.$slots.default.findIndex(slot => this.activeTab === slot.key)
- } else {
- return this.active
- }
- },
- settingsModalVisible () {
- return this.settingsModalState === 'visible'
- },
- ...mapState({
- settingsModalState: state => state.interface.settingsModalState
- })
- },
- beforeUpdate () {
- const currentSlot = this.$slots.default[this.active]
- if (!currentSlot.tag) {
- this.active = this.$slots.default.findIndex(_ => _.tag)
- }
- },
- methods: {
- clickTab (index) {
- return (e) => {
- e.preventDefault()
- 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
- }
- }
- },
- render (h) {
- const tabs = this.$slots.default
- .map((slot, index) => {
- if (!slot.tag) 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) {
- return (
- <div class={classesWrapper.join(' ')}>
- <button
- disabled={slot.data.attrs.disabled}
- onClick={this.clickTab(index)}
- class={classesTab.join(' ')}
- type="button"
- >
- <img src={slot.data.attrs.image} title={slot.data.attrs['image-tooltip']}/>
- {slot.data.attrs.label ? '' : slot.data.attrs.label}
- </button>
- </div>
- )
- }
- return (
- <div class={classesWrapper.join(' ')}>
- <button
- disabled={slot.data.attrs.disabled}
- onClick={this.clickTab(index)}
- class={classesTab.join(' ')}
- type="button"
- >
- {!slot.data.attrs.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={slot.data.attrs.icon}/>)}
- <span class="text">
- {slot.data.attrs.label}
- </span>
- </button>
- </div>
- )
- })
-
- const contents = this.$slots.default.map((slot, index) => {
- if (!slot.tag) return
- const active = this.activeIndex === index
- const classes = [ active ? 'active' : 'hidden' ]
- if (slot.data.attrs.fullHeight) {
- classes.push('full-height')
- }
- const renderSlot = (!this.renderOnlyFocused || active)
- ? slot
- : ''
-
- return (
- <div class={classes}>
- {
- this.sideTabBar
- ? <h1 class="mobile-label">{slot.data.attrs.label}</h1>
- : ''
- }
- {renderSlot}
- </div>
- )
- })
-
- return (
- <div class={'tab-switcher ' + (this.sideTabBar ? 'side-tabs' : 'top-tabs')}>
- <div class="tabs">
- {tabs}
- </div>
- <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.settingsModalVisible}>
- {contents}
- </div>
- </div>
- )
- }
-})
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
@@ -0,0 +1,176 @@
+import { mapState } from 'vuex'
+import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
+
+import './tab_switcher.scss'
+
+// TODO VUE3: change data to props
+const findFirstUsable = (slots) => slots.findIndex(_ => _.data && _.data.attrs)
+
+export default {
+ name: 'TabSwitcher',
+ props: {
+ renderOnlyFocused: {
+ required: false,
+ type: Boolean,
+ default: false
+ },
+ onSwitch: {
+ required: false,
+ type: Function,
+ default: undefined
+ },
+ activeTab: {
+ required: false,
+ type: String,
+ default: undefined
+ },
+ scrollableTabs: {
+ required: false,
+ type: Boolean,
+ default: false
+ },
+ sideTabBar: {
+ required: false,
+ type: Boolean,
+ default: false
+ },
+ bodyScrollLock: {
+ required: false,
+ type: Boolean,
+ default: false
+ }
+ },
+ data () {
+ return {
+ // TODO VUE3: add () after 'default'
+ active: findFirstUsable(this.$slots.default)
+ }
+ },
+ computed: {
+ activeIndex () {
+ // In case of controlled component
+ if (this.activeTab) {
+ return this.$slots.default.findIndex(slot => this.activeTab === slot.key)
+ } else {
+ return this.active
+ }
+ },
+ ...mapState({
+ settingsModalState: state => state.interface.settingsModalState
+ })
+ },
+ beforeUpdate () {
+ const currentSlot = this.slots()[this.active]
+ // TODO VUE3: change data to props
+ if (!currentSlot.data) {
+ this.active = findFirstUsable(this.slots())
+ }
+ },
+ methods: {
+ clickTab (index) {
+ return (e) => {
+ e.preventDefault()
+ 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.active = index
+ if (this.scrollableTabs) {
+ this.$refs.contents.scrollTop = 0
+ }
+ }
+ },
+ // TODO VUE3: remove 'h' here
+ render (h) {
+ const tabs = this.slots()
+ .map((slot, index) => {
+ // 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 (props.image) {
+ return (
+ <div class={classesWrapper.join(' ')}>
+ <button
+ disabled={props.disabled}
+ onClick={this.clickTab(index)}
+ class={classesTab.join(' ')}
+ type="button"
+ >
+ <img src={props.image} title={props['image-tooltip']}/>
+ {props.label ? '' : props.label}
+ </button>
+ </div>
+ )
+ }
+ return (
+ <div class={classesWrapper.join(' ')}>
+ <button
+ disabled={props.disabled}
+ onClick={this.clickTab(index)}
+ class={classesTab.join(' ')}
+ type="button"
+ >
+ {!props.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={props.icon}/>)}
+ <span class="text">
+ {props.label}
+ </span>
+ </button>
+ </div>
+ )
+ })
+
+ 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 (props.fullHeight) {
+ classes.push('full-height')
+ }
+ const renderSlot = (!this.renderOnlyFocused || active)
+ ? slot
+ : ''
+
+ return (
+ <div class={classes}>
+ {
+ this.sideTabBar
+ ? <h1 class="mobile-label">{props.label}</h1>
+ : ''
+ }
+ {renderSlot}
+ </div>
+ )
+ })
+
+ return (
+ <div class={'tab-switcher ' + (this.sideTabBar ? 'side-tabs' : 'top-tabs')}>
+ <div class="tabs">
+ {tabs}
+ </div>
+ <div
+ ref="contents"
+ class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}
+ v-body-scroll-lock={this.bodyScrollLock}
+ >
+ {contents}
+ </div>
+ </div>
+ )
+ }
+}
diff --git 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'
