Improves toolbar

SynBioDex · Nov 18, 2019 · 30e617b · 30e617b
1 parent 25d652a
commit 30e617b
Show file tree

Hide file tree

Showing 10 changed files with 366 additions and 30 deletions.
diff --git a/SBOLCanvasFrontend/src/app/download-graph/download-graph.component.html b/SBOLCanvasFrontend/src/app/download-graph/download-graph.component.html
@@ -1,6 +1,6 @@
 <mat-card>
 
-  <h1 mat-dialog-title>Download</h1>
+  <h1 mat-dialog-title>Load</h1>
   <div class="mat-form-field-container">
     <mat-form-field>
       <mat-label>Server</mat-label>

diff --git a/SBOLCanvasFrontend/src/app/graph.service.ts b/SBOLCanvasFrontend/src/app/graph.service.ts
@@ -504,6 +504,14 @@ export class GraphService {
     return this.graph.getView().getScale();
   }
 
+  sendSelectionToFront() {
+    this.graph.orderCells(false)
+  }
+
+  sendSelectionToBack() {
+    this.graph.orderCells(true)
+  }
+
   fitCamera() {
     // graph.fit() does most of the work. however by default it will zoom in far too much.
     // Instead, it makes sense to stay at the user's zoom level unless it is too small to

diff --git a/SBOLCanvasFrontend/src/app/info-editor/info-editor.component.html b/SBOLCanvasFrontend/src/app/info-editor/info-editor.component.html
@@ -60,7 +60,7 @@
     <textarea matInput id="sequence" placeholder="Sequence" value="{{glyphInfo.sequence}}" (change)="inputChange($event)"></textarea>
   </mat-form-field>
 
-  <button mat-button (click)="openDownloadDialog()">Import Component</button>
+  <button mat-stroked-button (click)="openDownloadDialog()">Import Component</button>
 </div>
 
 

diff --git a/SBOLCanvasFrontend/src/app/load-graph/load-graph.component.html b/SBOLCanvasFrontend/src/app/load-graph/load-graph.component.html
@@ -1,5 +1,5 @@
 <mat-card>
-  <h1 mat-dialog-title>Load Graph</h1>
+  <h1 mat-dialog-title>Upload</h1>
   <div mat-dialog-content>
       <button type="button" mat-raised-button (click)="fileInput.click()">Choose File</button>
       <input hidden (change)="onFileSelected()" #fileInput type="file" id="file">
@@ -9,4 +9,4 @@ <h1 mat-dialog-title>Load Graph</h1>
       <button mat-button (click)="onCancelClick()">Cancel</button>
       <button mat-button [mat-dialog-close]="data.file">Ok</button>
   </div>
-</mat-card>
+</mat-card>
diff --git a/SBOLCanvasFrontend/src/app/save-graph/save-graph.component.html b/SBOLCanvasFrontend/src/app/save-graph/save-graph.component.html
@@ -1,5 +1,5 @@
 <mat-card>
-  <h1 mat-dialog-title>Save Graph</h1>
+  <h1 mat-dialog-title>Download</h1>
   <div mat-dialog-content>
     <p>Enter file name...</p>
     <mat-form-field>

diff --git a/SBOLCanvasFrontend/src/app/toolbar/toolbar.component.css b/SBOLCanvasFrontend/src/app/toolbar/toolbar.component.css
@@ -16,6 +16,14 @@
   margin-left: 8px;
 }
 
