infra-geo-ouverte · alecarn · Sep 25, 2023 · Jun 7, 2023 · Jun 7, 2023 · Jun 16, 2023
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 {
@@ -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/assets/legends/legend.css b/src/assets/legends/legend.css
@@ -0,0 +1,66 @@
+body {
+  margin: 0!important;
+}
+
+.legend-items {
+  flex-wrap: nowrap;
+  flex-direction: column;
+  width: 100%;
+  max-height: 100%;
+  display:flex;
+  align-content: flex-start;
+  align-items: flex-start;
+  align-self: flex-start;
+}
+
+.legend-items div {
+  font: 14px/1.3rem 'Open Sans', sans-serif;
+  width: max-content; /*auto: max-content;*/
+  margin-right: 16px;
+  line-height: 1.6em;
+  vertical-align: middle;
+}
+
+.legend-items img {
+  width: 16px;
+  vertical-align: middle;
+  padding: 0 5px 3px 0;
+}
+
+::ng-deep .iframe-legend-container {
+  width: 100%;
+  overflow: hidden;
+  height: 100%;
+}
+
+::ng-deep .iframe-legend-container iframe {
+  width: 100%;
+  overflow: hidden;
+  height: 100%;
+}
+
+::ng-deep .iframe-legend {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+::ng-deep .layer-legend-list-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+::ng-deep igo-layer-legend-list .mat-list-item {
+  font-size: 1rem;
+  height: 1.5rem!important;
+}
+
+::ng-deep igo-layer-legend-list .mat-list-item-content {
+  align-items: flex-start!important;
+}
diff --git a/src/assets/legends/legend/legende.html b/src/assets/legends/legend/legende.html
@@ -0,0 +1,11 @@
+<!-- Pour utiliser la légende HTML, dans le contexte, ajouter ceci dans la couche, au même niveau que "title":
+        "legendOptions": {
+            "html": "<div class='iframe-legend-container'><iframe class='iframe-legend embed-responsive' title='Légende' style='overflow:hidden;border:none;width:100%;height:176px;' loading='lazy'  scrolling='no' src='assets/legends/legende-stations.html'></iframe></div>"
+        },
+-->
+
+<link type="text/css" rel="stylesheet" href="../legend.css">
+<div class="legend-items">
+    <div><img src="classe1.svg">classe1</div>
+    <div><img src="classe2.svg">classe2</div>
+</div>
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/wiki b/src/wiki