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

Migrated main page to material design

Browse Source 
- some sections are left commented out for reference and migration
purposes and will be removed during future revisions
This commit is contained in:
Denys Vuika
2016-04-21 17:25:38 +01:00
parent a944d383af
commit 8e2affabf8
4 changed files with 84 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
demo-shell-ng2/app/app.component.html
View File

@@ -1,3 +1,4 @@
<!--
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
@@ -42,5 +43,52 @@
</div>
</div>
</nav>
<!--<router-outlet></router-outlet>-->
<auth-router-outlet></auth-router-outlet>
-->
<!-- 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">Alfresco</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="" [routerLink]="['Home']">Home</a>
<a class="mdl-navigation__link" href="" [routerLink]="['Page1']">Uploader</a>
<a class="mdl-navigation__link" href="" [routerLink]="['Page2']">Page 2</a>
</nav>
<!-- Right aligned menu below button -->
<button id="demo-menu-lower-right"
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]="['Home']" (click)="hideDrawer()">Home</a>
<a class="mdl-navigation__link" href="" [routerLink]="['Page1']" (click)="hideDrawer()">Uploader</a>
<a class="mdl-navigation__link" href="" [routerLink]="['Page2']" (click)="hideDrawer()">Page 2</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">
<!--<router-outlet></router-outlet>-->
<auth-router-outlet></auth-router-outlet>
</div>
</main>
</div>

10
demo-shell-ng2/app/app.component.ts
View File

@@ -7,11 +7,14 @@ import {HomeView} from './components/home.view';
import {Page1View} from './components/page1.view';
import {Page2View} from './components/page2.view';
import {AlfrescoService} from 'ng2-alfresco-documentlist/ng2-alfresco-documentlist';
import {MDL} from './components/MaterialDesignLiteUpgradeElement';
declare var document: any;
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
directives: [ROUTER_DIRECTIVES, AuthRouterOutlet]
directives: [ROUTER_DIRECTIVES, AuthRouterOutlet, MDL]
})
@RouteConfig([
{path: '/', name: 'Home', component: HomeView, useAsDefault: true},
@@ -42,4 +45,9 @@ export class AppComponent {
() => this.router.navigate(['Login'])
);
}
hideDrawer() {
// todo: workaround for drawer closing
document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();
}
}

31
demo-shell-ng2/app/components/home.view.ts
View File

@@ -1,5 +1,6 @@
import {Component} from 'angular2/core';
import {DocumentList} from 'ng2-alfresco-documentlist/ng2-alfresco-documentlist';
import {MDL} from './MaterialDesignLiteUpgradeElement';
@Component({
selector: 'home-view',
@@ -8,10 +9,30 @@ import {DocumentList} from 'ng2-alfresco-documentlist/ng2-alfresco-documentlist'
<div class="row">
<div class="col-md-2">
<ul class="list-unstyled">
<li><label><input type="checkbox" [(ngModel)]="thumbnails"> Thumbnails</label></li>
<li><label><input type="checkbox" [(ngModel)]="breadcrumb"> Breadcrumb</label></li>
<li><label><input type="checkbox" [(ngModel)]="navigation"> Navigation</label></li>
<li><label><input type="checkbox" [(ngModel)]="downloads"> Downloads</label></li>
<li>
<label mdl class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" [(ngModel)]="thumbnails">
<span class="mdl-checkbox__label">Thumbnails</span>
</label>
</li>
<li>
<label mdl class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input" [(ngModel)]="breadcrumb">
<span class="mdl-checkbox__label">Breadcrumb</span>
</label>
</li>
<li>
<label mdl class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-3">
<input type="checkbox" id="checkbox-3" class="mdl-checkbox__input" [(ngModel)]="navigation">
<span class="mdl-checkbox__label">Navigation</span>
</label>
</li>
<li>
<label mdl class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-4">
<input type="checkbox" id="checkbox-4" class="mdl-checkbox__input" [(ngModel)]="downloads">
<span class="mdl-checkbox__label">Downloads</span>
</label>
</li>
</ul>
<hr>
<ul class="list-unstyled" style="font-size: 10px">
@@ -32,7 +53,7 @@ import {DocumentList} from 'ng2-alfresco-documentlist/ng2-alfresco-documentlist'
</div>
</div>
`,
directives: [DocumentList]
directives: [DocumentList, MDL]
})
export class HomeView {
thumbnails: boolean = true;

2
demo-shell-ng2/app/css/app.css
View File

@@ -1,5 +1,3 @@
body { padding-top: 70px; }
/* Utils */
.p-10 {