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

3 files changed, 156 insertions, 141 deletions

diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss
index 71c7e9ce0..d132504fc 100644
--- a/src/client/views/InkingCanvas.scss
+++ b/src/client/views/InkingCanvas.scss
@@ -1,141 +1,147 @@
 @import "global_variables";
 .inking-canvas {
-    position: fixed;
-    top: -50000px;
-    left: -50000px; // z-index: 99; //overlays ink on top of everything
-    svg {
-        width: 100000px;
-        height: 100000px;
-        .highlight {
-            mix-blend-mode: multiply;
-        }
+  position: fixed;
+  top: -50000px;
+  left: -50000px; // z-index: 99; //overlays ink on top of everything
+  svg {
+    width: 100000px;
+    height: 100000px;
+    .highlight {
+      mix-blend-mode: multiply;
     }
+  }
 }
 
 .inking-control {
-    position: absolute;
-    left: 70px;
-    bottom: 70px;
-    margin: 0;
-    padding: 0;
+  position: absolute;
+  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;
+    margin-top: 8px;
+    &:focus {
+      outline: none;
+    }
+    &::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 3px;
+      border-radius: 1.5px;
+      cursor: pointer;
+      background: $intermediate-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;
+    background: transparent;
+    color: $light-color;
+  }
+  .ink-panel {
+    margin: 6px 12px 6px 0;
+    height: 30px;
+    vertical-align: middle;
+    line-height: 36px;
+    padding: 0 10px;
+    color: $intermediate-color;
+    &:first {
+      margin-top: 0;
+    }
+  }
+  .ink-tools {
     display: flex;
-    label,
-    input,
-    option {
-        font-size: 12px;
+    background-color: transparent;
+    border-radius: 0;
+    padding: 0;
+    button {
+      height: 36px;
+      padding: 0px;
+      padding-bottom: 3px;
+      margin-left: 10px;
+      background-color: transparent;
+      color: $intermediate-color;
     }
-    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;
-        }
+    button:hover {
+      transform: scale(1.15);
     }
-    input[type=text] {
-        border: none;
-        padding: 0 3px;
+  }
+  .ink-size {
+    display: flex;
+    justify-content: space-between;
+    input[type="text"] {
+      width: 42px;
     }
-    .ink-panel {
-        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;
-        }
+    > * {
+      margin-right: 6px;
+      &:last-child {
+        margin-right: 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-color {
+    display: flex;
+    position: relative;
+    padding-right: 0;
+    label {
+      margin-right: 6px;
     }
-    .ink-size {
-        display: flex;
-        justify-content: space-between;
-        input[type=text] {
-            width: 42px;
-        }
-        >* {
-            margin-right: 6px;
-            &:last-child {
-                margin-right: 0;
-            }
-        }
+    .ink-color-display {
+      border-radius: 11px;
+      width: 22px;
+      height: 22px;
+      margin-top: 6px;
+      cursor: pointer;
+      text-align: center;
+      //   span {
+      //     color: $light-color;
+      //     font-size: 8px;
+      //     user-select: none;
+      //   }
     }
-    .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;
-        }
+    .ink-color-picker {
+      background-color: $light-color;
+      border-radius: 5px;
+      padding: 12px;
+      position: absolute;
+      bottom: 36px;
+      left: -3px;
+      box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index 695b761c9..523971af4 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -4,6 +4,11 @@ import { InkTool } from "../../fields/InkField";
 import { observer } from "mobx-react";
 import React = require("react");
 import "./InkingCanvas.scss"
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPen, faHighlighter, faEraser, faBan } from '@fortawesome/free-solid-svg-icons';
+
+library.add(faPen, faHighlighter, faEraser, faBan);
 
 @observer
 export class InkingControl extends React.Component {
@@ -51,7 +56,7 @@ export class InkingControl extends React.Component {
 
     selected = (tool: InkTool) => {
         if (this._selectedTool === tool) {
-            return { backgroundColor: "#61aaa3", color: "white" }
+            return { color: "#61aaa3" }
         }
         return {}
     }
@@ -71,29 +76,29 @@ export class InkingControl extends React.Component {
             <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>
+                        <button onClick={() => this.switchTool(InkTool.Pen)} style={this.selected(InkTool.Pen)}><FontAwesomeIcon icon="pen" size="2x" /></button>
+                        <button onClick={() => this.switchTool(InkTool.Highlighter)} style={this.selected(InkTool.Highlighter)}><FontAwesomeIcon icon="highlighter" size="2x" /></button>
+                        <button onClick={() => this.switchTool(InkTool.Eraser)} style={this.selected(InkTool.Eraser)}><FontAwesomeIcon icon="eraser" size="2x" /></button>
+                        <button onClick={() => this.switchTool(InkTool.None)} style={this.selected(InkTool.None)}><FontAwesomeIcon icon="ban" size="2x" /></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)} />
-                </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>}
+                        {/* {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} />
+                        <CirclePicker onChange={this.switchColor} circleSize={22} width={"220"} />
                     </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)} />
+                </li>
             </ul >
         )
     }
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index a375cfc48..f5d5597a7 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -151,8 +151,12 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         })
     }
 
+    onKeyPress(e: React.KeyboardEvent) {
+        e.stopPropagation();
+    }
     render() {
         return (<div className="formattedTextBox-cont"
+            onKeyPress={this.onKeyPress}
             onPointerDown={this.onPointerDown}
             onContextMenu={this.specificContextMenu}
             onWheel={this.onPointerWheel}