From 1ef1b252d707a0e7cc3326fb56a25d50fb34c1a6 Mon Sep 17 00:00:00 2001
From: ztimson <zaktimson@gmail.com>
Date: Thu, 22 Aug 2019 23:15:22 -0400
Subject: [PATCH] Menu

---
 .../components/toolbar/toolbar.component.html | 31 +++++++++++++++----
 .../components/toolbar/toolbar.component.ts   | 21 ++++++++-----
 src/app/views/map/map.component.html          |  2 +-
 src/app/views/map/map.component.ts            | 31 +++++++++----------
 4 files changed, 54 insertions(+), 31 deletions(-)

diff --git a/src/app/components/toolbar/toolbar.component.html b/src/app/components/toolbar/toolbar.component.html
index af50384..e102740 100644
--- a/src/app/components/toolbar/toolbar.component.html
+++ b/src/app/components/toolbar/toolbar.component.html
@@ -1,15 +1,34 @@
-<mat-toolbar>
+<mat-toolbar id="toolbar">
     <button mat-icon-button routerLink="/">
         <img src="/assets/images/logo.png" height="35px" width="auto">
     </button>
     <small class="ml-1 text-muted">{{version}}</small>
     <div class="ml-auto">
-        <div *ngFor="let section of menu" class="d-inline ml-4">
-            <ng-container *ngFor="let item of section">
-                <button *ngIf="!item.hidden" mat-icon-button [ngClass]="{'selected': item.enabled}" class="ml-1" (click)="clickWrapper(item)">
-                    <mat-icon>{{item.icon}}</mat-icon>
-                </button>
+        <div *ngFor="let item of menuItems; let i = index" class="d-inline mx-1">
+            <ng-container *ngIf="i <= maxMenuItems">
+                <ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item}"></ng-container>
             </ng-container>
         </div>
+        <button *ngIf="menuItems.length > maxMenuItems" mat-icon-button [matMenuTriggerFor]="menu">
+            <mat-icon>menu</mat-icon>
+        </button>
+        <mat-menu #menu="matMenu">
+            <ng-container *ngFor="let item of menuItems; let i = index">
+                <ng-container *ngIf="i > maxMenuItems">
+                    <button mat-menu-item>
+                        <mat-icon>{{item.icon}}</mat-icon>
+                        {{item.name}}
+                    </button>
+                </ng-container>
+            </ng-container>
+        </mat-menu>
     </div>
 </mat-toolbar>
+
+<ng-template #menuItem let-item>
+    <ng-container>
+        <button mat-icon-button [ngClass]="{'selected': item?.enabled}" class="ml-1" (click)="clickWrapper(item)">
+            <mat-icon>{{item?.icon}}</mat-icon>
+        </button>
+    </ng-container>
+</ng-template>
diff --git a/src/app/components/toolbar/toolbar.component.ts b/src/app/components/toolbar/toolbar.component.ts
index fc0b333..abe0603 100644
--- a/src/app/components/toolbar/toolbar.component.ts
+++ b/src/app/components/toolbar/toolbar.component.ts
@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, Output} from "@angular/core";
+import {AfterViewInit, Component, EventEmitter, HostListener, Input, Output,} from "@angular/core";
 import {ToolbarItem} from "./toolbarItem";
 import {version} from '../../../../package.json';
 
@@ -7,26 +7,33 @@ import {version} from '../../../../package.json';
     templateUrl: 'toolbar.component.html',
     styleUrls: ['toolbar.component.scss']
 })
