refactored undo/redo to the same toolbar

3 files changed, 66 insertions, 35 deletions

diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 1c1e08b2f..9bc5c551f 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -1,4 +1,6 @@
 @import "global_variables";
+@import "nodeModuleOverrides";
+
 html,
 body {
   width: 100%;
@@ -68,30 +70,45 @@ button:hover {
   font-size: 50%;
 }
 
-.add-button {
-  position: relative;
+.round-button {
   width: 2em;
   height: 2em;
   border-radius: 1em;
   font-size: 24px;
-  margin-right: 0.4em;
 }
 
-.add-button:hover {
+.round-button:hover {
   transform: scale(1.15);
 }
 
+.add-button {
+  position: relative;
+  margin-right: 0.4em;
+}
+
 .main-undoButtons {
   position: absolute;
   width: 150px;
   right: 0px;
 }
 
-// add nodes menu
-#add-nodes-menu {
+//toolbar stuff
+#toolbar {
   position: absolute;
+  bottom: 3.95em;
   left: 1em;
+
+  .toolbar-button {
+    display: block;
+    margin-bottom: 0.4em;
+  }
+}
+
+// add nodes menu. Note that the + button is actually an input label, not an actual button.
+#add-nodes-menu {
+  position: absolute;
   bottom: 1em;
+  left: 1em;
   label {
     background: $dark-color;
     color: $light-color;
@@ -140,22 +157,3 @@ ul#add-options-list {
     padding: 0;
   }
 }
-
-// goldenlayout stuff
-div .lm_header {
-  background: $dark-color;
-  min-height: 2em;
-}
-
-.lm_tab {
-  margin-top: 0.7em !important;
-  padding-top: 0.5em !important;
-  min-height: 1.4em;
-  padding-bottom: 0px;
-  border-radius: 5px;
-  font-family: $sans-serif !important;
-}
-
-.lm_header .lm_controls {
-  right: 1em !important;
-}
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index cf1bc1508..4b62dcfc2 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -26,6 +26,9 @@ import { faFilePdf } from '@fortawesome/free-solid-svg-icons';
 import { faObjectGroup } from '@fortawesome/free-solid-svg-icons';
 import { faTable } from '@fortawesome/free-solid-svg-icons';
 import { faGlobeAsia } from '@fortawesome/free-solid-svg-icons';
+import { faUndoAlt } from '@fortawesome/free-solid-svg-icons';
+import { faRedoAlt } from '@fortawesome/free-solid-svg-icons';
+import { faPenNib } from '@fortawesome/free-solid-svg-icons';
 
 
 configure({ enforceActions: "observed" });  // causes errors to be generated when modifying an observable outside of an action
@@ -47,6 +50,9 @@ library.add(faFilePdf);
 library.add(faObjectGroup);
 library.add(faTable);
 library.add(faGlobeAsia);
+library.add(faUndoAlt);
+library.add(faRedoAlt);
+library.add(faPenNib);
 
 Documents.initProtos(mainDocId, (res?: Document) => {
     if (res instanceof Document) {
@@ -107,29 +113,36 @@ Documents.initProtos(mainDocId, (res?: Document) => {
             <ContextMenu />
             <button className="clear-db-button" onClick={clearDatabase}>Clear Database</button>
 
-            {/* for the expandable add nodes menu */}
+            {/* @TODO this should really be moved into a moveable toolbar component, but for now let's put it here to meet the deadline */}
+            <div id="toolbar">
+                <button className="toolbar-button round-button" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button>
+                <button className="toolbar-button round-button" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button>
+                <button className="toolbar-button round-button"><FontAwesomeIcon icon="pen-nib" size="sm" /></button>
+            </div>
+
+            {/* for the expandable add nodes menu. Not included with the above because once it expands it expands the whole div with it, making canvas interactions limited. */}
             <div id="add-nodes-menu">
                 <input type="checkbox" id="add-menu-toggle" />
                 <label htmlFor="add-menu-toggle">+</label>
 
                 <div id="add-options-content">
                     <ul id="add-options-list">
-                        <li><div ref={textRef}><button className="add-button" onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>
+                        <li><div ref={textRef}><button className="round-button add-button" onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>
                             <FontAwesomeIcon icon="font" size="sm" />
                         </button></div></li>
-                        <li><div ref={imgRef}><button className="add-button" onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>
+                        <li><div ref={imgRef}><button className="round-button add-button" onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>
                             <FontAwesomeIcon icon="image" size="sm" />
                         </button></div></li>
-                        <li><div ref={pdfRef}><button className="add-button" onPointerDown={setupDrag(pdfRef, addPDFNode)} onClick={addClick(addPDFNode)}>
+                        <li><div ref={pdfRef}><button className="round-button add-button" onPointerDown={setupDrag(pdfRef, addPDFNode)} onClick={addClick(addPDFNode)}>
                             <FontAwesomeIcon icon="file-pdf" size="sm" />
                         </button></div></li>
-                        <li><div ref={webRef}><button className="add-button" onPointerDown={setupDrag(webRef, addWebNode)} onClick={addClick(addWebNode)}>
+                        <li><div ref={webRef}><button className="round-button add-button" onPointerDown={setupDrag(webRef, addWebNode)} onClick={addClick(addWebNode)}>
                             <FontAwesomeIcon icon="globe-asia" size="sm" />
                         </button></div></li>
-                        <li><div ref={colRef}><button className="add-button" onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>
+                        <li><div ref={colRef}><button className="round-button add-button" onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>
                             <FontAwesomeIcon icon="object-group" size="sm" />
                         </button></div></li>
-                        <li><div ref={schemaRef}><button className="add-button" onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>
+                        <li><div ref={schemaRef}><button className="round-button add-button" onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>
                             <FontAwesomeIcon icon="table" size="sm" />
                         </button></div></li>
                     </ul>
@@ -137,9 +150,6 @@ Documents.initProtos(mainDocId, (res?: Document) => {
 
             </div>
 
-            <button className="main-undoButtons" style={{ bottom: '25px' }} onClick={() => UndoManager.Undo()}>Undo</button>
-            <button className="main-undoButtons" style={{ bottom: '0px' }} onClick={() => UndoManager.Redo()}>Redo</button>
-
             <InkingControl />
         </div >),
         document.getElementById('root'));
diff --git a/src/client/views/_nodeModuleOverrides.scss b/src/client/views/_nodeModuleOverrides.scss
new file mode 100644
index 000000000..6f97e60f8
--- /dev/null
+++ b/src/client/views/_nodeModuleOverrides.scss
@@ -0,0 +1,23 @@
+// this file is for overriding all the css from installed node modules
+
+// goldenlayout stuff
+div .lm_header {
+  background: $dark-color;
+  min-height: 2em;
+}
+
+.lm_tab {
+  margin-top: 0.6em !important;
+  padding-top: 0.5em !important;
+  min-height: 1.35em;
+  padding-bottom: 0px;
+  border-radius: 5px;
+  font-family: $sans-serif !important;
+}
+
+.lm_header .lm_controls {
+  right: 1em !important;
+}
+
+// @TODO the ril__navgiation buttons in the img gallery are a lil messed up but I can't figure out
+// why. Low priority for now but it's bugging me. --Julie