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

[ADF-3358] Header - update demo shell component (#3655)

Browse Source 
* [ADF-3358] update demo-shell header component

* [ADF-3358] style demo-shell header component
This commit is contained in:
Suzana Dirla
2018-08-03 21:46:57 +03:00
committed by Eugenio Romano
parent a12662e7e2
commit c510ec864d
6 changed files with 68 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo-shell/src/app/components/app-layout/app-layout.component.html
View File

@@ -2,7 +2,7 @@
<adf-sidenav-layout-header>
<ng-template let-toggleMenu="toggleMenu">
<adf-layout-header id="adf-header" [title]="title | translate" [redirectUrl]="['/home']" [logo]="logo" [tooltip]="title | translate" [showSidenavToggle]="showMenu" [color]="color" (clicked)=toggleMenu($event) >
<adf-layout-header id="adf-header" [title]="title | translate" [redirectUrl]="redirectUrl" [logo]="logo" [tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [color]="color" (clicked)=toggleMenu($event) >
<div class="adf-app-layout-menu-spacer"></div>

4
demo-shell/src/app/components/app-layout/app-layout.component.ts
View File

@@ -69,6 +69,8 @@ export class AppLayoutComponent implements OnInit {
color = 'primary';
title = 'APP_LAYOUT.APP_NAME';
logo: string;
redirectUrl: string | any[] = ['/home'];
tooltip = 'APP_LAYOUT.APP_NAME';
ngOnInit() {
const expand = this.config.get<boolean>('sideNav.expandedSidenav');
@@ -84,6 +86,8 @@ export class AppLayoutComponent implements OnInit {
this.headerService.color.subscribe(color => this.color = color);
this.headerService.title.subscribe(title => this.title = title);
this.headerService.logo.subscribe(path => this.logo = path);
this.headerService.redirectUrl.subscribe(redirectUrl => this.redirectUrl = redirectUrl);
this.headerService.tooltip.subscribe(tooltip => this.tooltip = tooltip);
}
constructor(

24
demo-shell/src/app/components/header-data/header-data.component.html
View File

@@ -1,14 +1,21 @@
<div class="content header-data">
<h1>Header data</h1>
<mat-card>
<mat-checkbox [(ngModel)]="checkbox" (change)="hideButton()">Show menu button</mat-checkbox>
<div>
<mat-checkbox [(ngModel)]="checkbox" (change)="hideButton()">Show menu button</mat-checkbox>
</div>
<div>
<label>Choose header color</label>
<select (change)="changeColor($event.target.value)">
<option value="primary">Primary</option>
<option value="accent">Accent</option>
<option value="warn">Warn</option>
</select>
OR
<input type="text" name="color" (keyup.enter)="changeColor($event.target.value)" placeholder="hex color code">
<p>*Choose only one value at a time: either hex code or theme color.</p>
<p>*press enter for submitting new hex color</p>
</div>
<div>
@@ -19,8 +26,21 @@
<div>
<label>Change logo</label>
<input type="text" placeholder ="URL path" (keyup.enter)="submitLogo($event.target.value)" >
<input type="text" placeholder="URL path" (keyup.enter)="submitLogo($event.target.value)" >
<p>*press enter for submitting new logo</p>
</div>
<div>
<label>Change logo link</label>
<input type="url" placeholder="Redirect URL" (keyup.enter)="submitRedirectUrl($event.target.value)" >
<p>*Input JSON friendly array or explicit string. E.g. ["/test", 33, "user", 11] or "/test"</p>
<p>*press enter for submitting new link on logo</p>
</div>
<div>
<label>Change logo tooltip</label>
<input type="text" placeholder="Tooltip text" (keyup.enter)="submitTooltip($event.target.value)" >
<p>*press enter for submitting new tooltip</p>
</div>
</mat-card>
</div>

23
demo-shell/src/app/components/header-data/header-data.component.scss
View File

@@ -5,11 +5,24 @@
max-width: 100% !important;
max-height: 100% !important;
.mat-form-field, input, select {
display: block;
width: 100%;
height: 30px;
margin-bottom: 20px;
div {
padding: 0;
margin-bottom: 30px;
label {
font-weight: bold;
}
.mat-form-field, input, select {
display: block;
width: 100%;
height: 30px;
margin-bottom: 5px;
}
p {
margin: 0 0 5px 0;
}
}
}
}

13
demo-shell/src/app/components/header-data/header-data.component.ts
View File

@@ -46,4 +46,17 @@ export class HeaderDataComponent {
this.headerService.changeLogo(logoPath);
}
}
submitRedirectUrl(value: string) {
const redirectUrl = JSON.parse(value);
if (redirectUrl) {
this.headerService.changeRedirectUrl(redirectUrl);
}
}
submitTooltip(tooltip: string) {
if (tooltip) {
this.headerService.changeTooltip(tooltip);
}
}
}

10
demo-shell/src/app/components/header-data/header-data.service.ts
View File

@@ -10,6 +10,8 @@ export class HeaderDataService {
@Output() color: EventEmitter<string> = new EventEmitter();
@Output() title: EventEmitter<string> = new EventEmitter();
@Output() logo: EventEmitter<string> = new EventEmitter();
@Output() redirectUrl: EventEmitter<string|any[]> = new EventEmitter();
@Output() tooltip: EventEmitter<string> = new EventEmitter();
hideMenuButton() {
this.show = !this.show;
@@ -28,4 +30,12 @@ export class HeaderDataService {
changeLogo(logoPath: string) {
this.logo.emit(logoPath);
}
changeRedirectUrl(redirectUrl: string | any[]) {
this.redirectUrl.emit(redirectUrl);
}
changeTooltip(tooltip: string) {
this.tooltip.emit(tooltip);
}
}