Add back zoom buttons and shortcuts (#437)

teammapper-frontend/src/app/core/services/shortcuts/shortcuts.service.ts

@@ -113,6 +113,20 @@ export class ShortcutsService implements OnDestroy {
           this.mmpService.pasteNode();
         },
       },
+      {
+        keys: 'ctrl+=',
+        description: 'TOOLTIPS.ZOOM_IN_MAP',
+        callback: () => {
+          this.mmpService.zoomIn();
+        },
+      },
+      {
+        keys: 'ctrl+-',
+        description: 'TOOLTIPS.ZOOM_OUT_MAP',
+        callback: () => {
+          this.mmpService.zoomOut();
+        },
+      },
       {
         keys: 'left',
         description: 'TOOLTIPS.SELECT_NODE_ON_THE_LEFT',

teammapper-frontend/src/app/modules/application/components/floating-buttons/floating-buttons.component.html

@@ -1,32 +1,35 @@
 <div class="floating-buttons">
   <div class="add-node no-touch">
-    <button
-      (click)="mmpService.addNode()"
-      [title]="'TOOLTIPS.ADD_NODE' | translate"
-      [disabled]="editDisabled"
-      class="mat-elevation-z2"
-      mat-mini-fab>
+    <button (click)="mmpService.addNode()" [title]="'TOOLTIPS.ADD_NODE' | translate" [disabled]="editDisabled"
+      class="mat-elevation-z2" mat-mini-fab>
       <mat-icon aria-label="Add node">add</mat-icon>
     </button>
   </div>
   <div class="remove-node no-touch">
-    <button
-      (click)="mmpService.removeNode()"
-      [title]="'TOOLTIPS.REMOVE_NODE' | translate"
-      [disabled]="editDisabled"
-      class="mat-elevation-z2"
-      mat-mini-fab>
+    <button (click)="mmpService.removeNode()" [title]="'TOOLTIPS.REMOVE_NODE' | translate" [disabled]="editDisabled"
+      class="mat-elevation-z2" mat-mini-fab>
       <mat-icon aria-label="Remove node">remove</mat-icon>
     </button>
   </div>
 
   <div class="center no-touch">
-    <button
-      (click)="mmpService.center()"
-      [title]="'TOOLTIPS.CENTER_MAP' | translate"
-      class="mat-elevation-z2"
+    <button (click)="mmpService.center()" [title]="'TOOLTIPS.CENTER_MAP' | translate" class="mat-elevation-z2"
       mat-mini-fab>
       <mat-icon aria-label="Center" color="primary">center_focus_weak</mat-icon>
     </button>
   </div>
-</div>
+
+  <div class="zoom-in no-touch">
+    <button (click)="mmpService.zoomIn()" [title]="'TOOLTIPS.ZOOM_IN_MAP' | translate" class="mat-elevation-z2"
+      mat-mini-fab>
+      <mat-icon aria-label="Zoom in" color="primary">zoom_in</mat-icon>
+    </button>
+  </div>
+
+  <div class="zoom-out no-touch">
+    <button (click)="mmpService.zoomOut()" [title]="'TOOLTIPS.ZOOM_OUT_MAP' | translate" class="mat-elevation-z2"
+      mat-mini-fab>
+      <mat-icon aria-label="Zoom out" color="primary">zoom_out</mat-icon>
+    </button>
+  </div>
+</div>