mirror of
https://github.com/d0zingcat/gocryptotrader.git
synced 2026-05-13 23:16:45 +00:00
Expandable tiles for dashboard
This commit is contained in:
GloriousCode
@@ -1,54 +1,51 @@
|
||||
<app-navbar class="navbar mat-elevation-z6"></app-navbar>
|
||||
|
||||
<mat-sidenav-container class="container ">
|
||||
<mat-sidenav #sidenav mode="side" class="sidebar" opened="true">
|
||||
<mat-nav-list>
|
||||
<mat-list-item routerLink="dashboard" routerLinkActive="dashboard-highlight">
|
||||
<mat-icon>view_quilt</mat-icon>
|
||||
<h3>Dashboard</h3>
|
||||
</mat-list-item>
|
||||
<mat-list-item routerLink="wallet" routerLinkActive="wallet-highlight">
|
||||
<mat-icon>account_balance_wallet</mat-icon>
|
||||
<h3>Wallet</h3>
|
||||
</mat-list-item>
|
||||
<mat-list-item routerLink="trading" routerLinkActive="trading-highlight">
|
||||
<mat-icon>add_shopping_cart</mat-icon>
|
||||
<h3>Trading</h3>
|
||||
</mat-list-item>
|
||||
<mat-list-item routerLink="history" routerLinkActive="history-highlight">
|
||||
<mat-icon>history</mat-icon>
|
||||
<h3>History</h3>
|
||||
</mat-list-item>
|
||||
<mat-list-item routerLink="settings" routerLinkActive="settings-highlight">
|
||||
<mat-icon>settings</mat-icon>
|
||||
<h3>Settings</h3>
|
||||
</mat-list-item>
|
||||
<mat-list-item routerLink="settings" routerLinkActive="settings-highlight">
|
||||
<mat-icon>thumb_up</mat-icon>
|
||||
<h3>Donate</h3>
|
||||
</mat-list-item>
|
||||
<mat-list-item routerLink="settings" routerLinkActive="settings-highlight">
|
||||
<mat-icon>grade</mat-icon>
|
||||
<a href="https://github.com/thrasher-/gocryptotrader" target="_blank">
|
||||
<h3>GitHub</h3>
|
||||
</a>
|
||||
</mat-list-item>
|
||||
<mat-list-item >
|
||||
<mat-icon>view_agenda</mat-icon>
|
||||
<a href="https://trello.com/b/ZAhMhpOy/gocryptotrader" target="_blank">
|
||||
<h3>Trello</h3>
|
||||
</a>
|
||||
</mat-list-item>
|
||||
<mat-list-item routerLink="settings" routerLinkActive="settings-highlight">
|
||||
<mat-icon>bug_report</mat-icon>
|
||||
<a href="https://github.com/thrasher-/gocryptotrader/issues/new" target="_blank">
|
||||
<h3>Report a bug</h3>
|
||||
</a>
|
||||
</mat-list-item>
|
||||
|
||||
</mat-nav-list>
|
||||
|
||||
</mat-sidenav>
|
||||
|
||||
<router-outlet class="main"></router-outlet>
|
||||
</mat-sidenav-container>
|
||||
<mat-sidenav #sidenav mode="side" class="sidebar" opened="true">
|
||||
<mat-nav-list>
|
||||
<mat-list-item routerLink="dashboard" routerLinkActive="dashboard-highlight">
|
||||
<mat-icon>view_quilt</mat-icon>
|
||||
<h3>Dashboard</h3>
|
||||
</mat-list-item>
|
||||
<mat-list-item routerLink="wallet" routerLinkActive="wallet-highlight">
|
||||
<mat-icon>account_balance_wallet</mat-icon>
|
||||
<h3>Wallet</h3>
|
||||
</mat-list-item>
|
||||
<mat-list-item routerLink="trading" routerLinkActive="trading-highlight">
|
||||
<mat-icon>add_shopping_cart</mat-icon>
|
||||
<h3>Trading</h3>
|
||||
</mat-list-item>
|
||||
<mat-list-item routerLink="history" routerLinkActive="history-highlight">
|
||||
<mat-icon>history</mat-icon>
|
||||
<h3>History</h3>
|
||||
</mat-list-item>
|
||||
<mat-list-item routerLink="settings" routerLinkActive="settings-highlight">
|
||||
<mat-icon>settings</mat-icon>
|
||||
<h3>Settings</h3>
|
||||
</mat-list-item>
|
||||
<mat-list-item routerLink="donate" routerLinkActive="donate-highlight">
|
||||
<mat-icon>thumb_up</mat-icon>
|
||||
<h3>Donate</h3>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon>grade</mat-icon>
|
||||
<a href="https://github.com/thrasher-/gocryptotrader" target="_blank">
|
||||
<h3>GitHub</h3>
|
||||
</a>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon>view_agenda</mat-icon>
|
||||
<a href="https://trello.com/b/ZAhMhpOy/gocryptotrader" target="_blank">
|
||||
<h3>Trello</h3>
|
||||
</a>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-icon>bug_report</mat-icon>
|
||||
<a href="https://github.com/thrasher-/gocryptotrader/issues/new" target="_blank">
|
||||
<h3>Report a bug</h3>
|
||||
</a>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</mat-sidenav>
|
||||
<router-outlet class="main"></router-outlet>
|
||||
</mat-sidenav-container>
|
||||
|
||||
@@ -1,60 +1,17 @@
|
||||
<mat-grid-list cols="3" rowHeight="24rem">
|
||||
<mat-grid-tile [colspan]="1" [rowspan]="2">
|
||||
<mat-grid-tile [colspan]="tile.columns" [rowspan]="tile.rows" *ngFor="let tile of dashboard.tiles">
|
||||
<mat-card class="full-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Shiba Inu</mat-card-title>
|
||||
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
|
||||
<mat-card-title>{{tile.title}}</mat-card-title>
|
||||
<mat-card-subtitle>{{tile.subTitle}}</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
HI
|
||||
{{tile.content}}
|
||||
</mat-card-content>
|
||||
<mat-card-footer>
|
||||
<button mat-button>EXPAND</button>
|
||||
<button *ngIf="!expanded" (click)="expandTile(tile)" mat-button>EXPAND</button>
|
||||
<button *ngIf="expanded" (click)="resetTiles()" mat-button>RESTORE</button>
|
||||
</mat-card-footer>
|
||||
</mat-card>
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile [colspan]="2" [rowspan]="1">
|
||||
<mat-card class="full-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Shiba Inu</mat-card-title>
|
||||
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
HI
|
||||
</mat-card-content>
|
||||
|
||||
<mat-card-footer>
|
||||
<button mat-button>EXPAND</button>
|
||||
</mat-card-footer>
|
||||
</mat-card>
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile [colspan]="1" [rowspan]="1">
|
||||
<mat-card class="full-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Shiba Inu</mat-card-title>
|
||||
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
HI
|
||||
</mat-card-content>
|
||||
|
||||
<mat-card-footer>
|
||||
<button mat-button>EXPAND</button>
|
||||
</mat-card-footer>
|
||||
</mat-card>
|
||||
</mat-grid-tile>
|
||||
<mat-grid-tile [colspan]="1" [rowspan]="1">
|
||||
<mat-card class="full-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>4 Inu</mat-card-title>
|
||||
<mat-card-subtitle>Dog Breed</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
HI
|
||||
</mat-card-content>
|
||||
<mat-card-footer>
|
||||
<button mat-button>EXPAND</button>
|
||||
</mat-card-footer>
|
||||
</mat-card>
|
||||
</mat-grid-tile>
|
||||
</mat-grid-list>
|
||||
@@ -1,18 +1,63 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import {Component, OnInit }from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboard.component.scss'],
|
||||
@Component( {
|
||||
selector:'app-dashboard',
|
||||
templateUrl:'./dashboard.component.html',
|
||||
styleUrls:['./dashboard.component.scss'],
|
||||
})
|
||||
|
||||
export class DashboardComponent implements OnInit {
|
||||
constructor()
|
||||
{
|
||||
}
|
||||
public dashboard:any;
|
||||
public expanded:boolean = false;
|
||||
constructor() {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
ngOnInit() {
|
||||
this.resetTiles();
|
||||
}
|
||||
|
||||
public expandTile(tile:any) {
|
||||
for(var i = 0; i< this.dashboard.tiles.length; i++) {
|
||||
if(this.dashboard.tiles[i].title === tile.title ) {
|
||||
this.dashboard.tiles[i].rows = 2;
|
||||
this.dashboard.tiles[i].columns = 3;
|
||||
this.expanded = true;
|
||||
} else {
|
||||
this.dashboard.tiles[i].rows = 0;
|
||||
this.dashboard.tiles[i].columns = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public resetTiles() {
|
||||
this.expanded = false;
|
||||
this.dashboard = {tiles:[ {
|
||||
title:'Trade History:',
|
||||
subTitle:'Trade History',
|
||||
content:'<app-trade-history></app-trade-history>',
|
||||
columns:1,
|
||||
rows:2,
|
||||
}, {
|
||||
title:'Price History:',
|
||||
subTitle:'Price History',
|
||||
content:'<app-price-history></app-price-history>',
|
||||
columns:2,
|
||||
rows:1,
|
||||
}, {
|
||||
title:'My Orders:',
|
||||
subTitle:'My Orders',
|
||||
content:'<app-my-orders></app-my-orders>',
|
||||
columns:1,
|
||||
rows:1,
|
||||
}, {
|
||||
title:'Orders:',
|
||||
subTitle:'Orders',
|
||||
content:'<app-orders></app-orders>',
|
||||
columns:1,
|
||||
rows:1,
|
||||
},
|
||||
]};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user