From b4fb16f10afae39522d5e5ef1b4d50594a84eb08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pierre-=C3=89tienne=20Lord?=
 <7397743+pelord@users.noreply.github.com>
Date: Wed, 9 May 2018 08:54:03 -0400
Subject: [PATCH] fix(ogc-filter): Alignements and adding refresh controls
 (#146)

* Alignements and adding refresh controls

* Lint.

* Final alignments for ogcfilters & layerItems

* Wrong conditions on ngif.

* Hide filters on more_horiz collapse ( ... on layer)
---
 .../ogc-filter-form.component.html            | 14 ++++-----
 .../ogc-filter-form.component.styl            | 31 ++++++-------------
 .../ogc-filterable-item.component.html        |  8 +++--
 .../ogc-filterable-item.component.styl        |  4 +++
 .../layer-item/layer-item.component.html      | 15 +++++----
 src/locale/en.json                            |  2 +-
 src/locale/fr.json                            |  2 +-
 7 files changed, 35 insertions(+), 41 deletions(-)

diff --git a/src/lib/filter/ogc-filter-form/ogc-filter-form.component.html b/src/lib/filter/ogc-filter-form/ogc-filter-form.component.html
index 6e43e4685..603d46335 100644
--- a/src/lib/filter/ogc-filter-form/ogc-filter-form.component.html
+++ b/src/lib/filter/ogc-filter-form/ogc-filter-form.component.html
@@ -1,7 +1,7 @@
 <mat-list-item>
 
-  <div class="igo-col igo-col-30 igo-col-100-m">
-    <mat-select [disabled]="!currentFilter.active" (change)="disableRefreshFilter()" [(ngModel)]="currentFilter.parentLogical"
+  <div class="igo-col igo-col-90 igo-col-100-m">
+    <mat-select class="logical" [disabled]="!currentFilter.active" (change)="disableRefreshFilter()" [(ngModel)]="currentFilter.parentLogical"
       *ngIf="activeFilters.indexOf(currentFilter) !== 0 && currentFilter.active===true">
       <mat-option value="And">{{'igo.operators.And' | translate}}</mat-option>
       <mat-option value="Or">{{'igo.operators.Or' | translate}}</mat-option>
@@ -29,13 +29,13 @@
     </span>
   </div>
 
-  <div class="igo-col igo-col-50 igo-col-100-m" *ngIf="(currentFilter.operator !== 'Intersects' && currentFilter.operator !== 'Contains' && currentFilter.operator !== 'Within')">
+  <div class="igo-col igo-col-90 igo-col-100-m" *ngIf="(currentFilter.operator !== 'Intersects' && currentFilter.operator !== 'Contains' && currentFilter.operator !== 'Within')">
     <mat-select [disabled]="!currentFilter.active" [(ngModel)]="currentFilter.operator" (change)="disableRefreshFilter()">
       <mat-option *ngFor="let operator of operators | keyvalue" [value]="operator.key">{{operator.value.alias}}</mat-option>
     </mat-select>
   </div>
 
-  <div class="igo-col igo-col-60 igo-col-100-m" *ngIf="(currentFilter.operator !== 'Intersects' && currentFilter.operator !== 'Contains' && currentFilter.operator !== 'Within')">
+  <div class="igo-col igo-col-90 igo-col-100-m" *ngIf="(currentFilter.operator !== 'Intersects' && currentFilter.operator !== 'Contains' && currentFilter.operator !== 'Within')">
 
     <!-- PropertyIsEqualTo -->
     <span *ngIf="currentFilter.operator === 'PropertyIsEqualTo' || currentFilter.operator === 'PropertyIsNotEqualTo'">
@@ -168,13 +168,13 @@
       <mat-option *ngFor="let operator of operators | keyvalue" [value]="operator.key">{{operator.value.alias}}</mat-option>
     </mat-select>
   </div>
-  <div class="igo-col igo-col-50 igo-col-100-m" *ngIf="(currentFilter.operator === 'Intersects' || currentFilter.operator === 'Contains' || currentFilter.operator === 'Within')">
+  <div class="igo-col igo-col-90 igo-col-100-m" *ngIf="(currentFilter.operator === 'Intersects' || currentFilter.operator === 'Contains' || currentFilter.operator === 'Within')">
     <mat-select [disabled]="!currentFilter.active" [(ngModel)]="currentFilter.igoSpatialSelector" (change)="changeGeometry(currentFilter,value)">
       <mat-option *ngFor="let igoSpatialSelector of igoSpatialSelectors" [value]="igoSpatialSelector.type">{{igoSpatialSelector.alias}}</mat-option>
     </mat-select>
   </div>
 
-  <div class="igo-col igo-col-60 igo-col-100-m" *ngIf="(currentFilter.operator === 'Intersects' || currentFilter.operator === 'Contains' || currentFilter.operator === 'Within')">
+  <div class="igo-col igo-col-90 igo-col-100-m" *ngIf="(currentFilter.operator === 'Intersects' || currentFilter.operator === 'Contains' || currentFilter.operator === 'Within')">
     <button mat-button [disabled]="!currentFilter.active" *ngIf="currentFilter['wkt_geometry'] && currentFilter.igoSpatialSelector === 'fixedExtent'"
       matSuffix mat-icon-button aria-label="Clear" (click)="changeGeometry(currentFilter,value)" tooltip-position="below" matTooltipShowDelay="500"
       [matTooltip]="'igo.spatialSelector.btnSetExtent' | translate">
@@ -194,7 +194,7 @@
   </div>
   <!-- PropertySpatial  -->
 
-  <div class="igo-col igo-col-60 igo-col-100-m">
+  <div class="igo-col igo-col-100 igo-col-100-m">
     <div class="igo-layer-button-group">
       <mat-slide-toggle class="example-margin" (change)="toggleFilterState($event,currentFilter,'active')" tooltip-position="below"
         matTooltipShowDelay="500" [matTooltip]="'igo.filter.toggleFilterState' | translate" [color]="color" [checked]="currentFilter.active"
diff --git a/src/lib/filter/ogc-filter-form/ogc-filter-form.component.styl b/src/lib/filter/ogc-filter-form/ogc-filter-form.component.styl
index 95967d94f..0d2f20a2c 100644
--- a/src/lib/filter/ogc-filter-form/ogc-filter-form.component.styl
+++ b/src/lib/filter/ogc-filter-form/ogc-filter-form.component.styl
@@ -10,45 +10,34 @@
   height: auto;
 }
 
