feat(layer-list): move/change select all button with checkbox and add…

… scrollbar in tools (#887) * mat-menu * css * buttons * buttons * cleaning
infra-geo-ouverte · Jul 5, 2021 · 18854b1 · 18854b1
1 parent 78e5af7
commit 18854b1
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 142 deletions.
diff --git a/packages/geo/src/lib/layer/layer-item/layer-item.component.ts b/packages/geo/src/lib/layer/layer-item/layer-item.component.ts
@@ -24,7 +24,6 @@ import { NetworkService, ConnectionState } from '@igo2/core';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LayerItemComponent implements OnInit, OnDestroy {
-
   public focusedCls = 'igo-layer-item-focused';
 
   @Input()

diff --git a/packages/geo/src/lib/layer/layer-list/layer-list.component.html b/packages/geo/src/lib/layer/layer-list/layer-list.component.html
@@ -1,58 +1,87 @@
-
 <mat-list>
   <igo-layer-list-tool *ngIf="showToolbar$ | async"
-      floatLabel="auto"
-      [layersAreAllVisible]="layersAreAllVisible"
-      [term]="layerFilterAndSortOptions.keyword"
-      [onlyVisible]="layerFilterAndSortOptions.onlyVisible"
-      [sortAlpha]="layerFilterAndSortOptions.sortAlpha"
-      (appliedFilterAndSort)="onAppliedFilterAndSortChange($event)"
-      (selection)="toggleSelectionMode($event)">
-    </igo-layer-list-tool>
+    floatLabel="auto"
+    [layersAreAllVisible]="layersAreAllVisible"
+    [term]="layerFilterAndSortOptions.keyword"
+    [onlyVisible]="layerFilterAndSortOptions.onlyVisible"
+    [sortAlpha]="layerFilterAndSortOptions.sortAlpha"
+    (appliedFilterAndSort)="onAppliedFilterAndSortChange($event)"
+    (selection)="toggleSelectionMode($event)">
+  </igo-layer-list-tool>
 </mat-list>
 
-<igo-list #igoList [ngClass]="(layerTool || selection) ? 'igo-list-min-height': 'igo-list-max-height'" [navigation]="false" [selection]="false">
+<mat-list-item *ngIf="selection">
+  <mat-checkbox
+    class="select-all-checkbox mat-subheading-2"
+    [color]="!selectAllCheck && layersChecked.length > 0 ? 'accent' : 'primary'"
+    (change)="selectAll()"
+    [checked]="selectAllCheck"
+    [indeterminate]="!selectAllCheck && layersChecked.length > 0"> {{selectAllCheck ? ('igo.geo.layer.deselectAll' | translate) : ('igo.geo.layer.selectAll' | translate)}}
+  </mat-checkbox>
+</mat-list-item>
+<mat-divider></mat-divider>
+
+<igo-list #igoList [ngClass]="(layerTool && !selection) ? 'igo-list-min-height': 'igo-list-max-height'" [navigation]="false" [selection]="false">
   <ng-template ngFor let-layer let-i="index" [ngForOf]="layers$ | async">
     <igo-layer-item *ngIf="!(excludeBaseLayers && layer.baseLayer)"
-        igoListItem
-        [layer]="layer"
-        [activeLayer]="activeLayer"
-        [orderable]="orderable && !layer.baseLayer"
-        [lowerDisabled]="getLowerLayer().id === layer.id"
-        [raiseDisabled]="getUpperLayer().id === layer.id"
-        [queryBadge]="queryBadge"
-        [expandLegendIfVisible]="expandLegendOfVisibleLayers"
-        [updateLegendOnResolutionChange]="updateLegendOnResolutionChange"
-        [toggleLegendOnVisibilityChange]="toggleLegendOnVisibilityChange"
-        [selectionMode]="selection"
-        [selectAll]="selectAllCheck"
-        [layerCheck]="layer.options.check"
-        [changeDetection]="layerItemChangeDetection$"
-        (action)="toggleLayerTool($event)"
-        (checkbox)="layersCheck($event)">
+      igoListItem
+      [layer]="layer"
+      [activeLayer]="activeLayer"
+      [orderable]="orderable && !layer.baseLayer"
+      [lowerDisabled]="getLowerLayer().id === layer.id"
+      [raiseDisabled]="getUpperLayer().id === layer.id"
+      [queryBadge]="queryBadge"
+      [expandLegendIfVisible]="expandLegendOfVisibleLayers"
+      [updateLegendOnResolutionChange]="updateLegendOnResolutionChange"
+      [toggleLegendOnVisibilityChange]="toggleLegendOnVisibilityChange"
+      [selectionMode]="selection"
+      [selectAll]="selectAllCheck"
+      [layerCheck]="layer.options.check"
+      [changeDetection]="layerItemChangeDetection$"
+      (action)="toggleLayerTool($event)"
+      (checkbox)="layersCheck($event)">
     </igo-layer-item>
   </ng-template>
 </igo-list>
 
 <igo-panel *ngIf="!selection && layerTool && activeLayer" class="igo-layer-actions-container" [title]="activeLayer.title">
-
   <div class="igo-layer-button-group">
-  <ng-container igoLayerItemToolbar
-    [ngTemplateOutlet]="templateLayerToolbar"
-    [ngTemplateOutletContext]="{layer: activeLayer}">
-  </ng-container>
+    <button
+      *ngIf="isLayerRemovable(activeLayer)"
+      class="delete-button"
+      mat-icon-button
+      color="warn"
+      tooltip-position="below"
+      matTooltipShowDelay="500"
+      [matTooltip]="'igo.geo.layer.removeLayer' | translate"
+      (click)="removeLayers()">
+      <mat-icon svgIcon="delete"></mat-icon>
+    </button>
 
-  <ng-content select="[igoLayerItemToolbar]"></ng-content>
     <button
-      *ngIf="activeLayerIsValid(activeLayer)"
-      class="zoomLayer-button"
+      class="down-button"
+      mat-icon-button
+      color="primary"
+      tooltip-position="below"
+      matTooltipShowDelay="500"
+      [matTooltip]="(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterLowerLayer' | translate) : ('igo.geo.layer.lowerLayer' | translate)"
+      [disabled]="lowerDisabled"
+      (click)="moveActiveLayer(activeLayer,layerListDisplacement.Lower)">
+      <mat-icon [matBadge]="(sortAlpha || onlyVisible || keyword) ? '!' : ''" matBadgeColor="warn" matBadgeSize="medium" [matBadgeHidden]="lowerDisabled"
+                svgIcon="arrow-down"></mat-icon>
+    </button>
+
+    <button
+      class="up-button"
       color="primary"
       mat-icon-button
       tooltip-position="below"
       matTooltipShowDelay="500"
-      [matTooltip]="'igo.geo.layer.zoomLayer' | translate"
-      (click)="zoomLayerExtents(activeLayer)">
-      <mat-icon matBadgeColor="primary" matBadgeSize="medium" svgIcon="magnify-scan"></mat-icon>
+      [matTooltip]="(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterRaiseLayer' | translate) : ('igo.geo.layer.raiseLayer' | translate)"
+      [disabled]="raiseDisabled"
+      (click)="moveActiveLayer(activeLayer,layerListDisplacement.Raise)">
+      <mat-icon [matBadge]="(sortAlpha || onlyVisible || keyword) ? '!' : ''" matBadgeColor="warn" matBadgeSize="medium" [matBadgeHidden]="raiseDisabled"
+                svgIcon="arrow-up"></mat-icon>
     </button>
 
     <!-- <label>{{ 'igo.geo.layer.opacity' | translate }} </label> -->
@@ -88,71 +117,77 @@
     </mat-menu>
 
     <button
-      class="up-button"
+      *ngIf="activeLayerIsValid(activeLayer)"
+      class="zoomLayer-button"
       color="primary"
       mat-icon-button
       tooltip-position="below"
       matTooltipShowDelay="500"
-      [matTooltip]="(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterRaiseLayer' | translate) : ('igo.geo.layer.raiseLayer' | translate)"
-      [disabled]="raiseDisabled"
-      (click)="moveActiveLayer(activeLayer,layerListDisplacement.Raise)">
-      <mat-icon [matBadge]="(sortAlpha || onlyVisible || keyword) ? '!' : ''" matBadgeColor="warn" matBadgeSize="medium" [matBadgeHidden]="raiseDisabled"
-                svgIcon="arrow-up"></mat-icon>
+      [matTooltip]="'igo.geo.layer.zoomLayer' | translate"
+      (click)="zoomLayerExtents(activeLayer)">
+      <mat-icon matBadgeColor="primary" matBadgeSize="medium" svgIcon="magnify-scan"></mat-icon>
     </button>
 
+    <ng-container igoLayerItemToolbar
+      [ngTemplateOutlet]="templateLayerToolbar"
+      [ngTemplateOutletContext]="{layer: activeLayer}">
+    </ng-container>
+
+    <ng-content select="[igoLayerItemToolbar]"></ng-content>
+  </div>
+</igo-panel>
+
+<igo-panel *ngIf="selection && layers.length > 0" class="igo-layer-actions-container" [title]="'igo.geo.layer.tools' | translate">
+  <div class="actions-buttons-multi">
     <button
-      class="down-button"
+      class="delete-button"
       mat-icon-button
-      color="primary"
+      color="warn"
       tooltip-position="below"
       matTooltipShowDelay="500"
-      [matTooltip]="(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterLowerLayer' | translate) : ('igo.geo.layer.lowerLayer' | translate)"
-      [disabled]="lowerDisabled"
-      (click)="moveActiveLayer(activeLayer,layerListDisplacement.Lower)">
-      <mat-icon [matBadge]="(sortAlpha || onlyVisible || keyword) ? '!' : ''" matBadgeColor="warn" matBadgeSize="medium" [matBadgeHidden]="lowerDisabled"
-                svgIcon="arrow-down"></mat-icon>
+      [disabled]="layersChecked.length === 0"
+      [matTooltip]="isAllLayersRemovable(layersChecked) ? ('igo.geo.layer.removeSelectedLayers' | translate) : 'igo.geo.layer.removeSelectedLayersRestriction' | translate"
+      (click)="removeLayers(layersChecked)">
+      <mat-icon [matBadge]="'!'" matBadgeColor="warn" matBadgeSize="medium" [matBadgeHidden]="isAllLayersRemovable(layersChecked)"
+                svgIcon="delete"></mat-icon>
     </button>
 
     <button
-      *ngIf="isLayerRemovable(activeLayer)"
-      class="delete-button"
+      class="eye-button"
       mat-icon-button
-      color="warn"
+      color="primary"
       tooltip-position="below"
       matTooltipShowDelay="500"
-      [matTooltip]="'igo.geo.layer.removeLayer' | translate"
-      (click)="removeLayers()">
-      <mat-icon svgIcon="delete"></mat-icon>
+      [disabled]="layersChecked.length === 0"
+      [matTooltip]="statusSelectedLayersCheck === 'ALL_HIDDEN' ? ('igo.geo.layer.showSelectedLayers' | translate) : ('igo.geo.layer.hideSelectedLayers' | translate)"
+      (click)="toggleVisibility(layersChecked)">
+      <mat-icon	[svgIcon]="(statusSelectedLayersCheck === 'ALL_HIDDEN') ? 'eye-off' : 'eye'"></mat-icon>
     </button>
-  </div>
-</igo-panel>
-
-<igo-panel *ngIf="selection && layers.length > 0" class="igo-layer-actions-container" [title]="'igo.geo.layer.tools' | translate">
-  <div class="igo-layer-button-group">
 
     <button
-      mat-stroked-button
+      class="down-button"
+      mat-icon-button
+      color="primary"
       tooltip-position="below"
       matTooltipShowDelay="500"
-      [disabled]="layers.length === 0"
-      [matTooltip]="selectAllCheck ?
-                    ('igo.geo.layer.deselectAll' | translate) :
-                    ('igo.geo.layer.selectAll' | translate)"
-      (click)="selectAll()">
-      {{selectAllCheck ? ('igo.geo.layer.deselectAll' | translate) :
-                    ('igo.geo.layer.selectAll' | translate)}}
+      [matTooltip]="(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterLowerLayer' | translate) : ('igo.geo.layer.lowerLayer' | translate)"
+      [disabled]="lowerDisabledSelection"
+      (click)="lowerLayers(layersChecked)">
+      <mat-icon [matBadge]="(sortAlpha || onlyVisible || keyword) ? '!' : ''" matBadgeColor="warn" matBadgeSize="medium" [matBadgeHidden]="lowerDisabledSelection"
+                svgIcon="arrow-down"></mat-icon>
     </button>
 
     <button
-      *ngIf="layersChecked.length !== 0 && activeLayersAreValid(layersChecked)"
-      class="zoomLayer-button"
+      class="up-button"
       color="primary"
       mat-icon-button
       tooltip-position="below"
       matTooltipShowDelay="500"
-      [matTooltip]="'igo.geo.layer.zoomLayers' | translate"
-      (click)="zoomLayersExtents(layersChecked)">
-      <mat-icon matBadgeColor="primary" matBadgeSize="medium" svgIcon="magnify-scan"></mat-icon>
+      [matTooltip]="(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterRaiseLayer' | translate) : ('igo.geo.layer.raiseLayer' | translate)"
+      [disabled]="raiseDisabledSelection"
+      (click)="raiseLayers(layersChecked)">
+      <mat-icon [matBadge]="(sortAlpha || onlyVisible || keyword) ? '!' : ''" matBadgeColor="warn" matBadgeSize="medium" [matBadgeHidden]="raiseDisabledSelection"
+                svgIcon="arrow-up"></mat-icon>
     </button>
 
     <button
@@ -187,55 +222,15 @@
     </mat-menu>
 
     <button
-      class="up-button"
-      color="primary"
-      mat-icon-button
-      tooltip-position="below"
-      matTooltipShowDelay="500"
-      [matTooltip]="(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterRaiseLayer' | translate) : ('igo.geo.layer.raiseLayer' | translate)"
-      [disabled]="raiseDisabledSelection"
-      (click)="raiseLayers(layersChecked)">
-      <mat-icon [matBadge]="(sortAlpha || onlyVisible || keyword) ? '!' : ''" matBadgeColor="warn" matBadgeSize="medium" [matBadgeHidden]="raiseDisabledSelection"
-                svgIcon="arrow-up"></mat-icon>
-    </button>
-
-    <button
-      class="down-button"
-      mat-icon-button
+      *ngIf="layersChecked.length !== 0 && activeLayersAreValid(layersChecked)"
+      class="zoomLayer-button"
       color="primary"
-      tooltip-position="below"
-      matTooltipShowDelay="500"
-      [matTooltip]="(sortAlpha || onlyVisible || keyword) ? ('igo.geo.layer.filterLowerLayer' | translate) : ('igo.geo.layer.lowerLayer' | translate)"
-      [disabled]="lowerDisabledSelection"
-      (click)="lowerLayers(layersChecked)">
-      <mat-icon [matBadge]="(sortAlpha || onlyVisible || keyword) ? '!' : ''" matBadgeColor="warn" matBadgeSize="medium" [matBadgeHidden]="lowerDisabledSelection"
-                svgIcon="arrow-down"></mat-icon>
-    </button>
-
-    <button
-      class="eye-button"
       mat-icon-button
-      color="primary"
       tooltip-position="below"
       matTooltipShowDelay="500"
-      [disabled]="layersChecked.length === 0"
-      [matTooltip]="statusSelectedLayersCheck === 'ALL_HIDDEN' ? ('igo.geo.layer.showSelectedLayers' | translate) : ('igo.geo.layer.hideSelectedLayers' | translate)"
-      (click)="toggleVisibility(layersChecked)">
-      <mat-icon	[svgIcon]="(statusSelectedLayersCheck === 'ALL_HIDDEN') ? 'eye-off' : 'eye'"></mat-icon>
-    </button>
-
-    <button
-      class="delete-button"
-      mat-icon-button
-      color="warn"
-      tooltip-position="below"
-      matTooltipShowDelay="500"
-      [disabled]="layersChecked.length === 0"
-      [matTooltip]="isAllLayersRemovable(layersChecked) ? ('igo.geo.layer.removeSelectedLayers' | translate) : 'igo.geo.layer.removeSelectedLayersRestriction' | translate"
-      (click)="removeLayers(layersChecked)">
-      <mat-icon [matBadge]="'!'" matBadgeColor="warn" matBadgeSize="medium" [matBadgeHidden]="isAllLayersRemovable(layersChecked)"
-        svgIcon="delete"></mat-icon>
+      [matTooltip]="'igo.geo.layer.zoomLayers' | translate"
+      (click)="zoomLayersExtents(layersChecked)">
+      <mat-icon svgIcon="magnify-scan"></mat-icon>
     </button>
-
   </div>
 </igo-panel>
diff --git a/packages/geo/src/lib/layer/layer-list/layer-list.component.scss b/packages/geo/src/lib/layer/layer-list/layer-list.component.scss
@@ -1,11 +1,11 @@
 :host .igo-list-min-height {
-  height: calc(100% - 151px);
+  height: calc(100% - 153px);
   padding-top: 8px;
 }
 
 :host .igo-list-max-height {
+  height: calc(100% - 178px);
   padding-top: 8px;
-  height: calc(100% - 55px);
 }
 
 mat-form-field.inputFilter {
@@ -15,13 +15,21 @@ mat-form-field.inputFilter {
 
 .igo-layer-actions-container {
   width: calc(100% - 5px);
-  padding-left: 5px;
+  padding-left: 4px;
 }
 
 .igo-layer-actions-container > div {
   text-align: center;
 }
 
+mat-list-item ::ng-deep .mat-list-item-content {
+  margin-bottom: 10px;
+}
+
+mat-checkbox ::ng-deep .mat-checkbox-inner-container {
+  margin-left: 8px;
+  margin-right: 16px;
+}
 
 #opacity-slider {
   float: left;
@@ -31,9 +39,30 @@ mat-form-field.inputFilter {
   top: 10px
 }
 
-.igo-layer-button-group {
+.igo-layer-button-group, .actions-buttons-multi {
   display: flex;
-  float: right;
+  align-items: center;
+  flex-direction: row-reverse;
+  overflow-x: auto;
+
+  &::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #888;
+
+    &:hover {
+      background: #555;
+    }
+  }
+}
+
+.igo-layer-button-group {
   padding-top: 5px;
 }
 

diff --git a/packages/geo/src/lib/layer/layer-list/layer-list.component.ts b/packages/geo/src/lib/layer/layer-list/layer-list.component.ts
@@ -21,7 +21,7 @@ import {
   EMPTY,
   timer
 } from 'rxjs';
-import { debounce, isEmpty } from 'rxjs/operators';
+import { debounce } from 'rxjs/operators';
 import {
   MetadataOptions,
   MetadataLayerOptions

diff --git a/packages/geo/src/locale/en.geo.json b/packages/geo/src/locale/en.geo.json
@@ -212,8 +212,8 @@
         "activateSelectionMode": "Activate multiple selection mode",
         "deactivateSelectionMode": "Deactivate multiple selection mode",
         "tools": "Tools",
-        "selectAll": "Select all",
-        "deselectAll": "Deselect all",
+        "selectAll": "Select all layers",
+        "deselectAll": "Deselect all layers",
         "zoomLayer": "Zoom To Layer Extents",
         "zoomLayers": "Zoom To Selected Layers Extents",
         "opacity": "Opacity",
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,6 @@ import { NetworkService, ConnectionState } from '@igo2/core'; @@
       changeDetection: ChangeDetectionStrategy.OnPush
     })
     export class LayerItemComponent implements OnInit, OnDestroy {
       public focusedCls = 'igo-layer-item-focused';
       @Input()
@@ Expand Down @@