* Improved css

Alfresco · Apr 27, 2020 · 3406117 · 3406117
1 parent 421f82e
commit 3406117
Show file tree

Hide file tree

Showing 14 changed files with 77 additions and 243 deletions.
diff --git a/...ces-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.html b/...ces-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.html
@@ -1,24 +1,7 @@
-<!-- <div class="menu-container">
-  <mat-list class="adf-menu-list" *ngIf="filters$ | async as filterList; else loading">
-      <mat-list-item (click)="selectFilterById(filter.id)" *ngFor="let filter of filterList"
-                     class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
-          <mat-icon *ngIf="showIcons && filter.icon" matListIcon class="adf-filters__entry-icon">{{filter.icon}}
-          </mat-icon>
-          <span matLine [attr.data-automation-id]="filter.key + '_filter'">{{filter.name | translate}}</span>
-      </mat-list-item>
-  </mat-list>
-  <ng-template #loading>
-      <ng-container>
-          <div class="adf-app-list-spinner">
-              <mat-spinner></mat-spinner>
-          </div>
-      </ng-container>
-  </ng-template>
-</div> -->
 
 <ng-container *ngIf="filters$ | async as filterList; else loading">
-    <div *ngFor="let filter of filterList" class="item">
-        <button (click)="selectFilterById(filter)" [ngClass]="{ 'adf-active': isActiveFilter(filter) }"
+    <div *ngFor="let filter of filterList" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
+        <button (click)="selectFilterById(filter)"
           [attr.aria-label]="filter.name | translate"
           [id]="filter.id"
           [attr.data-automation-id]="filter.id"

