Merge pull request #8281 from aleixsuau/bim/fix/resizer

wp-resizer fixes and improvements

app/assets/stylesheets/openproject/_generic.sass

@@ -116,3 +116,6 @@
 
 .-no-z-index
   z-index: 0 !important
+
+.-error
+  color: $content-form-error-color !important

frontend/src/app/components/resizer/wp-resizer.component.ts

@@ -26,7 +26,7 @@
 // See docs/COPYRIGHT.rdoc for more details.
 //++
 
-import {AfterViewInit, Component, ElementRef, Input, OnInit} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, Input, OnInit, ChangeDetectionStrategy} from '@angular/core';
 import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
 import {TransitionService} from '@uirouter/core';
 import {MainMenuToggleService} from "core-components/main-menu/main-menu-toggle.service";
@@ -39,13 +39,14 @@ import {fromEvent} from "rxjs";
   selector: 'wp-resizer',
   template: `
     <resizer [customHandler]="false"
-             resizerClass="work-packages--resizer icon-resizer-vertical-lines"
+             [resizerClass]="resizerClass"
              cursorClass="col-resize"
              (end)="resizeEnd()"
              (start)="resizeStart()"
              (move)="resizeMove($event)">
     </resizer>
-  `
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 
 export class WpResizerDirective extends UntilDestroyedMixin implements OnInit, AfterViewInit {
@@ -57,8 +58,12 @@ export class WpResizerDirective extends UntilDestroyedMixin implements OnInit, A
   private resizingElement:HTMLElement;
   private elementWidth:number;
   private element:HTMLElement;
+  private resizer:HTMLElement;
+  // Min-width this element is allowed to have
+  private elementMinWidth = 530;
 
   public moving:boolean = false;
+  public resizerClass = 'work-packages--resizer icon-resizer-vertical-lines';
 
   constructor(readonly toggleService:MainMenuToggleService,
               private elementRef:ElementRef,
@@ -73,13 +78,17 @@ export class WpResizerDirective extends UntilDestroyedMixin implements OnInit, A
 
     // Get initial width from local storage and apply
     let localStorageValue = this.parseLocalStorageValue();
-    this.elementWidth = localStorageValue || this.resizingElement.offsetWidth;
+    this.elementWidth = localStorageValue ||
+                        (this.resizingElement.offsetWidth < this.elementMinWidth ?
+                          this.elementMinWidth :
+                          this.resizingElement.offsetWidth);
 
     // This case only happens when the timeline is loaded but not displayed.
     // Therefor the flexbasis will be set to 50%, just in px
     if (this.elementWidth === 0 && this.resizingElement.parentElement) {
       this.elementWidth = this.resizingElement.parentElement.offsetWidth / 2;
     }
+
     this.resizingElement.style[this.resizeStyle] = this.elementWidth + 'px';
 
     // Add event listener
@@ -105,6 +114,9 @@ export class WpResizerDirective extends UntilDestroyedMixin implements OnInit, A
   }
 
   ngAfterViewInit():void {
+    // Get the reziser
+    this.resizer = <HTMLElement>this.elementRef.nativeElement.getElementsByClassName(this.resizerClass)[0];
+
     this.applyColumnLayout(this.resizingElement, this.elementWidth);
   }
 
@@ -133,13 +145,29 @@ export class WpResizerDirective extends UntilDestroyedMixin implements OnInit, A
     // Send a event that we resized this element
     const event = new Event(this.resizeEvent);
     window.dispatchEvent(event);
+
+    this.manageErrorClass(false);
   }
 
   resizeMove(deltas:ResizeDelta) {
+    // Avoid text-selection while the user is dragging the resizer
+    deltas.origin.preventDefault();
+
     // Get new value depending on the delta
-    // The resizingElement is not allowed to be smaller than 530px
     this.elementWidth = this.elementWidth - deltas.relative.x;
-    let newValue = this.elementWidth < 530 ? 530 : this.elementWidth;
+    let newValue;
+
+    // The resizingElement is not allowed to be smaller than the elementMinWidth
+    if (this.elementWidth < this.elementMinWidth) {
+      newValue = this.elementMinWidth;
+
+      // Show the resizer red when it reaches its limit (min-width)
+      this.manageErrorClass(true);
+    } else {
+      newValue = this.elementWidth;
+
+      this.manageErrorClass(false);
+    }
 
     // Store item in local storage
     window.OpenProject.guardedLocalStorage(this.localStorageKey, `${newValue}`);
@@ -151,7 +179,6 @@ export class WpResizerDirective extends UntilDestroyedMixin implements OnInit, A
     this.resizingElement.style[this.resizeStyle] = newValue + 'px';
   }
 
-
   private parseLocalStorageValue():number|undefined {
     let localStorageValue = window.OpenProject.guardedLocalStorage(this.localStorageKey);
     let number = parseInt(localStorageValue || '', 10);
@@ -185,4 +212,14 @@ export class WpResizerDirective extends UntilDestroyedMixin implements OnInit, A
     let fullScreenLeftView = jQuery('.work-packages-full-view--split-left')[0];
     this.toggleColumns(fullScreenLeftView);
   }
+
+  private manageErrorClass(shouldBePresent:boolean) {
+    if (shouldBePresent && !this.resizer.classList.contains('-error')) {
+       this.resizer.classList.add('-error');
+    }
+
+    if (!shouldBePresent && this.resizer.classList.contains('-error')) {
+      this.resizer.classList.remove('-error');
+    }
+  }
 }