common/securis.git

<td-layout-nav-list #navList
                    logo="assets:covalent"
                    toolbarTitle="Email App"
                    class="light-blue-red"
                    [opened]="media.registerQuery('gt-sm') | async"
                    [mode] = "side"
                    [sidenavWidth]="(media.registerQuery('gt-xs') | async) ? '350px' : '100%'">
  <div td-toolbar-content layout="row" layout-align="start center" flex>
    <span flex *ngIf="!searchBox.searchVisible"></span>
    <td-search-box #searchBox backIcon="arrow_back" 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 [routerLink]="['/templates']">
            <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 [routerLink]="['/templates/dashboard']">
            <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 [routerLink]="['/templates/email']">
            <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 [routerLink]="['/templates/editor']">
            <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>
    <a md-icon-button mdTooltip="View this code" href="https://github.com/Teradata/covalent-quickstart/tree/develop/src/app/templates" target="_blank"><md-icon svgIcon="assets:github"></md-icon></a>
  </div>
  <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-nav-list td-sidenav-content >
      <template let-i="index" let-last="last" let-hero ngFor [ngForOf]="heroes" [ngForTrackBy]="trackById">
        <a md-list-item>
          <img md-list-avatar src="http://lorempixel.com/40/40/people/{{i+1}}" />
          <h3 md-line> {{hero.name}} </h3>
          <p md-line> Hero ID is: {{hero.id}} </p>
          <md-icon class="tc-amber-800">fiber_new</md-icon>
        </a>
        <md-divider *ngIf="!last" md-inset></md-divider>
      </template>
  </md-nav-list>
  <md-card tdMediaToggle="gt-xs" [mediaClasses]="['side']">
    <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>