diff --git a/...ces-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss b/...ces-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss
@@ -2,57 +2,31 @@
     $primary: map-get($theme, primary);
 
     .adf {
-
         &-filters__entry {
+            padding: 12px 0 !important;
+            height: 24px;
+            width: 100%;
             cursor: pointer;
-            font-size: 14px!important;
+            font-size: 14px !important;
             font-weight: bold;
             opacity: 0.54;
-            padding-left: 30px;
 
-            .mat-list-item-content {
-                height: 34px;
+            .full-width {
+                display: flex;
+                width: 100%;
             }
-        }
 
-        &-filters__entry-icon {
-            padding-right: 12px !important;
-            padding-left: 0 !important;
+            .action-button .action-button__label {
+                padding-left: 20px;
+                margin: 0 8px !important;
+            }
         }
-
         &-filters__entry {
-            &.adf-active, &:hover {
+            &.adf-active,
+            &:hover {
                 color: mat-color($primary);
                 opacity: 1;
             }
         }
-
-        &-menu-list {
-            padding-top: 0 !important;
-        }
     }
-
-    .item {
-        padding: 12px 0;
-        height: 24px;
-        width: 100%;
-        cursor: pointer;
-        font-size: 14px!important;
-        font-weight: bold;
-        opacity: 0.54;
-        &.adf-active, &:hover {
-            color: mat-color($primary);
-            opacity: 1;
-        }
-
-        .full-width {
-            display: flex;
-            width: 100%;
-          }
-
-          .action-button .action-button__label {
-            padding-left: 20px;
-            margin: 0 8px !important;
-          }
-      }
 }
diff --git a/...-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts b/...-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts
@@ -99,7 +99,7 @@ describe('ProcessFiltersCloudComponent', () => {
         fixture.whenStable().then(() => {
             fixture.detectChanges();
             expect(component.filters.length).toBe(3);
-            const filters = fixture.nativeElement.querySelectorAll('.adf-filters__entry-icon');
+            const filters = fixture.nativeElement.querySelectorAll('.adf-icon');
             expect(filters.length).toBe(3);
             expect(filters[0].innerText).toContain('adjust');
             expect(filters[1].innerText).toContain('inbox');
@@ -131,7 +131,7 @@ describe('ProcessFiltersCloudComponent', () => {
         component.showIcons = true;
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            const filters = fixture.debugElement.queryAll(By.css('mat-list-item[class*="adf-filters__entry"]'));
+            const filters = fixture.debugElement.queryAll(By.css('.adf-filters__entry'));
             expect(component.filters.length).toBe(3);
             expect(filters.length).toBe(3);
             expect(filters[0].nativeElement.innerText).toContain('FakeAllProcesses');
@@ -274,11 +274,11 @@ describe('ProcessFiltersCloudComponent', () => {
         component.filterClick.subscribe((res) => {
             expect(res).toBeDefined();
             expect(component.currentFilter).toBeDefined();
-            expect(component.currentFilter.name).toEqual('FakeRunningProcesses');
+            expect(component.currentFilter.name).toEqual('FakeAllProcesses');
             done();
         });
 
-        const filterButton = fixture.debugElement.nativeElement.querySelector('span[data-automation-id="FakeRunningProcesses_filter"]');
+        const filterButton = fixture.debugElement.nativeElement.querySelector('button[data-automation-id="10"]');
         filterButton.click();
     });
 

diff --git a/...ess-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.html b/...ess-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.html
@@ -1,24 +1,6 @@
-<!-- <div class="menu-container">
-  <mat-list class="adf-menu-list" *ngIf="filters$ | async as filterList; else loading">
-      <mat-list-item (click)="selectFilterAndEmit({id: filter.id})" *ngFor="let filter of filterList"
-                     class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
-          <mat-icon *ngIf="showIcons && filter.icon" matListIcon class="adf-filters__entry-icon">{{filter.icon}}
-          </mat-icon>
-          <span matLine [attr.data-automation-id]="filter.key + '-filter'">{{filter.name | translate}}</span>
-      </mat-list-item>
-  </mat-list>
-  <ng-template #loading>
-      <ng-container>
-          <div class="adf-app-list-spinner">
-              <mat-spinner></mat-spinner>
-          </div>
-      </ng-container>
-  </ng-template>
-</div> -->
-
 <ng-container *ngIf="filters$ | async as filterList; else loading">
-    <div *ngFor="let filter of filterList" class="item">
-        <button (click)="selectFilterAndEmit(filter)" [ngClass]="{ 'adf-active': isActiveFilter(filter) }"
+    <div *ngFor="let filter of filterList" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
+        <button (click)="selectFilterAndEmit(filter)"
           [attr.aria-label]="filter.name | translate"
           [id]="filter.id"
           [attr.data-automation-id]="filter.id"

diff --git a/...ess-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.scss b/...ess-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.scss
@@ -2,57 +2,31 @@
     $primary: map-get($theme, primary);
 
     .adf {
-
         &-filters__entry {
+            padding: 12px 0 !important;
+            height: 24px;
+            width: 100%;
             cursor: pointer;
-            font-size: 14px!important;
+            font-size: 14px !important;
             font-weight: bold;
             opacity: 0.54;
-            padding-left: 30px;
 
-            .mat-list-item-content {
-                height: 34px;
+            .full-width {
+                display: flex;
+                width: 100%;
             }
-        }
 
-        &-filters__entry-icon {
-            padding-right: 12px !important;
-            padding-left: 0 !important;
+            .action-button .action-button__label {
+                padding-left: 20px;
+                margin: 0 8px !important;
+            }
         }
-
         &-filters__entry {
-            &.adf-active, &:hover {
+            &.adf-active,
+            &:hover {
                 color: mat-color($primary);
                 opacity: 1;
             }
         }
-
-        &-menu-list {
-            padding-top: 0 !important;
-        }
     }
-
-    .item {
-        padding: 12px 0;
-        height: 24px;
-        width: 100%;
-        cursor: pointer;
-        font-size: 14px!important;
-        font-weight: bold;
-        opacity: 0.54;
-        &.adf-active, &:hover {
-            color: mat-color($primary);
-            opacity: 1;
-        }
-
-        .full-width {
-            display: flex;
-            width: 100%;
-          }
-
-          .action-button .action-button__label {
-            padding-left: 20px;
-            margin: 0 8px !important;
-          }
-      }
 }
diff --git a/...-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts b/...-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts
@@ -76,7 +76,7 @@ describe('TaskFiltersCloudComponent', () => {
         fixture.whenStable().then(() => {
             fixture.detectChanges();
             expect(component.filters.length).toBe(3);
-            const filters = fixture.nativeElement.querySelectorAll('.adf-filters__entry-icon');
+            const filters = fixture.nativeElement.querySelectorAll('.adf-icon');
             expect(filters.length).toBe(3);
             expect(filters[0].innerText).toContain('adjust');
             expect(filters[1].innerText).toContain('done');
@@ -108,7 +108,7 @@ describe('TaskFiltersCloudComponent', () => {
         component.showIcons = true;
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            const filters = fixture.debugElement.queryAll(By.css('mat-list-item[class*="adf-filters__entry"]'));
+            const filters = fixture.debugElement.queryAll(By.css('.adf-filters__entry'));
             expect(component.filters.length).toBe(3);
             expect(filters.length).toBe(3);
             expect(filters[0].nativeElement.innerText).toContain('FakeInvolvedTasks');
@@ -262,9 +262,10 @@ describe('TaskFiltersCloudComponent', () => {
 
         fixture.detectChanges();
         spyOn(component, 'selectFilterAndEmit').and.stub();
-        const filterButton = fixture.debugElement.nativeElement.querySelector('span[data-automation-id="fake-my-tast1-filter"]');
+        const filterButton = fixture.debugElement.nativeElement.querySelector('button[data-automation-id="11"]');
+
         filterButton.click();
-        expect(component.selectFilterAndEmit).toHaveBeenCalledWith({id: fakeGlobalFilter[1].id});
+        expect(component.selectFilterAndEmit).toHaveBeenCalledWith(fakeGlobalFilter[1]);
     }));
 
     it('should reload filters by appName on binding changes', () => {

diff --git a/...ocess-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.ts b/...ocess-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.ts
@@ -151,8 +151,4 @@ export class TaskFiltersCloudComponent implements OnInit, OnChanges, OnDestroy {
         this.filters = [];
         this.currentFilter = undefined;
     }
-
-    isActiveFilter(filter: any): boolean {
-        return this.currentFilter.name === filter.name;
-    }
 }
diff --git a/lib/process-services/src/lib/process-list/components/process-filters.component.html b/lib/process-services/src/lib/process-list/components/process-filters.component.html
@@ -1,15 +1,5 @@
-<!-- <div class="menu-container">
-    <mat-list class="adf-menu-list">
-        <mat-list-item (click)="selectFilter(filter)" *ngFor="let filter of filters"
-                        class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
-            <mat-icon *ngIf="showIcon" matListIcon class="adf-filters__entry-icon">{{getFilterIcon(filter.icon)}}</mat-icon>
-            <span matLine [attr.data-automation-id]="filter.name + '_filter'">{{filter.name}}</span>
-        </mat-list-item>
-    </mat-list>
-</div> -->
-
-<div *ngFor="let filter of filters" class="item">
-    <button (click)="selectFilter(filter)" [ngClass]="{ 'adf-active': isActiveFilter(filter) }"
+<div *ngFor="let filter of filters" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
+    <button (click)="selectFilter(filter)"
       [attr.aria-label]="filter.name | translate"
       [id]="filter.id"
       [attr.data-automation-id]="filter.id"

diff --git a/lib/process-services/src/lib/process-list/components/process-filters.component.scss b/lib/process-services/src/lib/process-list/components/process-filters.component.scss
@@ -2,59 +2,31 @@
     $primary: map-get($theme, primary);
 
     .adf {
-
         &-filters__entry {
+            padding: 12px 0 !important;
+            height: 24px;
+            width: 100%;
             cursor: pointer;
-            font-size: 14px!important;
+            font-size: 14px !important;
             font-weight: bold;
             opacity: 0.54;
-            padding-left: 30px;
 
-            .mat-list-item-content {
-                height: 34px;
+            .full-width {
+                display: flex;
+                width: 100%;
             }
-            &.adf-active, &:hover {
+
+            .action-button .action-button__label {
+                padding-left: 20px;
+                margin: 0 8px !important;
+            }
+        }
+        &-filters__entry {
+            &.adf-active,
+            &:hover {
                 color: mat-color($primary);
                 opacity: 1;
             }
         }
-
-        &-filters__entry-icon {
-            padding-right: 12px !important;
-            padding-left: 0 !important;
-        }
-
-        &-menu-list {
-            padding-top: 0 !important;
-        }
     }
-
-    .item {
-        padding: 12px 0;
-        height: 24px;
-        width: 100%;
-        cursor: pointer;
-        font-size: 14px!important;
-        font-weight: bold;
-        opacity: 0.54;
-        &:hover {
-            color: mat-color($primary);
-            opacity: 1;
-        }
-
-        .adf-active {
-            color: mat-color($primary);
-            opacity: 1;
-        }
-
-        .full-width {
-            display: flex;
-            width: 100%;
-          }
-
-          .action-button .action-button__label {
-            padding-left: 20px;
-            margin: 0 8px !important;
-          }
-      }
 }
diff --git a/lib/process-services/src/lib/process-list/components/process-filters.component.spec.ts b/lib/process-services/src/lib/process-list/components/process-filters.component.spec.ts
@@ -287,7 +287,7 @@ describe('ProcessFiltersComponent', () => {
         fixture.whenStable().then(() => {
             fixture.detectChanges();
             expect(filterList.filters.length).toBe(3);
-            const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon'));
+            const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
             expect(filters.length).toBe(3);
             expect(filters[0].nativeElement.innerText).toContain('dashboard');
             expect(filters[1].nativeElement.innerText).toContain('shuffle');

diff --git a/lib/process-services/src/lib/process-list/components/process-filters.component.ts b/lib/process-services/src/lib/process-list/components/process-filters.component.ts
@@ -213,8 +213,4 @@ export class ProcessFiltersComponent implements OnInit, OnChanges {
     getFilterIcon(icon: string): string {
         return this.iconsMDL.mapGlyphiconToMaterialDesignIcons(icon);
     }
-
-    isActiveFilter(filter: any): boolean {
-        return this.currentFilter.name === filter.name;
-    }
 }