<!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.4/common/platform.css" rel="stylesheet">
<!-- Load the Covalent/Material prebuilt theme -->
<link href="https://unpkg.com/@covalent/core@1.0.0-beta.4/theming/prebuilt/indigo-pink.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>Covalent Chat Loading...</h3>
</div>
</covalent-app>
</body>
</html>
<!--
© 2017 Teradata. All rights reserved.
-->
<td-layout #layout>
<td-navigation-drawer logo="assets:covalent" sidenavTitle="Chat" name="Firstname Lastname" email="firstname.lastname@company.com">
<md-nav-list>
<ng-template let-item let-last="last" let-index="index" ngFor [ngForOf]="[0,1,2,3,4,5]">
<a md-list-item (click)="layout.close()"><md-icon>group</md-icon> Team {{index}}</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 [sidenavWidth]="'257px'">
<div td-sidenav-toolbar-content layout="row" flex>
<div>
<button md-button [mdMenuTriggerFor]="menu">Team Name <md-icon>arrow_drop_down</md-icon></button>
<md-menu #menu="mdMenu">
<button md-menu-item>Set a status</button>
<button md-menu-item>Profile & account</button>
<button md-menu-item>Preferences</button>
<button md-menu-item>Set yourself to away</button>
<button md-menu-item>Help & feedback</button>
</md-menu>
</div>
<span flex></span>
<div>
<button md-icon-button [mdMenuTriggerFor]="notifyMenu"><md-icon>notifications_off</md-icon></button>
<md-menu #notifyMenu="mdMenu" x-position="before">
<button md-menu-item>Do not disturb ON</button>
<button md-menu-item>Turn OFF</button>
<button md-menu-item>Adjust schedule...</button>
<md-divider></md-divider>
<button md-menu-item>Settings for #channel</button>
<button md-menu-item>Notifications preferences...</button>
</md-menu>
</div>
</div>
<md-nav-list td-sidenav-content (click)="!media.query('gt-sm') && navList.close()">
<a md-list-item><md-icon md-list-icon>sort</md-icon> All Unreads</a>
<a md-list-item><md-icon md-list-icon>chat</md-icon> All Threads</a>
<md-divider></md-divider>
<h3 md-subheader>STARRED</h3>
<ng-template let-item let-i="index" let-last="last" ngFor [ngForOf]="[0,1]">
<a md-list-item><md-icon md-list-icon>#</md-icon> starred-channel-{{i}}</a>
</ng-template>
<md-divider></md-divider>
<h3 md-subheader>CHANNELS (5)</h3>
<ng-template let-item let-i="index" let-last="last" ngFor [ngForOf]="[0,1,2,3]">
<a md-list-item><md-icon md-list-icon>#</md-icon> channel-name-{{i}}</a>
</ng-template>
<md-divider></md-divider>
<h3 md-subheader>DIRECT MESSAGES</h3>
<ng-template let-item let-i="index" let-last="last" ngFor [ngForOf]="[0,1,2,3,4,5]">
<a md-list-item><md-icon color="accent" md-list-icon>lens</md-icon> username{{i}}</a>
</ng-template>
</md-nav-list>
<div td-toolbar-content layout="row" layout-align="start center" flex>
<div>
<div [mdMenuTriggerFor]="channelMenu" class="cursor-hover">#channel</div>
<md-menu #channelMenu="mdMenu">
<button md-menu-item>Jump to date...</button>
<button md-menu-item>Invite team members to join...</button>
<button md-menu-item>View channel details</button>
<button md-menu-item>Additional options...</button>
<md-divider></md-divider>
<button md-menu-item>Notification preferences</button>
<button md-menu-item>Mute #channel</button>
<md-divider></md-divider>
<button md-menu-item>Add an app or integration</button>
<md-divider></md-divider>
<button md-menu-item>Leave #channel</button>
</md-menu>
<div layout="row" layout-align="start center">
<md-icon class="md-caption">star</md-icon>
<md-icon class="md-caption push-left-sm">person</md-icon>
<span class="md-caption">94</span>
<md-icon class="md-caption push-left-sm">note</md-icon>
<span class="md-caption">12</span>
<span class="md-caption push-left-sm">channel description</span>
</div>
</div>
<span flex></span>
<td-search-box placeholder="Search" [showUnderline]="false"></td-search-box>
<button md-icon-button mdTooltip="Call"><md-icon>phone</md-icon></button>
<button md-icon-button mdTooltip="Conversation settings"><md-icon>settings</md-icon></button>
<button md-icon-button mdTooltip="Show conversation details" (click)="channelInfo.toggle()"><md-icon>chrome_reader_mode</md-icon></button>
<button md-icon-button mdTooltip="Show activity"><md-icon>@</md-icon></button>
<button md-icon-button mdTooltip="Show starred items"><md-icon>star_border</md-icon></button>
<button md-icon-button mdTooltip="More items"><md-icon>more_vert</md-icon></button>
</div>
<md-sidenav-container fullscreen>
<md-sidenav #channelInfo mode="side" align="end">
<div layout="column" layout-fill>
<md-toolbar>
<span>About #channel</span>
<span flex></span>
<button md-icon-button (click)="channelInfo.toggle()"><md-icon>cancel</md-icon></button>
</md-toolbar>
</div>
</md-sidenav>
<md-card tdMediaToggle="gt-xs" [mediaClasses]="['push-sm']">
<md-list>
<ng-template let-item let-i="index" let-last="last" ngFor [ngForOf]="[0,1,2,3,4,5,6,7,8,9]">
<md-list-item>
<img md-list-avatar src="http://lorempixel.com/40/40/people/{{i}}" />
<h3 md-line class="cursor-pointer"> Firstname Lastname </h3>
<p md-line>
<span class="text-wrap">
{{ 'Farm-to-table poke distillery, bushwick messenger bag vaporware neutra artisan paleo. Single-origin coffee shabby chic glossier lumbersexual chambray dreamcatcher, blue bottle raclette.' | truncate:80 }}
</span>
</p>
</md-list-item>
<md-divider *ngIf="!last" md-inset></md-divider>
</ng-template>
</md-list>
</md-card>
</md-sidenav-container>
<td-layout-footer-inner>
<div layout="row" layout-align="start center">
<div>
<button md-icon-button mdTooltip="Add content" mdTooltipPosition="after" [mdMenuTriggerFor]="chatMenu"><md-icon>add</md-icon></button>
<md-menu #chatMenu="mdMenu">
<button md-menu-item>Code or text snippet</button>
<button md-menu-item>Google Docs file</button>
<button md-menu-item>Post</button>
<button md-menu-item>Google Drive</button>
<button md-menu-item>Upload file</button>
</md-menu>
</div>
<md-input-container class="push-left push-right" flex layout="row" floatPlaceholder="never">
<textarea flex mdInput placeholder="message"></textarea>
</md-input-container>
<div>
<button md-icon-button mdTooltip="Add emoji" mdTooltipPosition="before" [mdMenuTriggerFor]="emojiMenu"><md-icon>sentiment_very_satisfied</md-icon></button>
<md-menu #emojiMenu="mdMenu" x-position="before">
<td-menu>
<div td-menu-header>
<md-button-toggle>
<md-icon>access_time</md-icon>
</md-button-toggle>
<md-button-toggle>
<md-icon>sentiment_very_satisfied</md-icon>
</md-button-toggle>
<md-button-toggle>
<md-icon>spa</md-icon>
</md-button-toggle>
<md-button-toggle>
<md-icon>room_service</md-icon>
</md-button-toggle>
</div>
<div style="height:200px;" class="push">
<div layout="row" layout-wrap>
<button flex="20" md-icon-button><md-icon>mood</md-icon></button>
<button flex="20" md-icon-button><md-icon>mood_bad</md-icon></button>
<button flex="20" md-icon-button><md-icon>sentiment_dissatisfied</md-icon></button>
<button flex="20" md-icon-button><md-icon>sentiment_neutral</md-icon></button>
<button flex="20" md-icon-button><md-icon>sentiment_satisfied</md-icon></button>
<button flex="20" md-icon-button><md-icon>sentiment_very_dissatisfied</md-icon></button>
<button flex="20" md-icon-button><md-icon>sentiment_very_satisfied</md-icon></button>
<button flex="20" md-icon-button><md-icon>whatshot</md-icon></button>
<button flex="20" md-icon-button><md-icon>face</md-icon></button>
<button flex="20" md-icon-button><md-icon>pan_tool</md-icon></button>
<button flex="20" md-icon-button><md-icon>pregnant_woman</md-icon></button>
<button flex="20" md-icon-button><md-icon>pets</md-icon></button>
<button flex="20" md-icon-button><md-icon>rowing</md-icon></button>
<button flex="20" md-icon-button><md-icon>touch_app</md-icon></button>
<button flex="20" md-icon-button><md-icon>visibility_off</md-icon></button>
</div>
</div>
<div td-menu-footer>
<div layout="row" layout-align="center center" class="push-sm">
<span class="md-subhead">Emoji Deluxe</span>
<span flex></span>
<span>:happy:</span>
<md-icon>sentiment_very_satisfied</md-icon>
</div>
</div>
</td-menu>
</md-menu>
</div>
</div>
</td-layout-footer-inner>
</td-layout-nav-list>
</td-layout>
import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import { DomSanitizer } from '@angular/platform-browser';
import { MdIconRegistry } from '@angular/material';
@Component({
selector: 'covalent-app',
templateUrl: 'app.component.html'
})
export class AppComponent {
constructor(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'));
}
}
/*
© 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 {MdCardModule} from '@angular/material';
import {MdMenuModule} from '@angular/material';
import {MdInputModule} from '@angular/material';
import {MdButtonModule} from '@angular/material';
import {MdListModule} from '@angular/material';
import {MdIconModule} from '@angular/material';
import {MdSidenavModule} from '@angular/material';
import {MdToolbarModule} from '@angular/material';
import {MdTooltipModule} from '@angular/material';
import {CovalentLayoutModule} from '@covalent/core';
import {CovalentSearchModule} from '@covalent/core';
import {CovalentMediaModule} from '@covalent/core';
import {CovalentMenuModule} from '@covalent/core';
import {CovalentHttpModule} from '@covalent/http';
import { CovalentCommonModule } from '@covalent/core';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
CommonModule,
MdCardModule,
MdMenuModule,
MdInputModule,
MdButtonModule,
MdListModule,
MdIconModule,
MdSidenavModule,
MdToolbarModule,
MdTooltipModule,
CovalentLayoutModule,
CovalentSearchModule,
CovalentMediaModule,
CovalentMenuModule,
CovalentCommonModule,
CovalentHttpModule.forRoot(),
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
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.1.1';
let materialVer = '@2.0.0-beta.5';
let covalentVer = '@1.0.0-beta.4';
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',
// Material specific mappings
'@angular/material': 'https://unpkg.com/@angular/material'+ materialVer +'/bundles/material.umd.js',
// 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',
// Rxjs mapping
'rxjs': 'https://unpkg.com/rxjs' + rxjsVer,
},
packages: {
// Thirdparty barrels.
'rxjs': { main: 'index' },
}
});
/*
© 2017 Teradata. All rights reserved.
*/
## Covalent Chat Template
This `plnkr` should be used for creating Covalent reusable app templates.
Go to our [documentation](http://getcovalent.com) site or [repo](https://github.com/Teradata/covalent) for more info.
© 2017 Teradata. All rights reserved.