feat(toolbox): add scrool buttons (#404)

* blad * nhj * feat/ui (search-assemblage): panel de détails, bouton add/remove layer, cleanFeature * <feat/ui>(sidenav) : scrollable vs scroll button, zoom button (tablet), expansion panel (mobile) * ui(sidenav): scroll button * package * not used * Update toolbox.ts
infra-geo-ouverte · Sep 11, 2019 · 6e8c62e · 6e8c62e
1 parent 8b2929e
commit 6e8c62e
Show file tree

Hide file tree

Showing 11 changed files with 151 additions and 65 deletions.
diff --git a/packages/common/src/lib/action/actionbar/actionbar.component.html b/packages/common/src/lib/action/actionbar/actionbar.component.html
@@ -1,28 +1,53 @@
 <mat-list *ngIf="mode === actionbarMode.Dock">
 
-  <igo-actionbar-item
-    *ngIf="withToggleButton"
-    color="accent"
-    [withTitle]="false"
-    [withIcon]="true"
-    [color]="color"
-    [disabled]="store.view.empty"
-    [action]="toggleCollapseAction"
-    (trigger)="onTriggerAction(toggleCollapseAction)">
-  </igo-actionbar-item>
+    <div *ngIf="heightCondition && positionConditionTop && isDesktop"
+      id="topChevron">
+      <button
+        mat-icon-button
+        tooltip-position="below"
+        matTooltipShowDelay="500"
+        [matTooltip]="'igo.common.actionbar.scrollUp' | translate"
+        (click)="scrollUp()">
+        <mat-icon svgIcon="chevron-up"></mat-icon>
+      </button>
+    </div>
 
-  <ng-template *ngIf="!collapsed" ngFor let-action [ngForOf]="store.view.all$() | async">
     <igo-actionbar-item
-      [ngClass]="itemClassFunc(action)"
+      *ngIf="withToggleButton"
       color="accent"
-      [withTitle]="withTitle"
-      [withIcon]="withIcon"
+      [withTitle]="false"
+      [withIcon]="true"
       [color]="color"
-      [disabled]="store.state.get(action).disabled"
-      [action]="action"
-      (trigger)="onTriggerAction(action)">
+      [disabled]="store.view.empty"
+      [action]="toggleCollapseAction"
+      (trigger)="onTriggerAction(toggleCollapseAction)">
     </igo-actionbar-item>
-  </ng-template>
+
+    <ng-template #buttonContent *ngIf="!collapsed" ngFor let-action [ngForOf]="store.view.all$() | async">
+      <igo-actionbar-item
+        [ngClass]="itemClassFunc(action)"
+        color="accent"
+        [withTitle]="withTitle"
+        [withIcon]="withIcon"
+        [color]="color"
+        [disabled]="store.state.get(action).disabled"
+        [action]="action"
+        (trigger)="onTriggerAction(action)">
+      </igo-actionbar-item>
+    </ng-template>
+
+    <div *ngIf="heightCondition && positionConditionLow && isDesktop"
+      id="lowChevron">
+      <button
+        mat-icon-button
+        tooltip-position="below"
+        matTooltipShowDelay="500"
+        [matTooltip]="'igo.common.actionbar.scrollDown' | translate"
+        (click)="scrollDown()">
+        <mat-icon svgIcon="chevron-down"></mat-icon>
+      </button>
+    </div>
+
 </mat-list>
 
 <div *ngIf="mode === actionbarMode.Overlay">

diff --git a/packages/common/src/lib/action/actionbar/actionbar.component.scss b/packages/common/src/lib/action/actionbar/actionbar.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../../core/src/style/partial/media';
+
 $igo-actionbar-item-height: 46px;
 $igo-actionbar-item-padding: 3px;
 $igo-actionbar-item-icon-padding: 8px;
@@ -68,3 +70,16 @@ igo-actionbar-item ::ng-deep mat-list-item:hover {
   padding: 8px 3px;
   margin: 10px;
 }
+
+#topChevron {
+  position: fixed;
+  background-color: white;
+  z-index: 3;
+}
+
+#lowChevron {
+  position: fixed;
+  bottom: 0;
+  background-color: white;
+  z-index: 3;
+}
diff --git a/packages/common/src/lib/action/actionbar/actionbar.component.ts b/packages/common/src/lib/action/actionbar/actionbar.component.ts
@@ -6,14 +6,17 @@ import {
   ChangeDetectionStrategy,
   OnChanges,
   OnDestroy,
-  SimpleChanges
+  SimpleChanges,
+  ElementRef
 } from '@angular/core';
 
