Commit 67ab8438 authored by Dominique Feyer's avatar Dominique Feyer

TASK: Add collapsible animation for inspector-group

parent 5e5b75b5
This diff is collapsed.
......@@ -20,7 +20,7 @@
"dependencies": {},
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.1.0",
"@stencil/core": "^0.9.1",
"@stencil/core": "^0.9.11",
"@stencil/dev-server": "latest",
"@stencil/sass": "latest",
"@stencil/utils": "latest",
......
/**
* This is an autogenerated file created by the Stencil build process.
* It contains typing information for all components that exist in this project
* and imports for stencil collections that might be configured in your stencil.config.js file
* This is an autogenerated file created by the Stencil compiler.
* It contains typing information for all components that exist in this project.
*/
import '@stencil/core';
......@@ -13,9 +12,12 @@ declare global {
}
namespace JSXElements {}
interface HTMLElement {
componentOnReady?: () => Promise<this | null>;
}
interface HTMLStencilElement extends HTMLElement {
componentOnReady(): Promise<this>;
componentOnReady(done: (ele?: this) => void): void;
forceUpdate(): void;
}
......@@ -188,6 +190,7 @@ declare global {
interface NeosInspectorGroupHeader {
'icon': string;
'label': string;
'open': boolean;
}
}
......@@ -212,6 +215,8 @@ declare global {
export interface NeosInspectorGroupHeaderAttributes extends HTMLAttributes {
'icon'?: string;
'label'?: string;
'onNeosVisibilitySwitched'?: (event: CustomEvent<boolean>) => void;
'open'?: boolean;
}
}
}
......@@ -221,6 +226,7 @@ declare global {
namespace StencilComponents {
interface NeosInspectorGroup {
'closed': boolean;
'icon': string;
'label': string;
}
......@@ -245,6 +251,7 @@ declare global {
}
namespace JSXElements {
export interface NeosInspectorGroupAttributes extends HTMLAttributes {
'closed'?: boolean;
'icon'?: string;
'label'?: string;
}
......
import {Component, Prop} from '@stencil/core';
import {Component, Prop, Event, EventEmitter} from '@stencil/core';
@Component({
tag: 'neos-inspector-group-header',
......@@ -6,16 +6,27 @@ import {Component, Prop} from '@stencil/core';
shadow: true
})
export class InspectorGroupHeader {
@Event() neosVisibilitySwitched: EventEmitter<boolean>;
@Prop() label: string;
@Prop() icon: string;
@Prop() open: boolean = true;
neosVisibilitySwitchedHandlerHandler() {
this.neosVisibilitySwitched.emit(!this.open);
}
chevronIcon() {
return this.open ? 'chevron-up' : 'chevron-down';
}
render() {
return (<header>
<neos-icon squared name={this.icon} type="solid"></neos-icon>
<neos-label theme="bold" label={this.label}></neos-label>
<div class="toggle">
<neos-button squared theme="transparent">
<neos-icon name="chevron-up" type="solid"></neos-icon>
<neos-button squared theme="transparent" onClick={() => this.neosVisibilitySwitchedHandlerHandler()}>
<neos-icon name={this.chevronIcon()} type="solid"></neos-icon>
</neos-button>
</div>
</header>);
......
import {Component, Prop} from '@stencil/core';
import {Component, Prop, State, Listen} from '@stencil/core';
import classnames from 'classnames';
@Component({
tag: 'neos-inspector-group',
......@@ -8,16 +9,34 @@ import {Component, Prop} from '@stencil/core';
export class InspectorGroup {
@Prop() label: string;
@Prop() icon: string;
@Prop() closed: boolean = false;
@State() isOpen : boolean;
@Listen('neosVisibilitySwitched')
neosVisibilitySwitchedHandler(event: CustomEvent) {
this.isOpen = event.detail;
}
componentDidLoad() {
this.isOpen = !this.closed;
}
wrapperClassName() {
return classnames('content-wrapper', {'content-wrapper--open': this.isOpen});
}
render() {
return (<section role="group">
<neos-inspector-group-header icon={this.icon} label={this.label}></neos-inspector-group-header>
<div class="content">
<slot/>
<neos-inspector-group-header icon={this.icon} label={this.label} open={this.isOpen}></neos-inspector-group-header>
<div class={this.wrapperClassName()}>
<div class="content">
<slot/>
</div>
<footer>
<slot name="footer"/>
</footer>
</div>
<footer>
<slot name="footer"/>
</footer>
</section>);
}
}
......@@ -6,6 +6,16 @@
border-bottom: 1px solid neos-color($colors-dark, 'dark');
margin-top: -1px;
.content-wrapper {
transition: max-height 600ms ease-in-out;
max-height: 0;
overflow: hidden;
&--open {
max-height: 1000px;
}
}
.content {
padding: $content-padding
}
......
......@@ -13,4 +13,13 @@
.toggle {
margin-left: auto;
}
.content-wrapper {
overflow: hidden;
height: auto;
&--closed {
height: 0;
}
}
}
......@@ -19,6 +19,7 @@
h2 {
font-size: 18px;
text-transform: lowercase;
opacity: .6;
}
section {
border-top: 4px solid white;
......@@ -234,6 +235,13 @@
<neos-icon squared name="check-circle" type="solid" theme="success" slot="after"></neos-icon>
</neos-form-input>
</neos-inspector-group>
<neos-inspector-group icon="cogs" label="Ownership" closed>
<neos-form-input label="Author"></neos-form-input>
<neos-form-input label="Email"></neos-form-input>
<neos-form-input label="Phone"></neos-form-input>
<neos-form-input label="Creation date"></neos-form-input>
<neos-form-input label="Last modification date"></neos-form-input>
</neos-inspector-group>
</section>
</section>
......
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