feat(badge-icon): manage color, disabled and invert colors

infra-geo-ouverte · Sep 9, 2020 · 96dada8 · 96dada8
1 parent e32f102
commit 96dada8
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 30 deletions.
diff --git a/packages/common/src/lib/badge-icon/badge-icon.directive.ts b/packages/common/src/lib/badge-icon/badge-icon.directive.ts
@@ -4,32 +4,43 @@ import { MatIconRegistry } from '@angular/material/icon';
 @Directive({
   selector: '[igoMatBadgeIcon]'
 })
-export class MatBadgeIconDirective implements OnInit {
+export class IgoBadgeIconDirective implements OnInit {
   @Input()
   set igoMatBadgeIcon(value: string) {
-    this.matIconRegistry.getNamedSvgIcon(value).subscribe(svgObj => {
+    this.matIconRegistry.getNamedSvgIcon(value).subscribe((svgObj) => {
       this.svg = svgObj;
-      if (this.badge) {
-        this.badge.innerHTML = '';
-        this.badge.appendChild(this.svg);
-      }
+      this.updateSvg();
     });
   }
   private svg: SVGElement;
 
   @Input()
   set matBadgeHidden(value: boolean) {
     this.hidden = value;
-    if (this.badge) {
-      this.badge.style.display = this.hidden ? 'none' : 'flex';
-    }
+    this.updateHidden();
   }
   private hidden = false;
 
+  @Input()
+  set matBadgeDisabled(value: boolean) {
+    this.disabled = value;
+    this.updateDisabled();
+  }
+  private disabled = false;
+
+  @Input()
+  set igoMatBadgeInverseColor(value: boolean) {
+    this.inverseColor = value;
+    this.updateInverseColor();
+  }
+  private inverseColor = false;
+
   get badge() {
     return this.el.nativeElement.querySelector('.mat-badge-content');
   }
 
+  private originalColor: string;
+
   constructor(
     private el: ElementRef,
     private matIconRegistry: MatIconRegistry
@@ -38,10 +49,54 @@ export class MatBadgeIconDirective implements OnInit {
   ngOnInit() {
     this.badge.style.alignItems = 'center';
     this.badge.style.justifyContent = 'center';
-    this.badge.style.background = 'none';
 
-    this.badge.style.display = this.hidden ? 'none' : 'flex';
+    this.updateHidden();
+    this.updateInverseColor();
+    this.updateSvg();
+  }
+
+  private updateSvg() {
+    if (!this.badge) {
+      return;
+    }
     this.badge.innerHTML = '';
-    this.badge.appendChild(this.svg);
+    if (this.svg) {
+      this.badge.appendChild(this.svg);
+    }
+  }
+  private updateInverseColor() {
+    if (!this.badge) {
+      return;
+    }
+    if (this.inverseColor) {
+      this.badge.style.color = window
+        .getComputedStyle(this.badge, null)
+        .getPropertyValue('background-color');
+      this.badge.style.background = 'none';
+    } else {
+      this.badge.style.color = '';
+      this.badge.style.background = '';
+    }
+    this.originalColor = this.badge.style.color;
+    this.updateDisabled();
+  }
+
+  private updateHidden() {
+    if (!this.badge) {
+      return;
+    }
+    this.badge.style.display = this.hidden ? 'none' : 'flex';
+  }
+
+  private updateDisabled() {
+    if (!this.badge || !this.inverseColor) {
+      return;
+    }
+    if (this.disabled) {
+      this.originalColor = this.badge.style.color;
+      this.badge.style.color = '#b9b9b9';
+    } else {
+      this.badge.style.color = this.originalColor;
+    }
   }
 }
diff --git a/packages/common/src/lib/badge-icon/badge-icon.module.ts b/packages/common/src/lib/badge-icon/badge-icon.module.ts
@@ -1,18 +1,18 @@
 import { NgModule, ModuleWithProviders } from '@angular/core';
-import { MatBadgeIconDirective } from './badge-icon.directive';
+import { IgoBadgeIconDirective } from './badge-icon.directive';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatIconModule } from '@angular/material/icon';
 
 @NgModule({
   imports: [MatBadgeModule, MatIconModule],
-  declarations: [MatBadgeIconDirective],
-  exports: [MatBadgeIconDirective]
+  declarations: [IgoBadgeIconDirective],
+  exports: [MatBadgeModule, IgoBadgeIconDirective]
 })
 export class IgoMatBadgeIconModule {
   static forRoot(): ModuleWithProviders<IgoMatBadgeIconModule> {
     return {
-        ngModule: IgoMatBadgeIconModule,
-        providers: []
+      ngModule: IgoMatBadgeIconModule,
+      providers: []
     };
-}
+  }
 }
diff --git a/packages/geo/src/lib/catalog/catalog-browser/catalog-browser-layer.component.html b/packages/geo/src/lib/catalog/catalog-browser/catalog-browser-layer.component.html
@@ -15,8 +15,9 @@ <h4 mat-line matTooltipShowDelay="500" [ngClass]="(catalogAllowLegend)?'igo-cata
     <mat-icon
        matBadge
        igoMatBadgeIcon="eye-off"
+       igoMatBadgeInverseColor="true"
        [matBadgeHidden]="isInResolutionsRange()"
-       matBadgeColor="accent"
+       matBadgeDisabled="true"
        matBadgeSize="small"
        matBadgePosition="after"
        [svgIcon]="(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'">

diff --git a/packages/geo/src/lib/catalog/catalog-browser/catalog-browser-layer.component.scss b/packages/geo/src/lib/catalog/catalog-browser/catalog-browser-layer.component.scss
@@ -1,9 +1,5 @@
 @import '../../../../../core/src/style/partial/core.variables';
 
-mat-icon[matBadge] ::ng-deep .mat-badge-content {
-  color: rgba(0, 0, 0, 0.38);
-}
-
 .igo-cataloglayer-title {
   cursor: pointer;
 }

diff --git a/packages/geo/src/lib/search/search-results/search-results-add-button.component.html b/packages/geo/src/lib/search/search-results/search-results-add-button.component.html
@@ -7,13 +7,14 @@
 [matTooltip]="(tooltip$ | async) | translate"
 [color]="(isPreview$ | async) ? '' : added ? 'warn' : ''"
 (click)="onToggleClick($event)">
-<mat-icon 
+<mat-icon
   matBadge
   igoMatBadgeIcon="eye-off"
+  igoMatBadgeInverseColor="true"
   [matBadgeHidden]="(inRange$ | async)"
-  matBadgeColor="primary" 
-  matBadgeSize="small" 
+  matBadgeDisabled="true"
+  matBadgeSize="small"
   matBadgePosition="after"
   [svgIcon]="(isPreview$ | async) ? 'plus' : added ? 'delete' : 'plus'">
 </mat-icon>
-</button>
+</button>
diff --git a/packages/geo/src/lib/search/search-results/search-results-add-button.component.scss b/packages/geo/src/lib/search/search-results/search-results-add-button.component.scss
@@ -1,3 +0,0 @@
-mat-icon[matBadge] ::ng-deep .mat-badge-content {
-  color: rgba(0, 0, 0, 0.38);
-}