+import { MediaService, Media } from '@igo2/core';
 import { EntityStoreWatcher } from '../../entity';
 import { Action } from '../shared/action.interfaces';
 import { ActionbarMode } from '../shared/action.enums';
 import { ActionStore } from '../shared/store';
 import { Overlay } from '@angular/cdk/overlay';
+import { BehaviorSubject } from 'rxjs';
 
 /**
  * A list of action buttons.
@@ -26,6 +29,7 @@ import { Overlay } from '@angular/cdk/overlay';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ActionbarComponent implements OnDestroy, OnChanges {
+
   /**
    * Reference to the ActionbarMode enum for use in the template
    * @internal
@@ -56,6 +60,21 @@ export class ActionbarComponent implements OnDestroy, OnChanges {
    */
   private watcher: EntityStoreWatcher<Action>;
 
+  /**
+   * Height Condition for scroll button
+   */
+  heightCondition$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+
+  /**
+   * Position Condition for top scroll button
+   */
+  positionConditionTop$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
+
+  /**
+   * Position Condition for low scroll button
+   */
+  positionConditionLow$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
+
   /**
    * Action store
    */
@@ -86,6 +105,11 @@ export class ActionbarComponent implements OnDestroy, OnChanges {
    */
   @Input() withTitle = true;
 
+  /**
+   * Whether action titles are displayed (condition for scroll button)
+   */
+  @Input() scrollActive = true;
+
   /**
    * Whether action icons are displayed
    */
@@ -143,11 +167,44 @@ export class ActionbarComponent implements OnDestroy, OnChanges {
     return this.horizontal;
   }
 
+  get heightCondition(): boolean {
+    const el = this.elRef.nativeElement;
+    if (this.scrollActive === false) {
+      if (el.clientHeight < el.scrollHeight) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  get positionConditionTop(): boolean {
+    if (this.elRef.nativeElement.scrollTop === 0) {
+      return false;
+    }
+    return true;
+  }
+
+  get positionConditionLow(): boolean {
+    const el = this.elRef.nativeElement;
+    if (el.scrollTop >= (el.scrollHeight - el.clientHeight)) {
+      return false;
+    }
+    return true;
+  }
+
+  get isDesktop(): boolean {
+    return this.mediaService.getMedia() === Media.Desktop;
+  }
+
   static defaultItemClassFunc(action: Action) {
     return {};
   }
 
-  constructor(private cdRef: ChangeDetectorRef, public overlay: Overlay) {}
+  constructor(
+    public overlay: Overlay,
+    private elRef: ElementRef,
+    private cdRef: ChangeDetectorRef,
+    public mediaService: MediaService) {}
 
   /**
    * @internal
@@ -177,4 +234,13 @@ export class ActionbarComponent implements OnDestroy, OnChanges {
     const args = action.args || [];
     action.handler(...args);
   }
+
+  scrollDown() {
+    this.elRef.nativeElement.scrollBy(0, 52);
+  }
+
+  scrollUp() {
+    this.elRef.nativeElement.scrollBy(0, -52);
+  }
+
 }
diff --git a/packages/common/src/lib/tool/shared/toolbox.ts b/packages/common/src/lib/tool/shared/toolbox.ts
@@ -75,6 +75,14 @@ export class Toolbox {
     this.store.load(tools);
   }
 
+  /**
+   * Get toolbar
+   * @returns Toolbar value
+   */
+  getToolbar(): string[] {
+    return this.toolbar$.getValue();
+  }
+
   /**
    * Set toolbar
    * @param toolbar A list of tool names

diff --git a/packages/common/src/lib/tool/toolbox/toolbox.component.html b/packages/common/src/lib/tool/toolbox/toolbox.component.html
@@ -3,6 +3,7 @@
   [store]="actionStore"
   [withIcon]="true"
   [withTitle]="toolbarWithTitle"
+  [scrollActive]="toolbarWithTitle"
   [horizontal]="false"
   [itemClassFunc]="actionBarItemClassFunc">
 </igo-actionbar>

diff --git a/packages/common/src/lib/tool/toolbox/toolbox.component.scss b/packages/common/src/lib/tool/toolbox/toolbox.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../../core/src/style/partial/media';
+
 :host {
   display: block;
   position: relative;
@@ -40,6 +42,11 @@ igo-actionbar:not(.with-title) {
   -webkit-box-shadow: 2px 0px 2px 0px #dddddd;
   -o-box-shadow: 2px 0px 2px 0px #dddddd;
   box-shadow: 2px 0px 2px 0px #dddddd;
+
+  @include mobile {
+    overflow: auto;
+  }
+
 }
 
 igo-actionbar ::ng-deep igo-actionbar-item.tool-actived ::ng-deep mat-list-item {

diff --git a/packages/common/src/locale/en.common.json b/packages/common/src/locale/en.common.json
@@ -13,6 +13,10 @@
         "errors": {
           "required": "This field is required"
         }
+      },
+      "actionbar": {
+        "scrollUp": "Scroll up",
+        "scrollDown": "Scroll down"
       }
     }
   }

diff --git a/packages/common/src/locale/fr.common.json b/packages/common/src/locale/fr.common.json
@@ -13,6 +13,10 @@
         "errors": {
           "required": "Ce champ est requis"
         }
+      },
+      "actionbar": {
+        "scrollUp": "Défiler vers le haut",
+        "scrollDown": "Défiler vers le bas"
       }
     }
   }

diff --git a/packages/context/src/lib/sidenav/sidenav.component.html b/packages/context/src/lib/sidenav/sidenav.component.html
@@ -34,14 +34,6 @@
             <mat-icon svgIcon="menu"></mat-icon>
           </button>
 
-          <!--igo-toolbar
-            igoToolContext igoToolbarBinding
-            [withTitle]="tool ? false : true">
-          </igo-toolbar>
-
-          <div class="igo-toolbox-container" [ngClass]="{'shown': tool ? true : false}">
-            <igo-toolbox [animate]="true"></igo-toolbox>
-          </div-->
         </igo-panel>
       </div>
 

diff --git a/packages/context/src/lib/sidenav/sidenav.component.scss b/packages/context/src/lib/sidenav/sidenav.component.scss
@@ -69,41 +69,6 @@ mat-sidenav {
   @extend %border-box;
 }
 
-/*** Toolbar and toolbox ***/
-
-igo-toolbar {
-  position: absolute;
-  top: 51px;
-  left: 0;
-  bottom: 0;
-}
-
-igo-toolbar.with-title {
-  right: 0;
-  overflow: auto;
-}
-
-igo-toolbar:not(.with-title) {
-  @extend %box-shadowed;
-  overflow: hidden;
-}
-
-igo-toolbar ::ng-deep igo-list {
-  overflow: inherit;
-}
-
-.igo-toolbox-container {
-  position: absolute;
-  top: 51px;
-  bottom: 0;
-  right: 0;
-  overflow: auto;
-}
-
-.igo-toolbox-container.shown {
-  left: 48px;
-}
-
 /*** Feature details ***/
 
 :host ::ng-deep .igo-flexible-fill .igo-container {

diff --git a/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.ts b/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.ts
@@ -96,8 +96,7 @@ export class SearchResultsToolComponent {
     private mapState: MapState,
     private layerService: LayerService,
     private searchState: SearchState
-  ) {
-  }
+  ) {}
 
   /**
    * Try to add a feature to the map when it's being focused