Merge branch 'ui_improvements' of https://github.com/browngraphicslab/Dash-Web into ui_improvements

6 files changed, 163 insertions, 31 deletions

diff --git a/src/.DS_Store b/src/.DS_Store
index 620e4ebce..90213270f 100644
--- a/src/.DS_Store
+++ b/src/.DS_Store
diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss
index fa43f5326..ea580d104 100644
--- a/src/client/util/TooltipTextMenu.scss
+++ b/src/client/util/TooltipTextMenu.scss
@@ -1,8 +1,9 @@
+@import "../views/global_variables";
 
 .tooltipMenu {
     position: absolute;
     z-index: 20;
-    background: rgb(19, 18, 18);
+    background: $dark-color;
     border: 1px solid silver;
     border-radius: 4px;
     padding: 2px 10px;
@@ -31,14 +32,14 @@
     bottom: -4.5px;
     border: 5px solid transparent;
     border-bottom-width: 0;
-    border-top-color: black;
+    border-top-color: $dark-color;
   }
 
   .menuicon {
     display: inline-block;
     border-right: 1px solid rgba(0, 0, 0, 0.2);
     //color: rgb(19, 18, 18);
-    color: white;
+    color: $light-color;
     line-height: 1;
     padding: 0px 2px;
     margin: 1px;
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index 3b87fe9de..8cc653bf2 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -117,7 +117,7 @@ export class TooltipTextMenu {
     let width = Math.abs(start.left - end.left) / 2;
     let mid = Math.min(start.left, end.left) + width;
     //THIS WIDTH IS 15 * NUMBER OF ICONS + 15
-    this.tooltip.style.width = 120 + "px";
+    this.tooltip.style.width = 122 + "px";
     this.tooltip.style.bottom = (box.bottom - start.top) + "px";
   }
 
diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss
index f654b194b..71c7e9ce0 100644
--- a/src/client/views/InkingCanvas.scss
+++ b/src/client/views/InkingCanvas.scss
@@ -1,3 +1,4 @@
+@import "global_variables";
 .inking-canvas {
     position: fixed;
     top: -50000px;
@@ -13,20 +14,128 @@
 
 .inking-control {
     position: absolute;
-    right: 0;
-    bottom: 75px;
-    text-align: right;
+    left: 70px;
+    bottom: 70px;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    label,
+    input,
+    option {
+        font-size: 12px;
+    }
+    input[type=range] {
+        -webkit-appearance: none;
+        background-color: transparent;
+        vertical-align: middle;
+        &:focus {
+            outline: none;
+        }
+        &::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 3px;
+            border-radius: 1.5px;
+            cursor: pointer;
+            background: $light-color;
+        }
+        &::-webkit-slider-thumb {
+            height: 12px;
+            width: 12px;
+            border: 1px solid $intermediate-color;
+            border-radius: 6px;
+            background: $light-color;
+            cursor: pointer;
+            -webkit-appearance: none;
+            margin-top: -4px;
+        }
+        &::-moz-range-track {
+            width: 100%;
+            height: 3px;
+            border-radius: 1.5px;
+            cursor: pointer;
+            background: $light-color;
+        }
+        &::-moz-range-thumb {
+            height: 12px;
+            width: 12px;
+            border: 1px solid $intermediate-color;
+            border-radius: 6px;
+            background: $light-color;
+            cursor: pointer;
+            -webkit-appearance: none;
+            margin-top: -4px;
+        }
+    }
+    input[type=text] {
+        border: none;
+        padding: 0 3px;
+    }
     .ink-panel {
-        margin-top: 12px;
+        margin: 12px 18px 0 0;
+        height: 36px;
+        vertical-align: middle;
+        line-height: 36px;
+        padding: 0 10px;
+        background-color: $dark-color;
+        color: $light-color;
+        border-radius: 18px;
         &:first {
             margin-top: 0;
         }
     }
+    .ink-tools {
+        display: flex;
+        background-color: transparent;
+        border-radius: 0;
+        padding: 0;
+        button {
+            height: 36px;
+            border-radius: 18px;
+            margin-right: 6px;
+            padding: 0 16px;
+            font-size: 50%;
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
     .ink-size {
         display: flex;
         justify-content: space-between;
-        input {
-            width: 85%;
+        input[type=text] {
+            width: 42px;
+        }
+        >* {
+            margin-right: 6px;
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+    .ink-color {
+        display: flex;
+        position: relative;
+        padding-right: 0;
+        .ink-color-display {
+            width: 60px;
+            height: 100%;
+            border-radius: 0 18px 18px 0;
+            margin-left: 6px;
+            cursor: pointer;
+            text-align: center;
+            span {
+                color: $light-color;
+                font-size: 8px;
+                user-select: none;
+            }
+        }
+        .ink-color-picker {
+            background-color: $dark-color;
+            border-radius: 5px;
+            padding: 6px;
+            position: absolute;
+            bottom: 42px;
+            left: 0;
         }
     }
 }
\ No newline at end of file
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index fc6a266e4..695b761c9 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -1,16 +1,18 @@
 import { observable, action, computed } from "mobx";
 import { CirclePicker, ColorResult } from 'react-color'
-import React = require("react");
-import "./InkingCanvas.scss"
 import { InkTool } from "../../fields/InkField";
 import { observer } from "mobx-react";
+import React = require("react");
+import "./InkingCanvas.scss"
 
 @observer
 export class InkingControl extends React.Component {
     static Instance: InkingControl = new InkingControl({});
     @observable private _selectedTool: InkTool = InkTool.None;
-    @observable private _selectedColor: string = "#f44336";
+    @observable private _selectedColor: string = "rgb(244, 67, 54)";
     @observable private _selectedWidth: string = "25";
+    @observable private _open: boolean = false;
+    @observable private _colorPickerDisplay: boolean = false;
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -54,24 +56,45 @@ export class InkingControl extends React.Component {
         return {}
     }
 
+    @action
+    toggleDisplay = () => {
+        this._open = !this._open;
+    }
+
+    @action
+    toggleColorPicker = () => {
+        this._colorPickerDisplay = !this._colorPickerDisplay;
+    }
+
     render() {
         return (
-            <div className="inking-control">
-                <div className="ink-tools ink-panel">
-                    <button onClick={() => this.switchTool(InkTool.Pen)} style={this.selected(InkTool.Pen)}>Pen</button>
-                    <button onClick={() => this.switchTool(InkTool.Highlighter)} style={this.selected(InkTool.Highlighter)}>Highlighter</button>
-                    <button onClick={() => this.switchTool(InkTool.Eraser)} style={this.selected(InkTool.Eraser)}>Eraser</button>
-                    <button onClick={() => this.switchTool(InkTool.None)} style={this.selected(InkTool.None)}> None</button>
-                </div>
-                <div className="ink-size ink-panel">
-                    <label htmlFor="stroke-width">Size</label>
-                    <input type="range" min="1" max="100" defaultValue="25" name="stroke-width"
+            <ul className="inking-control" style={this._open ? { display: "flex" } : { display: "none" }}>
+                <li className="ink-tools ink-panel">
+                    <div className="ink-tool-buttons">
+                        <button onClick={() => this.switchTool(InkTool.Pen)} style={this.selected(InkTool.Pen)}>Pen</button>
+                        <button onClick={() => this.switchTool(InkTool.Highlighter)} style={this.selected(InkTool.Highlighter)}>Highlighter</button>
+                        <button onClick={() => this.switchTool(InkTool.Eraser)} style={this.selected(InkTool.Eraser)}>Eraser</button>
+                        <button onClick={() => this.switchTool(InkTool.None)} style={this.selected(InkTool.None)}> None</button>
+                    </div>
+                </li>
+                <li className="ink-size ink-panel">
+                    <label htmlFor="stroke-width">Size: </label>
+                    <input type="text" min="1" max="100" value={this._selectedWidth} name="stroke-width"
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.switchWidth(e.target.value)} />
+                    <input type="range" min="1" max="100" value={this._selectedWidth} name="stroke-width"
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) => this.switchWidth(e.target.value)} />
-                </div>
-                <div className="ink-color ink-panel">
-                    <CirclePicker onChange={this.switchColor} />
-                </div>
-            </div>
+                </li>
+                <li className="ink-color ink-panel">
+                    <label>Color: </label>
+                    <div className="ink-color-display" style={{ backgroundColor: this._selectedColor }}
+                        onClick={() => this.toggleColorPicker()}>
+                        {this._colorPickerDisplay ? <span>&#9660;</span> : <span>&#9650;</span>}
+                    </div>
+                    <div className="ink-color-picker" style={this._colorPickerDisplay ? { display: "block" } : { display: "none" }}>
+                        <CirclePicker onChange={this.switchColor} />
+                    </div>
+                </li>
+            </ul >
         )
     }
 }
\ No newline at end of file
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index e4ef90d97..d0bfa1f21 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -124,8 +124,7 @@ Documents.initProtos(mainDocId, (res?: Document) => {
             < div id="toolbar" >
                 <button className="toolbar-button round-button" title="Undo" onClick={() => UndoManager.Undo()}><FontAwesomeIcon icon="undo-alt" size="sm" /></button>
                 <button className="toolbar-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button>
-                {/* @TODO do the ink thing */}
-                < button className="toolbar-button round-button" title="Ink" > <FontAwesomeIcon icon="pen-nib" size="sm" /></button >
+                <button className="toolbar-button round-button" title="Ink" onClick={() => InkingControl.Instance.toggleDisplay()}><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. */}
@@ -164,7 +163,7 @@ Documents.initProtos(mainDocId, (res?: Document) => {
 
             </div >
 
-            {/* <InkingControl /> */}
+            <InkingControl />
         </div >),
         document.getElementById('root'));
 })