-export class ToolbarComponent {
-    @Input() menu: ToolbarItem[][];
+export class ToolbarComponent implements AfterViewInit {
+    @Input() menuItems: ToolbarItem[];
 
-    @Output() menuChange = new EventEmitter<ToolbarItem[][]>();
+    @Output() menuItemsChange = new EventEmitter<ToolbarItem[]>();
+
+    private maxMenuItems;
 
     readonly version = version;
 
     constructor() { }
 
+    @HostListener('window:resize', ['$event'])
+    ngAfterViewInit() {
+        setTimeout(() => this.maxMenuItems = Math.floor((document.getElementById('toolbar').offsetWidth - 200) / 75), 1);
+    }
+
     clickWrapper(item: ToolbarItem) {
         if(item.toggle) {
             if (item.individualToggle) {
-                this.menu.forEach(menu => menu.filter(i2 => item.name != i2.name && i2.individualToggle).forEach(item => {
+                this.menuItems.filter(i2 => item.name != i2.name && i2.individualToggle).forEach(item => {
                     item.enabled = false;
                     if (item.onDisabled) item.onDisabled();
-                }));
+                });
             }
 
             item.enabled = !item.enabled;
-            this.menuChange.emit(this.menu);
+            this.menuItemsChange.emit(this.menuItems);
 
             if(item.enabled) {
                 if(item.onEnabled) item.onEnabled();
diff --git a/src/app/views/map/map.component.html b/src/app/views/map/map.component.html
index 00ed5ac..8768e31 100644
--- a/src/app/views/map/map.component.html
+++ b/src/app/views/map/map.component.html
@@ -1,4 +1,4 @@
-<toolbar [(menu)]="menu"></toolbar>
+<toolbar [(menuItems)]="menu"></toolbar>
 <div id="map"></div>
 <div *ngIf="showPalette" [@flyInRight] [@flyOutRight] class="palette">
     <palette [(selected)]="drawColor" (selectedChange)="map.drawingColor = $event"></palette>
diff --git a/src/app/views/map/map.component.ts b/src/app/views/map/map.component.ts
index 5213768..0876feb 100644
--- a/src/app/views/map/map.component.ts
+++ b/src/app/views/map/map.component.ts
@@ -26,21 +26,18 @@ export class MapComponent implements OnInit {
     showPalette = false;
     isNaN = isNaN;
 
-    menu: ToolbarItem[][] = [[
-        {name: 'compass', icon: 'explore', hidden: true},
-    ], [
-        {name: 'marker', icon: 'room', toggle: true, individualToggle: true, click: () => this.addMarker()},
-        {name: 'draw', icon: 'create', toggle: true, individualToggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.endDrawing()},
-        {name: 'measure', icon: 'straighten', toggle: true, individualToggle: true, click: () => this.measure()},
-        {name: 'delete', icon: 'delete', toggle: true, individualToggle: true, onEnabled: () => this.map.deleteMode = true, onDisabled: () => this.map.deleteMode = false},
-        {name: 'style', icon: 'terrain', enabled: true, toggle: true},
-        {name: 'weather', icon: 'cloud', toggle: true},
-        {name: 'compass', icon: 'explore', click: () => this.calibrate()}
-    ], [
-        {name: 'messages', icon: 'chat', hidden: true},
-        {name: 'identity', icon: 'perm_identity', hidden: true},
-        {name: 'settings', icon: 'settings', hidden: true}
-    ]];
+    menu: ToolbarItem[] = [
+        {name: 'Marker', icon: 'room', toggle: true, individualToggle: true, click: () => this.addMarker()},
+        {name: 'Draw', icon: 'create', toggle: true, individualToggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.endDrawing()},
+        {name: 'Measure', icon: 'straighten', toggle: true, individualToggle: true, click: () => this.measure()},
+        {name: 'Delete', icon: 'delete', toggle: true, individualToggle: true, onEnabled: () => this.map.deleteMode = true, onDisabled: () => this.map.deleteMode = false},
+        {name: 'Style', icon: 'terrain', enabled: true, toggle: true},
+        {name: 'Weather', icon: 'cloud', toggle: true},
+        {name: 'Calibrate', icon: 'explore', click: () => this.calibrate()},
+        {name: 'Messages', icon: 'chat', hidden: true},
+        {name: 'Identity', icon: 'perm_identity', hidden: true},
+        {name: 'Settings', icon: 'settings', hidden: true}
+    ];
 
     constructor(public physicsService: PhysicsService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet) { }
 
@@ -70,7 +67,7 @@ export class MapComponent implements OnInit {
 
     addMarker() {
         this.map.click.pipe(skip(1), take(1)).subscribe(latlng => {
-            this.menu[1][0].enabled = false;
+            this.menu[0].enabled = false;
             this.markers.push(latlng);
             this.map.newMarker(latlng);
         });
@@ -86,7 +83,7 @@ export class MapComponent implements OnInit {
             if(!firstPoint) {
                 firstPoint = this.map.newMarker(latlng);
             } else {
-                this.menu[1][2].enabled = false;
+                this.menu[3].enabled = false;
                 this.map.newMeasurement(firstPoint.getLatLng(), latlng);
                 this.map.delete(firstPoint);
             }