fix(icon): revert some icon change

infra-geo-ouverte · Apr 11, 2024 · 04fd431 · 04fd431
1 parent cfafa5e
commit 04fd431
Show file tree

Hide file tree

Showing 12 changed files with 99 additions and 27 deletions.
diff --git a/packages/common/src/lib/icons/icon/icon.component.ts b/packages/common/src/lib/icons/icon/icon.component.ts
@@ -1,8 +1,8 @@
 import { Component, Input } from '@angular/core';
-import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
-import { DomSanitizer } from '@angular/platform-browser';
+import { MatIconModule } from '@angular/material/icon';
 
 import { IconSvg } from '../shared';
+import { IconService } from '../shared/icon.service';
 
 @Component({
   selector: 'igo-icon',
@@ -24,16 +24,10 @@ export class IgoIconComponent {
   }
   private _icon: string | IconSvg;
 
-  constructor(
-    private iconRegistry: MatIconRegistry,
-    private sanitizer: DomSanitizer
-  ) {}
+  constructor(private iconService: IconService) {}
 
   registerSvg(icon: IconSvg): void {
-    this.iconRegistry.addSvgIconLiteral(
-      icon.name,
-      this.sanitizer.bypassSecurityTrustHtml(icon.svg)
-    );
+    this.iconService.registerSvg(icon);
   }
 
   isSvg(icon: string | IconSvg): icon is IconSvg {

diff --git a/packages/common/src/lib/icons/shared/icon.service.spec.ts b/packages/common/src/lib/icons/shared/icon.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { IconService } from './icon.service';
+
+describe('IconService', () => {
+  let service: IconService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(IconService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/packages/common/src/lib/icons/shared/icon.service.ts b/packages/common/src/lib/icons/shared/icon.service.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { MatIconRegistry } from '@angular/material/icon';
+import { DomSanitizer } from '@angular/platform-browser';
+
+import { IconSvg } from './icon.interface';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class IconService {
+  constructor(
+    private iconRegistry: MatIconRegistry,
+    private sanitizer: DomSanitizer
+  ) {}
+
+  registerSvg(icon: IconSvg): void {
+    this.iconRegistry.addSvgIconLiteral(
+      icon.name,
+      this.sanitizer.bypassSecurityTrustHtml(icon.svg)
+    );
+  }
+}
diff --git a/packages/common/src/lib/icons/shared/icons.ts b/packages/common/src/lib/icons/shared/icons.ts
@@ -10,30 +10,41 @@ export const MAGNIFY_SCAN_ICON: IconSvg = {
 `
 };
 
-export const MICROSOFT_ICON = {
+export const MICROSOFT_ICON: IconSvg = {
   name: 'microsoft',
   svg: `
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>microsoft</title><path d="M2,3H11V12H2V3M11,22H2V13H11V22M21,3V12H12V3H21M21,22H12V13H21V22Z" /></svg>
 `
 };
 
-export const KEYBOARD_ESC_ICON = {
+export const KEYBOARD_ESC_ICON: IconSvg = {
   name: 'keyboard-esc',
   svg: `
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>keyboard-esc</title><path d="M1 7H7V9H3V11H7V13H3V15H7V17H1V7M11 7H15V9H11V11H13C14.11 11 15 11.9 15 13V15C15 16.11 14.11 17 13 17H9V15H13V13H11C9.9 13 9 12.11 9 11V9C9 7.9 9.9 7 11 7M19 7H21C22.11 7 23 7.9 23 9V10H21V9H19V15H21V14H23V15C23 16.11 22.11 17 21 17H19C17.9 17 17 16.11 17 15V9C17 7.9 17.9 7 19 7Z" /></svg>
 `
 };
 
-export const ENGINE_ICON = {
+export const ENGINE_ICON: IconSvg = {
   name: 'engine',
   svg: `
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>engine</title><path d="M7,4V6H10V8H7L5,10V13H3V10H1V18H3V15H5V18H8L10,20H18V16H20V19H23V9H20V12H18V8H12V6H15V4H7Z" /></svg>
 `
 };
 
-export const SELECTION_MARKER_ICON = {
+export const SELECTION_MARKER_ICON: IconSvg = {
   name: 'selection-marker',
   svg: `
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>selection-marker</title><path d="M2 4C2 2.89 2.9 2 4 2H7V4H4V7H2V4M22 4V7H20V4H17V2H20C21.1 2 22 2.89 22 4M2 20V17H4V20H7V22H4C2.9 22 2 21.11 2 20M10 2H14V4H10V2M10 20H14V22H10V20M2 10H4V14H2V10M18.5 13C20.4 13 22 14.6 22 16.5C22 19.1 18.5 23 18.5 23C18.5 23 15 19.1 15 16.5C15 14.6 16.6 13 18.5 13M18.5 17.8C19.2 17.8 19.8 17.2 19.7 16.6C19.7 16 19.1 15.4 18.5 15.4C17.9 15.4 17.3 15.9 17.3 16.6C17.3 17.2 17.8 17.8 18.5 17.8M20 10H22V12.34C21.42 11.84 20.74 11.45 20 11.23V10Z" /></svg>
 `
 };
+
+export const PRESENTATION_PLAY_ICON: IconSvg = {
+  name: 'presentation-play',
+  svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>presentation-play</title><path d="M2,3H10A2,2 0 0,1 12,1A2,2 0 0,1 14,3H22V5H21V16H15.25L17,22H15L13.25,16H10.75L9,22H7L8.75,16H3V5H2V3M5,5V14H19V5H5M11.85,11.85C11.76,11.94 11.64,12 11.5,12A0.5,0.5 0 0,1 11,11.5V7.5A0.5,0.5 0 0,1 11.5,7C11.64,7 11.76,7.06 11.85,7.15L13.25,8.54C13.57,8.86 13.89,9.18 13.89,9.5C13.89,9.82 13.57,10.14 13.25,10.46L11.85,11.85Z" /></svg>`
+};
+
+
+export const LAYER_PLUS_ICON: IconSvg = {
+  name: 'layers-plus',
+  svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>layers-plus</title><path d="M17,14H19V17H22V19H19V22H17V19H14V17H17V14M11,16L2,9L11,2L20,9L11,16M11,18.54L12,17.75V18C12,18.71 12.12,19.39 12.35,20L11,21.07L2,14.07L3.62,12.81L11,18.54Z" /></svg>`
+};
diff --git a/packages/common/src/lib/icons/shared/index.ts b/packages/common/src/lib/icons/shared/index.ts
@@ -1,2 +1,3 @@
 export * from './icons';
 export * from './icon.interface';
+export * from './icon.service';
diff --git a/packages/common/src/lib/interactive-tour/interactive-tour.component.html b/packages/common/src/lib/interactive-tour/interactive-tour.component.html
@@ -15,7 +15,7 @@
     "
     [disabled]="disabledTourButton"
   >
-    <mat-icon iconPositionEnd>help_center</mat-icon>
+    <igo-icon [icon]="presentationIcon" iconPositionEnd />
   </button>
 
   <ng-template #raisedButton>
@@ -31,14 +31,15 @@
       {{ 'igo.common.interactiveTour.buttonTitle' | translate }}
       {{ discoverTitleInLocale$ | async | translate }}
       <mat-icon
+        [svgIcon]="presentationIcon.name"
         iconPositionEnd
         [matTooltip]="
           disabledTourButton
             ? ('igo.common.interactiveTour.disaledTooltipTourToolButton'
               | translate)
             : ('igo.common.interactiveTour.tooltipTourToolButton' | translate)
         "
-        >help_center
+        >
       </mat-icon>
     </button>
   </ng-template>

diff --git a/packages/common/src/lib/interactive-tour/interactive-tour.component.ts b/packages/common/src/lib/interactive-tour/interactive-tour.component.ts
@@ -7,6 +7,11 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { Observable, of } from 'rxjs';
 
+import {
+  IconService,
+  IgoIconComponent,
+  PRESENTATION_PLAY_ICON
+} from '../icons';
 import { ToolService } from '../tool/shared/tool.service';
 import { InteractiveTourService } from './interactive-tour.service';
 
@@ -23,10 +28,13 @@ import { InteractiveTourService } from './interactive-tour.service';
     MatTooltipModule,
     MatIconModule,
     AsyncPipe,
-    TranslateModule
+    TranslateModule,
+    IgoIconComponent
   ]
 })
 export class InteractiveTourComponent {
+  presentationIcon = PRESENTATION_PLAY_ICON;
+
   /**
    * Toolbox that holds main tools
    */
@@ -110,8 +118,11 @@ export class InteractiveTourComponent {
 
   constructor(
     private interactiveTourService: InteractiveTourService,
-    private toolService: ToolService
-  ) {}
+    private toolService: ToolService,
+    private iconService: IconService
+  ) {
+    this.iconService.registerSvg(this.presentationIcon);
+  }
 
   startInteractiveTour() {
     const tour = this.getTourToStart();

diff --git a/packages/geo/src/lib/catalog/catalog-library/catalog-library.component.html b/packages/geo/src/lib/catalog/catalog-library/catalog-library.component.html
@@ -21,6 +21,6 @@
     (click)="addCatalogDialog()"
   >
     {{ 'igo.geo.catalog.library.addBtn' | translate }}
-    <mat-icon>library_add</mat-icon>
+    <mat-icon [svgIcon]="layerPlusIcon.name"></mat-icon>
   </button>
 </div>
diff --git a/packages/geo/src/lib/catalog/catalog-library/catalog-library.component.ts b/packages/geo/src/lib/catalog/catalog-library/catalog-library.component.ts
@@ -13,7 +13,13 @@ import { MatDialog } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
-import { EntityStore, ListComponent, ListItemDirective } from '@igo2/common';
+import {
+  EntityStore,
+  IconService,
+  LAYER_PLUS_ICON,
+  ListComponent,
+  ListItemDirective
+} from '@igo2/common';
 import { MessageService } from '@igo2/core/message';
 import { StorageService } from '@igo2/core/storage';
 import { ObjectUtils } from '@igo2/utils';
@@ -82,6 +88,9 @@ export class CatalogLibaryComponent implements OnInit, OnDestroy {
   }>();
 
   submitDisabled = true;
+
+  layerPlusIcon = LAYER_PLUS_ICON;
+
   private addingCatalog$$: Subscription;
 
   get addedCatalogs(): Catalog[] {
@@ -95,8 +104,11 @@ export class CatalogLibaryComponent implements OnInit, OnDestroy {
     private capabilitiesService: CapabilitiesService,
     private messageService: MessageService,
     private storageService: StorageService,
-    private dialog: MatDialog
-  ) {}
+    private dialog: MatDialog,
+    private iconService: IconService
+  ) {
+    this.iconService.registerSvg(this.layerPlusIcon);
+  }
 
   /**
    * @internal

diff --git a/packages/integration/src/lib/catalog/catalog-library-tool/catalog-library-tool.component.ts b/packages/integration/src/lib/catalog/catalog-library-tool/catalog-library-tool.component.ts
@@ -5,7 +5,7 @@ import {
   OnInit
 } from '@angular/core';
 
-import { ToolComponent } from '@igo2/common';
+import { LAYER_PLUS_ICON, ToolComponent } from '@igo2/common';
 import { EntityStore } from '@igo2/common';
 import { StorageService } from '@igo2/core/storage';
 import { Catalog, CatalogLibaryComponent, CatalogService } from '@igo2/geo';
@@ -21,7 +21,7 @@ import { CatalogState } from '../catalog.state';
 @ToolComponent({
   name: 'catalog',
   title: 'igo.integration.tools.catalog',
-  icon: 'library_add'
+  icon: LAYER_PLUS_ICON
 })
 @Component({
   selector: 'igo-catalog-library-tool',

diff --git a/...es/integration/src/lib/map/advanced-map-tool/advanced-swipe/advanced-swipe.component.html b/...es/integration/src/lib/map/advanced-map-tool/advanced-swipe/advanced-swipe.component.html
@@ -59,7 +59,7 @@
       </span>
     </mat-list-item>
     <mat-list-item>
-      <mat-icon matListItemIcon>library_add</mat-icon>
+      <igo-icon matListItemIcon [icon]="layerPlusIcon"></igo-icon>
       <span
         matListItemTitle
         class="catalog-tool mat-typography"

diff --git a/...ages/integration/src/lib/map/advanced-map-tool/advanced-swipe/advanced-swipe.component.ts b/...ages/integration/src/lib/map/advanced-map-tool/advanced-swipe/advanced-swipe.component.ts
@@ -22,6 +22,7 @@ import { TranslateModule } from '@ngx-translate/core';
 
 import { ToolState } from '../../../tool/tool.state';
 import { MapState } from '../../map.state';
+import { IgoIconComponent, LAYER_PLUS_ICON } from '@igo2/common';
 
 @Component({
   selector: 'igo-advanced-swipe',
@@ -40,7 +41,8 @@ import { MapState } from '../../map.state';
     MatSlideToggleModule,
     MatListModule,
     MatIconModule,
-    TranslateModule
+    TranslateModule,
+    IgoIconComponent
   ]
 })
 export class AdvancedSwipeComponent implements OnInit, OnDestroy {
@@ -52,6 +54,8 @@ export class AdvancedSwipeComponent implements OnInit, OnDestroy {
   public res: DetailedContext;
   public listForSwipe: Layer[];
 
+  layerPlusIcon = LAYER_PLUS_ICON;
+
   /**
    * Get an active map state
    */