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-15251] Making header component more customizable (#8670)

Browse Source
This commit is contained in:
Ehsan Rezaei
2023-06-15 18:23:55 +02:00
committed by GitHub
parent eda42a69ef
commit f915370bc0
4 changed files with 48 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/core/components/header.component.md
View File

@@ -46,6 +46,8 @@ body of the element:
| showSidenavToggle | `boolean` | true | Toggles whether the sidenav button will be displayed in the header or not. |
| title | `string` | | Title of the application. |
| tooltip | `string` | | The tooltip text for the application logo. |
| toggleIcon | `string` | "menu" | The toggle icon that will be used inside header. |
| showLogo | `boolean` | true | Toggles whether the logo will be displayed inside the header or not. |
### Events

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

@@ -13,10 +13,10 @@
<mat-icon
class="mat-icon material-icon"
role="img"
aria-hidden="true">menu</mat-icon>
aria-hidden="true">{{ toggleIcon }}</mat-icon>
</button>
<a [routerLink]="redirectUrl" title="{{ tooltip }}">
<a *ngIf="showLogo" [routerLink]="redirectUrl" title="{{ tooltip }}">
<img
src="{{ logo }}"
class="adf-app-logo"
@@ -48,6 +48,6 @@
<mat-icon
class="mat-icon material-icon"
role="img"
aria-hidden="true">menu</mat-icon>
aria-hidden="true">{{ toggleIcon }}</mat-icon>
</button>
</mat-toolbar>

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

@@ -175,6 +175,43 @@ describe('HeaderLayoutComponent', () => {
expect(buttonStart === null).toBeFalsy();
expect(buttonEnd === null).toBeTruthy();
});
it('should display the logo image when the input is set to true [showLogo=true]', () => {
component.showLogo = true;
fixture.detectChanges();
const logo = fixture.debugElement.query(By.css('.adf-app-logo'));
expect(logo.nativeElement).not.toBeNull();
});
it('should NOT display the logo image when the input is set to false [showLogo=false]', () => {
component.showLogo = false;
fixture.detectChanges();
const logo = fixture.debugElement.query(By.css('.adf-app-logo'));
expect(logo).toBeNull();
});
it('should display the default toggle icon', () => {
component.showSidenavToggle = true;
fixture.detectChanges();
const toggleIcon = fixture.debugElement.query(By.css('.adf-menu-icon'));
expect(toggleIcon.nativeElement.textContent).toBe('menu');
});
it('should display the correct toggle icon', () => {
component.showSidenavToggle = true;
component.toggleIcon = 'apps';
fixture.detectChanges();
const toggleIcon = fixture.debugElement.query(By.css('.adf-menu-icon'));
expect(toggleIcon.nativeElement.textContent).toBe('apps');
});
});
describe('Template transclusion', () => {

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

@@ -33,6 +33,9 @@ export class HeaderLayoutComponent implements OnInit {
/** Path to an image file for the application logo. */
@Input() logo: string;
/** Toggles whether the logo will be displayed inside the header or not. */
@Input() showLogo: boolean = true;
/** The router link for the application logo, when clicked. */
@Input() redirectUrl: string | any[] = '/';
@@ -51,6 +54,9 @@ export class HeaderLayoutComponent implements OnInit {
*/
@Input() showSidenavToggle: boolean = true;
/** The toggle icon that will be used inside header. */
@Input() toggleIcon = 'menu';
/** Emitted when the sidenav button is clicked. */
@Output() clicked = new EventEmitter<boolean>();