fix(splitter): splitter jumps (narrow size), if the block has a min-w…

…idth (#UIM-49)
positive-js · Jul 15, 2019 · 99b97d9 · 99b97d9
1 parent 1f6b85f
commit 99b97d9
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/packages/mosaic/splitter/_splitter-theme.scss b/packages/mosaic/splitter/_splitter-theme.scss
@@ -15,7 +15,7 @@
             background-color: mix(map-get($background, button-bg), map-get($background, hover));
         }
 
-        &.mc-gutter_horizontal {
+        &.mc-gutter_vertical {
             cursor: row-resize;
         }
 

diff --git a/packages/mosaic/splitter/splitter.component.html b/packages/mosaic/splitter/splitter.component.html
@@ -2,7 +2,7 @@
 
 <ng-template ngFor let-area [ngForOf]="areas" let-index="index" let-last="last">
     <mc-gutter *ngIf="last === false"
-               [class.mc-gutter_horizontal]="!isVertical"
+               [class.mc-gutter_vertical]="isVertical()"
                [direction]="direction"
                [attr.disabled]="disabled || null"
                [size]="gutterSize"

diff --git a/packages/mosaic/splitter/splitter.component.ts b/packages/mosaic/splitter/splitter.component.ts
@@ -197,9 +197,7 @@ export class McSplitterComponent implements OnInit {
     }
 
     private onMouseMove(event: MouseEvent, startPoint: IPoint, leftArea: IArea, rightArea: IArea) {
-        if (!this.isDragging || this.disabled) {
-            return;
-        }
+        if (!this.isDragging || this.disabled) { return; }
 
         const endPoint: IPoint = {
             x: event.screenX,
@@ -352,8 +350,10 @@ export class McSplitterAreaDirective implements OnInit, OnDestroy {
     }
 
     setSize(size: number): void {
-        const sz = coerceNumberProperty(size);
-        this.setStyle(this.getSizeProperty(), coerceCssPixelValue(sz));
+        if (size) {
+            const sz = coerceNumberProperty(size);
+            this.setStyle(this.getSizeProperty(), coerceCssPixelValue(sz));
+        }
     }
 
     getSize(): number {

diff --git a/packages/mosaic/splitter/splitter.scss b/packages/mosaic/splitter/splitter.scss
@@ -22,7 +22,7 @@
 
     overflow: hidden;
 
-    &.mc-gutter_horizontal > .mc-icon {
+    &.mc-gutter_vertical > .mc-icon {
         transform: rotate(90deg);
     }
 }