Merge branch 'master' into simpleFilters2

angular.json

@@ -30,8 +30,7 @@
               "src/assets",
               "src/config",
               "src/contexts",
-              "src/locale",
-              "src/particular/locale",
+              "src/locale"
               {
                 "glob": "**/*",
                 "input": "./node_modules/@igo2/common/assets/",
@@ -253,6 +252,7 @@
     "cache": {
       "enabled": false,
       "environment": "all"
-    }
+    },
+    "analytics": false
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "igo2-quebec",
-  "version": "1.0.2-beta",
+  "version": "1.1.0-beta",
   "description": "Infrastructure géomatique ouverte - Québec.ca",
   "author": "Communauté IGO",
   "repository": {

src/app/app.component.scss

@@ -93,12 +93,10 @@ $footer-height: 29px;
 
 }
 
-//* Spinner *//
-
 igo-spinner {
   position: absolute;
-  top: calc(#{$header-height-mobile} + 4px) !important;
-  right: 4px;
+  top: 50% !important;
+  right: 50% ;
   z-index: 100;
 }
 

src/app/app.module.ts

@@ -23,7 +23,15 @@ import {
   provideILayerSearchSource,
   provideOptionsApi,
   provideStyleListOptions,
-  provideWorkspaceSearchSource
+  provideWorkspaceSearchSource,
+  SearchService,
+  provideOsrmDirectionsSource,
+  provideNominatimSearchSource,
+  CoordinatesSearchResultFormatter,
+  provideDefaultCoordinatesSearchResultFormatter,
+  provideDefaultIChercheSearchResultFormatter,
+  provideSearchSourceService,
+  IChercheSearchSource
 } from '@igo2/geo';
 
 
@@ -86,13 +94,24 @@ export const defaultTooltipOptions: MatTooltipDefaultOptions = {
       // path: './assets/config/config.json'
       path: './config/config.json'
     }),
-    RouteService,
+    provideCoordinatesReverseSearchSource(),
     provideIChercheSearchSource(),
-    provideWorkspaceSearchSource(),
+    provideNominatimSearchSource(),
     provideIChercheReverseSearchSource(),
-    provideCoordinatesReverseSearchSource(),
     provideILayerSearchSource(),
+    provideOsrmDirectionsSource(),
     provideOptionsApi(),
+    CoordinatesSearchResultFormatter,
+    provideDefaultCoordinatesSearchResultFormatter(),
+    provideDefaultIChercheSearchResultFormatter(),
+    provideSearchSourceService(),
+    SearchService,
+    IChercheSearchSource,
+    provideStyleListOptions({
+      path: './assets/list-style.json'
+    }),
+    RouteService,
+    provideWorkspaceSearchSource(),
     {
       provide: APP_INITIALIZER,
       useFactory: appInitializerFactory,

src/app/pages/header/header.component.scss

@@ -67,7 +67,7 @@ display: flex;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 height: 100%;
-width: 98%;
+width: calc(100% - 32px);
 align-content: center;
 margin: auto;
 }

src/app/pages/portal/legend-button/legend-button.component.html

@@ -1 +1,9 @@
-<button mat-raised-button qcca-buttons color="basic" mat-button class="igo-legend-button" (click)="toggleDialog()">Légende</button>
+<button
+    id="legend-button"
+    mat-raised-button
+    (click)="toggleLegendButton()"
+    [matTooltip]="legendButtonTooltip"
+    [matTooltipDisabled]="tooltipDisabled"
+    >
+    {{ 'legend.button' | translate }}
+</button>

src/app/pages/portal/legend-button/legend-button.component.scss

@@ -1,127 +1,15 @@
-@import '../portal.variables.scss';
-
- // button
-
-app-legend-button, ::ng-deep .mat-raised-button {
-    font-size: 0.9rem !important;
-    font-weight: 500 !important;
-    margin: 0;
-    min-width: 8px;
-    border: 0px;
-    border-radius: 0 !important;
-}
-
-::ng-deep .qcca-theme app-legend-button button, ::ng-deep .qcca-theme .mat-raised-button {
-  color: #095797 !important;
-  border-color: #095797 !important;
-}
-
-// DIALOG
-
-// FLEX
-
-::ng-deep #legend-button-dialog-container {
-  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%;
-
-  igo-layer-legend-list {
-    max-height: inherit;
-    .layer-legend-list-container {
-      overflow-y: auto;
-      height: inherit;
-      max-height: inherit;
-  }
-  }
-
-  igo-layer-legend-item {
-    flex-wrap: wrap;
-    width: min-content;
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 16px;
-  }
-
-  igo-layer-legend-item:last-child {
-    margin-bottom: 0;
-  }
-
-  .igo-layer-legend-container {
-    padding-left: 0 !important;
-    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
-  }
-
-} 
-
-::ng-deep app-legend-button-dialog {
-
-  max-height: calc(100% - 24px) !important;
-  height: inherit;
-
-  .mat-list-base .mat-list-item .mat-list-item-content {
-    padding: 0 !important;
-  }
-
-  // TITLES
-
-  .mat-dialog-title {
-    margin: 0;
-    display: block;
-  }
-
-  .mat-dialog-title:after {
-    content: "";
-    display: block;
-    width: 2.8rem;
-    border-bottom: 4px solid #f09686;
-    margin-bottom: 0.8rem;
-  }
-
-  .mat-list-item:after {
-    content: "";
-    display: block;
-    width: 1.8rem;
-    border-bottom: 3px solid #DAE6F0;
-    margin-bottom: 0.4rem;
-    padding-top: 2px;
-  }
-
-  .igo-layer-list-item {
-    height: fit-content !important;
-  }
-}
-
-// CLOSE BUTTON
-
-::ng-deep app-legend-button-dialog {
-  .mat-icon, mat-button-wrapper, .mat-icon-button .mat-icon, .mat-icon-button {
-    line-height: 26px;
-    height: 24px;
-    width: 24px;
-  }
-  .mat-icon svg {
-    height: 20px;
-    width: 20px;
-  }
-  div.mat-dialog-content.legend > img {
-    max-height: 100%;
-    max-width: 100%;
-  }
-  div.mat-dialog-actions {
-    float: right;
-    padding: 0;
-    min-height: auto;
-  }
-}
+ // Legend button
+
+ #legend-button, ::ng-deep .mat-raised-button {
+  font-size: 0.9rem !important;
+  font-weight: 500 !important;
+  margin: 0;
+  min-width: 8px;
+  border: 0px;
+  border-radius: 0 !important;
+}
+
+::ng-deep .qcca-theme #legend-button { // if Qc desing theme is applied
+  color: #095797 !important;
+  border-color: #095797 !important;
+}