+.zoom-input {
+  text-align: right;
+  padding-left: 10px;
+  padding-right: 10px;
+  max-width: 50px;
+  font-size: .8em;
+}
+
 /* There is a bug with vertical dividers in
    toolbar rows so you have to manually fix
    the styling for the divider.

diff --git a/SBOLCanvasFrontend/src/app/toolbar/toolbar.component.html b/SBOLCanvasFrontend/src/app/toolbar/toolbar.component.html
@@ -1,80 +1,106 @@
 <mat-toolbar color="primary">
-<!--             style="background-image:url('assets/banner.png'); background-repeat:no-repeat; background-position:center; background-size:contain">-->
 
 <!-- menu -->
   <mat-toolbar-row class="toolbar-row">
 
-<!--    <mat-divider class="toolbar-divider-style-fix" [vertical]="true"></mat-divider>-->
-
-<!--    <span class="toolbar-spacer"></span>-->
-
-<!--    <mat-divider class="toolbar-divider-style-fix" [vertical]="true"></mat-divider>-->
-
     <!--    File menu-->
     <button mat-stroked-button class="toolbar-row-button" [matMenuTriggerFor]="fileMenu">File</button>
     <mat-menu #fileMenu="matMenu">
+      <span style="font-family:sans-serif;font-size:.8em;color:gray;">SynBioHub</span>
+
       <button mat-menu-item class="toolbar-row-button"
-              (click)="openUploadDialog()">Upload</button>
+              [matTooltip]="'Save module to SynBioHub'"
+              (click)="openSaveDialog()">Save</button>
 
       <button mat-menu-item class="toolbar-row-button"
-              (click)="openDownloadDialog()">Download</button>
+              [matTooltip]="'Load module from SynBioHub'"
+              (click)="openLoadDialog()">Load</button>
+
+      <span style="font-family:sans-serif;font-size:.8em;color:gray;">Local Device</span>
 
       <button mat-menu-item class="toolbar-row-button"
-              (click)="openSaveDialog()">Save</button>
+              [matTooltip]="'Download module as xml'"
+              (click)="openDownloadDialog()">Download</button>
 
       <button mat-menu-item class="toolbar-row-button"
-              (click)="openLoadDialog()">Load</button>
+              [matTooltip]="'Upload module from xml'"
+              (click)="openUploadDialog()">Upload</button>
 
       <button mat-menu-item class="toolbar-row-button"
+              [matTooltip]="'Export diagram as picture'"
               (click)="openExportDialog()">Export</button>
     </mat-menu>
 
     <!--    View menu-->
     <button mat-stroked-button class="toolbar-row-button" [matMenuTriggerFor]="viewMenu">View</button>
     <mat-menu #viewMenu="matMenu">
       <button mat-menu-item class="toolbar-row-button"
+              [matTooltip]="'Focus in the selected part to view and edit its subparts'"
               (click)="graphService.enterGlyph()">Enter Glyph</button>
 
       <button mat-menu-item class="toolbar-row-button"
+              [matTooltip]="'Focus out to the parent part'"
               (click)="graphService.exitGlyph()">Exit Glyph</button>
 
       <button mat-menu-item class="toolbar-row-button"
-              (click)="graphService.zoomIn()">Zoom In</button>
-
-      <button mat-menu-item class="toolbar-row-button"
-              (click)="graphService.zoomOut()">Zoom Out</button>
+              [matTooltip]="'Show or hide scar glyphs'"
+              (click)="graphService.toggleScars()">Toggle Scar Visibility</button>
 
       <button mat-menu-item class="toolbar-row-button"
+              [matTooltip]="'Center camera so all parts are visible'"
               (click)="graphService.fitCamera()">Reset View</button>
 
       <button mat-menu-item class="toolbar-row-button"
+              [matTooltip]="'Return to 100% zoom'"
               (click)="graphService.setZoom(1)">Reset Zoom</button>
     </mat-menu>
 
-    <mat-form-field style="max-width: 70px;">
+    <mat-divider class="toolbar-divider-style-fix" [vertical]="true"></mat-divider>
+
+    <mat-form-field class="zoom-input" [matTooltip]="'Camera zoom'">
       <input matInput (change)="zoomChanged($event)" [value]="getZoomDisplayValue()">
     </mat-form-field>
 
     <button mat-stroked-button class="toolbar-row-button"
+            [matTooltip]="'Zoom in'"
             (click)="graphService.zoomIn()"><mat-icon>zoom_in</mat-icon></button>
 
     <button mat-stroked-button class="toolbar-row-button"
+            [matTooltip]="'Zoom out'"
             (click)="graphService.zoomOut()"><mat-icon>zoom_out</mat-icon></button>
 
+    <mat-divider class="toolbar-divider-style-fix" [vertical]="true"></mat-divider>
+
     <button mat-stroked-button class="toolbar-row-button"
+            [matTooltip]="'Delete selected parts'"
             (click)="graphService.delete()"><mat-icon>delete</mat-icon></button>
 
     <button mat-stroked-button class="toolbar-row-button"
+            [matTooltip]="'Undo'"
             (click)="graphService.undo()"><mat-icon>undo</mat-icon></button>
 
     <button mat-stroked-button class="toolbar-row-button"
+            [matTooltip]="'Redo'"
             (click)="graphService.redo()"><mat-icon>redo</mat-icon></button>
 
+    <mat-divider class="toolbar-divider-style-fix" [vertical]="true"></mat-divider>
+
+    <button mat-stroked-button class="toolbar-row-button"
+            [matTooltip]="'Flip selected part\'s orientation'"
+            (click)="graphService.flipSequenceFeatureGlyph()"><mat-icon>swap_vert</mat-icon></button>
+
     <button mat-stroked-button class="toolbar-row-button"
-            (click)="graphService.flipSequenceFeatureGlyph()">Flip</button>
+            [matTooltip]="'Bring selected part to front'"
+            (click)="graphService.sendSelectionToFront()"><mat-icon>flip_to_back</mat-icon></button>
 
     <button mat-stroked-button class="toolbar-row-button"
-            (click)="graphService.toggleScars()">Toggle Scars</button>
+            [matTooltip]="'Send selected part to back'"
+            (click)="graphService.sendSelectionToBack()"><mat-icon>flip_to_front</mat-icon></button>
+
+    <span class="toolbar-spacer"></span>
+
+    <img src="assets/banner.png"
+        style="max-width:100%;max-height:100%"/>
 
   </mat-toolbar-row>
 </mat-toolbar>
diff --git a/SBOLCanvasFrontend/src/app/toolbar/toolbar.component.ts b/SBOLCanvasFrontend/src/app/toolbar/toolbar.component.ts
@@ -28,7 +28,9 @@ export class ToolbarComponent implements OnInit, AfterViewInit {
   popupOpen: boolean;
   users: {};
 
-  constructor(public graphService: GraphService, private filesService: FilesService, public dialog: MatDialog) { }
+  constructor(public graphService: GraphService, private filesService: FilesService,
+              public dialog: MatDialog) {
+  }
 
   ngOnInit() {
   }
@@ -44,17 +46,17 @@ export class ToolbarComponent implements OnInit, AfterViewInit {
     this.filesService.loadLocal(file, this.graphService);
   }
 
-  openUploadDialog(): void {
+  openSaveDialog(): void {
     this.dialog.open(UploadGraphComponent, {});
   }
 
-  openDownloadDialog(): void{
+  openLoadDialog(): void{
     this.dialog.open(DownloadGraphComponent, {
       data: null
     });
   }
 
-  openSaveDialog(): void {
+  openDownloadDialog(): void {
     const dialogRef = this.dialog.open(SaveGraphComponent, {
       data: { filename: this.filename }
     });
@@ -68,7 +70,7 @@ export class ToolbarComponent implements OnInit, AfterViewInit {
     });
   }
 
-  openLoadDialog(): void {
+  openUploadDialog(): void {
     const dialogRef = this.dialog.open(LoadGraphComponent, {
       data: { file: null }
     });

diff --git a/SBOLCanvasFrontend/src/app/upload-graph/upload-graph.component.html b/SBOLCanvasFrontend/src/app/upload-graph/upload-graph.component.html
@@ -1,5 +1,5 @@
 <mat-card>
-  <h1 mat-dialog-title>Upload</h1>
+  <h1 mat-dialog-title>Save</h1>
   <div class="mat-form-field-container">
 
     <mat-form-field>
@@ -60,4 +60,4 @@ <h1 mat-dialog-title>Upload</h1>
     <button mat-button [disabled]="!finishCheck()" (click)="onUploadClick()">Upload</button>
   </div>
 
-</mat-card>
+</mat-card>