From c6a3faf616e68ede2d67580344e4337c3f0cfdc5 Mon Sep 17 00:00:00 2001
From: Jude <julie_wang1@brown.edu>
Date: Sat, 9 Mar 2019 17:14:42 -0500
Subject: added some flair to freeform views

---
 src/client/views/InkingControl.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client/views/InkingControl.tsx')

diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index 929fb42a1..fc6a266e4 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -49,7 +49,7 @@ export class InkingControl extends React.Component {
 
     selected = (tool: InkTool) => {
         if (this._selectedTool === tool) {
-            return { backgroundColor: "black", color: "white" }
+            return { backgroundColor: "#61aaa3", color: "white" }
         }
         return {}
     }
-- 
cgit v1.2.3-70-g09d2


From 06fb2bef46222c65d594b600bfeb72fb6a7f8212 Mon Sep 17 00:00:00 2001
From: Fawn <fangrui_tong@brown.edu>
Date: Sun, 10 Mar 2019 17:24:11 -0400
Subject: inking ui improvements

---
 src/client/views/InkingCanvas.scss | 121 +++++++++++++++++++++++++++++++++++--
 src/client/views/InkingControl.tsx |  59 ++++++++++++------
 src/client/views/Main.tsx          |   5 +-
 3 files changed, 158 insertions(+), 27 deletions(-)

(limited to 'src/client/views/InkingControl.tsx')

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'));
 })
-- 
cgit v1.2.3-70-g09d2


From 99677c577a04aa289543ff5e97bd44e01b8fb4ab Mon Sep 17 00:00:00 2001
From: Jude <julie_wang1@brown.edu>
Date: Mon, 11 Mar 2019 16:21:30 -0400
Subject: inking controls changes

---
 src/client/views/InkingCanvas.scss | 260 +++++++++++++++++++------------------
 src/client/views/InkingControl.tsx |  33 +++--
 2 files changed, 152 insertions(+), 141 deletions(-)

(limited to 'src/client/views/InkingControl.tsx')

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 >
         )
     }
-- 
cgit v1.2.3-70-g09d2


From 736e0bdc6fb2b98592889bc7ba0991abd56bda29 Mon Sep 17 00:00:00 2001
From: Hannah Chow <hannah_chow@brown.edu>
Date: Mon, 11 Mar 2019 17:35:54 -0400
Subject: linking kind of merged

---
 package-lock.json                         | 36 +++++++++++---
 src/client/views/DocumentDecorations.scss | 82 ++++++++++++++++---------------
 src/client/views/DocumentDecorations.tsx  |  4 +-
 src/client/views/InkingControl.tsx        |  6 +--
 src/client/views/Main.tsx                 | 12 +----
 src/client/views/nodes/DocumentView.tsx   |  6 ---
 6 files changed, 76 insertions(+), 70 deletions(-)

(limited to 'src/client/views/InkingControl.tsx')

diff --git a/package-lock.json b/package-lock.json
index 75c02628e..4830b4ac1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3574,14 +3574,18 @@
       },
       "dependencies": {
         "readable-stream": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.1.1.tgz",
-          "integrity": "sha512-DkN66hPyqDhnIQ6Jcsvx9bFjhw214O4poMBcIMgPVpQvNy9a0e0Uhg5SqySyDKAmUlwt8LonTBz1ezOnM8pUdA==",
+          "version": "2.3.6",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
+          "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
           "dev": true,
           "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
           }
         }
       }
@@ -11929,6 +11933,26 @@
       "requires": {
         "is-fullwidth-code-point": "^2.0.0",
         "strip-ansi": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
       }
     },
     "string_decoder": {
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index f39f31c3b..a29bf36fa 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -1,51 +1,18 @@
 @import "global_variables";
 #documentDecorations-container {
-<<<<<<< HEAD
-  position: absolute;
-  display: grid;
-  z-index: 1000;
-  grid-template-rows: 8px 1fr 8px;
-  grid-template-columns: 8px 1fr 8px;
-  pointer-events: none;
-  #documentDecorations-centerCont {
-    background: none;
-  }
-  .documentDecorations-resizer {
-    pointer-events: auto;
-    background: $alt-accent;
-    opacity: 0.8;
-  }
-  #documentDecorations-topLeftResizer,
-  #documentDecorations-bottomRightResizer {
-    cursor: nwse-resize;
-  }
-  #documentDecorations-topRightResizer,
-  #documentDecorations-bottomLeftResizer {
-    cursor: nesw-resize;
-  }
-  #documentDecorations-topResizer,
-  #documentDecorations-bottomResizer {
-    cursor: ns-resize;
-  }
-  #documentDecorations-leftResizer,
-  #documentDecorations-rightResizer {
-    cursor: ew-resize;
-  }
-}
-=======
     position: absolute;
     display: grid;
     z-index: 1000;