-+media(mobile) {
-  .mat-list-item >>> div.mat-list-item-content {
+.mat-list-item >>> div.mat-list-item-content {
     display: inline-table;
   }
 
-  mat-select {
+.logical {
+    font-weight: bold;
+  }
+
+  mat-select, input {
     margin-top: 10px;
+    text-align: center
   }
-}
 
-.igo-layer-actions-container,
-.igo-layer-legend-container {
-  width: 100%;
-  display: inline-block;
-}
 
 .igo-layer-actions-container {
   bordered-top();
   bordered-bottom();
+  width: 100%;
+  display: inline-block;
 }
 
 .igo-layer-actions-container > div {
   text-align: center;
 }
 
-.igo-layer-legend-container {
-  padding-left: $igo-layer-legend-padding-left;
-}
-
-#opacity-slider {
-  width: 100%;
-
-  +media(mobile) {
-    width: 70%;
-  }
-}
 
 .igo-layer-button-group {
-  float: right;
+  float: center;
   padding: 0 $igo-list-item-padding;
 
   +media(mobile) {
diff --git a/src/lib/filter/ogc-filterable-item/ogc-filterable-item.component.html b/src/lib/filter/ogc-filterable-item/ogc-filterable-item.component.html
index 82bfb490f..c3c5b8364 100644
--- a/src/lib/filter/ogc-filterable-item/ogc-filterable-item.component.html
+++ b/src/lib/filter/ogc-filterable-item/ogc-filterable-item.component.html
@@ -1,17 +1,19 @@
 <mat-list-item>
+  
   <mat-icon *ngIf="ogcFiltersHeaderShown" class="igo-chevron" mat-list-avatar igoCollapse [target]="ogcFilters" [collapsed]="false">
   </mat-icon>
   <h4 *ngIf="ogcFiltersHeaderShown" matLine [matTooltip]="datasource.title" matTooltipShowDelay="500">{{datasource.title}}</h4>
   <h4 *ngIf="!ogcFiltersHeaderShown" matLine></h4>
 
-  <span *ngIf="!datasource.options['disableRefreshFilter'] && layers[0].visible">
+  <!-- <span *ngIf="!datasource.options['disableRefreshFilter'] && layers[0].visible"> -->
     <button mat-icon-button tooltip-position="below" matTooltipShowDelay="500" [matTooltip]="'igo.filter.refreshFilters' | translate"
-      [color]="color" (click)="refreshFilters()">
+    [disabled]="!layers[0].visible || datasource.options['disableRefreshFilter'] || !layers[0].isInResolutionsRange"
+    [color]="color" (click)="refreshFilters()">
       <mat-icon>
         refresh
       </mat-icon>
     </button>
-  </span>
+  <!-- </span> -->
 
   <span *ngIf="datasource.options.download && ogcFiltersHeaderShown">
     <button mat-icon-button tooltip-position="below" matTooltipShowDelay="500" [matTooltip]="'igo.download.action' | translate"
diff --git a/src/lib/filter/ogc-filterable-item/ogc-filterable-item.component.styl b/src/lib/filter/ogc-filterable-item/ogc-filterable-item.component.styl
index 74deab7d0..63651c95a 100644
--- a/src/lib/filter/ogc-filterable-item/ogc-filterable-item.component.styl
+++ b/src/lib/filter/ogc-filterable-item/ogc-filterable-item.component.styl
@@ -9,3 +9,7 @@
   width: 100%;
   display: inline-block;
 }
+
+mat-icon.disabled {
+  color: rgba(0,0,0,.38);
+}
diff --git a/src/lib/layer/layer-item/layer-item.component.html b/src/lib/layer/layer-item/layer-item.component.html
index d275fa10f..1b2c8a9ce 100644
--- a/src/lib/layer/layer-item/layer-item.component.html
+++ b/src/lib/layer/layer-item/layer-item.component.html
@@ -43,7 +43,7 @@ <h4 matLine [matTooltip]="layer.title +' ('+ id +') '" matTooltipShowDelay="500"
 </mat-list-item>
 
 <div #actions class="igo-layer-actions-container">
-  <div class="igo-col igo-col-40 igo-col-100-m">
+  <div class="igo-col igo-col-100 igo-col-100-m">
     <mat-slider
       id="opacity-slider"
       thumbLabel
@@ -58,10 +58,9 @@ <h4 matLine [matTooltip]="layer.title +' ('+ id +') '" matTooltipShowDelay="500"
     </mat-slider>
   </div>
 
-  <div class="igo-col igo-col-60 igo-col-100-m">
+  <div class="igo-col igo-col-100 igo-col-100-m">
     <div class="igo-layer-button-group">
         <button *ngIf="ogcFilterableOptions.isOgcFilterable
-        && layer.isInResolutionsRange
         && ogcFilterableOptions.ogcFilters.filtersAreEditable && ogcFilterInLayerItem"
           mat-icon-button
           collapsibleButton
@@ -140,13 +139,13 @@ <h4 matLine [matTooltip]="layer.title +' ('+ id +') '" matTooltipShowDelay="500"
       <ng-content select="[igoLayerAction]"></ng-content>
     </div>
   </div>
+  <div #ogcFilter class="igo-layer-actions-container">
+    <igo-ogc-filterable-item *ngIf="ogcFilterCollapse && ogcFilterableOptions.isOgcFilterable" igoListItem
+    [ogcFiltersHeaderShown]="false"
+    [datasource]="layer.dataSource"></igo-ogc-filterable-item>
+  </div> 
 </div>
 
 <div #legend class="igo-layer-legend-container">
   <igo-layer-legend *ngIf="legendLoaded" [layer]="layer"></igo-layer-legend>
 </div>
-<div #ogcFilter class="igo-layer-actions-container">
-  <igo-ogc-filterable-item *ngIf="ogcFilterCollapse && ogcFilterableOptions.isOgcFilterable" igoListItem
-  [ogcFiltersHeaderShown]="false"
-  [datasource]="layer.dataSource"></igo-ogc-filterable-item>
-</div>
diff --git a/src/locale/en.json b/src/locale/en.json
index 051f56b28..324683842 100644
--- a/src/locale/en.json
+++ b/src/locale/en.json
@@ -117,7 +117,7 @@
 		  "addFilter": "Add an empty filter to the current list",
 		  "removeFilter": "Remove the current filter from the filters's list",
 		  "toggleFilterState": "Enable/disable the current filter",
-		  "refreshFilters": "Update this datasource with the active filter(s)",
+		  "refreshFilters": "Update this datasource with the active filter(s). To enable this button, the layer must be visible (or in the defined scale ranges) or you must modify the current filter.",
 		  "layerFiltered": "This layer is currently filtered",
 		  "layerFilterable": "This layer is filterable"
 		},
diff --git a/src/locale/fr.json b/src/locale/fr.json
index 8af265928..04e3ef43e 100644
--- a/src/locale/fr.json
+++ b/src/locale/fr.json
@@ -117,7 +117,7 @@
 		  "addFilter": "Ajouter un filtre vidre à la liste courante",
 		  "removeFilter": "Supprimer le présent filtre à la liste des filtres",
 		  "toggleFilterState": "Activer/désactiver le présent filtre",
-		  "refreshFilters": "Mettre à jour la source de donnée avec les filtres actifs de la liste",
+		  "refreshFilters": "Mettre à jour la source de donnée avec les filtres actifs de la liste. Pour activer ce boutton, la couche doit etre visible (et dans les échelles permises) ou veillez modifier le présent filtre.",
 		  "layerFiltered": "Cette couche d'information est présentement filtrée.",
 		  "layerFilterable": "Cette couche d'information est filtrable"
 		},