Preferences UI, Electron integration

Signed-off-by: Milan Klanjsek <[email protected]>

web/main.ts

@@ -27,7 +27,14 @@ const errLogPath = path.join(tmpPath, 'api.err-' + date + '.log');
 const template: Electron.MenuItemConstructorOptions[] = [
  {
  label: 'File',
- submenu: [{ label: 'Quit Octant', role: 'close' }],
+ submenu: [
+ { label: 'Preferences',
+ click(){
+ win.webContents.send('openPreferences');
+ } },
+ { type: 'separator' },
+ { label: 'Quit Octant', role: 'close' }
+ ],
  },
  {
  label: 'Edit',

web/src/app/modules/shared/services/electron/electron.service.ts

@@ -7,6 +7,7 @@ import { Injectable } from '@angular/core';
 import { ipcRenderer, webFrame } from 'electron';
 import * as childProcess from 'child_process';
 import * as fs from 'fs';
+import { PreferencesService } from '../preferences/preferences.service';
 
 @Injectable({
  providedIn: 'root',
@@ -18,7 +19,7 @@ export class ElectronService {
  fs: typeof fs;
 
  public portNumber: number;
- constructor() {
+ constructor(private preferencesService: PreferencesService) {
  if (this.isElectron()) {
  this.ipcRenderer = window.require('electron').ipcRenderer;
  this.webFrame = window.require('electron').webFrame;
@@ -28,6 +29,12 @@ export class ElectronService {
  this.ipcRenderer.once('port-message', (event, message) => {
  this.portNumber = message;
  });
+
+ this.ipcRenderer.on('openPreferences', () => {
+ if (!this.preferencesService.preferencesOpened.value) {
+ this.preferencesService.preferencesOpened.next(true);
+ }
+ });
  }
  }
 

web/src/app/modules/shared/services/navigation/navigation.service.ts

@@ -42,9 +42,6 @@ export class NavigationService {
  current = new BehaviorSubject<Navigation>(emptyNavigation);
  modules = new BehaviorSubject<Module[]>([]);
  selectedItem = new BehaviorSubject<Selection>({ module: 0, index: -1 });
- public showLabels: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
- true
- );
  activeUrl = new BehaviorSubject<string>('');
 
  constructor(

web/src/app/modules/shared/services/preferences/preferences.service.spec.ts

@@ -18,4 +18,17 @@ describe('PreferencesService', () => {
  it('should be created', () => {
  expect(service).toBeTruthy();
  });
+
+ it('collapsed set properly', () => {
+ const defaultPrefs = service.getPreferences();
+ const defaultElement = defaultPrefs.panels[0].sections[1].elements[0];
+ expect(defaultElement.name).toEqual('general.navigation');
+ expect(defaultElement.value).toEqual('expanded');
+
+ service.navCollapsed.next(true);
+ const newPrefs = service.getPreferences();
+ const newElement = newPrefs.panels[0].sections[1].elements[0];
+ expect(newElement.name).toEqual('general.navigation');
+ expect(newElement.value).toEqual('collapsed');
+ });
 });

web/src/app/modules/shared/services/preferences/preferences.service.ts

@@ -12,20 +12,29 @@ import { ThemeService } from '../theme/theme.service';
  providedIn: 'root',
 })
 export class PreferencesService {
- public preferencesOpened: BehaviorSubject<boolean> = new BehaviorSubject<
- boolean
- >(false);
+ public preferencesOpened: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
+ false
+ );
 
  public navCollapsed: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
  false
  );
 
+ public showLabels: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(
+ true
+ );
+
  constructor(private themeService: ThemeService) {}
 
- public preferencesChanged(update: any) {
+ public preferencesChanged(update: Preferences) {
  const collapsed = update['general.navigation'] === 'collapsed';
+ const showLabels = update['general.labels'] === 'show';
  const isLightTheme = update['general.theme'] === 'light';
 
+ if (this.showLabels.value !== showLabels) {
+ this.showLabels.next(showLabels);
+ }
+
  if (this.navCollapsed.value !== collapsed) {
  this.navCollapsed.next(collapsed);
  }
@@ -89,6 +98,28 @@ export class PreferencesService {
  },
  ],
  },
+ {
+ name: 'Navigation labels',
+ elements: [
+ {
+ name: 'general.labels',
+ type: 'radio',
+ value: this.showLabels.value ? 'show' : 'hide',
+ config: {
+ values: [
+ {
+ label: 'Show Labels',
+ value: 'show',
+ },
+ {
+ label: 'Hide Labels',
+ value: 'hide',
+ },
+ ],
+ },
+ },
+ ],
+ },
  ],
  },
  ],

web/src/app/modules/shared/services/theme/theme.service.ts

@@ -56,7 +56,7 @@ export class ThemeService implements OnDestroy {
 
  const themeType = localStorage.getItem('theme') as ThemeType;
  this.themeType = themeType || defaultTheme.type;
- 
+
  this.renderer = rendererFactory.createRenderer(null, null);
 
  this.storageEventHandler = (e: StorageEvent): void => {

web/src/app/modules/sugarloaf/components/smart/navigation/navigation.component.scss

@@ -52,8 +52,13 @@
 }
 
 .module-tabs {
- width: 56px;
+ width: 48px;
  margin-right: 0px;
+
+ ::ng-deep ul {
+ padding-left: 0rem;
+ padding-top: 0.4rem;
+ }
 }
 
 .module-tabs-labels {

web/src/app/modules/sugarloaf/components/smart/navigation/navigation.component.ts

@@ -86,7 +86,7 @@ export class NavigationComponent implements OnInit, OnDestroy {
  }
  );
 
- this.subscriptionShowLabels = this.navigationService.showLabels.subscribe(
+ this.subscriptionShowLabels = this.preferencesService.showLabels.subscribe(
  col => {
  if (this.showLabels !== col) {
  this.showLabels = col;
@@ -109,7 +109,7 @@ export class NavigationComponent implements OnInit, OnDestroy {
  } else if (event.key === 'L' && event.ctrlKey) {
  event.preventDefault();
  event.cancelBubble = true;
- this.navigationService.showLabels.next(!this.showLabels);
+ this.preferencesService.showLabels.next(!this.showLabels);
  }
  }