2016-05-26 10:19:12 +01:00

74 lines
4.1 KiB
HTML

<!-- Always shows a header, even in smaller screens. -->
<div mdl class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Demo Application</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<form [ngFormModel]="searchForm" (submit)="onSearch(searchForm.value, $event)">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="searchTerm">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="searchTerm" ngControl="searchTerm">
<label class="mdl-textfield__label" for="searchTerm">Expandable Input</label>
</div>
</div>
</form>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" data-automation-id="files" href="" [routerLink]="['Files']">DocumentList</a>
<a class="mdl-navigation__link" data-automation-id="datatable" href="" [routerLink]="['DataTable']">DataTable</a>
<a class="mdl-navigation__link" data-automation-id="uploader" href="" [routerLink]="['Uploader']">Uploader</a>
<a class="mdl-navigation__link" data-automation-id="login" href="" [routerLink]="['Login']">Login</a>
</nav>
<!-- Right aligned menu below button -->
<button id="demo-menu-language-right" data-automation-id="language-menu"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">Language</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-language-right">
<li class="mdl-menu__item" (click)="changeLanguage('en')">En</li>
<li class="mdl-menu__item" (click)="changeLanguage('it')">Ita</li>
</ul>
<!-- Right aligned menu below button -->
<button id="demo-menu-lower-right" data-automation-id="right-action-menu"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-right">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
<li *ngIf="!isLoggedIn()" class="mdl-menu__item" [routerLink]="['Login']">Login</li>
<li *ngIf="isLoggedIn()" class="mdl-menu__item" (click)="onLogout($event)">Logout</li>
</ul>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Alfresco</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="" [routerLink]="['Files']" (click)="hideDrawer()">DocumentList</a>
<a class="mdl-navigation__link" href="" [routerLink]="['DataTable']" (click)="hideDrawer()">DataTable</a>
<a class="mdl-navigation__link" href="" [routerLink]="['Uploader']" (click)="hideDrawer()">Uploader</a>
<a class="mdl-navigation__link" href="" [routerLink]="['Login']" (click)="hideDrawer()">Login</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<alfresco-login method="{{methodName}}"></alfresco-login>
<!--<router-outlet></router-outlet>-->
<auth-router-outlet></auth-router-outlet>
</div>
</main>
</div>