Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

changed the way tab-switcher works to avoid removing/adding nodes since that

Browse source 
seems to cause issues, instead hiding nodes with css.
This commit is contained in:
Henry Jameson 2018-11-21 07:38:00 +03:00
parent 50562eb6b7
commit acf414e451
2 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/tab_switcher/tab_switcher.jsx
View file

@ -1,7 +1,5 @@
import Vue from 'vue' import Vue from 'vue'
// FIXME: This doesn't like v-if directly inside the tab's contents, breaks vue really bad
import './tab_switcher.scss' import './tab_switcher.scss'
export default Vue.component('tab-switcher', { export default Vue.component('tab-switcher', {
@ -27,11 +25,14 @@ export default Vue.component('tab-switcher', {
} }
return (<button onClick={this.activateTab(index)} class={ classes.join(' ') }>{slot.data.attrs.label}</button>) return (<button onClick={this.activateTab(index)} class={ classes.join(' ') }>{slot.data.attrs.label}</button>)
}); });
const contents = ( const contents = this.$slots.default.filter(_=>_.data).map(( slot, index ) => {
<div> const active = index === this.active
{this.$slots.default.filter(slot => slot.data)[this.active]} return (
</div> <div class={active ? 'active' : 'hidden'}>
); {slot}
</div>
)
});
return ( return (
<div class="tab-switcher"> <div class="tab-switcher">
<div class="tabs"> <div class="tabs">
@ -40,7 +41,7 @@ export default Vue.component('tab-switcher', {
<div class="contents"> <div class="contents">
{contents} {contents}
</div> </div>
</div> </div>
) )
} }
}) })

5
src/components/tab_switcher/tab_switcher.scss
View file

@ -1,6 +1,11 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.tab-switcher { .tab-switcher {
.contents {
.hidden {
display: none;
}
}
.tabs { .tabs {
display: flex; display: flex;
position: relative; position: relative;