andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

make main toolbar look a little bit more modern

Browse Source
This commit is contained in:
Andreas Huber
2023-02-26 09:32:08 +01:00
parent dc8a462031
commit 3a28e03b6a
5 changed files with 29 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
pdb-js/src/app/app.component.html
View File

@@ -1,9 +1,15 @@
<div id="main-toolbar">
<a href="/" title="Home"><img src="assets/img/home.svg" class="icon-small" aria-hidden="false" aria-label="go to home page" /></a>
<a href="/vis" title="Visualization"><img src="assets/img/scatter-chart2.svg" class="icon-small" aria-hidden="false" aria-label="go to visualization page" /></a>
<a href="/dashboard" title="Dashboards"><img src="assets/img/dashboard-line.svg" class="icon-small" aria-hidden="false" aria-label="go to dashboard page" /></a>
<!--
<a href="/">Home</a>
<a href="/"><img src="assets/img/home.svg" aria-hidden="false" aria-label="go to home page" /></a>
<a href="/vis" aria-label="go to visualization page">Visualization</a>
<a href="/dashboard" aria-label="go to dashboard page">Dashboards</a>
-->
<button mat-button [routerLink]="['/']"><img src="assets/img/home.svg" aria-hidden="false" aria-label="go to home page" /></button>
<button mat-button [routerLink]="['/vis']">Visualization</button>
<button mat-button [routerLink]="['/dashboard']">Dashboards</button>
</div>
<router-outlet></router-outlet>

11
pdb-js/src/app/app.component.scss
View File

@@ -1,11 +1,14 @@
#main-toolbar {
height: 2.0em;
line-height: 3em;
width: 100%;
padding-bottom: 0.5em;
border-bottom: solid 1px black;
background-color: #eee;
border-bottom: solid 1px #bbb;
}
#main-toolbar button img {
width: 1.5rem;
vertical-align: sub;
}
.right{

2
pdb-js/src/app/dashboard-page/dashboard-page.component.html
View File

@@ -1,6 +1,6 @@
<div class="toolbar">
<button mat-stroked-button (click)="createNewDashboard()">New</button>
<button mat-button (click)="createNewDashboard()">New</button>
</div>
<div *ngIf="loading">
loading

6
pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html
View File

@@ -3,9 +3,9 @@
</div>
<div *ngIf="dashboard !== undefined" class="content">
<div class="toolbar">
<button mat-stroked-button (click)="addText()">Add Text</button>
<button mat-stroked-button (click)="addPlot()">Add Plot</button>
<button mat-stroked-button (click)="save()">Save Dashboard</button>
<button mat-button (click)="addText()">Add Text</button>
<button mat-button (click)="addPlot()">Add Plot</button>
<button mat-button (click)="save()">Save Dashboard</button>
</div>
<h1>{{dashboard.name}}</h1>
<p>{{dashboard.description}}</p>

9
pdb-js/src/styles.scss
View File

@@ -103,6 +103,15 @@ button[disabled] .icon-inline {
background-color: #eee;
}
.icon-middle {
width: 2.5em;
height: 2.5em;
margin: 0.2em;
}
.icon-middle:hover {
background-color: #eee;
}
.icon-large {
width: 8em;
height: 8em;