menu

frontends/dnet-is-application/src/app/app-routing.module.ts

@@ -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({

frontends/dnet-is-application/src/app/app.component.html

@@ -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()"
+          (click)="drawer.toggle()">
-          *ngIf="isHandset$ | async">
           <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
         </button>
         <span>{{title}}</span>

frontends/dnet-is-application/src/app/app.module.ts

@@ -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,

frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.css

@@ -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;
+}

frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.html

@@ -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>
+        <div>
-            <a mat-list-item [routerLink]="['ds/search']">Search</a>
+            <a class="menu-item" [routerLink]="['ds/search']">Search</a>
-        </mat-nav-list>
+        </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>
+        <div>
-            <a mat-list-item [routerLink]="['wf_history']">Workflow History</a>
+            <a class="menu-item" [routerLink]="['wf_history']">Workflow History</a>
-        </mat-nav-list>
+        </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>
+        <div>
-            <a mat-list-item [routerLink]="['info']">Container Info</a>
+            <a class="menu-item" [routerLink]="['info']">Container Info</a>
-        </mat-nav-list>
+        </div>
     </mat-expansion-panel>
-</mat-accordion>
+</mat-accordion>

frontends/dnet-is-application/src/app/main-menu-panels/main-menu-panels.component.ts

@@ -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',

frontends/dnet-is-application/src/app/resources/resources.component.html

@@ -0,0 +1 @@
+<p>resources works!</p>

frontends/dnet-is-application/src/app/resources/resources.component.spec.ts

@@ -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();
+  });
+});

frontends/dnet-is-application/src/app/resources/resources.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-resources',
+  templateUrl: './resources.component.html',
+  styleUrls: ['./resources.component.css']
+})
+export class ResourcesComponent {
+
+}

frontends/dnet-is-application/src/styles.css

@@ -67,4 +67,8 @@ th, td {
 
 .badge-warning {
     background-color:darkorange;
+}
+
+.badge-info {
+    background-color: cornflowerblue
 }