added some color theming and started global button styles

6 files changed, 92 insertions, 27 deletions

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index ea40c8e99..8786a623f 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -1,3 +1,4 @@
+@import "global_variables";
 .contextMenu-cont {
     position: absolute;
     display: flex;
@@ -31,7 +32,7 @@
 
 .contextMenu-item:hover {
     transition: all .1s;
-    background: #B0E0E6;
+    background: $light-emphasis;
 }
 
 .contextMenu-description {
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index e8b93a18b..e86b67565 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -1,3 +1,4 @@
+@import 'global_variables';
 #documentDecorations-container {
     position: absolute;
     display: grid;
@@ -10,7 +11,7 @@
     }
     .documentDecorations-resizer {
         pointer-events: auto;
-        background: lightblue;
+        background: $light-emphasis;
         opacity: 0.4;
     }
     #documentDecorations-topLeftResizer,
diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss
index 4334ed299..f8c7e24d5 100644
--- a/src/client/views/Main.scss
+++ b/src/client/views/Main.scss
@@ -1,3 +1,4 @@
+@import "global_variables";
 html,
 body {
     width: 100%;
@@ -13,7 +14,7 @@ h1 {
     top: 30px;
     left: 50%;
     transform: translateX(-50%);
-    color: black;
+    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;
@@ -29,23 +30,71 @@ p {
     margin: 0px;
     padding: 0px;
 }
+
 ::-webkit-scrollbar {
     -webkit-appearance: none;
-    height:5px;
-    width:5px;
+    height: 5px;
+    width: 5px;
 }
+
 ::-webkit-scrollbar-thumb {
     border-radius: 2px;
-    background-color: rgba(0,0,0,.5);
+    background-color: rgba(0, 0, 0, .5);
+}
+
+// button stuff
+button {
+    background: $dark-color;
+    outline: none;
+    border: 0px;
+    color: $light-color;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 75%;
+    padding: 10px;
 }
 
-.main-buttonDiv {
+button:hover {
+    background: $dark-emphasis;
+}
+
+.clear-db-button {
     position: absolute;
-    width: 150px;
-    left: 0px;
+    left: 47%;
+    bottom: 1em;
+    font-size: 50%;
+}
+
+.add-button {
+    position: absolute;
+    left: 1em;
+    bottom: 1em;
+    width: 2em;
+    height: 2em;
+    border-radius: 1em;
+    font-size: 24px;
 }
+
 .main-undoButtons {
     position: absolute;
     width: 150px;
     right: 0px;
 }
+
+// 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;
+}
+
+.lm_header .lm_controls {
+    right: 1em !important;
+}
\ No newline at end of file
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index c9bdc24c2..ca3bb76d2 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -33,6 +33,7 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
 const mainDocId = "mainDoc";
 let mainContainer: Document;
 let mainfreeform: Document;
+
 Documents.initProtos(mainDocId, (res?: Document) => {
     if (res instanceof Document) {
         mainContainer = res;
@@ -51,6 +52,11 @@ Documents.initProtos(mainDocId, (res?: Document) => {
         }, 0);
     }
 
+
+    let specificContextMenu = (e: React.MouseEvent): void => {
+        ContextMenu.Instance.addItem({ description: "Freeform", event: () => console.log("dsjflkaj") });
+    }
+
     let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg";
     let pdfurl = "http://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf"
     let weburl = "https://cs.brown.edu/courses/cs166/";
@@ -86,22 +92,26 @@ Documents.initProtos(mainDocId, (res?: Document) => {
                 ContainingCollectionView={undefined} />
             <DocumentDecorations />
             <ContextMenu />
-            <div className="main-buttonDiv" style={{ bottom: '0px' }} ref={imgRef} >
-                <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div>
-            <div className="main-buttonDiv" style={{ bottom: '25px' }} ref={webRef} >
-                <button onPointerDown={setupDrag(webRef, addWebNode)} onClick={addClick(addWebNode)}>Add Web</button></div>
-            <div className="main-buttonDiv" style={{ bottom: '50px' }} ref={textRef}>
-                <button onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>Add Text</button></div>
-            <div className="main-buttonDiv" style={{ bottom: '75px' }} ref={colRef}>
-                <button onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>Add Collection</button></div>
-            <div className="main-buttonDiv" style={{ bottom: '100px' }} ref={schemaRef}>
-                <button onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>Add Schema</button></div>
-            <div className="main-buttonDiv" style={{ bottom: '125px' }} >
-                <button onClick={clearDatabase}>Clear Database</button></div>
-            <div className="main-buttonDiv" style={{ bottom: '150px' }} ref={pdfRef}>
-                <button onPointerDown={setupDrag(pdfRef, addPDFNode)} onClick={addClick(addPDFNode)}>Add PDF</button></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>
+            <button className="clear-db-button" onClick={clearDatabase}>Clear Database</button>
+            <button className="add-button" onClick={specificContextMenu}>+</button>
+            <ul>
+                <li><div className="main-buttonDiv" ref={imgRef} >
+                    <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div></li>
+                <li><div className="main-buttonDiv" ref={webRef} >
+                    <button onPointerDown={setupDrag(webRef, addWebNode)} onClick={addClick(addWebNode)}>Add Web</button></div></li>
+                <li><div className="main-buttonDiv" ref={textRef}>
+                    <button onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>Add Text</button></div></li>
+                <li><div className="main-buttonDiv" ref={colRef}>
+                    <button onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>Add Collection</button></div></li>
+                <li><div className="main-buttonDiv" ref={schemaRef}>
+                    <button onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>Add Schema</button></div></li>
+                <li></li>
+                <li><div className="main-buttonDiv" ref={pdfRef}>
+                    <button onPointerDown={setupDrag(pdfRef, addPDFNode)} onClick={addClick(addPDFNode)}>Add PDF</button></div></li>
+                <button className="main-undoButtons" style={{ bottom: '25px' }} onClick={() => UndoManager.Undo()}>Undo</button>
+                <button className="main-undoButtons" style={{ bottom: '0px' }} onClick={() => UndoManager.Redo()}>Redo</button>
+            </ul>
+
             <InkingControl />
         </div>),
         document.getElementById('root'));
diff --git a/src/client/views/_global_variables.scss b/src/client/views/_global_variables.scss
new file mode 100644
index 000000000..5ed767258
--- /dev/null
+++ b/src/client/views/_global_variables.scss
@@ -0,0 +1,4 @@
+$light-color: #FCFBF7;
+$dark-color: #121721;
+$dark-emphasis: #61AAA3;
+$light-emphasis: #AFCBFF;
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index ab913897b..5797fde45 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,7 +1,7 @@
+@import "../global_variables";
 .documentView-node {
     position: absolute;
-    background: #cdcdcd;
-    //overflow: hidden;
+    background: $light-color; //overflow: hidden;
     &.minimized {
         width: 30px;
         height: 30px;