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)
infra-geo-ouverte · May 9, 2018 · b4fb16f · b4fb16f
1 parent eb80e46
commit b4fb16f
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"
 		},