diff --git a/src/app/app.component.html b/src/app/app.component.html
index 289f05cc902a2abeb797683b254b3a2d9600ca59..38234e5626c026336f46e68af6ae2666d08770bb 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -17,6 +17,7 @@
<mat-toolbar color="primary">
<div fxLayout="row" style="width: 100%">
<mat-toolbar-row style="width: 100%">
+ <button mat-icon-button aria-label="toggle menu" (click)=toggleMenu()><mat-icon>menu</mat-icon></button>
<img src="assets/MASSIVElogoTransparent128x128.png" style="width: auto; height: 90%">
<span>Strudel2</span>
<span fxFlex></span>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index a4e34b459291e0c6edd5211e1b07225245f003e9..146a963e17ce1d79abd05150c0b3058275c4b32c 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,6 +6,7 @@ import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import { MatSnackBar } from '@angular/material';
import {OverlayContainer} from '@angular/cdk/overlay';
import { Computesite, Health } from './computesite';
+import {SettingsService } from './settings.service';
@@ -27,6 +28,7 @@ export class AppComponent {
constructor(private tesService: TesService,
private authService: AuthorisationService,
private computesitesService: ComputesitesService,
+ private settingsService: SettingsService,
public snackBar: MatSnackBar) {
};
@@ -39,10 +41,18 @@ export class AppComponent {
this.computesitesService.setStatusMsg(this.statusMsg);
this.authService.setStatusMsg(this.statusMsg);
this.statusMsg.subscribe(msg => this.displayMessage(msg));
- this.setTheme()
+ this.settingsService.theme$.subscribe((v) => this.setTheme(v))
}
+ toggleMenu() {
+ if (this.settingsService.menuToggle$.value == true) {
+ this.settingsService.menuToggle$.next(false);
+ return
+ }
+ this.settingsService.menuToggle$.next(true);
+ }
+
private displayMessage(msg) {
if (msg === null || msg == "") {
@@ -53,9 +63,7 @@ export class AppComponent {
this.snackBarRef = this.snackBar.open(msg,'Dismiss');
}
}
- setTheme() {
- var theme;
- theme=localStorage.getItem('strudel-theme');
+ setTheme(theme: string) {
if (theme == null) {
theme = 'strudel-theme-light';
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1569813b970e2c59b687eaa3879cc889af377498..0b2dfb55ba4ab9848421cb18d387f20d99b22df3 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -55,6 +55,7 @@ import { LoginComponent } from './login/login.component';
import { SettingsComponent } from './settings/settings.component';
import { LogoutComponent } from './logout/logout.component';
import { AccountinfoComponent } from './accountinfo/accountinfo.component';
+import {SettingsService } from './settings.service';
// import { FileExplorerModule } from './file-explorer/file-explorer.module';
@@ -116,7 +117,7 @@ import { AccountinfoComponent } from './accountinfo/accountinfo.component';
],
entryComponents: [ LogoutdialogComponent, ModaldialogComponent],
- providers: [ StrudelappsService, ComputesitesService, TesService, SubmitAppService, MatDialog, AuthorisationService,BackendSelectionService],
+ providers: [ StrudelappsService, ComputesitesService, TesService, SubmitAppService, MatDialog, AuthorisationService,BackendSelectionService,SettingsService],
bootstrap: [AppComponent]
})
export class AppModule { }
diff --git a/src/app/launcher/launcher.component.html b/src/app/launcher/launcher.component.html
index 44681f86109f93912fa1d43ef6e71234e421fabd..22193a8bc145d04129bd9b0a9952326092520a13 100644
--- a/src/app/launcher/launcher.component.html
+++ b/src/app/launcher/launcher.component.html
@@ -1,7 +1,6 @@
<!--<div fxFlex style="flex: 1 1 0%; box-sizing: border-box">-->
<mat-sidenav-container style="height: 100%" autosize>
- <mat-sidenav #idSideNav mode="side" opened>
- <div *ngIf="usemenu">
+ <mat-sidenav #idSideNav mode="side" [opened]="(settingsService.menuToggle$ | async) && (settingsService.useMenu$ | async)">
<div fxLayout="column" fxLayout="stretch" style="height: 100%">
<nav>
<mat-accordion style="width: 100%" [displayMode]="flat">
@@ -37,10 +36,9 @@
</nav>
</div>
<div fxFlex></div>
- </div>
</mat-sidenav>
<mat-sidenav-content style="height: 100%">
-<!--<div *ngIf="usetabs" class=darker-theme>
+ <div *ngIf="!(settingsService.useMenu$ | async)" class=darker-theme>
<nav mat-tab-nav-bar color="accent" backgroundColor="primary">
<a mat-tab-link
*ngFor="let id of (computeSitesService.appidentities | async)"
@@ -75,7 +73,7 @@
</a>
</nav>
</div>
-</div>-->
+</div>
<div fxLayout="column" fxLayoutAlign="space-between stretch" style="width: 100%; height: 100%" >
<div *ngIf="identitySubject | async as identity">
diff --git a/src/app/launcher/launcher.component.ts b/src/app/launcher/launcher.component.ts
index 8cf99d56946e3d429e895639b524f8688279ae35..786435086ee52359a08092755676ab655c51e864 100644
--- a/src/app/launcher/launcher.component.ts
+++ b/src/app/launcher/launcher.component.ts
@@ -22,6 +22,7 @@ import { LogoutdialogComponent } from '../logoutdialog/logoutdialog.component';
import { SshAuthzServer } from '../identity';
import { ComputesitesService } from '../computesites.service';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { SettingsService} from '../settings.service';
@@ -58,8 +59,6 @@ export class LauncherComponent implements OnInit {
private identity$: Observable<Identity>;
private app$: Observable<Strudelapp>;
private app: Strudelapp;
- private usetabs: boolean;
- private usemenu: boolean;
constructor( public dialog: MatDialog,
@@ -70,6 +69,7 @@ export class LauncherComponent implements OnInit {
private router: Router,
private route: ActivatedRoute,
private strudelappsService: StrudelappsService,
+ private settingsService: SettingsService,
) {
this.subscriptions = [];
this.subscriptions.push(this.authService.sshAuthzServers.subscribe(o => {this.updateSshAuthZServers(o)}));
@@ -172,8 +172,6 @@ export class LauncherComponent implements OnInit {
this.app$.subscribe((v) => { console.log('app changed'); console.log(v)});*/
//this.site$.subscribe ( (v) => { this.getId(v) });
//this.app$.subscribe( (v) => { this.getApp(v) });
- this.usetabs = false;
- this.usemenu = true;
}
updateIdApp(params: ParamMap) {
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
index 273c8184ab0895dfc0e8627692efdf849df347ae..f75a224a9a390bd759f0ee21ae3a246128d38b77 100644
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -1,38 +1,46 @@
-
-<div fxLayout="row" style="width: 100%">
- <div fxFlex></div>
- <div gdAreas = "header header | apiselect apiselect | themeselect themeselect | loadconfig resetconfig | done done">
- <div gdArea="header"><h2 style="width: 100%">Settings</h2></div>
- <div gdArea="apiselect">
- <div *ngIf="(backendSelectionService.apiservers | async) !== undefined">
- <mat-form-field>
- <mat-label>API Server</mat-label>
- <mat-select [ngModel]="selectedApiServer" (selectionChange)="backendSelectionService.setApiServer($event.value)">
- <mat-option *ngFor="let apis of backendSelectionService.apiservers|async" [value]="apis">
- {{ apis.name }}
- </mat-option>
- </mat-select>
- </mat-form-field>
- </div>
- </div>
- <div gdArea="themeselect">
- <mat-form-field >
- <mat-label>Theme</mat-label>
- <mat-select [(value)] ="theme" (selectionChange)="selectTheme($event.value)">
- <mat-option *ngFor="let opttheme of themes" [value]="opttheme">
- {{ opttheme.name }}
- </mat-option>
- </mat-select>
- </mat-form-field>
+<div fxLayout="row" fxLayoutAlign="space-around">
+<div fxLayout="column" style="max-width: 500px">
+ <div><h2>Settings</h2></div>
+ <div><h3>Appearance</h3></div>
+ <div>
+ <mat-form-field >
+ <mat-label>Theme</mat-label>
+ <mat-select [(value)] ="theme" (selectionChange)="selectTheme($event.value)">
+ <mat-option *ngFor="let opttheme of themes" [value]="opttheme">
+ {{ opttheme.name }}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ <div>
+ <mat-button-toggle-group (change)="toggleMenu($event.value)" [value]="selectedVal">
+ <mat-button-toggle value="true">Menu</mat-button-toggle>
+ <mat-button-toggle value="false">Tabs</mat-button-toggle>
+ </mat-button-toggle-group>
+ </div>
+
+ <div><h3>Advanced</h3></div>
+ <div >
+ <div *ngIf="(backendSelectionService.apiservers | async) !== undefined">
+ <mat-form-field>
+ <mat-label>API Server</mat-label>
+ <mat-select [ngModel]="selectedApiServer" (selectionChange)="backendSelectionService.setApiServer($event.value)">
+ <mat-option *ngFor="let apis of backendSelectionService.apiservers|async" [value]="apis">
+ {{ apis.name }}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
</div>
- <div gdArea="loadconfig">
+ </div>
+ <div fxLayout="row">
+ <div>
<button type="button" mat-button (click)="fileInput.click()">Load Config</button>
<input hidden (change)="loadConfig($event)" accept=".json" #fileInput type="file" id="file">
</div>
- <div gdArea="resetconfig">
+ <div>
<button mat-button (click)=resetConfig()>Reset Config</button>
</div>
- <div gdArea="done"><button mat-flat-button color=primary (click)="location.back()" style="width: 100%">Done</button></div>
</div>
- <div fxFlex></div>
+ <div gdArea="done"><button mat-flat-button color=primary (click)="location.back()" style="width: 100%">Done</button></div>
+</div>
</div>
diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts
index 781134a663b4709ac2c85f892561e4e81bbf94be..167c4bc4038e09037c139f2c0fa5c277e6ad5403 100644
--- a/src/app/settings/settings.component.ts
+++ b/src/app/settings/settings.component.ts
@@ -5,6 +5,8 @@ import {OverlayContainer} from '@angular/cdk/overlay';
import { AuthorisationService } from '../authorisation.service';
import { ComputesitesService } from '../computesites.service';
import { Location } from '@angular/common';
+import { SettingsService } from '../settings.service';
+import { MatButtonToggleGroup } from '@angular/material';
@Component({
selector: 'app-settings',
@@ -16,16 +18,17 @@ export class SettingsComponent implements OnInit {
public selectedApiServer: any;
private file: any;
private config: any;
- public theme: any;
- public themeSubject: BehaviorSubject<string>;
+ public theme: string;
public themes: any[] = [ {'name':'Light','value':'strudel-light-theme'},
{'name': 'Dark','value':'strudel-dark-theme'}]
public apiservers: any[]
+ public selectedVal: string;
constructor(
public backendSelectionService: BackendSelectionService,
public authService: AuthorisationService,
public computeSitesService: ComputesitesService,
public overlayContainer: OverlayContainer,
+ public settingsService: SettingsService,
private location: Location
) {
this.selectedApiServer = null;
@@ -35,7 +38,13 @@ export class SettingsComponent implements OnInit {
}
ngOnInit() {
- this.setTheme();
+
+ for (let t of this.themes) {
+ if (t.value == this.settingsService.theme$.value) {
+ this.theme = t;
+ }
+ }
+ this.selectedVal = this.settingsService.useMenu$.value ? "true":"false";
}
loadConfig(event) {
@@ -68,26 +77,12 @@ export class SettingsComponent implements OnInit {
this.authService.removeLocalAuthZ()
}
- setTheme() {
- var theme;
- theme=localStorage.getItem('strudel-theme');
- if (theme == null) {
- theme = 'strudel-theme-light';
- }
- let classList = document.querySelector('app-root').classList
- var c;
- for (c of classList.value.split(' ')) {
- if (c.indexOf('strudel-') == 0) {
- console.log('remove class'+c);
- classList.remove(c);
- }
- }
- classList.add(theme)
-}
-
selectTheme(event) {
- localStorage.setItem('strudel-theme',event.value);
- this.setTheme();
+ this.settingsService.setTheme(event.value);
+ }
+
+ toggleMenu(v) {
+ this.settingsService.useMenu$.next(v == "true");
}
}
diff --git a/src/app/tes.service.ts b/src/app/tes.service.ts
index ac0fbc9776b4ac8895600b50f0f2a1d42a9a9013..8f7f349483e57b0462139bf383ec337f75b90db6 100644
--- a/src/app/tes.service.ts
+++ b/src/app/tes.service.ts
@@ -50,7 +50,6 @@ private updateUserHealthSub: Subscription;
private cachetincidents: BehaviorSubject<Health[]>;
private nextUpdate: Subscription;
private cancelRequests: Subject<string>;
-public theme: BehaviorSubject<string>;
public identitySubject: BehaviorSubject<Identity>;
public appSubject: BehaviorSubject<Strudelapp>;
private openapps: any[];
@@ -77,7 +76,6 @@ private openapps: any[];
//this.appSubject = new BehaviorSubject<Strudelapp>(null);
this.backendSelectionService.apiserver.subscribe( (value) => { if (value != null) {this.twsproxy = value.tws ; this.Base = value.tes }});
- this.theme = new BehaviorSubject('strudel-light-theme');
timer(500).pipe(repeat()).subscribe(() => this.checkWindows());
// this.batchinterface = {};
// this.computesitesService.identities.subscribe(identities => this.startPolling(identities));
@@ -104,10 +102,6 @@ public setStatusMsg(statusMsg: BehaviorSubject<any>) {
this.statusMsg = statusMsg;
}
- public setTheme(theme: string) {
- this.theme.next(theme);
- }
-
private buildParams(app: Strudelapp, identity: Identity, batchinterface: BatchInterface, appinst?: any): string {
let params = new URLSearchParams();
let id = identity.copy_skip_catalog();