Merge pull request #23 from nelsonni/API_architecture

Core API architecture updated for Keyboard Shortcuts to AppMenu
EPICLab · Aug 24, 2017 · 18840af · 18840af
2 parents 419de1a + 473cdf8
commit 18840af
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 17 deletions.
diff --git a/app/Card.js b/app/Card.js
@@ -29,21 +29,21 @@ module.exports = class Card {
     this.title = document.createElement('span');
     $(this.title).html("My Card");
 
-    this.closeButton = document.createElement('button');
-      $(this.closeButton).click(() => console.log('close button clicked'))
-    this.saveButton = document.createElement('button');
-      $(this.saveButton).click(() => console.log('save button clicked'))
-    this.fullscreenButton = document.createElement('button');
-      $(this.fullscreenButton).click(() => console.log('fullscreen button clicked'));
+    const saveButton = document.createElement('button');
+    $(saveButton).click(() => console.log('save button clicked'))
+    const fullscreenButton = document.createElement('button');
+    $(fullscreenButton).click(() => console.log('fullscreen button clicked'));
+    const closeButton = document.createElement('button');
+    $(closeButton).attr('class', 'close');
+    $(closeButton).click(() => { $(this.card).remove(); });
 
     this.header.appendChild(this.title);
-    this.header.appendChild(this.closeButton);
-    this.header.appendChild(this.saveButton);
-    this.header.appendChild(this.fullscreenButton);
+    this.header.appendChild(saveButton);
+    this.header.appendChild(fullscreenButton);
+    this.header.appendChild(closeButton);
     this.card.appendChild(this.header);
     context.appendChild(this.card);
     if (modal) this.toggleDraggable();
-    this.toggleDroppable();
   }
 
   destructor() {

diff --git a/lib/manager.js b/lib/manager.js
@@ -4,8 +4,8 @@ const singletonEnforcer = Symbol();
 const Canvas = require('../app/Canvas.js');
 const { Menu, MenuItem } = require('electron').remote;
 
-let applicationMenu;
-let canvasSelectionSubmenu;
+let applicationMenu; // reference item for accessing the AppMenu entries
+let canvasSelectionSubmenu; // reference item for accessing the AppMenu entries
 
 let canvasList;
 let currentCanvas;
@@ -56,6 +56,7 @@ class AppManager {
 
     let menuItem = new MenuItem({
       label: 'Canvas ' + canvas.id,
+      accelerator: ('Cmd+' + canvas.id),
       type: 'checkbox',
       checked: false,
       uuid: canvas.uuid,

diff --git a/style/card.css b/style/card.css
@@ -15,6 +15,10 @@ div.card {
   user-select: none;
 }
 
+div.card:hover {
+  box-shadow: 0 0 3pt 1pt rgba(102, 204, 117, 0.75);
+}
+
 div.card-header {
   height: 29px;
   background: rgba(89, 87, 90, 1.0);
@@ -27,3 +31,36 @@ div.card-header {
   font-family: 'Lato', Georgia, Serif;
   font-weight: bold;
 }
+
+div.card-header button {
+  height: 15px;
+  width: 15px;
+  position: absolute;
+  top: 7px;
+  right: 10px;
+  border: 0;
+  /*border-radius: 50%;*/
+  z-index: 9999;
+}
+
+div.card-header svg.close {
+  height: 15px;
+  width: 15px;
+  position: absolute;
+  top: 7px;
+  right: 10px;
+  border: 0;
+  z-index: 9999;
+}
+
+div.card-header button.close {
+  background: rgba(89, 87, 90, 1.0) url('../asset/close_dark.svg') center/15px auto no-repeat;
+  background-size: cover;
+}
+
+div.card-header button.close:hover,
+div.card-header button.close:active {
+  background: rgba(89, 87, 90, 1.0) url('../asset/close_active.svg') no-repeat;
+  background-size: cover;
+  cursor: pointer;
+}
diff --git a/style/dialog.css b/style/dialog.css
@@ -8,7 +8,7 @@ div.dialog {
   overflow: hidden;
 }
 
-button.close {
+div.dialog button.close {
   background: url('../asset/close_dark.svg') no-repeat;
   background-size: cover;
   height: 19px;
@@ -21,14 +21,14 @@ button.close {
   z-index: 9999;
 }
 
-button.close:hover,
-button.close:active {
+div.dialog button.close:hover,
+div.dialog button.close:active {
   background: url('../asset/close_active.svg') no-repeat;
   background-size: cover;
   cursor: pointer;
 }
 
-button.acknowledge {
+div.dialog button.acknowledge {
   height: 29px;
   width: 85px;
   color: rgba(0, 0, 0, 1.0);
@@ -40,7 +40,7 @@ button.acknowledge {
   font-size: 90%;
 }
 
-div.overlay {
+div.dialog div.overlay {
   background: rgba(40, 44, 52, 0.4);
   position: absolute;
   top: 0;