Commit b3ae7419 authored by Dominique Feyer's avatar Dominique Feyer

TASK: Better hover on inspector group

parent f2316f69
Pipeline #2043 failed with stage
in 55 seconds
import {Component, Prop, Event, EventEmitter} from '@stencil/core';
import {Component, Prop, State, Event, EventEmitter} from '@stencil/core';
@Component({
tag: 'neos-inspector-group-header',
......@@ -12,20 +12,38 @@ export class InspectorGroupHeader {
@Prop() icon: string;
@Prop() open: boolean = true;
@State() isHovered: boolean = false;
neosVisibilitySwitchedHandlerHandler() {
this.neosVisibilitySwitched.emit(!this.open);
}
mouseEnterHandler() {
this.isHovered = true;
}
mouseLeaveHandler() {
this.isHovered = false;
}
chevronIcon() {
return this.open ? 'chevron-up' : 'chevron-down';
}
buttonTheme() {
return this.isHovered ? 'brand' : 'transparent';
}
render() {
return (<header>
return (<header
onMouseEnter={() => this.mouseEnterHandler()}
onmouseleave={() => this.mouseLeaveHandler()}
onClick={() => this.neosVisibilitySwitchedHandlerHandler()}
>
<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" onClick={() => this.neosVisibilitySwitchedHandlerHandler()}>
<neos-button squared theme={this.buttonTheme()}>
<neos-icon name={this.chevronIcon()} type="solid"></neos-icon>
</neos-button>
</div>
......
......@@ -8,6 +8,7 @@
header {
display: flex;
align-items: center;
cursor: pointer;
}
.toggle {
......
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