fix mutes-and-blocks tab
This commit is contained in:
parent
ce04595e36
commit
1fd6584374
4 changed files with 20 additions and 6 deletions
|
|
@ -128,10 +128,8 @@ export default {
|
||||||
const props = slot.props
|
const props = slot.props
|
||||||
if (!props) return
|
if (!props) return
|
||||||
const active = this.activeIndex === index
|
const active = this.activeIndex === index
|
||||||
const classes = ['tab-content-wrapper', active ? '-active' : '-hidden' ]
|
const wrapperClasses = ['tab-content-wrapper', active ? '-active' : '-hidden' ]
|
||||||
if (props.fullHeight) {
|
|
||||||
classes.push('-full-height')
|
|
||||||
}
|
|
||||||
let delayRender = slot.props['delay-render']
|
let delayRender = slot.props['delay-render']
|
||||||
if (delayRender && active) {
|
if (delayRender && active) {
|
||||||
slot.props['delay-render'] = false
|
slot.props['delay-render'] = false
|
||||||
|
|
@ -159,13 +157,20 @@ export default {
|
||||||
</h2>
|
</h2>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const contentClasses = ['tab-content']
|
||||||
|
if (props['full-width']) {
|
||||||
|
contentClasses.push('-full-width')
|
||||||
|
}
|
||||||
|
if (props['full-height']) {
|
||||||
|
contentClasses.push('-full-height')
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<div class={classes} >
|
<div class={wrapperClasses} >
|
||||||
<div class="tab-mobile-header">
|
<div class="tab-mobile-header">
|
||||||
{header}
|
{header}
|
||||||
</div>
|
</div>
|
||||||
<div class="tab-slot-wrapper">
|
<div class="tab-slot-wrapper">
|
||||||
<div class={ ['tab-content', props['full-width'] ? '-full-width' : null].join(' ') } >
|
<div class={contentClasses} >
|
||||||
{renderSlot}
|
{renderSlot}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -39,6 +39,10 @@
|
||||||
&.-full-width {
|
&.-full-width {
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.-full-height {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content-label {
|
.tab-content-label {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,10 @@
|
||||||
.settings_tab-switcher {
|
.settings_tab-switcher {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
|
[full-height="true"] {
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
|
|
||||||
.setting-item {
|
.setting-item {
|
||||||
margin: 1em 1em 1.4em;
|
margin: 1em 1em 1.4em;
|
||||||
padding-bottom: 1.4em;
|
padding-bottom: 1.4em;
|
||||||
|
|
|
||||||
|
|
@ -80,6 +80,7 @@
|
||||||
icon="eye-slash"
|
icon="eye-slash"
|
||||||
data-tab-name="mutesAndBlocks"
|
data-tab-name="mutesAndBlocks"
|
||||||
:full-width="true"
|
:full-width="true"
|
||||||
|
:full-height="true"
|
||||||
>
|
>
|
||||||
<MutesAndBlocksTab />
|
<MutesAndBlocksTab />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue