style(legend): Ajustements de style (#40)

* legend style adjustments * css adjustments to legend if config change * cleanup + added html legend * legend html * fixed width of layer legend * fix replaced buggy layer
infra-geo-ouverte · Sep 25, 2023 · 5aa9d58 · 5aa9d58
1 parent a00538b
commit 5aa9d58
Show file tree

Hide file tree

Showing 12 changed files with 54 additions and 54 deletions.
diff --git a/src/app/pages/menu/menu-pages/map/map.component.scss b/src/app/pages/menu/menu-pages/map/map.component.scss
@@ -9,11 +9,7 @@
 
 ::ng-deep .portal-hasHeader-hasMenu {
   height: $portal-height-hasMenu-hasHeader-mobile !important;
-}
 
-::ng-deep #legend-button-dialog-container {
-  top: calc( #{$header-height-mobile} + #{$menu-height-mobile} + 4px)!important; 
-  max-height: calc(100% - #{$header-height-mobile} - #{$menu-height-mobile} - #{$footer-height} - 100px)!important;
 }
 
 @media (min-width: 768px){
@@ -26,8 +22,9 @@
     height: $portal-height-hasMenu-hasHeader !important;
   }
 
-  ::ng-deep #legend-button-dialog-container {
-    top: calc( #{$header-height} + #{$menu-height} + 4px)!important; 
-    max-height: calc(100% - #{$header-height} - #{$menu-height} - #{$footer-height} - 180px)!important;
+  ::ng-deep #legendDialog {
+    top: $top-legend-dialog-hasMenu!important; // no header: $top-legend-dialog-hasMenu
+    max-height: calc($portal-height-hasFooter-hasMenu - $map-buttons-height)!important; // see portal variables $map-buttons-height-xxxx - $map-buttons-height
   }
+
 }
diff --git a/src/app/pages/menu/menu-pages/map/map.component.ts b/src/app/pages/menu/menu-pages/map/map.component.ts
@@ -7,7 +7,7 @@ import { ConfigService } from '@igo2/core';
   styleUrls: ['./map.component.scss']
 })
 export class MapComponent {
-  public hasHeader = true;
+  public hasHeader: boolean;
 
   constructor(private configService: ConfigService) {
 

diff --git a/src/app/pages/portal/legend-button/legend-button.component.ts b/src/app/pages/portal/legend-button/legend-button.component.ts
@@ -26,11 +26,11 @@ export class LegendButtonComponent {
 
   toggleLegendButton(): void {
     if (!this.legendInPanel && !this.mobile){
-      const dialogOpened = this.dialog.getDialogById('legend-dialog-container');
+      const dialogOpened = this.dialog.getDialogById('legendDialog');
       if (!dialogOpened) {
         this.legendButtonTooltip = this.languageService.translate.instant('legend.close');
         this.dialogRef = this.dialog.open(LegendDialogComponent, {
-          id: 'legend-dialog-container',
+          id: 'legendDialog',
           hasBackdrop: false,
           closeOnNavigation: true
         });

diff --git a/src/app/pages/portal/legend-dialog/legend-dialog.component.html b/src/app/pages/portal/legend-dialog/legend-dialog.component.html
@@ -1,10 +1,14 @@
-<div mat-dialog-actions><button mat-button mat-icon-button mat-dialog-close class="close"><mat-icon svgIcon = "close"></mat-icon></button></div>
-<h4 mat-dialog-title>{{"legend.title" | translate}}</h4>
+<div #legendDialog >
+  <div mat-dialog-actions>
+    <button mat-button mat-icon-button mat-dialog-close class="close"><mat-icon svgIcon = "close"></mat-icon></button>
+  </div>
+  <h4 mat-dialog-title>{{"legend.title" | translate}}</h4>
 
-<igo-layer-legend-list
-  [layers]="mapLayersShownInLegend"
-  [excludeBaseLayers]="true"
-  [allowShowAllLegends]="false"
-  [updateLegendOnResolutionChange]="true"
-  [showAllLegendsValue]="false">
-</igo-layer-legend-list>
+  <igo-layer-legend-list
+    [layers]="mapLayersShownInLegend"
+    [excludeBaseLayers]="true"
+    [allowShowAllLegends]="false"
+    [updateLegendOnResolutionChange]="true"
+    [showAllLegendsValue]="false">
+  </igo-layer-legend-list>
+</div>
diff --git a/src/app/pages/portal/legend-dialog/legend-dialog.component.scss b/src/app/pages/portal/legend-dialog/legend-dialog.component.scss
@@ -1,22 +1,23 @@
 @import '../portal.variables.scss';
 
+
 // FLEX
 
-::ng-deep #legend-dialog-container {
+
+::ng-deep #legendDialog {
   width: fit-content !important;
   z-index: 10;
   position: fixed;
   right: 0.5%;
   max-width: 99% !important;
   padding: 16px !important;
-  max-height: calc(100% - #{$header-height-mobile} - #{$footer-height} - 100px) !important;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   height: 100%;
   border-radius: 0;
   height: fit-content;
-
+  
   igo-layer-legend-list {
     max-height: inherit;
     .layer-legend-list-container {
@@ -28,7 +29,7 @@
 
   igo-layer-legend-item {
     flex-wrap: wrap;
-    width: min-content;
+    width: max-content;
     display: flex;
     flex-direction: column;
     margin-bottom: 16px;
@@ -43,16 +44,10 @@
     width: max-content !important;
   }
 
-  @media (min-width: 768px){
-    max-height: calc(100% - #{$header-height} - #{$footer-height} - 180px) !important; //TODO : Inject the dialog in the portal then add config hasHeader, hasMenu and hasFooter
-    height: fit-content;
-  }
-
-} 
+}
 
 ::ng-deep app-legend-dialog {
-
-  max-height: calc(100% - 24px) !important;
+  overflow-y: auto;
   height: inherit;
 
   .mat-list-base .mat-list-item .mat-list-item-content {

diff --git a/src/app/pages/portal/legend-dialog/legend-dialog.component.ts b/src/app/pages/portal/legend-dialog/legend-dialog.component.ts
@@ -32,4 +32,5 @@ export class LegendDialogComponent implements OnInit {
       layer.showInLayerList !== false
     ));
   }
+
 }
diff --git a/src/app/pages/portal/portal.component.html b/src/app/pages/portal/portal.component.html
@@ -72,7 +72,7 @@
           [map]="map"
           [useStaticIcon]="getBaseLayersUseStaticIcon()">
         </igo-baselayers-switcher>
-
+        
         <div id="map-buttons"
         [ngClass]="mobile? ['map-buttons-mobile'] : ['map-buttons']">
           <igo-geolocate-button *ngIf="hasGeolocateButton" [map]="map" color="primary"></igo-geolocate-button>

diff --git a/src/app/pages/portal/portal.component.scss b/src/app/pages/portal/portal.component.scss
@@ -383,16 +383,12 @@ igo-zoom-button {
   height: calc( 100% - $footer-height)!important;
 }
 
-::ng-deep #legend-dialog-container, app-legend-dialog {
-  top: calc($header-height-mobile + 4px); 
-  max-height: calc(100% - $header-height-mobile - $footer-height - 100px);
-}
-
 @media (min-width: 768px){
 
-  ::ng-deep #legend-dialog-container, app-legend-dialog {
-    top: calc($header-height + 4px); 
-    max-height: calc(100% - $header-height - $footer-height - 180px);
+  ::ng-deep #legendDialog {
+    top: $top-legend-dialog-hasHeader; // see portal variables $top-legend-dialog
+    max-height: calc($portal-height-hasFooter-hasHeader - $map-buttons-height); // see portal variables to replace $map-buttons-height-xxxx
   }
+
 }
 
diff --git a/src/app/pages/portal/portal.component.ts b/src/app/pages/portal/portal.component.ts
@@ -165,7 +165,7 @@ export class PortalComponent implements OnInit, AfterContentInit, OnDestroy {
   public homeZoom: number;
   @ViewChild('searchbar') searchBar: SearchBarComponent;
 
-  public dialogOpened = this.dialog.getDialogById('legend-button-dialog-container');
+  public dialogOpened = this.dialog.getDialogById('legendDialog');
 
   get map(): IgoMap {
     return this.mapState.map;

diff --git a/src/app/pages/portal/portal.variables.scss b/src/app/pages/portal/portal.variables.scss
@@ -10,6 +10,7 @@ $header-height: 72px;
 $header-height-mobile: 72px;
 $footer-height: 29px;
 $search-bar-height: 60px;
+$map-buttons-height: 188px;
 
 $portal-height-hasHeader-mobile: calc( 100% - #{$header-height-mobile});
 $portal-height-hasFooter-hasHeader-mobile: calc( 100% - #{$footer-height} - #{$header-height-mobile} );
@@ -19,10 +20,16 @@ $portal-height-hasMenu-mobile: calc( 100% - #{$menu-height-mobile});
 $portal-height-hasFooter: calc( 100% - #{$footer-height} );
 $portal-height-hasHeader: calc( 100% - #{$header-height});
 $portal-height-hasMenu: calc( 100% - #{$menu-height});
+$portal-height-hasFooter-hasMenu: calc( 100% - #{$menu-height} - #{$footer-height});
 $portal-height-hasMenu-hasHeader: calc( 100% - #{$header-height} - #{$menu-height} );
 $portal-height-hasFooter-hasHeader: calc( 100% - #{$footer-height} - #{$header-height} );
 $portal-height-hasFooter-hasHeader-hasMenu: calc( 100% - #{$footer-height} - #{$header-height} - #{$menu-height} );
 
+$top-legend-dialog: 4px;
+$top-legend-dialog-hasHeader: calc($header-height + 4px);
+$top-legend-dialog-hasHeader-hasMenu: calc( $header-height + $menu-height + 4px);
+$top-legend-dialog-hasMenu: calc( $menu-height + 4px);
+
 $app-sidenav-width-mobile: calc(100% - #{$app-mobile-min-space-right} - #{$igo-margin});
 $search-bar-left: $igo-icon-size;
 $portal-left: 16px;

diff --git a/src/config/config.json b/src/config/config.json
@@ -9,8 +9,8 @@
   "hasMenu": false,
   "hasFooter": true,
   "hasLegendButton": true,
-  "legendInPanel": true,
-  "showRotationButtonIfNoRotation": true,
+  "legendInPanel": false,
+  "showRotationButtonIfNoRotation": false,
   "hasGeolocateButton": true,
   "geolocate": {
     "basic": true,

diff --git a/src/contexts/_default.json b/src/contexts/_default.json
@@ -3,39 +3,39 @@
   "base": "_base",
   "layers": [
     {
-      "id": "flor",
-      "title": "Habitats floristiques",
+      "id": "mtq",
+      "title": "Établissements MTQ",
       "showInLayerList": true,
       "visible": true,
       "baseLayer": false,
       "sourceOptions": {
         "type": "wms",
-        "url": "https://geoegl.msp.gouv.qc.ca/apis/wss/environnement.fcgi",
+        "url": "https://ws.mapserver.transports.gouv.qc.ca/swtq",
         "params": {
-          "layers": "HABITATS_FLORISTIQUES_V",
+          "layers": "etablissement_mtq",
           "version": "1.3.0"
         },
         "queryable": true,
         "queryLayerFeatures": true,
-        "queryTitle": "Habitats floristiques"
+        "queryTitle": "Établissements MTQ"
       }
     },
     {
-      "id": "mtq",
-      "title": "Établissements MTQ",
+      "id": "ferr",
+      "title": "Réseau ferroviaire (MTQ-SWTQ)",
       "showInLayerList": true,
       "visible": true,
       "baseLayer": false,
       "sourceOptions": {
         "type": "wms",
-        "url": "https://ws.mapserver.transports.gouv.qc.ca/swtq",
+        "url": "https://ws.mapserver.transports.gouv.qc.ca/swtq?",
         "params": {
-          "layers": "etablissement_mtq",
+          "layers": "reseau_chfer_qc",
           "version": "1.3.0"
         },
-        "queryable": true,
+        "queryable": false,
         "queryLayerFeatures": true,
-        "queryTitle": "Établissements MTQ"
+        "queryTitle": "Réseau ferroviaire (MTQ-SWTQ)"
       }
     }
   ]
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,4 +32,5 @@ export class LegendDialogComponent implements OnInit { @@
           layer.showInLayerList !== false
         ));
       }
     }