feat(ui/frontend): add menu-bar

apps/frontend/src/app/app.component.scss

@@ -0,0 +1,11 @@
+:host {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+}
+
+main {
+  flex-grow: 1;
+  // https://stackoverflow.com/a/38383437
+  min-height: 0;
+}

apps/frontend/src/app/app.component.spec.ts

@@ -5,6 +5,13 @@ import { RouterTestingModule } from '@angular/router/testing';
 import { SceneViewerTestModule, SidenavShellModule } from '@talus/ui';
 import { AppComponent } from './app.component';
 
+@Component({
+  selector: 'fe-menu-bar-container',
+  template: '',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+class MenuBarContainerStubComponent {}
+
 @Component({
   selector: 'fe-scene-viewer-container',
   template: '',
@@ -22,7 +29,12 @@ class ToolsPanelStubComponent {}
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [AppComponent, SceneViewerContainerStubComponent, ToolsPanelStubComponent],
+      declarations: [
+        AppComponent,
+        MenuBarContainerStubComponent,
+        SceneViewerContainerStubComponent,
+        ToolsPanelStubComponent,
+      ],
       imports: [
         BrowserAnimationsModule,
         RouterTestingModule,

apps/frontend/src/app/app.component.ts

@@ -3,21 +3,30 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 @Component({
   selector: 'fe-root',
   template: `
-    <ui-sidenav-shell>
-      <ui-sidenav-shell-left>
-        <fe-tools-panel></fe-tools-panel>
-      </ui-sidenav-shell-left>
+    <header>
+      <fe-menu-bar-container></fe-menu-bar-container>
+    </header>
 
-      <ui-sidenav-shell-right>
-        Right
-      </ui-sidenav-shell-right>
+    <main>
+      <ui-sidenav-shell>
+        <ui-sidenav-shell-left>
+          <fe-tools-panel></fe-tools-panel>
+        </ui-sidenav-shell-left>
 
-      <ui-sidenav-shell-content>
-        <fe-scene-viewer-container></fe-scene-viewer-container>
-      </ui-sidenav-shell-content>
-    </ui-sidenav-shell>
+        <ui-sidenav-shell-right>
+          Right
+        </ui-sidenav-shell-right>
+
+        <ui-sidenav-shell-content>
+          <fe-scene-viewer-container></fe-scene-viewer-container>
+        </ui-sidenav-shell-content>
+      </ui-sidenav-shell>
+    </main>
+
+    <!--<ui-status-bar></ui-status-bar>-->
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
   title = 'frontend';

apps/frontend/src/app/app.module.ts

@@ -8,6 +8,7 @@ import { SidenavShellModule } from '@talus/ui';
 import { AppComponent } from './app.component';
 import { AppEffects } from './app.effects';
 import { metaReducers, ROOT_REDUCERS } from './app.reducer';
+import { MenuBarContainerModule } from './menu-bar-container/menu-bar-container.module';
 import { SceneViewerContainerModule } from './scene-viewer-container';
 import { ToolsPanelModule } from './tools-panel/tools-panel.module';
 import { UndoRedoModule } from './undo-redo/undo-redo.module';
@@ -36,6 +37,7 @@ import { UndoRedoModule } from './undo-redo/undo-redo.module';
       },
     }),
 
+    MenuBarContainerModule,
     SceneViewerContainerModule,
     SidenavShellModule,
     ToolsPanelModule,

apps/frontend/src/app/menu-bar-container/menu-bar-container.actions.ts

@@ -0,0 +1,6 @@
+import { createAction } from '@ngrx/store';
+
+const actionTypePrefix = `[menuBarContainer]`;
+
+export const undo = createAction(`${actionTypePrefix} Undo`);
+export const redo = createAction(`${actionTypePrefix} Redo`);

apps/frontend/src/app/menu-bar-container/menu-bar-container.component.spec.ts

@@ -0,0 +1,42 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Store, StoreModule } from '@ngrx/store';
+import { MockStore } from '@ngrx/store/testing';
+import { ROOT_REDUCERS, State } from '../app.reducer';
+import { MenuBarContainerComponent } from './menu-bar-container.component';
+import { MenuBarContainerModule } from './menu-bar-container.module';
+
+describe('MenuBarComponent', () => {
+  let component: MenuBarContainerComponent;
+  let fixture: ComponentFixture<MenuBarContainerComponent>;
+
+  let store: MockStore<State>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [],
+      imports: [
+        MenuBarContainerModule,
+        StoreModule.forRoot(ROOT_REDUCERS, {
+          runtimeChecks: {
+            strictStateImmutability: true,
+            strictActionImmutability: true,
+            strictStateSerializability: true,
+            strictActionSerializability: true,
+          },
+        }),
+      ],
+    }).compileComponents();
+
+    store = TestBed.get<Store<State>>(Store);
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MenuBarContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/frontend/src/app/menu-bar-container/menu-bar-container.component.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Action, Store } from '@ngrx/store';
+import { UiMenuBarConfig } from '@talus/ui';
+import * as fromApp from '../app.reducer';
+import { redo, undo } from './menu-bar-container.actions';
+
+@Component({
+  selector: 'fe-menu-bar-container',
+  template: `
+    <ui-menu-bar (menuItemClick)="onMenuItemClick($event)" [menuConfig]="menuConfig"></ui-menu-bar>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MenuBarContainerComponent {
+  menuConfig: UiMenuBarConfig<Action> = {
+    menus: [
+      {
+        label: 'Edit',
+        menuItems: [
+          {
+            icon: 'undo',
+            label: 'Undo',
+            value: undo(),
+          },
+          {
+            icon: 'redo',
+            label: 'Redo',
+            value: redo(),
+          },
+        ],
+      },
+    ],
+  };
+
+  constructor(private store: Store<fromApp.State>) {}
+
+  onMenuItemClick(action: Action): void {
+    this.store.dispatch(action);
+  }
+}

apps/frontend/src/app/menu-bar-container/menu-bar-container.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { MenuBarModule } from '@talus/ui';
+import { MenuBarContainerComponent } from './menu-bar-container.component';
+
+@NgModule({
+  declarations: [MenuBarContainerComponent],
+  imports: [MenuBarModule],
+  exports: [MenuBarContainerComponent],
+})
+export class MenuBarContainerModule {}

apps/frontend/src/app/tools-panel/tools-panel.actions.ts

@@ -1,4 +1,4 @@
 import { createAction, props } from '@ngrx/store';
 import { Tool } from './tool.model';
 
-export const selectTool = createAction('[ToolsPanel] Select tool', props<{ id: Tool }>());
+export const selectTool = createAction('[toolsPanel] Select tool', props<{ id: Tool }>());

apps/frontend/src/app/undo-redo/undo-redo.effects.ts

@@ -3,6 +3,7 @@ import { Actions, createEffect, ofType } from '@ngrx/effects';
 import { Action, select, Store } from '@ngrx/store';
 import { filter, map, switchMap, withLatestFrom } from 'rxjs/operators';
 import * as fromApp from '../app.reducer';
+import * as menuBarContainerActions from '../menu-bar-container/menu-bar-container.actions';
 import { addVoxel, removeVoxel } from '../scene-viewer-container/scene-viewer-container.actions';
 import { addUndo, redo, redone, undo, undone } from './undo-redo.actions';
 
@@ -12,7 +13,7 @@ export class UndoRedoEffects {
 
   undo$ = createEffect(() =>
     this.actions$.pipe(
-      ofType(undo),
+      ofType(undo, menuBarContainerActions.undo),
       withLatestFrom(this.store.pipe(select(fromApp.selectCurrentUndoAction))),
       switchMap(([action, currentUndoAction]) =>
         currentUndoAction ? [currentUndoAction, undone()] : [undone()],
@@ -22,7 +23,7 @@ export class UndoRedoEffects {
 
   redo$ = createEffect(() =>
     this.actions$.pipe(
-      ofType(redo),
+      ofType(redo, menuBarContainerActions.redo),
       withLatestFrom(this.store.pipe(select(fromApp.selectCurrentRedoAction))),
       switchMap(([action, currentRedoAction]) =>
         currentRedoAction ? [currentRedoAction, redone()] : [redone()],

apps/frontend/src/app/undo-redo/undo-redo.reducer.ts

@@ -1,4 +1,5 @@
 import { Action, createReducer, on } from '@ngrx/store';
+import * as menuBarContainerActions from '../menu-bar-container/menu-bar-container.actions';
 import { addUndo, redo, redone, undo, undone } from './undo-redo.actions';
 
 /**
@@ -43,7 +44,7 @@ export const reducer = createReducer(
     };
   }),
 
-  on(undo, redo, state => {
+  on(undo, menuBarContainerActions.undo, redo, menuBarContainerActions.redo, state => {
     return {
       ...state,
       isUndoRedoing: true,

libs/ui/src/index.ts

@@ -1,4 +1,5 @@
-export * from './lib/ui.module';
-export * from './lib/sidenav-shell';
+export * from './lib/menu-bar';
 export * from './lib/scene-viewer';
+export * from './lib/sidenav-shell';
 export * from './lib/toolbar';
+export * from './lib/ui.module';

libs/ui/src/lib/menu-bar/index.ts

@@ -0,0 +1,2 @@
+export * from './menu-bar.component';
+export * from './menu-bar.module';

libs/ui/src/lib/menu-bar/menu-bar.component.scss

@@ -0,0 +1,5 @@
+$angular-button-height: 36px;
+
+mat-toolbar {
+  height: $angular-button-height;
+}

libs/ui/src/lib/menu-bar/menu-bar.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MenuBarComponent } from './menu-bar.component';
+import { MenuBarModule } from './menu-bar.module';
+
+describe('MenuBarComponent', () => {
+  let component: MenuBarComponent;
+  let fixture: ComponentFixture<MenuBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MenuBarModule],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MenuBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/ui/src/lib/menu-bar/menu-bar.component.ts

@@ -0,0 +1,48 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+export interface UiMenuBarConfig<T> {
+  menus: UiMenuBarMenu<T>[];
+}
+
+interface UiMenuBarMenu<T> {
+  label: string;
+  menuItems: UiMenuBarMenuItem<T>[];
+}
+
+interface UiMenuBarMenuItem<T> {
+  icon?: string;
+  label: string;
+  value: T;
+}
+
+@Component({
+  selector: 'ui-menu-bar',
+  template: `
+    <mat-toolbar>
+      <ng-container *ngFor="let menu of menuConfig.menus">
+        <button mat-button [matMenuTriggerFor]="mainMenu">{{ menu.label }}</button>
+        <mat-menu #mainMenu="matMenu">
+          <button
+            mat-menu-item
+            *ngFor="let menuItem of menu.menuItems"
+            (click)="onMenuItemClick(menuItem.value)"
+          >
+            <mat-icon *ngIf="menuItem.icon">{{ menuItem.icon }}</mat-icon>
+            <span>{{ menuItem.label }}</span>
+          </button>
+        </mat-menu>
+      </ng-container>
+    </mat-toolbar>
+  `,
+  styleUrls: ['./menu-bar.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MenuBarComponent {
+  @Input() menuConfig: UiMenuBarConfig<any> = { menus: [] };
+
+  @Output() menuItemClick = new EventEmitter();
+
+  onMenuItemClick(value: any): void {
+    this.menuItemClick.emit(value);
+  }
+}

libs/ui/src/lib/menu-bar/menu-bar.module.ts

@@ -0,0 +1,11 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule, MatIconModule, MatMenuModule, MatToolbarModule } from '@angular/material';
+import { MenuBarComponent } from './menu-bar.component';
+
+@NgModule({
+  declarations: [MenuBarComponent],
+  imports: [CommonModule, MatButtonModule, MatIconModule, MatMenuModule, MatToolbarModule],
+  exports: [MenuBarComponent],
+})
+export class MenuBarModule {}

libs/ui/src/lib/scene-viewer/scene-viewer.component.scss

@@ -1,6 +1,4 @@
-:host,
 canvas {
-  display: block;
-  width: 100%;
   height: 100%;
+  width: 100%;
 }

libs/ui/src/lib/sidenav-shell/sidenav-shell.component.scss

@@ -1,6 +1,5 @@
 :host,
 mat-sidenav-container {
-  display: block;
   height: 100%;
 }