add button is now a drawer ish

2 files changed, 77 insertions, 15 deletions

diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 9e7047208..66b5000d7 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -1,10 +1,11 @@
 @import "global_variables";
+@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,700');
 html,
 body {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    font-family: 'Hind Siliguri', sans-serif;
+    font-family: 'Work Sans', sans-serif;
     margin: 0;
 }
 
@@ -17,7 +18,8 @@ h1 {
     color: $dark-color;
     text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
     z-index: 9999;
-    font-family: 'Fjalla One', sans-serif;
+    font-family: 'Work Sans', sans-serif;
+    font-weight: 700;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
@@ -52,10 +54,12 @@ button {
     letter-spacing: 2px;
     font-size: 75%;
     padding: 10px;
+    transition: transform 0.2s;
 }
 
 button:hover {
     background: $dark-accent;
+    transform: scale(1.05);
 }
 
 .clear-db-button {
@@ -66,13 +70,12 @@ button:hover {
 }
 
 .add-button {
-    position: absolute;
-    left: 1em;
-    bottom: 1em;
+    position: relative;
     width: 2em;
     height: 2em;
     border-radius: 1em;
     font-size: 24px;
+    margin-right: 0.4em;
 }
 
 .main-undoButtons {
@@ -81,6 +84,60 @@ button:hover {
     right: 0px;
 }
 
+// add nodes menu
+#add-nodes-menu {
+    position: absolute;
+    left: 1em;
+    bottom: 1em;
+    label {
+        background: $dark-color;
+        color: $light-color;
+        padding: 10px;
+        display: inline-block;
+        border-radius: 1em;
+        font-size: 24px;
+        width: 1.09em;
+        margin-right: 0.4em;
+        text-align: center;
+        cursor: pointer;
+        transition: transform 0.5s;
+    }
+    label:hover {
+        background: $dark-accent;
+    }
+    input {
+        display: none;
+    }
+    input:not(:checked)~#add-options-content {
+        display: none;
+    }
+    input:checked~label {
+        transform: rotate(45deg);
+        transition: transform 0.5s;
+        cursor: pointer;
+    }
+}
+
+#add-options-content {
+    display: table;
+    opacity: 1;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    float: right;
+    bottom: 0.3em;
+    margin-bottom: -1.68em;
+}
+
+ul#add-options-list {
+    list-style: none;
+    padding: 0;
+    li {
+        display: inline-block;
+        padding: 0;
+    }
+}
+
 // goldenlayout stuff
 div .lm_header {
     background: $dark-color;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 369e6ae66..835ba68b5 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -63,15 +63,6 @@ Documents.initProtos(mainDocId, (res?: Document) => {
     let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, height: 200, title: "an image of a cat" }));
     let addWebNode = action(() => Documents.WebDocument(weburl, { width: 200, height: 200, title: "a sample web page" }));
 
-    let addNodesContextMenu = (e: React.MouseEvent): void => {
-        ContextMenu.Instance.displayMenu(e.pageX, e.pageY);
-        ContextMenu.Instance.addItem({ description: "Textbox", event: addClick(addTextNode) });
-        ContextMenu.Instance.addItem({ description: "Image", event: addClick(addImageNode) });
-        ContextMenu.Instance.addItem({ description: "PDF", event: addClick(addPDFNode) });
-        ContextMenu.Instance.addItem({ description: "Website", event: addClick(addWebNode) });
-        ContextMenu.Instance.addItem({ description: "Collection", event: addClick(addColNode) });
-        ContextMenu.Instance.addItem({ description: "Schema", event: addClick(addSchemaNode) });
-    }
 
     let addClick = (creator: () => Document) => action(() =>
         mainfreeform.GetList<Document>(KeyStore.Data, []).push(creator())
@@ -98,7 +89,21 @@ Documents.initProtos(mainDocId, (res?: Document) => {
             <DocumentDecorations />
             <ContextMenu />
             <button className="clear-db-button" onClick={clearDatabase}>Clear Database</button>
-            <button className="add-button" onClick={addNodesContextMenu}>+</button>
+
+            {/* for the expandable add nodes menu */}
+            <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><button className="add-button" onClick={() => console.log("yes")}>T</button></li>
+                        <li><button className="add-button">I</button></li>
+                        <li><button className="add-button">P</button></li>
+                    </ul>
+                </div>
+
+            </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>