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
This commit is contained in:
Henry Jameson 2021-04-25 12:51:45 +03:00
commit 180da297f6
7 changed files with 54 additions and 30 deletions

View File

@ -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 DataImportExportTab from './tabs/data_import_export_tab.vue'
import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue' import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
@ -53,6 +53,9 @@ const SettingsModalContent = {
}, },
open () { open () {
return this.$store.state.interface.settingsModalState !== 'hidden' return this.$store.state.interface.settingsModalState !== 'hidden'
},
bodyLock () {
return this.$store.state.interface.settingsModalState === 'visible'
} }
}, },
methods: { methods: {

View File

@ -4,6 +4,7 @@
class="settings_tab-switcher" class="settings_tab-switcher"
:side-tab-bar="true" :side-tab-bar="true"
:scrollable-tabs="true" :scrollable-tabs="true"
:body-scroll-lock="bodyLock"
> >
<div <div
:label="$t('settings.general')" :label="$t('settings.general')"

View File

@ -2,7 +2,7 @@ import get from 'lodash/get'
import map from 'lodash/map' import map from 'lodash/map'
import reject from 'lodash/reject' import reject from 'lodash/reject'
import Autosuggest from 'src/components/autosuggest/autosuggest.vue' 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 BlockCard from 'src/components/block_card/block_card.vue'
import MuteCard from 'src/components/mute_card/mute_card.vue' import MuteCard from 'src/components/mute_card/mute_card.vue'
import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue' import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue'

View File

@ -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 ShadowControl from 'src/components/shadow_control/shadow_control.vue'
import FontControl from 'src/components/font_control/font_control.vue' import FontControl from 'src/components/font_control/font_control.vue'
import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.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 Checkbox from 'src/components/checkbox/checkbox.vue'
import Preview from './preview.vue' import Preview from './preview.vue'

View File

@ -1,6 +1,6 @@
/* eslint-env browser */ /* eslint-env browser */
import statusPosterService from '../../services/status_poster/status_poster.service.js' 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 = { const StickerPicker = {
components: { components: {

View File

@ -1,10 +1,12 @@
import Vue from 'vue'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
import './tab_switcher.scss' 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', name: 'TabSwitcher',
props: { props: {
renderOnlyFocused: { renderOnlyFocused: {
@ -31,11 +33,17 @@ export default Vue.component('tab-switcher', {
required: false, required: false,
type: Boolean, type: Boolean,
default: false default: false
},
bodyScrollLock: {
required: false,
type: Boolean,
default: false
} }
}, },
data () { data () {
return { return {
active: this.$slots.default.findIndex(_ => _.tag) // TODO VUE3: add () after 'default'
active: findFirstUsable(this.$slots.default)
} }
}, },
computed: { computed: {
@ -47,17 +55,15 @@ export default Vue.component('tab-switcher', {
return this.active return this.active
} }
}, },
settingsModalVisible () {
return this.settingsModalState === 'visible'
},
...mapState({ ...mapState({
settingsModalState: state => state.interface.settingsModalState settingsModalState: state => state.interface.settingsModalState
}) })
}, },
beforeUpdate () { beforeUpdate () {
const currentSlot = this.$slots.default[this.active] const currentSlot = this.slots()[this.active]
if (!currentSlot.tag) { // TODO VUE3: change data to props
this.active = this.$slots.default.findIndex(_ => _.tag) if (!currentSlot.data) {
this.active = findFirstUsable(this.slots())
} }
}, },
methods: { methods: {
@ -67,9 +73,14 @@ export default Vue.component('tab-switcher', {
this.setTab(index) 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) { setTab (index) {
if (typeof this.onSwitch === 'function') { 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 this.active = index
if (this.scrollableTabs) { if (this.scrollableTabs) {
@ -77,27 +88,30 @@ export default Vue.component('tab-switcher', {
} }
} }
}, },
// TODO VUE3: remove 'h' here
render (h) { render (h) {
const tabs = this.$slots.default const tabs = this.slots()
.map((slot, index) => { .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 classesTab = ['tab', 'button-default']
const classesWrapper = ['tab-wrapper'] const classesWrapper = ['tab-wrapper']
if (this.activeIndex === index) { if (this.activeIndex === index) {
classesTab.push('active') classesTab.push('active')
classesWrapper.push('active') classesWrapper.push('active')
} }
if (slot.data.attrs.image) { if (props.image) {
return ( return (
<div class={classesWrapper.join(' ')}> <div class={classesWrapper.join(' ')}>
<button <button
disabled={slot.data.attrs.disabled} disabled={props.disabled}
onClick={this.clickTab(index)} onClick={this.clickTab(index)}
class={classesTab.join(' ')} class={classesTab.join(' ')}
type="button" type="button"
> >
<img src={slot.data.attrs.image} title={slot.data.attrs['image-tooltip']}/> <img src={props.image} title={props['image-tooltip']}/>
{slot.data.attrs.label ? '' : slot.data.attrs.label} {props.label ? '' : props.label}
</button> </button>
</div> </div>
) )
@ -105,25 +119,27 @@ export default Vue.component('tab-switcher', {
return ( return (
<div class={classesWrapper.join(' ')}> <div class={classesWrapper.join(' ')}>
<button <button
disabled={slot.data.attrs.disabled} disabled={props.disabled}
onClick={this.clickTab(index)} onClick={this.clickTab(index)}
class={classesTab.join(' ')} class={classesTab.join(' ')}
type="button" type="button"
> >
{!slot.data.attrs.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={slot.data.attrs.icon}/>)} {!props.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={props.icon}/>)}
<span class="text"> <span class="text">
{slot.data.attrs.label} {props.label}
</span> </span>
</button> </button>
</div> </div>
) )
}) })
const contents = this.$slots.default.map((slot, index) => { const contents = 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 active = this.activeIndex === index const active = this.activeIndex === index
const classes = [ active ? 'active' : 'hidden' ] const classes = [ active ? 'active' : 'hidden' ]
if (slot.data.attrs.fullHeight) { if (props.fullHeight) {
classes.push('full-height') classes.push('full-height')
} }
const renderSlot = (!this.renderOnlyFocused || active) const renderSlot = (!this.renderOnlyFocused || active)
@ -134,7 +150,7 @@ export default Vue.component('tab-switcher', {
<div class={classes}> <div class={classes}>
{ {
this.sideTabBar this.sideTabBar
? <h1 class="mobile-label">{slot.data.attrs.label}</h1> ? <h1 class="mobile-label">{props.label}</h1>
: '' : ''
} }
{renderSlot} {renderSlot}
@ -147,10 +163,14 @@ export default Vue.component('tab-switcher', {
<div class="tabs"> <div class="tabs">
{tabs} {tabs}
</div> </div>
<div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')} v-body-scroll-lock={this.settingsModalVisible}> <div
ref="contents"
class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}
v-body-scroll-lock={this.bodyScrollLock}
>
{contents} {contents}
</div> </div>
</div> </div>
) )
} }
}) }

View File

@ -3,7 +3,7 @@ import UserCard from '../user_card/user_card.vue'
import FollowCard from '../follow_card/follow_card.vue' import FollowCard from '../follow_card/follow_card.vue'
import Timeline from '../timeline/timeline.vue' import Timeline from '../timeline/timeline.vue'
import Conversation from '../conversation/conversation.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 List from '../list/list.vue'
import withLoadMore from '../../hocs/with_load_more/with_load_more' import withLoadMore from '../../hocs/with_load_more/with_load_more'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'