Skip to content

Commit

Permalink
Make left navi collapsible
Browse files Browse the repository at this point in the history
- Move navi start from AppComponent to NavComponent and
  modify things around it so that it actually works.
  • Loading branch information
jvalkeal committed Jul 9, 2020
1 parent 5704e18 commit 68487eb
Show file tree
Hide file tree
Showing 8 changed files with 60 additions and 136 deletions.
10 changes: 1 addition & 9 deletions ui/src/app/app-routing.module.ts
Expand Up @@ -12,15 +12,7 @@ const routes: Routes = [
path: 'dev',
loadChildren: () => import('./dev/dev.module').then(m => m.DevModule),
canLoad: [DevGuard]
},
// {
// path: 'manage',
// loadChildren: () => import('./manage/manage.module').then(m => m.ManageModule)
// },
// {
// path: 'tasks-jobs',
// loadChildren: () => import('./tasks-jobs/tasks-jobs.module').then(m => m.TasksJobsModule)
// }
}
];

@NgModule({
Expand Down
103 changes: 1 addition & 102 deletions ui/src/app/app.component.html
Expand Up @@ -14,108 +14,7 @@
</div>
</clr-header>
<div class="content-container">
<clr-vertical-nav *ngIf="!(shouldProtect|async)">
<clr-vertical-nav-group routerLinkActive="active"
clrVerticalNavGroupExpanded="true"
[appRole]="[]" appFeature="streams">
<!-- <clr-vertical-nav-group routerLinkActive="active" clrVerticalNavGroupExpanded="true">-->
<!-- <clr-icon shape="dashboard" clrVerticalNavIcon></clr-icon>-->
<!-- Dashboards-->
<!-- <clr-vertical-nav-group-children>-->
<!-- <a-->
<!-- clrVerticalNavLink-->
<!-- routerLinkActive="active"-->
<!-- routerLink="dashboard/my-dashboard">-->
<!-- My Dashboard-->
<!-- </a>-->
<!-- </clr-vertical-nav-group-children>-->
<!-- </clr-vertical-nav-group>-->
<clr-icon shape="cloud-scale" clrVerticalNavIcon></clr-icon>
Streams
<clr-vertical-nav-group-children>
<a
clrVerticalNavLink
routerLinkActive="active"
routerLink="streams/list">
Streams
</a>
<a
clrVerticalNavLink
routerLinkActive="active"
routerLink="streams/runtime">
Runtime
</a>
</clr-vertical-nav-group-children>
</clr-vertical-nav-group>
<clr-vertical-nav-group routerLinkActive="active" clrVerticalNavGroupExpanded="true"
[appRole]="[]" appFeature="tasks">
<clr-icon shape="blocks-group" clrVerticalNavIcon></clr-icon>
Tasks / Jobs
<clr-vertical-nav-group-children>
<a
clrVerticalNavLink
routerLinkActive="active"
routerLink="tasks-jobs/tasks">
Tasks
</a>
<a
clrVerticalNavLink
routerLinkActive="active"
routerLink="tasks-jobs/task-executions">
Tasks executions
</a>
<a
clrVerticalNavLink
routerLinkActive="active"
routerLink="tasks-jobs/job-executions">
Jobs executions
</a>
<a
clrVerticalNavLink
routerLinkActive="active"
routerLink="tasks-jobs/schedules"
[appRole]="[]"
appFeature="schedules">
Schedules
</a>
</clr-vertical-nav-group-children>
</clr-vertical-nav-group>
<clr-vertical-nav-group routerLinkActive="active"
clrVerticalNavGroupExpanded="false">
<clr-icon shape="briefcase" clrVerticalNavIcon></clr-icon>
Manage
<clr-vertical-nav-group-children>
<a
clrVerticalNavLink
routerLinkActive="active"
routerLink="manage/apps">
Applications
</a>
<a
clrVerticalNavLink
routerLinkActive="active"
routerLink="manage/records">
Records
</a>
<a
clrVerticalNavLink
routerLinkActive="active"
routerLink="manage/import-export"
[appRole]="[]"
appFeature="streams,tasks">
Import / Export
</a>
</clr-vertical-nav-group-children>
</clr-vertical-nav-group>
<a clrVerticalNavLink routerLink="settings" routerLinkActive="active">
<clr-icon shape="cog" clrVerticalNavIcon></clr-icon>
Settings
</a>
<a clrVerticalNavLink routerLink="dev/dashboard" routerLinkActive="active" *ngIf="isDevEnv">
<clr-icon shape="bug" clrVerticalNavIcon></clr-icon>
Dev. mode
</a>
</clr-vertical-nav>
<app-nav></app-nav>
<div class="content-area">
<router-outlet></router-outlet>
</div>
Expand Down
5 changes: 0 additions & 5 deletions ui/src/app/app.component.ts
@@ -1,6 +1,5 @@
import { Component } from '@angular/core';
import { SecurityService } from './security/service/security.service';
import { environment } from '../environments/environment';

@Component({
selector: 'app-root',
Expand All @@ -11,10 +10,6 @@ export class AppComponent {
shouldProtect = this.securityService.shouldProtect();
securityEnabled = this.securityService.securityEnabled();

get isDevEnv() {
return !environment.production;
}

constructor(
private securityService: SecurityService
) { }
Expand Down
1 change: 0 additions & 1 deletion ui/src/app/app.module.ts
Expand Up @@ -22,7 +22,6 @@ import { map, mergeMap, switchMap } from 'rxjs/operators';
import { Security } from './shared/model/security.model';
import { of } from 'rxjs';
import { ROOT_REDUCERS, metaReducers } from './reducers/reducer';
import { DevModule } from './dev/dev.module';
import { EffectsModule } from '@ngrx/effects';
import { SettingsService } from './settings/service/settings.service';

Expand Down
16 changes: 9 additions & 7 deletions ui/src/app/layout/layout.module.ts
@@ -1,27 +1,29 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LogoComponent } from './logo/logo.component';
import { NavComponent } from './nav/nav.component';
import { ClarityModule } from '@clr/angular';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


import { ClarityModule } from '@clr/angular';
import { NavComponent } from './nav/nav.component';
import { LogoComponent } from './logo/logo.component';
import { SecurityModule } from '../security/security.module';

@NgModule({
declarations: [
LogoComponent,
NavComponent
],
imports: [
RouterModule,
BrowserModule,
BrowserAnimationsModule,
CommonModule,
ClarityModule
ClarityModule,
SecurityModule
],
exports: [
LogoComponent,
NavComponent
NavComponent,
]
})
export class LayoutModule { }
40 changes: 32 additions & 8 deletions ui/src/app/layout/nav/nav.component.html
@@ -1,5 +1,8 @@
<clr-vertical-nav [clrVerticalNavCollapsible]="true">
<clr-vertical-nav-group routerLinkActive="active" clrVerticalNavGroupExpanded="true">
<clr-vertical-nav *ngIf="!(shouldProtect|async)" [clrVerticalNavCollapsible]="true">

<clr-vertical-nav-group routerLinkActive="active"
clrVerticalNavGroupExpanded="true"
[appRole]="[]" appFeature="streams">
<clr-icon shape="cloud-scale" clrVerticalNavIcon></clr-icon>
Streams
<clr-vertical-nav-group-children>
Expand All @@ -18,8 +21,9 @@
</clr-vertical-nav-group-children>
</clr-vertical-nav-group>

<clr-vertical-nav-group routerLinkActive="active" clrVerticalNavGroupExpanded="true">
<clr-icon shape="tasks" clrVerticalNavIcon></clr-icon>
<clr-vertical-nav-group routerLinkActive="active" clrVerticalNavGroupExpanded="true"
[appRole]="[]" appFeature="tasks">
<clr-icon shape="blocks-group" clrVerticalNavIcon></clr-icon>
Tasks / Jobs
<clr-vertical-nav-group-children>
<a
Expand All @@ -40,11 +44,20 @@
routerLink="tasks-jobs/job-executions">
Jobs executions
</a>
<a
clrVerticalNavLink
routerLinkActive="active"
routerLink="tasks-jobs/schedules"
[appRole]="[]"
appFeature="schedules">
Schedules
</a>
</clr-vertical-nav-group-children>
</clr-vertical-nav-group>

<clr-vertical-nav-group routerLinkActive="active" clrVerticalNavGroupExpanded="false">
<clr-icon shape="cog" clrVerticalNavIcon></clr-icon>
<clr-vertical-nav-group routerLinkActive="active"
clrVerticalNavGroupExpanded="false">
<clr-icon shape="briefcase" clrVerticalNavIcon></clr-icon>
Manage
<clr-vertical-nav-group-children>
<a
Expand All @@ -62,10 +75,21 @@
<a
clrVerticalNavLink
routerLinkActive="active"
routerLink="manage/import-export">
routerLink="manage/import-export"
[appRole]="[]"
appFeature="streams,tasks">
Import / Export
</a>

</clr-vertical-nav-group-children>
</clr-vertical-nav-group>

<a clrVerticalNavLink routerLink="settings" routerLinkActive="active">
<clr-icon shape="cog" clrVerticalNavIcon></clr-icon>
Settings
</a>
<a clrVerticalNavLink routerLink="dev/dashboard" routerLinkActive="active" *ngIf="isDevEnv">
<clr-icon shape="bug" clrVerticalNavIcon></clr-icon>
Dev. mode
</a>

</clr-vertical-nav>
4 changes: 4 additions & 0 deletions ui/src/app/layout/nav/nav.component.scss
@@ -0,0 +1,4 @@
// Needed for left navi bar to span all the way down
:host {
display: flex;
}
17 changes: 13 additions & 4 deletions ui/src/app/layout/nav/nav.component.ts
@@ -1,16 +1,25 @@
import { Component, OnInit } from '@angular/core';
import { RouterModule } from '@angular/router';
import { SecurityService } from '../../security/service/security.service';
import { environment } from '../../../environments/environment';

@Component({
selector: 'app-nav',
templateUrl: './nav.component.html',
styles: []
styleUrls: ['./nav.component.scss']
})
export class NavComponent implements OnInit {

constructor() { }
shouldProtect = this.securityService.shouldProtect();
securityEnabled = this.securityService.securityEnabled();

ngOnInit(): void {
get isDevEnv() {
return !environment.production;
}

constructor(
private securityService: SecurityService
) { }

ngOnInit(): void {
}
}

0 comments on commit 68487eb

Please sign in to comment.