Commit 4e6d7f47 authored by Chris Hines's avatar Chris Hines
Browse files

add a settings option to switch between menus and tabs

parent 5edb03d0
Pipeline #7808 failed with stages
in 4 minutes and 40 seconds
......@@ -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>
......
......@@ -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';
}
......
......@@ -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 { }
<!--<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">
......
......@@ -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) {
......
<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 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><h3>Advanced</h3></div>
<div >
<div *ngIf="(backendSelectionService.apiservers | async) !== undefined">
<mat-form-field>
<mat-label>API Server</mat-label>
......@@ -15,24 +32,15 @@
</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>
<div gdArea="loadconfig">
<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>
......@@ -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);
}
selectTheme(event) {
this.settingsService.setTheme(event.value);
}
classList.add(theme)
}
selectTheme(event) {
localStorage.setItem('strudel-theme',event.value);
this.setTheme();
toggleMenu(v) {
this.settingsService.useMenu$.next(v == "true");
}
}
......@@ -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();
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment