Commit a012aa93 authored by Dominique Feyer's avatar Dominique Feyer

TASK: Add basic toolbar with separator support and secondary zone

parent 746ff53a
......@@ -176,6 +176,51 @@ declare global {
}
declare global {
namespace StencilComponents {
interface NeosInspectorGroup {
'active': boolean;
'disabled': boolean;
'focused': boolean;
'size': string;
'squared': boolean;
'theme': string;
'type': string;
}
}
interface HTMLNeosInspectorGroupElement extends StencilComponents.NeosInspectorGroup, HTMLStencilElement {}
var HTMLNeosInspectorGroupElement: {
prototype: HTMLNeosInspectorGroupElement;
new (): HTMLNeosInspectorGroupElement;
};
interface HTMLElementTagNameMap {
'neos-inspector-group': HTMLNeosInspectorGroupElement;
}
interface ElementTagNameMap {
'neos-inspector-group': HTMLNeosInspectorGroupElement;
}
namespace JSX {
interface IntrinsicElements {
'neos-inspector-group': JSXElements.NeosInspectorGroupAttributes;
}
}
namespace JSXElements {
export interface NeosInspectorGroupAttributes extends HTMLAttributes {
'active'?: boolean;
'disabled'?: boolean;
'focused'?: boolean;
'size'?: string;
'squared'?: boolean;
'theme'?: string;
'type'?: string;
}
}
}
declare global {
namespace StencilComponents {
......@@ -208,6 +253,72 @@ declare global {
}
}
declare global {
namespace StencilComponents {
interface NeosToolbarSeparator {
'theme': string;
}
}
interface HTMLNeosToolbarSeparatorElement extends StencilComponents.NeosToolbarSeparator, HTMLStencilElement {}
var HTMLNeosToolbarSeparatorElement: {
prototype: HTMLNeosToolbarSeparatorElement;
new (): HTMLNeosToolbarSeparatorElement;
};
interface HTMLElementTagNameMap {
'neos-toolbar-separator': HTMLNeosToolbarSeparatorElement;
}
interface ElementTagNameMap {
'neos-toolbar-separator': HTMLNeosToolbarSeparatorElement;
}
namespace JSX {
interface IntrinsicElements {
'neos-toolbar-separator': JSXElements.NeosToolbarSeparatorAttributes;
}
}
namespace JSXElements {
export interface NeosToolbarSeparatorAttributes extends HTMLAttributes {
'theme'?: string;
}
}
}
declare global {
namespace StencilComponents {
interface NeosToolbar {
'theme': string;
}
}
interface HTMLNeosToolbarElement extends StencilComponents.NeosToolbar, HTMLStencilElement {}
var HTMLNeosToolbarElement: {
prototype: HTMLNeosToolbarElement;
new (): HTMLNeosToolbarElement;
};
interface HTMLElementTagNameMap {
'neos-toolbar': HTMLNeosToolbarElement;
}
interface ElementTagNameMap {
'neos-toolbar': HTMLNeosToolbarElement;
}
namespace JSX {
interface IntrinsicElements {
'neos-toolbar': JSXElements.NeosToolbarAttributes;
}
}
namespace JSXElements {
export interface NeosToolbarAttributes extends HTMLAttributes {
'theme'?: string;
}
}
}
declare global { namespace JSX { interface StencilJSX {} } }
export declare function defineCustomElements(window: any): void;
\ No newline at end of file
......@@ -18,7 +18,7 @@
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'neutral', 'shade');
background-color: neos-color($colors-dark, 'primary', 'shade');
}
&.t-clean {
......@@ -49,7 +49,12 @@
}
&.t-transparent {
background-color: transparent;
&:focus:enabled,
&:hover:enabled {
background-color: neos-color($colors-dark, 'primary', 'shade');
}
}
&.t-warn {
......
import {Component, Prop} from '@stencil/core';
import classnames from 'classnames';
@Component({
tag: 'neos-inspector-group',
styleUrl: 'styles/inspector-group.dark.scss',
shadow: true
})
export class InspectorGroup {
@Prop() theme: string;
@Prop() size: string = 'regular';
@Prop() focused: boolean = false;
@Prop() disabled: boolean = false;
@Prop() squared: boolean = false;
@Prop() active: boolean = false;
@Prop() type: string = 'inspector-group';
className() {
return classnames('t-' + this.theme, {'l-squared': this.squared});
}
render() {
return (<button class={this.className()} disabled={this.disabled} type={this.type}>
<slot/>
</button>);
}
}
@import "./inspector-group";
@import "./inspector-group.dark.vars";
:host {
}
@import "./inspector-group.vars";
:host {
@include font-smoothing();
display: block;
}
@import "./toolbar-separator";
@import "./toolbar-separator.dark.vars";
:host {
margin: $content-margin-small;
height: calc(100% - #{$content-margin-small * 2});
border-left: $hairlines-width solid neos-color($colors-dark, 'bright');
}
@import "./toolbar-separator.vars";
:host {
height: 40px;
margin: 0;
padding: 0;
}
import {Component, Prop} from '@stencil/core';
import classnames from 'classnames';
@Component({
tag: 'neos-toolbar-separator',
styleUrl: 'styles/toolbar-separator.dark.scss',
shadow: true
})
export class ToolbarSeparator {
@Prop() theme: string = 'regular';
className() {
return classnames('wrapper', 't-' + this.theme);
}
render() {
return (<div class={this.className()}>
<slot/>
</div>);
}
}
@import "./toolbar";
@import "./toolbar.dark.vars";
:host {
width: 100%;
.t-regular {
background-color: neos-color($colors-dark, 'neutral');
}
.t-dark {
background-color: neos-color($colors-dark, 'darker');
}
}
@import "../../../themes/neos.globals.dark";
@import "./toolbar.vars";
:host {
@include font-smoothing();
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: $grid-unit;
}
.zone {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
~ .zone {
margin-left: auto;
}
}
}
@import "../../../themes/neos.globals";
import {Component, Prop} from '@stencil/core';
import classnames from 'classnames';
@Component({
tag: 'neos-toolbar',
styleUrl: 'styles/toolbar.dark.scss',
shadow: true
})
export class Toolbar {
@Prop() theme: string = 'regular';
wrapperClassName() {
return classnames('wrapper', 't-' + this.theme);
}
render() {
return (<div class={this.wrapperClassName()}>
<div class="zone"><slot/></div>
<div class="zone"><slot name="secondary"/></div>
</div>);
}
}
......@@ -142,5 +142,69 @@
</section>
</section>
<section>
<header>
<h1>neos-toolbar</h1>
</header>
<section>
<header>
<h2>default</h2>
</header>
<neos-toolbar theme="regular">
<neos-button squared theme="transparent" disabled slot="secondary">
<neos-icon name="save" type="solid" disabled></neos-icon>
</neos-button>
<neos-button squared theme="transparent" slot="secondary">
<neos-icon name="times-circle" type="solid" disabled></neos-icon>
</neos-button>
<neos-button squared theme="transparent">
<neos-icon name="edit" type="solid"></neos-icon>
</neos-button>
<neos-button squared theme="transparent">
<neos-icon name="copy" type="solid"></neos-icon>
</neos-button>
<neos-button squared theme="transparent">
<neos-icon name="cut" type="solid"></neos-icon>
</neos-button>
<neos-button squared theme="transparent">
<neos-icon name="paste" type="solid" disabled></neos-icon>
</neos-button>
<neos-toolbar-separator></neos-toolbar-separator>
<neos-button squared theme="transparent">
<neos-icon name="eraser" type="solid" disabled></neos-icon>
</neos-button>
</neos-toolbar>
</section>
<section>
<header>
<h2>with dark theme</h2>
</header>
<neos-toolbar theme="dark">
<neos-button squared theme="transparent" disabled slot="secondary">
<neos-icon name="save" type="solid" disabled></neos-icon>
</neos-button>
<neos-button squared theme="transparent" slot="secondary">
<neos-icon name="times-circle" type="solid" disabled></neos-icon>
</neos-button>
<neos-button squared theme="transparent">
<neos-icon name="edit" type="solid"></neos-icon>
</neos-button>
<neos-button squared theme="transparent">
<neos-icon name="copy" type="solid"></neos-icon>
</neos-button>
<neos-button squared theme="transparent">
<neos-icon name="cut" type="solid"></neos-icon>
</neos-button>
<neos-button squared theme="transparent">
<neos-icon name="paste" type="solid" disabled></neos-icon>
</neos-button>
<neos-toolbar-separator></neos-toolbar-separator>
<neos-button squared theme="transparent">
<neos-icon name="eraser" type="solid" disabled></neos-icon>
</neos-button>
</neos-toolbar>
</section>
</section>
</body>
</html>
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