fix(splitter): disabled splitter has the wrong cursor style #UIM-48

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;
+    }
 }
 
 

packages/mosaic-dev/sidebar/template.html

@@ -37,6 +37,7 @@
 <div class="layout-row layout-align-space-between">
     <div>
         <button mc-button (click)="toggleLeftSidebar()">toggle by state</button>&nbsp;
+        <button mc-button (click)="toggleLeftSplitterState()">toggle splitter state</button>&nbsp;
     </div>
 
     <div>
@@ -49,7 +50,7 @@
 <mc-splitter
     class="container layout-row layout-align-space-between"
     direction="horizontal"
-    [disabled]="!leftSidebarSidebarState">
+    [disabled]="leftSplitterState">
     <mc-sidebar
         mc-splitter-area
         [position]="'left'"

packages/mosaic/splitter/_splitter-theme.scss

@@ -6,15 +6,23 @@
 
     $is-dark: map-get($theme, is-dark);
 
-    mc-gutter {
+    .mc-gutter {
         background-color: map-get($background, button-bg);
 
+        cursor: col-resize;
+
         &:hover {
             background-color: mix(map-get($background, button-bg), map-get($background, hover));
         }
 
+        &.mc-gutter_horizontal {
+            cursor: row-resize;
+        }
+
         &[disabled] {
             background-color: mix(map-get($background, disabled-overlay), map-get($background, hover));
+
+            cursor: default;
         }
     }
 }

packages/mosaic/splitter/splitter.component.html

@@ -1,12 +1,14 @@
 <ng-content></ng-content>
+
 <ng-template ngFor let-area [ngForOf]="areas" let-index="index" let-last="last">
     <mc-gutter *ngIf="last === false"
+               [class.mc-gutter_horizontal]="!isVertical"
                [direction]="direction"
-               [disabled]="disabled"
+               [attr.disabled]="disabled || null"
                [size]="gutterSize"
                [order]="index * 2 + 1"
-               (mousedown)="onMouseDown($event, index, index + 1)"
-    >
-        <i mc-icon="mc-ellipsis_16" color="second" [class.icon-vertical]="direction === 'vertical'" *ngIf="!disabled"></i>
+               (mousedown)="onMouseDown($event, index, index + 1)">
+
+        <i mc-icon="mc-ellipsis_16" color="second" *ngIf="!disabled"></i>
     </mc-gutter>
 </ng-template>

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,31 +58,35 @@ 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()
     set disabled(disabled: boolean) {
         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,56 +251,48 @@ 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()
     set order(order: number) {
         this._order = coerceNumberProperty(order);
     }
 
-    get order(): number {
-        return this._order;
+    private _order: number = 0;
+
+    get size(): number {
+        return this._size;
     }
 
     @Input()
     set size(size: number) {
         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);

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);
+    }
 }