From a1a4b392760004d9291b0020e8cdad9335eeeae3 Mon Sep 17 00:00:00 2001 From: lskramarov Date: Fri, 28 Jun 2019 15:39:43 +0300 Subject: [PATCH] fix(splitter): disabled splitter has the wrong cursor style #UIM-48 --- packages/mosaic-dev/sidebar/module.ts | 5 +- packages/mosaic-dev/sidebar/template.html | 3 +- packages/mosaic/splitter/_splitter-theme.scss | 10 +- .../mosaic/splitter/splitter.component.html | 10 +- .../mosaic/splitter/splitter.component.ts | 124 ++++++------------ packages/mosaic/splitter/splitter.scss | 23 ++-- 6 files changed, 72 insertions(+), 103 deletions(-) diff --git a/packages/mosaic-dev/sidebar/module.ts b/packages/mosaic-dev/sidebar/module.ts index 42f682811..8ee7fe8fd 100644 --- a/packages/mosaic-dev/sidebar/module.ts +++ b/packages/mosaic-dev/sidebar/module.ts @@ -21,7 +21,6 @@ export class DemoComponent { leftSplitterState: boolean = false; rightSidebarSidebarState: boolean = false; - rightSplitterState: boolean = false; onStateChanged($event): void { console.log('onStateChanged: ', $event); @@ -34,6 +33,10 @@ export class DemoComponent { toggleRightSidebar() { this.rightSidebarSidebarState = !this.rightSidebarSidebarState; } + + toggleLeftSplitterState() { + this.leftSplitterState = !this.leftSplitterState; + } } diff --git a/packages/mosaic-dev/sidebar/template.html b/packages/mosaic-dev/sidebar/template.html index 397fb5a94..e93c2cbb4 100644 --- a/packages/mosaic-dev/sidebar/template.html +++ b/packages/mosaic-dev/sidebar/template.html @@ -37,6 +37,7 @@
  +  
