inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +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

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);
}
}