feat(stark-ui): change color of global filter icon to indicate when t…

…he global filter is applied ISSUES CLOSED: #1303
NationalBankBelgium · Jun 4, 2019 · 69d0d05 · 69d0d05
1 parent 2801685
commit 69d0d05
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 6 deletions.
diff --git a/packages/stark-ui/src/modules/table/components/_table-theme.scss b/packages/stark-ui/src/modules/table/components/_table-theme.scss
@@ -1,7 +1,7 @@
 /* ============================================================================== */
-/*  S t a r k   A p p   T a b l e                                                  */
+/*  S t a r k   T a b l e                                                         */
 /* ============================================================================== */
-/* stark-ui: src/modules/app-menu/components/_table-theme.scss */
+/* stark-ui: src/modules/table/components/_table-theme.scss */
 
 .stark-table {
   tr {

diff --git a/packages/stark-ui/src/modules/table/components/_table.component.scss b/packages/stark-ui/src/modules/table/components/_table.component.scss
@@ -1,7 +1,7 @@
 /* ============================================================================== */
 /*  S t a r k   T a b l e                                                         */
 /* ============================================================================== */
-/* stark-ui: src/modules/table/components/table/_table.component.scss */
+/* stark-ui: src/modules/table/components/_table.component.scss */
 
 .stark-table {
   .header {
@@ -19,6 +19,13 @@
       display: flex;
       justify-content: flex-end;
 
+      .button-global-filter {
+        opacity: 0.2;
+        &.filter-enabled {
+          opacity: 1;
+        }
+      }
+
       stark-minimap {
         mat-icon {
           width: 18px;

diff --git a/packages/stark-ui/src/modules/table/components/table.component.html b/packages/stark-ui/src/modules/table/components/table.component.html
@@ -14,7 +14,12 @@
 	</button>
 
 	<ng-container *ngIf="filter.globalFilterPresent">
-		<button [matMenuTriggerFor]="globalFilter" mat-icon-button>
+		<button
+			[matMenuTriggerFor]="globalFilter"
+			mat-icon-button
+			class="button-global-filter"
+			[ngClass]="{ 'filter-enabled': !!filter.globalFilterValue }"
+		>
 			<mat-icon [matTooltip]="'STARK.TABLE.FILTER' | translate" class="stark-small-icon" svgIcon="filter"></mat-icon>
 		</button>
 		<mat-menu class="mat-table-filter" #globalFilter="matMenu" xPosition="before" [overlapTrigger]="false">

diff --git a/packages/stark-ui/src/modules/table/components/table.component.spec.ts b/packages/stark-ui/src/modules/table/components/table.component.spec.ts
@@ -12,7 +12,7 @@ import { MatPaginatorModule } from "@angular/material/paginator";
 import { MatDialogModule } from "@angular/material/dialog";
 import { MatSelectModule } from "@angular/material/select";
 import { MatInputModule } from "@angular/material/input";
-import { HAMMER_LOADER } from "@angular/platform-browser";
+import { By, HAMMER_LOADER } from "@angular/platform-browser";
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
 import { STARK_LOGGING_SERVICE } from "@nationalbankbelgium/stark-core";
 import { MockStarkLoggingService } from "@nationalbankbelgium/stark-core/testing";
@@ -303,7 +303,12 @@ describe("TableComponent", () => {
 
 		it("should display/hide the counter element when 'showRowsCounter' changes", () => {
 			const rowsCounterSelector = ".stark-table-rows-counter";
-			hostComponent.dummyData = [{ name: "dummy-data-1" }, { name: "dummy-data-2" }, { name: "dummy-data-3" }, { name: "dummy-data-4" }];
+			hostComponent.dummyData = [
+				{ name: "dummy-data-1" },
+				{ name: "dummy-data-2" },
+				{ name: "dummy-data-3" },
+				{ name: "dummy-data-4" }
+			];
 			hostFixture.detectChanges();
 
 			let rowsCounterElement = hostFixture.debugElement.nativeElement.querySelector(rowsCounterSelector);
@@ -828,6 +833,20 @@ describe("TableComponent", () => {
 				hostFixture.detectChanges();
 				expect(component.paginationConfig.totalItems).toBe(1);
 			});
+
+			it("should add the 'filter-enabled' CSS class to the global filter button only when filterValue is not empty", () => {
+				hostComponent.tableFilter = { globalFilterValue: "some value" };
+				hostFixture.detectChanges();
+
+				const globalFilterButton = hostFixture.debugElement.query(By.css(".header .actions .button-global-filter"));
+
+				expect(globalFilterButton.classes["filter-enabled"]).toBe(true);
+
+				hostComponent.tableFilter = { globalFilterValue: "" };
+				hostFixture.detectChanges();
+
+				expect(globalFilterButton.classes["filter-enabled"]).toBe(false);
+			});
 		});
 
 		describe("column filter", () => {