src/app/pages/portal/legend-button/legend-button.component.ts

@@ -1,60 +1,44 @@
-import { Component, OnInit } from '@angular/core';
-import { MatDialog, MatDialogState } from '@angular/material/dialog';
-import { IgoMap, Layer } from '@igo2/geo';
-import { MapState } from '@igo2/integration';
-import { Observable } from 'rxjs';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { LanguageService } from '@igo2/core';
+import { LegendDialogComponent } from '../legend-dialog/legend-dialog.component';
 
 @Component({
   selector: 'app-legend-button',
   templateUrl: './legend-button.component.html',
   styleUrls: ['./legend-button.component.scss']
 })
-
 export class LegendButtonComponent {
 
   public dialogRef = null;
 
-  constructor(public dialog: MatDialog) {}
+  public legendButtonTooltip = this.languageService.translate.instant('legend.open');
+
+  @Output() toggleLegend = new EventEmitter<boolean>();
+
+  @Input() tooltipDisabled: boolean;
+
+  @Input() legendInPanel: boolean;
+
+  @Input() mobile: boolean;
 
-  toggleDialog() {
-    const dialogOpened = this.dialog.getDialogById('legend-button-dialog-container');
+  constructor(public dialog: MatDialog, protected languageService: LanguageService) { }
+
+  toggleLegendButton(): void {
+    if (!this.legendInPanel && !this.mobile){
+      const dialogOpened = this.dialog.getDialogById('legend-dialog-container');
       if (!dialogOpened) {
-        this.dialogRef = this.dialog.open(LegendButtonDialogComponent, {
-          id: 'legend-button-dialog-container',
+        this.legendButtonTooltip = this.languageService.translate.instant('legend.close');
+        this.dialogRef = this.dialog.open(LegendDialogComponent, {
+          id: 'legend-dialog-container',
           hasBackdrop: false,
           closeOnNavigation: true
         });
       } else {
+        this.legendButtonTooltip = this.languageService.translate.instant('legend.open');
         this.dialogRef.close();
       }
-  }
-}
-
-@Component({
-  selector: 'app-legend-button-dialog',
-  templateUrl: 'legend-button-dialog.component.html'
-})
-export class LegendButtonDialogComponent implements OnInit {
-
-  public getState: MatDialogState;
-
-  get map(): IgoMap {
-    return this.mapState.map;
-  }
-
-  get layers$(): Observable<Layer[]> {
-    return this.map.layers$;
-  }
-
-  public mapLayersShownInLegend: Layer[];
-
-  constructor(
-    private mapState: MapState
-  ) {}
-
-  ngOnInit() {
-    this.mapLayersShownInLegend = this.map.layers.filter(layer => (
-      layer.showInLayerList !== false
-    ));
+    }
+      this.toggleLegend.emit();
   }
 }

src/app/pages/portal/legend-button/legend-button.module.ts

@@ -1,34 +1,26 @@
-import { LegendButtonComponent, LegendButtonDialogComponent } from './legend-button.component';
+import { LegendButtonComponent } from './legend-button.component';
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LegendDialogModule } from '../legend-dialog/legend-dialog.module';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { IgoMapModule, IgoLayerModule } from '@igo2/geo';
-import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { IgoLanguageModule } from '@igo2/core';
+import { MatDialogModule } from '@angular/material/dialog';
 
 @NgModule({
-  declarations: [LegendButtonComponent, LegendButtonDialogComponent],
+  declarations: [LegendButtonComponent],
   imports: [
+    CommonModule,
     MatIconModule,
+    MatButtonModule,
+    IgoMapModule, IgoLayerModule,
+    MatTooltipModule,
+    IgoLanguageModule,
     MatDialogModule,
-    IgoLayerModule,
-    IgoMapModule,
-    MatButtonModule
+    LegendDialogModule
   ],
-  providers:
-  [{
-    provide: 'app-legend-button-dialog',
-    useValue: LegendButtonDialogComponent,
-},
-      {provide:MatDialogRef , useValue:{} },
-
-      { provide: MAT_DIALOG_DATA, useValue: {} }
-
-],
-  exports: [
-    LegendButtonComponent,
-    LegendButtonDialogComponent,
-    MatIconModule
-  ],
-  bootstrap: [LegendButtonComponent],
+  exports: [LegendButtonComponent]
 })
 export class LegendButtonModule { }

src/app/pages/portal/legend-button/legend-button-dialog.component.html → src/app/pages/portal/legend-dialog/legend-dialog.component.html

@@ -1,10 +1,10 @@
 <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>Légende</h4>
+<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>