menu
This commit is contained in:
parent
cfcd1493a1
commit
085c3123de
|
|
@ -3,11 +3,13 @@ import { RouterModule, Routes } from '@angular/router';
|
|||
import { InfoComponent } from './info/info.component';
|
||||
import { ProtocolsComponent } from './protocols/protocols.component';
|
||||
import { WfHistoryComponent } from './wf-history/wf-history.component';
|
||||
import { ResourcesComponent } from './resources/resources.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path:"info" , component:InfoComponent},
|
||||
{ path:"adv_resources/protocol" , component:ProtocolsComponent},
|
||||
{ path:"wf_history" , component:WfHistoryComponent}
|
||||
{ path:"wf_history" , component:WfHistoryComponent},
|
||||
{ path:"resources/:type" , component:ResourcesComponent}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<mat-sidenav-container class="sidenav-container">
|
||||
<mat-sidenav #drawer class="sidenav" fixedInViewport
|
||||
<mat-sidenav #drawer class="sidenav mat-elevation-z8" fixedInViewport
|
||||
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
|
||||
[mode]="(isHandset$ | async) ? 'over' : 'side'"
|
||||
[opened]="(isHandset$ | async) === false">
|
||||
|
|
@ -12,8 +12,7 @@
|
|||
type="button"
|
||||
aria-label="Toggle sidenav"
|
||||
mat-icon-button
|
||||
(click)="drawer.toggle()"
|
||||
*ngIf="isHandset$ | async">
|
||||
(click)="drawer.toggle()">
|
||||
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
|
||||
</button>
|
||||
<span>{{title}}</span>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,8 @@ import { MainMenuPanelsComponent } from './main-menu-panels/main-menu-panels.com
|
|||
import { MatExpansionModule } from '@angular/material/expansion';
|
||||
import { WfDialog, WfHistoryComponent } from './wf-history/wf-history.component';
|
||||
import { MatDialogModule } from '@angular/material/dialog';
|
||||
import {MatSortModule} from '@angular/material/sort'
|
||||
import {MatSortModule} from '@angular/material/sort';
|
||||
import { ResourcesComponent } from './resources/resources.component'
|
||||
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -36,7 +37,8 @@ import {MatSortModule} from '@angular/material/sort'
|
|||
InfoComponent,
|
||||
ProtocolsComponent,
|
||||
WfHistoryComponent,
|
||||
WfDialog
|
||||
WfDialog,
|
||||
ResourcesComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
|
|
|||
|
|
@ -4,14 +4,35 @@
|
|||
padding-left: 0.4em;
|
||||
padding-right: 0.4em;
|
||||
border-radius: 1em;
|
||||
font-size: 0.7em;
|
||||
color: #fff;
|
||||
background-color:cornflowerblue;
|
||||
width: 2em;
|
||||
text-align: center;
|
||||
float: right;
|
||||
|
||||
}
|
||||
|
||||
.collapse-buttons { text-align: right; }
|
||||
.collapse-buttons button { font-size: 0.6em; }
|
||||
.mat-expansion-panel-spacing { margin: 0; }
|
||||
|
||||
.menu-item {
|
||||
padding-top: 0.3em;
|
||||
padding-bottom: 0.3em;
|
||||
padding-left: 7%;
|
||||
padding-right: 3%;
|
||||
font-size: 0.9em;
|
||||
width: 90%;
|
||||
color: #696969;
|
||||
text-decoration: none !important;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
color: #999;
|
||||
background-color: #eaeaea;
|
||||
}
|
||||
|
||||
.menu-item .badge-label {
|
||||
font-size: 0.6em;
|
||||
float: right;
|
||||
width: 2em;
|
||||
}
|
||||
|
|
@ -9,15 +9,15 @@
|
|||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>Home</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<p>...</p>
|
||||
<div>...</div>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>Datasources</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-nav-list>
|
||||
<a mat-list-item [routerLink]="['ds/search']">Search</a>
|
||||
</mat-nav-list>
|
||||
<div>
|
||||
<a class="menu-item" [routerLink]="['ds/search']">Search</a>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
|
||||
|
||||
|
|
@ -25,39 +25,49 @@
|
|||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>Simple Resources</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-nav-list>
|
||||
<div>
|
||||
<ng-container *ngFor="let r of resTypes">
|
||||
<a mat-list-item [routerLink]="['resources/' + r.id]" *ngIf="r.simple">{{r.name}} <span class="menu-count">{{r.count}}</span></a>
|
||||
<div *ngIf="r.simple">
|
||||
<a class="menu-item" [routerLink]="['resources/' + r.id]">
|
||||
{{r.name}}
|
||||
<span class="badge-label badge-info">{{r.count}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</ng-container>
|
||||
</mat-nav-list>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>Advanced Resources</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-nav-list>
|
||||
<div>
|
||||
<ng-container *ngFor="let r of resTypes">
|
||||
<a mat-list-item [routerLink]="['adv_resources/' + r.id]" *ngIf="!r.simple">{{r.name}} <span class="menu-count">{{r.count}}</span></a>
|
||||
<div *ngIf="!r.simple">
|
||||
<a class="menu-item" [routerLink]="['adv_resources/' + r.id]">
|
||||
{{r.name}}
|
||||
<span class="badge-label badge-info">{{r.count}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</ng-container>
|
||||
</mat-nav-list>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>Logs</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-nav-list>
|
||||
<a mat-list-item [routerLink]="['wf_history']">Workflow History</a>
|
||||
</mat-nav-list>
|
||||
<div>
|
||||
<a class="menu-item" [routerLink]="['wf_history']">Workflow History</a>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>Info</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-nav-list>
|
||||
<a mat-list-item [routerLink]="['info']">Container Info</a>
|
||||
</mat-nav-list>
|
||||
<div>
|
||||
<a class="menu-item" [routerLink]="['info']">Container Info</a>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
</mat-accordion>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import {Component, ViewChild} from '@angular/core';
|
||||
import {Component, ViewChild, ViewEncapsulation} from '@angular/core';
|
||||
import { ResourceType } from '../model/controller.model';
|
||||
import { ISService } from '../is.service';
|
||||
import {MatAccordion} from '@angular/material/expansion';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-main-menu-panels',
|
||||
templateUrl: './main-menu-panels.component.html',
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<p>resources works!</p>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ResourcesComponent } from './resources.component';
|
||||
|
||||
describe('ResourcesComponent', () => {
|
||||
let component: ResourcesComponent;
|
||||
let fixture: ComponentFixture<ResourcesComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ ResourcesComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ResourcesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-resources',
|
||||
templateUrl: './resources.component.html',
|
||||
styleUrls: ['./resources.component.css']
|
||||
})
|
||||
export class ResourcesComponent {
|
||||
|
||||
}
|
||||
|
|
@ -67,4 +67,8 @@ th, td {
|
|||
|
||||
.badge-warning {
|
||||
background-color:darkorange;
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
background-color: cornflowerblue
|
||||
}
|
||||
Loading…
Reference in New Issue