src/app/modules/dashboard/dashboard.component.ts
| selector | app-dashboard |
| styleUrls | dashboard.component.css |
| templateUrl | dashboard.component.html |
Methods |
constructor(titleService: Title)
|
||||||
|
Parameters :
|
| maint |
maint()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { Title } from '@angular/platform-browser';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dashboard',
styleUrls: ['dashboard.component.css'],
templateUrl: 'dashboard.component.html'
})
export class DashboardComponent implements OnInit {
constructor(private titleService: Title) {}
ngOnInit() {
this.titleService.setTitle('Dashboard');
console.log('dashboard component loaded');
}
maint() {
window.alert('This feature is under construction');
}
}
<div
class="mdl-grid content"
fxFill
fxLayout="column"
fxLayoutAlign="space-around"
>
<div fxLayout="row">
<div style="padding-right: 20px;">
<section>
<h3 class="component-title">Home Item One</h3>
<app-carousel></app-carousel>
</section>
</div>
<div fxFlex="70%">
<section>
<h3 class="component-title">Home Item Two</h3>
<svg
fxFill
fill="currentColor"
viewBox="0 0 500 250"
class="graph"
style="max-height:33vh;"
>
<use xlink:href="#chart" />
</svg>
</section>
</div>
</div>
<section style="margin-top: 20px;">
<h3 class="component-title">Home Item Three</h3>
<div fxFill fxLayout="row" fxLayoutAlign="space-around center">
<mat-card fxFlex="33">
<mat-card-title id="news-title">Updates</mat-card-title>
<mat-card-content>
<p style="text-decoration:underline; margin-bottom:.1em;">
New Design & New Features
</p>
<p style="margin-bottom:.1em;">
It's a bright and shiny new way to pay!
</p>
<small>Click the link to find out more...</small>
</mat-card-content>
<mat-card-actions>
<button
mat-button
(click)="maint()"
class="mdl-button mdl-js-button mdl-js-ripple-effect"
>
Learn More
</button>
</mat-card-actions>
</mat-card>
<mat-card>
<mat-card-title> New Customer & User </mat-card-title>
<mat-card-subtitle>
Please fill out the form and click create
</mat-card-subtitle>
<mat-card-content>
<mat-list role="list">
<h3 mat-subheader>Select Roles</h3>
<mat-list-item role="listitem">
<mat-checkbox>A2A</mat-checkbox>
</mat-list-item>
<mat-list-item role="listitem">
<mat-checkbox>Pay A Person</mat-checkbox>
</mat-list-item>
<mat-list-item role="listitem">
<mat-checkbox>Pay Bills</mat-checkbox>
</mat-list-item>
</mat-list>
<mat-form-field>
<input matInput type="text" placeholder="Username" #username />
</mat-form-field>
<mat-form-field>
<input matInput type="text" placeholder="Email" #email />
</mat-form-field>
<mat-form-field>
<input matInput type="text" placeholder="First Name" #firstName />
</mat-form-field>
<mat-form-field>
<input matInput type="text" placeholder="Last Name" #lastName />
</mat-form-field>
<mat-form-field>
<input matInput type="text" placeholder="Domain" #domain />
</mat-form-field>
</mat-card-content>
<mat-card-actions>
<button mat-button color="primary" (click)="maint()">Create</button>
</mat-card-actions>
</mat-card>
</div>
</section>
</div>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 500 250"
style="position: fixed; left: -1000px; height: -1000px;"
>
<defs>
<g id="chart">
<g id="Gridlines">
<line
fill="#888888"
stroke="#888888"
stroke-miterlimit="10"
x1="0"
y1="27.3"
x2="468.3"
y2="27.3"
/>
<line
fill="#888888"
stroke="#888888"
stroke-miterlimit="10"
x1="0"
y1="66.7"
x2="468.3"
y2="66.7"
/>
<line
fill="#888888"
stroke="#888888"
stroke-miterlimit="10"
x1="0"
y1="105.3"
x2="468.3"
y2="105.3"
/>
<line
fill="#888888"
stroke="#888888"
stroke-miterlimit="10"
x1="0"
y1="144.7"
x2="468.3"
y2="144.7"
/>
<line
fill="#888888"
stroke="#888888"
stroke-miterlimit="10"
x1="0"
y1="184.3"
x2="468.3"
y2="184.3"
/>
</g>
<g id="Numbers">
<text
transform="matrix(1 0 0 1 485 29.3333)"
fill="#888888"
font-family="'Roboto'"
font-size="9"
>
500
</text>
<text
transform="matrix(1 0 0 1 485 69)"
fill="#888888"
font-family="'Roboto'"
font-size="9"
>
400
</text>
<text
transform="matrix(1 0 0 1 485 109.3333)"
fill="#888888"
font-family="'Roboto'"
font-size="9"
>
300
</text>
<text
transform="matrix(1 0 0 1 485 149)"
fill="#888888"
font-family="'Roboto'"
font-size="9"
>
200
</text>
<text
transform="matrix(1 0 0 1 485 188.3333)"
fill="#888888"
font-family="'Roboto'"
font-size="9"
>
100
</text>
<text
transform="matrix(1 0 0 1 0 249.0003)"
fill="#888888"
font-family="'Roboto'"
font-size="9"
>
1
</text>
<text
transform="matrix(1 0 0 1 78 249.0003)"
fill="#888888"
font-family="'Roboto'"
font-size="9"
>
2
</text>
<text
transform="matrix(1 0 0 1 154.6667 249.0003)"
fill="#888888"
font-family="'Roboto'"
font-size="9"
>
3
</text>
<text
transform="matrix(1 0 0 1 232.1667 249.0003)"
fill="#888888"
font-family="'Roboto'"
font-size="9"
>
4
</text>
<text
transform="matrix(1 0 0 1 309 249.0003)"
fill="#888888"
font-family="'Roboto'"
font-size="9"
>
5
</text>
<text
transform="matrix(1 0 0 1 386.6667 249.0003)"
fill="#888888"
font-family="'Roboto'"
font-size="9"
>
6
</text>
<text
transform="matrix(1 0 0 1 464.3333 249.0003)"
fill="#888888"
font-family="'Roboto'"
font-size="9"
>
7
</text>
</g>
<g id="Layer_5">
<polygon
opacity="0.36"
stroke-miterlimit="10"
points="0,223.3 48,138.5 154.7,169 211,88.5
294.5,80.5 380,165.2 437,75.5 469.5,223.3 "
/>
</g>
<g id="Layer_4">
<polygon
stroke-miterlimit="10"
points="469.3,222.7 1,222.7 48.7,166.7 155.7,188.3 212,132.7
296.7,128 380.7,184.3 436.7,125 "
/>
</g>
</g>
</defs>
</svg>
dashboard.component.css
html,
body {
font-family: 'Roboto', 'Helvetica', sans-serif;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 24px;
}
.layout .header .mdl-textfield {
padding: 0px;
margin-top: 41px;
}
.layout .header .mdl-textfield .mdl-textfield__expandable-holder {
bottom: 19px;
}
.layout .mdl-layout__header .mdl-layout__drawer-button {
color: rgba(0, 0, 0, 0.54);
}
.mdl-layout__drawer .avatar {
margin-bottom: 16px;
}
.drawer {
border: none;
}
/* iOS Safari specific workaround */
.drawer .mdl-menu__container {
z-index: -1;
}
.drawer .navigation {
z-index: -2;
}
/* END iOS Safari specific workaround */
.drawer .mdl-menu .mdl-menu__item {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.drawer-header {
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 16px;
height: 151px;
}
.avatar-dropdown {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: relative;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
}
.navigation {
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.layout .navigation .mdl-navigation__link {
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
color: rgba(255, 255, 255, 0.56);
font-weight: 500;
}
.layout .navigation .mdl-navigation__link:hover {
background-color: #00bcd4;
color: #37474f;
}
.navigation .mdl-navigation__link .material-icons {
font-size: 24px;
color: rgba(255, 255, 255, 0.56);
margin-right: 32px;
}
.content {
max-width: 1080px;
}
.charts {
-webkit-align-items: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
}
/* TODO: Find a proper solution to have the graphs
* not float around outside their container in IE10/11.
* Using a browserhacks.com solution for now.
*/
_:-ms-input-placeholder,
:root .graphs {
min-height: 664px;
}
_:-ms-input-placeholder,
:root .graph {
max-height: 300px;
}
/* TODO end */
.graph:nth-child(3) {
color: #00b9d8;
}
.graph:nth-child(2) {
color: #d9006e;
}
.cards {
-webkit-align-items: flex-start;
-ms-flex-align: start;
-ms-grid-row-align: flex-start;
align-items: flex-start;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
}
.cards .separator {
height: 32px;
}
.cards .mdl-card__title.mdl-card__title {
color: white;
font-size: 24px;
font-weight: 400;
}
.cards ul {
padding: 0;
}
.cards h3 {
font-size: 1em;
}
.updates .mdl-card__title {
min-height: 120px;
max-height: 300px;
background-image: url('../../../assets/news.png');
background-position: 100% 100%;
background-repeat: no-repeat;
}
@media (max-width: 310px) {
.updates .mdl-card__title {
background-image: none;
}
}
.cards .mdl-card__actions a {
color: #00bcd4;
text-decoration: none;
}
.options h3 {
margin: 0;
}
.options .mdl-checkbox__box-outline {
border-color: rgba(255, 255, 255, 0.89);
}
.options ul {
margin: 0;
list-style-type: none;
}
.options li {
margin: 4px 0;
}
.options .material-icons {
color: rgba(255, 255, 255, 0.89);
}
.options .mdl-card__actions {
height: 64px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
box-sizing: border-box;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.chart {
max-height: 175px;
}