@@ -49,7 +50,7 @@ + [disabled]="leftSplitterState"> + - + (mousedown)="onMouseDown($event, index, index + 1)"> + + diff --git a/packages/mosaic/splitter/splitter.component.ts b/packages/mosaic/splitter/splitter.component.ts index fe21dabc6..deefd3d21 100644 --- a/packages/mosaic/splitter/splitter.component.ts +++ b/packages/mosaic/splitter/splitter.component.ts @@ -24,19 +24,7 @@ interface IPoint { y: number; } - -const enum AttributeProperty { - Disabled = 'disabled' -} - -const enum Cursor { - Default = 'default', - ResizeColumn = 'col-resize', - ResizeRow = 'row-resize' -} - const enum StyleProperty { - Cursor = 'cursor', Flex = 'flex', FlexBasis = 'flex-basis', FlexDirection = 'flex-direction', @@ -50,12 +38,6 @@ const enum StyleProperty { Width = 'width' } -const enum State { - Disabled = 'disabled', - Horizontal = 'horizontal', - Vertical = 'vertical' -} - export const enum Direction { Horizontal = 'horizontal', Vertical = 'vertical' @@ -64,6 +46,9 @@ export const enum Direction { @Component({ selector: 'mc-splitter', exportAs: 'mcSplitter', + host: { + class: 'mc-splitter' + }, preserveWhitespaces: false, styleUrls: ['splitter.css'], templateUrl: './splitter.component.html', @@ -73,22 +58,24 @@ export const enum Direction { export class McSplitterComponent implements OnInit { readonly areas: IArea[] = []; - private _direction: Direction; - private _disabled: boolean = false; - private _gutterSize: number = 6; - private isDragging: boolean = false; private readonly areaPositionDivider: number = 2; private readonly listeners: (() => void)[] = []; + get direction(): Direction { + return this._direction; + } + @Input() set direction(direction: Direction) { this._direction = direction; } - get direction(): Direction { - return this._direction; + private _direction: Direction; + + get disabled(): boolean { + return this._disabled; } @Input() @@ -96,8 +83,10 @@ export class McSplitterComponent implements OnInit { this._disabled = coerceBooleanProperty(disabled); } - get disabled(): boolean { - return this._disabled; + private _disabled: boolean = false; + + get gutterSize(): number { + return this._gutterSize; } @Input() @@ -106,9 +95,7 @@ export class McSplitterComponent implements OnInit { this._gutterSize = size > 0 ? size : this.gutterSize; } - get gutterSize(): number { - return this._gutterSize; - } + private _gutterSize: number = 6; constructor( public elementRef: ElementRef, @@ -205,7 +192,7 @@ export class McSplitterComponent implements OnInit { this.areas.splice(indexToRemove, 1); } - private isVertical(): boolean { + isVertical(): boolean { return this.direction === Direction.Vertical; } @@ -264,30 +251,25 @@ export class McSplitterComponent implements OnInit { } @Directive({ - selector: 'mc-gutter' + selector: 'mc-gutter', + host: { + class: 'mc-gutter' + } }) export class McGutterDirective implements OnInit { - private _direction: Direction = Direction.Vertical; - private _disabled: boolean = false; - private _order: number = 0; - private _size: number = 6; - - @Input() - set direction(direction: Direction) { - this._direction = direction; - } - get direction(): Direction { return this._direction; } @Input() - set disabled(disabled: boolean) { - this._disabled = coerceBooleanProperty(disabled); + set direction(direction: Direction) { + this._direction = direction; } - get disabled(): boolean { - return this._disabled; + private _direction: Direction = Direction.Vertical; + + get order(): number { + return this._order; } @Input() @@ -295,8 +277,10 @@ export class McGutterDirective implements OnInit { this._order = coerceNumberProperty(order); } - get order(): number { - return this._order; + private _order: number = 0; + + get size(): number { + return this._size; } @Input() @@ -304,16 +288,11 @@ export class McGutterDirective implements OnInit { this._size = coerceNumberProperty(size); } - get size(): number { - return this._size; - } + private _size: number = 6; - constructor(private renderer: Renderer2, - private elementRef: ElementRef) { - } + constructor(private renderer: Renderer2, private elementRef: ElementRef) {} ngOnInit(): void { - this.setStyle(StyleProperty.Cursor, this.getCursor(this.getState())); this.setStyle(StyleProperty.FlexBasis, coerceCssPixelValue(this.size)); this.setStyle(this.isVertical() ? StyleProperty.Height : StyleProperty.Width, coerceCssPixelValue(this.size)); this.setStyle(StyleProperty.Order, this.order); @@ -322,10 +301,6 @@ export class McGutterDirective implements OnInit { this.setStyle(StyleProperty.Height, '100%'); } - if (this.disabled) { - this.setAttr(AttributeProperty.Disabled, 'true'); - } - // fix IE issue with gutter icon. flex-direction is requied for flex alignment options this.setStyle(StyleProperty.FlexDirection, this.isVertical() ? 'row' : 'column'); } @@ -334,38 +309,16 @@ export class McGutterDirective implements OnInit { return this.direction === Direction.Vertical; } - private getCursor(state: State): string { - switch (state) { - case State.Disabled: - return Cursor.Default; - case State.Vertical: - return Cursor.ResizeRow; - case State.Horizontal: - return Cursor.ResizeColumn; - default: - throw Error(`Unknown gutter state for cursor: ${state}`); - } - } - - private getState(): State { - return this.disabled - ? State.Disabled - : this.direction === Direction.Vertical - ? State.Vertical - : State.Horizontal; - } - private setStyle(property: StyleProperty, value: string | number) { this.renderer.setStyle(this.elementRef.nativeElement, property, value); } - - private setAttr(attribute: AttributeProperty, value: string) { - this.renderer.setAttribute(this.elementRef.nativeElement, attribute, value); - } } @Directive({ - selector: '[mc-splitter-area]' + selector: '[mc-splitter-area]', + host: { + class: 'mc-splitter-area' + } }) export class McSplitterAreaDirective implements OnInit, OnDestroy { constructor(private elementRef: ElementRef, @@ -381,9 +334,6 @@ export class McSplitterAreaDirective implements OnInit, OnDestroy { this.removeStyle(StyleProperty.MaxWidth); - // todo нахера это сделано ? - // this.setStyle(StyleProperty.Flex, '1'); - if (this.splitter.direction === Direction.Vertical) { this.setStyle(StyleProperty.Width, '100%'); this.removeStyle(StyleProperty.Height); diff --git a/packages/mosaic/splitter/splitter.scss b/packages/mosaic/splitter/splitter.scss index d64506154..8979489be 100644 --- a/packages/mosaic/splitter/splitter.scss +++ b/packages/mosaic/splitter/splitter.scss @@ -1,23 +1,28 @@ -mc-splitter { +.mc-splitter { display: flex; + flex-wrap: nowrap; align-items: stretch; - overflow: hidden; -} -mc-splitter-area { overflow: hidden; + + .mc-splitter-area { + overflow: hidden; + } } -mc-gutter { +.mc-gutter { display: flex; + flex-grow: 0; flex-shrink: 0; - overflow: hidden; + justify-content: center; align-items: center; -} -.icon-vertical { - transform: rotate(90deg); + overflow: hidden; + + &.mc-gutter_horizontal > .mc-icon { + transform: rotate(90deg); + } }