Improved toolbar + fixed vertical overflow problem (#50)

SLYGM · Apr 18, 2023 · e7c3398 · e7c3398
1 parent a69f4da
commit e7c3398
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 19 deletions.
diff --git a/pixelot/package.json b/pixelot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pixelot",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

diff --git a/pixelot/projects/project1/rename_test.txt b/pixelot/projects/project1/rename_test.txt
diff --git a/pixelot/src/app/left-sidebar/left-sidebar.component.html b/pixelot/src/app/left-sidebar/left-sidebar.component.html
@@ -1,6 +1,6 @@
 <div id="left-sidebar-resizer" (mousedown)="onResizeBarMouseDown($event)"></div>
 
-<mat-tab-group dynamicHeight>
+<mat-tab-group dynamicHeight id="left-sidebar-tabs">
 <mat-tab label="Layers">
 <div id="left-sidebar">
   <mat-menu #menu="matMenu">
@@ -65,4 +65,4 @@
 </mat-tab>
 
 <mat-tab label="Shaders"> <app-shader-editor></app-shader-editor> </mat-tab>
-</mat-tab-group>
+</mat-tab-group>
diff --git a/pixelot/src/app/left-sidebar/left-sidebar.component.scss b/pixelot/src/app/left-sidebar/left-sidebar.component.scss
@@ -25,6 +25,15 @@
   border: 2px dashed #ccc;
 }
 
+#left-sidebar-tabs {
+  max-height: 100%;
+}
+
+#left-sidebar {
+  height: 100%;
+  overflow-y: auto;
+}
+
 #left-sidebar-resizer {
   position: absolute;
   top: 0;

diff --git a/pixelot/src/app/right-sidebar/right-sidebar.component.html b/pixelot/src/app/right-sidebar/right-sidebar.component.html
@@ -1,5 +1,5 @@
 <div id="right-sidebar-resizer" (mousedown)="onResizeBarMouseDown($event)"></div>
-<mat-tab-group>
+<mat-tab-group id="right-sidebar-tabs">
 <mat-tab label="Entities">
 <div id="right-sidebar">
   <div *ngIf="entity">
@@ -83,4 +83,4 @@ <h2 class="mat-h2">No entity selected</h2>
 </div>
 </mat-tab>
 <mat-tab label="Systems"> <app-systems-editor></app-systems-editor> </mat-tab>
-</mat-tab-group>
+</mat-tab-group>
diff --git a/pixelot/src/app/right-sidebar/right-sidebar.component.scss b/pixelot/src/app/right-sidebar/right-sidebar.component.scss
@@ -22,6 +22,10 @@
   overflow-y: auto;
 }
 
+#right-sidebar-tabs {
+  max-height: 100%;
+}
+
 #right-sidebar-resizer {
   position: absolute;
   top: 0;

diff --git a/pixelot/src/app/scene-tab/scene-tab.component.html b/pixelot/src/app/scene-tab/scene-tab.component.html
@@ -2,11 +2,11 @@
 <div class="scene-tab">
   <app-left-sidebar [scene]="scene" [layerNames]="layerNames" (entitySelected)="handleEntitySelected($event)"></app-left-sidebar>
   <div class="center-wrapper">
-    <div class="scene-toolbar">
-      <button mat-icon-button aria-label="Stop" (click)="stopScene()"><mat-icon>stop</mat-icon></button>
-      <button mat-icon-button aria-label="Play" (click)="playScene()"><mat-icon>play_arrow</mat-icon></button>
-    </div>
     <div class="canvas-wrapper">
+      <div class="scene-toolbar">
+        <button mat-icon-button aria-label="Stop" (click)="stopScene()"><mat-icon>stop</mat-icon></button>
+        <button mat-icon-button aria-label="Play" (click)="playScene()"><mat-icon>play_arrow</mat-icon></button>
+      </div>
       <canvas id="canvas" (mousedown) = "handleMouseDown($event)" (mouseup) = "handleMouseUp($event)"></canvas>
     </div>
     <app-file-manager></app-file-manager>

diff --git a/pixelot/src/app/toolbar/toolbar.component.ts b/pixelot/src/app/toolbar/toolbar.component.ts
@@ -1,5 +1,6 @@
 import { Component, NgZone } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
 import { BuildDialogueComponent } from 'app/build-dialogue/build-dialogue.component';
 import { NewProjectDialogComponent } from 'app/new-project-dialog/new-project-dialog.component';
 import { OpenProjectDialogComponent } from 'app/open-project-dialog/open-project-dialog.component';
@@ -14,7 +15,7 @@ import * as engine from 'retro-engine';
 
 export class ToolbarComponent {
 
-  constructor(public dialog: MatDialog, private zone: NgZone) {
+  constructor(public dialog: MatDialog, private zone: NgZone, private router: Router) {
     let nw = window.nw;
     if (nw) {
       let menu = new nw.Menu({ type: 'menubar' });
@@ -36,16 +37,16 @@ export class ToolbarComponent {
           });
         }
       }));
-      file.append(new nw.MenuItem({ label: 'Save' }));
-      file.append(new nw.MenuItem({ label: 'Save As' }));
+      file.append(new nw.MenuItem({
+        label: 'Close Project',
+        click: () => {
+          this.zone.run(() => {
+            this.router.navigate(['/']);
+          });
+        }
+      }));
       menu.append(new nw.MenuItem({ label: 'File', submenu: file }));
 
-      let edit = new nw.Menu();
-      edit.append(new nw.MenuItem({ label: 'Undo' }));
-      edit.append(new nw.MenuItem({ label: 'Redo' }));
-      edit.append(new nw.MenuItem({ label: 'Preferences' }));
-      menu.append(new nw.MenuItem({ label: 'Edit', submenu: edit }));
-
       let game = new nw.Menu();
       game.append(new nw.MenuItem({
         label: 'Run',
@@ -69,8 +70,25 @@ export class ToolbarComponent {
       }));
       menu.append(new nw.MenuItem({ label: 'Game', submenu: game }));
 
+      const open = nw.require('open');
+
       let help = new nw.Menu();
-      help.append(new nw.MenuItem({ label: 'About' }));
+      help.append(new nw.MenuItem({
+        label: 'Open Documentation',
+        click: () => {
+          open('https://github.com/SLYGM/RetroEngineTM/blob/master/docs/modules.md');
+        }
+      }));
+      help.append(new nw.MenuItem({
+        label: 'Open GitHub Repository',
+        click: () => {
+          open('https://github.com/SLYGM/RetroEngineTM/');
+        }
+      }));
+      help.append(new nw.MenuItem({
+        label: 'Version: ' + nw.App.manifest.version,
+        enabled: false
+      }));
       menu.append(new nw.MenuItem({ label: 'Help', submenu: help }));
 
       nw.Window.get().menu = menu;