<!DOCTYPE html>
<html>
<head>
<title>Covalent Plnkr</title>
<!-- Load common libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.2.0/typescript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.4/zone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.41/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System
.import('main.ts')
.catch(console.error.bind(console));
</script>
<!-- Load the Covalent platform stylesheet -->
<link href="https://unpkg.com/@covalent/core@1.0.0-beta.3-2/common/platform.css" rel="stylesheet">
<!-- Load the Covalent/Material prebuilt theme -->
<link href="https://unpkg.com/@covalent/core@1.0.0-beta.3-2/theming/prebuilt/blue-orange.css" rel="stylesheet">
</head>
<body>
<covalent-app>
<div style="padding: 20%;text-align:center;">
<img src="https://camo.githubusercontent.com/5e708dbe0cf622ebdbdab5be0ede859ceb08ab91/68747470733a2f2f63646e2e7261776769742e636f6d2f54657261646174612f636f76616c656e742f646576656c6f702f7372632f6170702f6173736574732f69636f6e732f636f76616c656e742e737667" width="100">
<h3>Email App Loading...</h3>
</div>
</covalent-app>
</body>
</html>
<!--
© 2017 Teradata. All rights reserved.
-->
<td-layout #layout>
<td-navigation-drawer name="Firstname Lastname" email="firstname.lastname@company.com">
<md-nav-list>
<ng-template let-item let-last="last" ngFor [ngForOf]="routes">
<a md-list-item (click)="layout.close()"><md-icon>{{item.icon}}</md-icon>{{item.title}}</a>
</ng-template>
</md-nav-list>
<md-nav-list td-navigation-drawer-menu>
<a md-list-item (click)="logout()"><md-icon>exit_to_app</md-icon>Sign out</a>
</md-nav-list>
</td-navigation-drawer>
<td-layout-nav-list #navList
class="light-blue-red"
[opened]="media.registerQuery('gt-sm') | async"
[mode]="(media.registerQuery('gt-sm') | async) ? 'side' : 'push'"
[sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '350px' : '100%'">
<div td-toolbar-content layout="row" layout-align="start center" flex>
<span flex *ngIf="!searchBox.searchVisible">Email App</span>
<td-search-box #searchBox class="pull-top-sm pull-bottom-sm" placeholder="Search here" flex>
</td-search-box>
<button md-icon-button [mdMenuTriggerFor]="notificationsMenu">
<td-notification-count color="accent" [notifications]="4">
<md-icon>apps</md-icon>
</td-notification-count>
</button>
<md-menu #notificationsMenu="mdMenu">
<td-menu>
<div td-menu-header class="md-subhead">Templates</div>
<md-nav-list dense>
<a md-list-item>
<md-icon md-list-avatar>system_update_alt</md-icon>
<h4 md-line><span class="text-wrap">Landing Page</span></h4>
<p md-line>a landing page template</p>
</a>
<md-divider></md-divider>
<a md-list-item>
<md-icon md-list-avatar>dashboard</md-icon>
<h4 md-line><span class="text-wrap">Dashboard</span></h4>
<p md-line>an ngx-charts dashboard template</p>
</a>
<md-divider></md-divider>
<a md-list-item>
<md-icon md-list-avatar>email</md-icon>
<h4 md-line><span class="text-wrap">Email App</span></h4>
<p md-line>an email app template</p>
</a>
<md-divider></md-divider>
<a md-list-item>
<md-icon md-list-avatar>view_array</md-icon>
<h4 md-line><span class="text-wrap">IDE Editor</span></h4>
<p md-line>an IDE text editor app template</p>
</a>
</md-nav-list>
<a md-button color="accent" td-menu-footer href="https://github.com/Teradata/covalent-quickstart/tree/develop/src/app/templates" target="_blank">
View Code
</a>
</td-menu>
</md-menu>
</div>
<md-nav-list td-sidenav-content (click)="!media.query('gt-sm') && navList.close()">
<ng-template let-item let-i="index" let-last="last" ngFor [ngForOf]="[0,1,2,3,4,5,6,7,8,9]">
<a md-list-item>
<img md-list-avatar src="http://lorempixel.com/40/40/people/{{i}}" />
<h3 md-line> Firstname Lastname </h3>
<p md-line> Email description goes here </p>
<md-icon class="tc-amber-800">fiber_new</md-icon>
</a>
<md-divider *ngIf="!last" md-inset></md-divider>
</ng-template>
</md-nav-list>
<a md-fab td-sidenav-content color="accent" class="md-fab-position-bottom-right" style="bottom:20px; position: fixed;">
<md-icon>add</md-icon>
</a>
<md-card tdMediaToggle="gt-xs" [mediaClasses]="['push']">
<md-card-header>
<img md-card-avatar src="http://lorempixel.com/40/40/people/9" />
<md-card-title>Firstname Lastname</md-card-title>
<md-card-subtitle>Tuesday, January 3 2017 at 8:39 PM</md-card-subtitle>
<span flex></span>
<div class="pad-top pad-right">
<button md-icon-button><md-icon>reply</md-icon></button>
<button md-icon-button><md-icon>forward</md-icon></button>
<button md-icon-button><md-icon>more_vert</md-icon></button>
</div>
</md-card-header>
<md-divider></md-divider>
<div class="md-padding">
<p>
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
</p>
<p>
Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
</p>
<p>
Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
</p>
<p>
Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.
</p>
<p>
Sincerly<br>-Kimmie
</p>
</div>
<md-divider></md-divider>
<div layout="row" layout-align="space-around center" class="pad">
<button md-button class="tc-grey-600">
<md-icon class="pull-bottom">reply</md-icon>
<div class="md-caption">Reply</div>
</button>
<button md-button class="tc-grey-600">
<md-icon class="pull-bottom">reply_all</md-icon>
<div class="md-caption">Reply All</div>
</button>
<button md-button class="tc-grey-600">
<md-icon class="pull-bottom">forward</md-icon>
<div class="md-caption">Forward</div>
</button>
</div>
</md-card>
</td-layout-nav-list>
</td-layout>
<!--
© 2017 Teradata. All rights reserved.
-->
import {Component, AfterViewInit} from '@angular/core';
import {HttpInterceptorService} from '@covalent/http';
import {bootstrap} from '@angular/platform-browser-dynamic';
import { TdMediaService } from '@covalent/core';
import { DomSanitizer } from '@angular/platform-browser';
import { MdIconRegistry } from '@angular/material';
@Component({
selector: 'covalent-app',
templateUrl: 'app.component.html'
})
export class AppComponent implements AfterViewInit {
routes: Object[] = [
{
title: 'Dashboard',
route: '/',
icon: 'dashboard',
}, {
title: 'Product Dashboard',
route: '/',
icon: 'view_quilt',
}, {
title: 'Product Logs',
route: '/',
icon: 'receipt',
}, {
title: 'Manage Users',
route: '/',
icon: 'people',
}, {
title: 'Covalent Templates',
route: '/',
icon: 'view_module',
},
];
constructor(public media: TdMediaService,
private _iconRegistry: MdIconRegistry,
private _domSanitizer: DomSanitizer) {
this._iconRegistry.addSvgIconInNamespace('assets', 'covalent',
this._domSanitizer.bypassSecurityTrustResourceUrl('https://raw.githubusercontent.com/Teradata/covalent-quickstart/develop/src/assets/icons/covalent.svg'));
}
ngAfterViewInit(): void {
// timeout ONLY for Plunker, remove for production
setTimeout(() => {
this.media.broadcast();
});
}
}
/*
© 2017 Teradata. All rights reserved.
*/
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {AppComponent} from './app.component';
import {MaterialModule} from '@angular/material';
import {CovalentCoreModule} from '@covalent/core';
import {CovalentHttpModule} from '@covalent/http';
import {CovalentDynamicFormsModule} from '@covalent/dynamic-forms';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
MaterialModule,
CovalentCoreModule,
CovalentHttpModule.forRoot(),
CovalentDynamicFormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: []
})
export class PlunkerAppModule {}
platformBrowserDynamic().bootstrapModule(PlunkerAppModule);
/*
© 2017 Teradata. All rights reserved.
*/
// modify this to point to different versions (an empty string '' would mean latest)
let angularVer = '@4.0.0';
let materialVer = '@2.0.0-beta.3';
let flexVer = '@2.0.0-beta.7';
let covalentVer = '@1.0.0-beta.3-2';
let rxjsVer = '@5.2.0'
/** Add Transpiler for Typescript */
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
packages: {
'.': {
defaultExtension: 'ts'
},
'vendor': {
defaultExtension: 'js'
}
}
});
System.config({
map: {
'main': 'main.js',
// Angular specific mappings.
'@angular/animations': 'https://unpkg.com/@angular/animations'+ angularVer +'/bundles/animations.umd.js',
'@angular/animations/browser': 'https://unpkg.com/@angular/animations'+ angularVer +'/bundles/animations-browser.umd.js',
'@angular/core': 'https://unpkg.com/@angular/core'+ angularVer +'/bundles/core.umd.js',
'@angular/common': 'https://unpkg.com/@angular/common'+ angularVer +'/bundles/common.umd.js',
'@angular/compiler': 'https://unpkg.com/@angular/compiler'+ angularVer +'/bundles/compiler.umd.js',
'@angular/http': 'https://unpkg.com/@angular/http'+ angularVer +'/bundles/http.umd.js',
'@angular/forms': 'https://unpkg.com/@angular/forms'+ angularVer +'/bundles/forms.umd.js',
'@angular/router': 'https://unpkg.com/@angular/router'+ angularVer +'/bundles/router.umd.js',
'@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser'+ angularVer +'/bundles/platform-browser.umd.js',
'@angular/platform-browser/animations': 'https://unpkg.com/@angular/platform-browser'+ angularVer +'/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic'+ angularVer +'/bundles/platform-browser-dynamic.umd.js',
'@angular/material': 'https://unpkg.com/@angular/material'+ materialVer +'/bundles/material.umd.js',
'@angular/flex-layout': 'https://unpkg.com/@angular/flex-layout'+ flexVer,
// Covalent specific mappings.
'@covalent/core': 'https://unpkg.com/@covalent/core'+ covalentVer +'/core.umd.js',
'@covalent/http': 'https://unpkg.com/@covalent/http'+ covalentVer +'/http.umd.js',
'@covalent/dynamic-forms': 'https://unpkg.com/@covalent/dynamic-forms'+ covalentVer +'/dynamic-forms.umd.js',
// Rxjs mapping
'rxjs': 'https://unpkg.com/rxjs' + rxjsVer,
},
packages: {
// Thirdparty barrels.
'rxjs': { main: 'index' },
}
});
/*
© 2017 Teradata. All rights reserved.
*/
## Covalent Plunker
This `plnkr` should be used for *demos*, *issue replication* and *idea sharing*.
Go to our [documentation](http://getcovalent.com) site or [repo](https://github.com/Teradata/covalent) for more info.
© 2017 Teradata. All rights reserved.