feat(toolbox): the color of the toolbox can be chosen

infra-geo-ouverte · Oct 30, 2019 · 5ad989f · 5ad989f
1 parent 105c833
commit 5ad989f
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 9 deletions.
diff --git a/packages/common/src/lib/tool/shared/index.ts b/packages/common/src/lib/tool/shared/index.ts
@@ -1,4 +1,5 @@
 export * from './tool.interface';
 export * from './tool.service';
 export * from './tool-component';
+export * from './toolbox.enums';
 export * from './toolbox';
diff --git a/packages/common/src/lib/tool/shared/toolbox.enums.ts b/packages/common/src/lib/tool/shared/toolbox.enums.ts
@@ -0,0 +1,5 @@
+export enum ToolboxColor {
+  White = 'white',
+  Grey = 'grey',
+  Primary = 'primary'
+}
diff --git a/packages/common/src/lib/tool/toolbox/toolbox.component.scss b/packages/common/src/lib/tool/toolbox/toolbox.component.scss
@@ -23,7 +23,7 @@
 }
 
 .igo-tool-container-with-toolbar {
-  left: 51px;
+  left: 50px;
 }
 
 igo-actionbar {

diff --git a/packages/common/src/lib/tool/toolbox/toolbox.component.ts b/packages/common/src/lib/tool/toolbox/toolbox.component.ts
@@ -3,6 +3,7 @@ import {
   Input,
   OnDestroy,
   OnInit,
+  HostBinding,
   ChangeDetectionStrategy
 } from '@angular/core';
 
@@ -11,6 +12,7 @@ import { map } from 'rxjs/operators';
 
 import { Action, ActionStore } from '../../action';
 import { Tool } from '../shared/tool.interface';
+import { ToolboxColor } from '../shared/toolbox.enums';
 import { Toolbox } from '../shared/toolbox';
 import { toolSlideInOut } from './toolbox.animation';
 
@@ -22,7 +24,6 @@ import { toolSlideInOut } from './toolbox.animation';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ToolboxComponent implements OnInit, OnDestroy {
-
   /**
    * Observable of the active tool
    */
@@ -82,6 +83,27 @@ export class ToolboxComponent implements OnInit, OnDestroy {
    */
   @Input() animate: boolean = false;
 
+  /**
+   * Color of Toolbox
+   */
+  @Input() color: ToolboxColor = ToolboxColor.White;
+
+  /**
+   * @ignore
+   */
+  @HostBinding('class.color-grey')
+  get classColorGrey() {
+    return this.color === ToolboxColor.Grey;
+  }
+
+  /**
+   * @ignore
+   */
+  @HostBinding('class.color-primary')
+  get classColorPrimary() {
+    return this.color === ToolboxColor.Primary;
+  }
+
   /**
    * Initialize the toolbar and subscribe to the active tool
    * @internal
@@ -200,8 +222,11 @@ export class ToolboxComponent implements OnInit, OnDestroy {
               }
 
               let childrenToolActivated = false;
-              if (activeTool !== undefined && _tool.name === activeTool.parent) {
-               childrenToolActivated = true;
+              if (
+                activeTool !== undefined &&
+                _tool.name === activeTool.parent
+              ) {
+                childrenToolActivated = true;
               }
 
               return {

diff --git a/packages/common/src/lib/tool/toolbox/toolbox.theming.scss b/packages/common/src/lib/tool/toolbox/toolbox.theming.scss
@@ -1,13 +1,50 @@
 @mixin igo-toolbox-theming($theme) {
+  $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
 
 
-  igo-toolbox > igo-actionbar igo-actionbar-item mat-list-item.tool-activated {
-    background-color: mat-color($accent);
+  igo-toolbox > igo-actionbar mat-list.mat-list-base igo-actionbar-item mat-list-item {
+    &:hover {
+      background-color: mat-color($accent, lighter);
+    }
+
+    &.tool-activated,
+    &.children-tool-activated {
+      background-color: mat-color($accent);
+      cursor: default;
+      button {
+        cursor: default;
+      }
+    }
+  }
+
+
+  igo-toolbox.color-primary > igo-actionbar:not(.with-title) {
+    box-shadow: unset;
+    background-color: mat-color($primary)
   }
 
-  igo-toolbox > igo-actionbar igo-actionbar-item mat-list-item.children-tool-activated {
-    background-color: mat-color($accent);
+  igo-toolbox.color-grey > igo-actionbar:not(.with-title) {
+    box-shadow: unset;
+    background-color: #737475;
   }
-
+
+  igo-toolbox.color-primary,
+  igo-toolbox.color-grey {
+    & > igo-actionbar:not(.with-title) mat-list.mat-list-base {
+      .mat-list-item.mat-list-item-with-avatar {
+        color: white;
+        &:hover {
+          color: black;
+        }
+
+        &.tool-activated,
+        &.children-tool-activated {
+          background-color: white;
+          color: black;
+        }
+      }
+    }
+  }
+
 }