inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-15298] added tokens to HeaderLayout (#9074)

Browse Source 
* [AAE-15298] added tokens to HeaderLayout

* [AAE-15298] removed obsolete class

* AAE-15298: Code improvement

* AAE-15298: Updated unit tests

* AAE-15298: Removed duplicate keys

---------

Co-authored-by: Ehsan Rezaei <ehsan.rezaei@hyland.com>
This commit is contained in:
tomasz hanaj
2024-01-26 11:21:16 +01:00
committed by GitHub
parent 3b2da78617
commit 9473f7681b
5 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
lib/core/src/lib/layout/components/header/header.component.html
View File

@@ -6,7 +6,7 @@
*ngIf="showSidenavToggle && position === 'start'"
id="adf-sidebar-toggle-start"
data-automation-id="adf-menu-icon"
class="mat-icon-button adf-menu-icon"
class="adf-menu-icon adf-header-icon-button"
mat-icon-button
(click)="toggleMenu()"
[attr.aria-expanded]="expandedSidenav"
@@ -14,7 +14,8 @@
<mat-icon
class="mat-icon material-icon"
role="img"
aria-hidden="true">{{ toggleIcon }}</mat-icon>
aria-hidden="true">{{ toggleIcon }}
</mat-icon>
</button>
<a *ngIf="showLogo" [routerLink]="redirectUrl" title="{{ tooltip }}">
@@ -40,15 +41,15 @@
*ngIf="showSidenavToggle && position === 'end'"
id="adf-sidebar-toggle-end"
data-automation-id="adf-menu-icon"
class="mat-icon-button adf-menu-icon"
class="adf-menu-icon adf-header-icon-button"
mat-icon-button
(click)="toggleMenu()"
[attr.aria-expanded]="expandedSidenav"
[attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate">
>
<mat-icon
class="mat-icon material-icon"
role="img"
aria-hidden="true">{{ toggleIcon }}</mat-icon>
aria-hidden="true">{{ toggleIcon }}
</mat-icon>
</button>
</mat-toolbar>

13
lib/core/src/lib/layout/components/header/header.component.scss
View File

@@ -58,6 +58,19 @@ adf-layout-header .mat-toolbar-single-row {
display: none;
}
}
.adf-header-icon-button {
color: var(--adf-header-icon-button-default-color);
border-radius: var(--adf-header-icon-button-default-border-radius);
&:hover {
color: var(--adf-header-icon-button-hover-color);
}
&:active {
color: var(--adf-header-icon-button-pressed-color);
}
}
}
[dir='rtl'] adf-layout-header .mat-toolbar-single-row {

4
lib/core/src/lib/layout/components/header/header.component.spec.ts
View File

@@ -240,7 +240,7 @@ describe('HeaderLayoutComponent', () => {
const toggleIcon = fixture.debugElement.query(By.css('.adf-menu-icon'));
expect(toggleIcon.nativeElement.textContent).toBe('menu');
expect(toggleIcon.nativeElement.textContent.trim()).toBe('menu');
});
it('should display the correct toggle icon', () => {
@@ -250,7 +250,7 @@ describe('HeaderLayoutComponent', () => {
const toggleIcon = fixture.debugElement.query(By.css('.adf-menu-icon'));
expect(toggleIcon.nativeElement.textContent).toBe('apps');
expect(toggleIcon.nativeElement.textContent.trim()).toBe('apps');
});
});

7
lib/core/src/lib/styles/_components-variables.scss
View File

@@ -90,7 +90,12 @@
--adf-task-assignment-filter-label-default-color: mat.get-color-from-palette($foreground, secondary-text),
--adf-task-assignment-filter-label-focus-color: mat.get-color-from-palette($primary),
--adf-process-header-cloud-card-background: mat.get-color-from-palette($background, card)
--adf-process-header-cloud-card-background: mat.get-color-from-palette($background, card),
--adf-header-icon-button-default-color: $adf-ref-header-icon-color,
--adf-header-icon-button-default-border-radius: $adf-ref-header-icon-border-radius,
--adf-header-icon-button-hover-color: $adf-ref-header-icon-color,
--adf-header-icon-button-pressed-color: $adf-ref-header-icon-color,
--adf-header-icon-button-disabled-color: $adf-ref-header-icon-color,
);
// propagates SCSS variables into the CSS variables scope

2
lib/core/src/lib/styles/_reference-variables.scss
View File

@@ -23,3 +23,5 @@ $adf-ref-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698);
$adf-ref-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7);
$adf-ref-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24);
$adf-ref-metadata-property-panel-title-color: rgb(33, 33, 33);
$adf-ref-header-icon-color: inherit;
$adf-ref-header-icon-border-radius: 50%;