iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(aio): hard code a "Home" image link into the toolbar 

Closes #15017
This commit is contained in:
Peter Bacon Darwin 2017-03-09 16:31:20 +00:00 committed by Chuck Jazdzewski
parent 26efa3a25c
commit e7dab7e6c1
4 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
aio/src/app/app.component.html
View File

@ -1,6 +1,6 @@
<md-toolbar color="primary" class="app-toolbar"> <md-toolbar color="primary" class="app-toolbar">
<button *ngIf="isHamburgerVisible" class="hamburger" md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button> <button *ngIf="isHamburgerVisible" class="hamburger" md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button>
<aio-top-menu *ngIf="isSideBySide" [nodes]="(navigationViews | async)?.TopBar"></aio-top-menu> <aio-top-menu *ngIf="isSideBySide" [nodes]="(navigationViews | async)?.TopBar" [homeImageUrl]="homeImageUrl"></aio-top-menu>
<md-input-container > <md-input-container >
<input mdInput placeholder="Search" (keyup)="onSearch($event.target.value)"> <input mdInput placeholder="Search" (keyup)="onSearch($event.target.value)">
</md-input-container> </md-input-container>
@ -10,7 +10,7 @@
<md-sidenav-container class="sidenav-container" (window:resize)="onResize($event.target.innerWidth)"> <md-sidenav-container class="sidenav-container" (window:resize)="onResize($event.target.innerWidth)">
<md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "isSideBySide ? 'side' : 'over'"> <md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "isSideBySide ? 'side' : 'over'">
<aio-top-menu *ngIf="!isSideBySide" class="small" [nodes]="(navigationViews | async)?.TopBar"></aio-top-menu> <aio-top-menu *ngIf="!isSideBySide" class="small" [nodes]="(navigationViews | async)?.TopBar" [homeImageUrl]="homeImageUrl"></aio-top-menu>
<aio-nav-menu [nodes]="(navigationViews | async)?.SideNav" [selectedNodes]="selectedNodes | async"></aio-nav-menu> <aio-nav-menu [nodes]="(navigationViews | async)?.SideNav" [selectedNodes]="selectedNodes | async"></aio-nav-menu>
</md-sidenav> </md-sidenav>

1
aio/src/app/app.component.ts
View File

@ -11,6 +11,7 @@ import { SearchService, QueryResults } from 'app/search/search.service';
}) })
export class AppComponent implements OnInit { export class AppComponent implements OnInit {
readonly sideBySideWidth = 600; readonly sideBySideWidth = 600;
readonly homeImageUrl = 'assets/images/logos/angular2/angular_solidBlack.svg';
isHamburgerVisible = true; // always ... for now isHamburgerVisible = true; // always ... for now
isSideBySide = false; isSideBySide = false;

14
aio/src/app/layout/top-menu/top-menu.component.ts
View File

@ -3,7 +3,9 @@ import { NavigationNode } from 'app/navigation/navigation.service';
@Component({ @Component({
selector: 'aio-top-menu', selector: 'aio-top-menu',
template: `<span *ngFor="let node of nodes"><a class="nav-link" [href]="node.path || node.url">{{ node.title }}</a></span>`, template: `
<span><a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a></span>
<span *ngFor="let node of nodes"><a class="nav-link" [href]="node.path || node.url">{{ node.title }}</a></span>`,
styles: [` styles: [`
.fill-remaining-space { .fill-remaining-space {
flex: 1 1 auto; flex: 1 1 auto;
@ -15,6 +17,13 @@ import { NavigationNode } from 'app/navigation/navigation.service';
cursor: pointer; cursor: pointer;
} }
.nav-link.home img {
position: relative;
margin-top: -15px;
top: 12px;
height: 36px;
}
@media (max-width: 700px) { @media (max-width: 700px) {
.nav-link { .nav-link {
margin-right: 8px; margin-right: 8px;
@ -33,4 +42,7 @@ import { NavigationNode } from 'app/navigation/navigation.service';
export class TopMenuComponent { export class TopMenuComponent {
@Input() @Input()
nodes: NavigationNode[]; nodes: NavigationNode[];
@Input()
homeImageUrl: string;
} }

4
aio/src/content/navigation.json
View File

@ -1,9 +1,5 @@
{ {
"TopBar": [ "TopBar": [
{
"url": "/",
"title": "Home"
},
{ {
"url": "api", "url": "api",
"title": "API" "title": "API"