Commit 8bf51f78 authored by Dominique Feyer's avatar Dominique Feyer

TASK: Overflow must be visible on inspector group when open

parent 854f778a
......@@ -8,6 +8,7 @@
font-weight: 400;
font-size: $font-size-dark-base;
line-height: 1.1;
margin-bottom: $content-dark-margin;
.label-wrapper {
flex: 1;
......
......@@ -7,7 +7,6 @@
font-weight: 400;
font-size: $font-size-dark-base;
line-height: 1.1;
margin-bottom: $content-dark-margin;
input {
background-color: $background-dark-color;
......
......@@ -12,18 +12,34 @@ export class InspectorGroup {
@Prop() closed: boolean = false;
@State() isOpen : boolean;
@State() isVisible : boolean;
@Listen('neosVisibilitySwitched')
neosVisibilitySwitchedHandler(event: CustomEvent) {
this.isOpen = event.detail;
this.queueVisibiltyChange();
}
componentDidLoad() {
this.isOpen = !this.closed;
this.queueVisibiltyChange();
}
queueVisibiltyChange() {
if (this.isOpen) {
setTimeout(() => {
this.isVisible = true;
}, 200);
} else {
this.isVisible = false;
}
}
wrapperClassName() {
return classnames('content-wrapper', {'content-wrapper--open': this.isOpen});
return classnames('content-wrapper', {
'content-wrapper--open': this.isOpen,
'content-wrapper--visible': this.isVisible,
});
}
render() {
......
......@@ -9,10 +9,10 @@
.content-wrapper {
transition: max-height 600ms ease-in-out;
max-height: 0;
overflow: hidden;
&--open {
max-height: 1000px;
height: auto;
}
}
......
......@@ -15,11 +15,15 @@
}
.content-wrapper {
overflow: hidden;
height: auto;
overflow: hidden;
&--closed {
&--open {
height: 0;
}
&--visible {
overflow: visible;
}
}
}
......@@ -68,20 +68,6 @@
<neos-dropdown-item label="Product" icon="clipboard-list"></neos-dropdown-item>
</neos-dropdown>
</section>
<section role="presentation">
<header>
<h2>prefixed</h2>
</header>
<neos-dropdown label="Type" icon="file" selected-label="Page">
<neos-icon squared name="link" type="solid" theme="success" slot="before"></neos-icon>
<neos-dropdown-item label="Home" icon="home"></neos-dropdown-item>
<neos-dropdown-item label="Category" icon="file"></neos-dropdown-item>
<neos-dropdown-item label="Contact"></neos-dropdown-item>
<neos-dropdown-item label="Generic Page" icon="file"></neos-dropdown-item>
<neos-dropdown-item label="News" icon="rss"></neos-dropdown-item>
<neos-dropdown-item label="Product" icon="clipboard-list"></neos-dropdown-item>
</neos-dropdown>
</section>
</section>
<section role="presentation">
......@@ -277,6 +263,15 @@
<neos-icon name="sync" type="solid" disabled></neos-icon>
</neos-button>
</neos-form-input>
<neos-dropdown label="Type" icon="file" selected-label="Page">
<neos-icon squared name="link" type="solid" theme="success" slot="before"></neos-icon>
<neos-dropdown-item label="Home" icon="home"></neos-dropdown-item>
<neos-dropdown-item label="Category" icon="file"></neos-dropdown-item>
<neos-dropdown-item label="Contact"></neos-dropdown-item>
<neos-dropdown-item label="Generic Page" icon="file"></neos-dropdown-item>
<neos-dropdown-item label="News" icon="rss"></neos-dropdown-item>
<neos-dropdown-item label="Product" icon="clipboard-list"></neos-dropdown-item>
</neos-dropdown>
</neos-inspector-group>
<neos-inspector-group icon="cogs" label="SEO">
<neos-form-input label="Descritption" placeholder="A short and meanigful description of the document"></neos-form-input>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment