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-17807] fix for header background color (#9067)

Browse Source 
* [AAE-17807] fix for header background color

* [AAE-17807] added unit tests
This commit is contained in:
Wojciech Duda
2023-11-07 14:14:54 +01:00
committed by GitHub
parent 41a788d974
commit 34c82f4a49
4 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
<mat-toolbar <mat-toolbar
[color]="color" [color]="color"
[style.background-color]="color"
[style.background-image]="'url(' + backgroundImage + ')'"> [style.background-image]="'url(' + backgroundImage + ')'">
<button <button
*ngIf="showSidenavToggle && position === 'start'" *ngIf="showSidenavToggle && position === 'start'"

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

@@ -72,6 +72,15 @@ describe('HeaderLayoutComponent', () => {
expect(await host.getAttribute('ng-reflect-color')).toBe('primary'); expect(await host.getAttribute('ng-reflect-color')).toBe('primary');
}); });
it('should change background color when custom is provided', async () => {
component.color = '#42f57e';
fixture.detectChanges();
const toolbarHarness = await loader.getHarness(MatToolbarHarness);
const toolbar = await toolbarHarness.host();
expect(await toolbar.getCssValue('background-color')).toBe('rgb(66, 245, 126)');
});
it('should change background image when provided', async () => { it('should change background image when provided', async () => {
component.backgroundImage = '/assets/someImage.png'; component.backgroundImage = '/assets/someImage.png';
fixture.detectChanges(); fixture.detectChanges();

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

@@ -41,7 +41,7 @@ export default {
argTypes: { argTypes: {
color: { color: {
control: 'radio', control: 'radio',
options: ['primary', 'accent', 'warn', undefined], options: ['primary', 'accent', 'warn', '#42f57e', undefined],
defaultValue: undefined, defaultValue: undefined,
description: `Background color for the header. description: `Background color for the header.
It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'`, It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'`,

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

@@ -46,7 +46,7 @@ export class HeaderLayoutComponent implements OnInit {
* Background color for the header. It can be any hex color code or one * Background color for the header. It can be any hex color code or one
* of the Material theme colors: 'primary', 'accent' or 'warn'. * of the Material theme colors: 'primary', 'accent' or 'warn'.
*/ */
@Input() color: ThemePalette; @Input() color: ThemePalette | string;
/** Path to a background image for the header. */ /** Path to a background image for the header. */
@Input() backgroundImage: string; @Input() backgroundImage: string;