-    grid-template-rows: 20px 1fr 20px 0px;
-    grid-template-columns: 20px 1fr 20px;
+    grid-template-rows: 8px 1fr 8px 30px;
+    grid-template-columns: 8px 1fr 8px;
     pointer-events: none;
     #documentDecorations-centerCont {
         background: none;
     }
     .documentDecorations-resizer {
         pointer-events: auto;
-        background: lightblue;
-        opacity: 0.4;
+        background: $alt-accent;
+        opacity: 0.8;
     }
     #documentDecorations-topLeftResizer,
     #documentDecorations-bottomRightResizer {
@@ -63,8 +30,43 @@
     #documentDecorations-rightResizer {
         cursor: ew-resize;
     }
-    
 }
+
+//     position: absolute;
+//     display: grid;
+//     z-index: 1000;
+//     grid-template-rows: 20px 1fr 20px 0px;
+//     grid-template-columns: 20px 1fr 20px;
+//     pointer-events: none;
+//     #documentDecorations-centerCont {
+//         background: none;
+//     }
+//     .documentDecorations-resizer {
+//         pointer-events: auto;
+//         background: lightblue;
+//         opacity: 0.4;
+//     }
+//     #documentDecorations-topLeftResizer,
+//     #documentDecorations-bottomRightResizer {
+//         cursor: nwse-resize;
+//     }
+//     #documentDecorations-topRightResizer,
+//     #documentDecorations-bottomLeftResizer {
+//         cursor: nesw-resize;
+//     }
+//     #documentDecorations-topResizer,
+//     #documentDecorations-bottomResizer {
+//         cursor: ns-resize;
+//     }
+//     #documentDecorations-leftResizer,
+//     #documentDecorations-rightResizer {
+//         cursor: ew-resize;
+//     }
+// }
+.linkFlyout {
+    grid-column: 1/4
+}
+
 .linkButton-empty {
     height: 20px;
     width: 20px;
@@ -74,6 +76,7 @@
     pointer-events: auto;
     background-color: #2B6091;
 }
+
 .linkButton-nonempty {
     height: 20px;
     width: 20px;
@@ -82,5 +85,4 @@
     opacity: 0.6;
     pointer-events: auto;
     background-color: rgb(35, 165, 42);
-}
->>>>>>> 618e66a5a070f1aac9224bd3f44b76a5ac314bfa
+}
\ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index a644e4dbe..b75644ecd 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -220,7 +220,7 @@ export class DocumentDecorations extends React.Component {
         return (
             <div id="documentDecorations-container" style={{
                 width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
-                height: (bounds.b - bounds.y + this._resizeBorderWidth) + "px",
+                height: (bounds.b - bounds.y + this._resizeBorderWidth + 30) + "px",
                 left: bounds.x - this._resizeBorderWidth / 2,
                 top: bounds.y - this._resizeBorderWidth / 2,
             }}>
@@ -234,7 +234,7 @@ export class DocumentDecorations extends React.Component {
                 <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
 
-                {linkButton}
+                <div className="linkFlyout">{linkButton}</div>
 
             </div >
         )
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index 96bf4d091..bf633b034 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -1,14 +1,10 @@
 import { observable, action, computed } from "mobx";
-<<<<<<< HEAD
+
 import { CirclePicker, ColorResult } from 'react-color'
-=======
-import { CirclePicker, ColorResult } from 'react-color';
 import React = require("react");
 import "./InkingCanvas.scss"
->>>>>>> 618e66a5a070f1aac9224bd3f44b76a5ac314bfa
 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';
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 1c0b9684e..687c765ec 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -82,7 +82,6 @@ Documents.initProtos(mainDocId, (res?: Document) => {
     let audiourl = "http://techslides.com/demos/samples/sample.mp3";
     let videourl = "http://techslides.com/demos/sample-videos/small.mp4";
     let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {}))
-<<<<<<< HEAD
     let addTextNode = action(() => Documents.TextDocument({ width: 230, height: 130, title: "a text note" }))
     let addColNode = action(() => Documents.FreeformDocument([], { width: 300, height: 300, title: "a freeform collection" }));
     let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 450, height: 200, title: "a schema collection" }));
@@ -91,16 +90,7 @@ Documents.initProtos(mainDocId, (res?: Document) => {
     let addWebNode = action(() => Documents.WebDocument(weburl, { width: 300, height: 400, title: "a sample web page" }));
     let addVideoNode = action(() => Documents.VideoDocument(videourl, { width: 300, height: 250, title: "video node" }));
     let addAudioNode = action(() => Documents.AudioDocument(audiourl, { width: 250, height: 100, title: "audio node" }));
-=======
-    let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" }))
-    let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a freeform collection" }));
-    let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" }));
-    let addVideoNode = action(() => Documents.VideoDocument(videourl, { width: 200, height: 200, title: "video node" }));
-    let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 200, height: 200, title: "a schema collection" }));
-    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 addAudioNode = action(() => Documents.AudioDocument(audiourl, { width: 200, height: 200, title: "audio node" }))
->>>>>>> 618e66a5a070f1aac9224bd3f44b76a5ac314bfa
+
     let addClick = (creator: () => Document) => action(() =>
         mainfreeform.GetList<Document>(KeyStore.Data, []).push(creator())
     );
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 1db16aca6..dc793c16d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -100,17 +100,11 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     onPointerDown = (e: React.PointerEvent): void => {
         this._downX = e.clientX;
         this._downY = e.clientY;
-<<<<<<< HEAD
-
-        if (e.shiftKey && e.buttons === 1) {
-            CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e);
-=======
         if (e.shiftKey && e.buttons === 2) {
             if (this.props.isTopMost) {
                 this.startDragging(e.pageX, e.pageY);
             }
             else CollectionDockingView.Instance.StartOtherDrag(this.props.Document, e);
->>>>>>> 618e66a5a070f1aac9224bd3f44b76a5ac314bfa
             e.stopPropagation();
         } else {
             if (this.active && !e.isDefaultPrevented()) {
-- 
cgit v1.2.3-70-g09d2


From 3f7ff76768e0ff74e6a5d6e092f82e96661b3a2a Mon Sep 17 00:00:00 2001
From: Hannah Chow <hannah_chow@brown.edu>
Date: Mon, 11 Mar 2019 20:16:18 -0400
Subject: pen tools styling and tooltips

---
 src/client/views/DocumentDecorations.scss |   1 -
 src/client/views/InkingCanvas.scss        | 265 +++++++++++++++---------------
 src/client/views/InkingControl.tsx        |  16 +-
 3 files changed, 141 insertions(+), 141 deletions(-)

(limited to 'src/client/views/InkingControl.tsx')

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index e77e22c5d..11595aa01 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -94,7 +94,6 @@
     transition: transform 0.2s;
     text-align: center;
     display: flex;
-    vertical-align: middle;
     justify-content: center;
     align-items: center;
 }
diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss
index d132504fc..d76861be1 100644
--- a/src/client/views/InkingCanvas.scss
+++ b/src/client/views/InkingCanvas.scss
@@ -1,147 +1,148 @@
 @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;
-  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;
-    background-color: transparent;
-    border-radius: 0;
+    position: absolute;
+    left: 70px;
+    bottom: 70px;
+    margin: 0;
     padding: 0;
-    button {
-      height: 36px;
-      padding: 0px;
-      padding-bottom: 3px;
-      margin-left: 10px;
-      background-color: transparent;
-      color: $intermediate-color;
+    display: flex;
+    label,
+    input,
+    option {
+        font-size: 12px;
     }
-    button:hover {
-      transform: scale(1.15);
+    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;
+        }
     }
-  }
-  .ink-size {
-    display: flex;
-    justify-content: space-between;
     input[type="text"] {
-      width: 42px;
+        border: none;
+        padding: 0 0px;
+        background: transparent;
+        color: $dark-color;
+        font-size: 12px;
+        margin-top: 4px;
     }
-    > * {
-      margin-right: 6px;
-      &:last-child {
-        margin-right: 0;
-      }
+    .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-color {
-    display: flex;
-    position: relative;
-    padding-right: 0;
-    label {
-      margin-right: 6px;
+    .ink-tools {
+        display: flex;
+        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;
+        }
+        button:hover {
+            transform: scale(1.15);
+        }
     }
-    .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-size {
+        display: flex;
+        justify-content: space-between;
+        input[type="text"] {
+            width: 42px;
+        }
+        >* {
+            margin-right: 6px;
+            &:last-child {
+                margin-right: 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;
+    .ink-color {
+        display: flex;
+        position: relative;
+        padding-right: 0;
+        label {
+            margin-right: 6px;
+        }
+        .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-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 bf633b034..fb75ef2a5 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -78,14 +78,14 @@ 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)}><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>
+                        <button onClick={() => this.switchTool(InkTool.Pen)} style={this.selected(InkTool.Pen)}><FontAwesomeIcon icon="pen" size="lg" title="Pen" /></button>
+                        <button onClick={() => this.switchTool(InkTool.Highlighter)} style={this.selected(InkTool.Highlighter)}><FontAwesomeIcon icon="highlighter" size="lg" title="Highlighter" /></button>
+                        <button onClick={() => this.switchTool(InkTool.Eraser)} style={this.selected(InkTool.Eraser)}><FontAwesomeIcon icon="eraser" size="lg" title="Eraser" /></button>
+                        <button onClick={() => this.switchTool(InkTool.None)} style={this.selected(InkTool.None)}><FontAwesomeIcon icon="ban" size="lg" title="Pointer" /></button>
                     </div>
                 </li>
                 <li className="ink-color ink-panel">
-                    <label>Color: </label>
+                    <label>COLOR: </label>
                     <div className="ink-color-display" style={{ backgroundColor: this._selectedColor }}
                         onClick={() => this.toggleColorPicker()}>
                         {/* {this._colorPickerDisplay ? <span>&#9660;</span> : <span>&#9650;</span>} */}
@@ -95,9 +95,9 @@ export class InkingControl extends React.Component {
                     </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)} /> */}
+                    <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>
-- 
cgit v1.2.3-70-g09d2

