From 81a8c7fddc300451e7223845f1ddbc0a3bf16f20 Mon Sep 17 00:00:00 2001
From: Niharika Khanna <nkhanna@eduroam-int-dhcp-97-220-201.ucl.ac.uk>
Date: Mon, 4 Dec 2017 16:37:55 +0000
Subject: [PATCH] add color picker

---
 server/src/pages/shot/editor.js | 75 ++++++++++++++++++++++++++++-----
 static/css/frame.scss           | 35 +++++++++++++++
 2 files changed, 100 insertions(+), 10 deletions(-)

diff --git a/server/src/pages/shot/editor.js b/server/src/pages/shot/editor.js
index 7b758d6cf3..55bcd1b6c3 100644
--- a/server/src/pages/shot/editor.js
+++ b/server/src/pages/shot/editor.js
@@ -22,9 +22,10 @@ exports.Editor = class Editor extends React.Component {
       <div className="editor-header default-color-scheme">
         <div className="shot-main-actions annotation-actions">
           <div className="annotation-tools">
-            <button className={`button transparent pen-button ${penState}`} id="pen" onClick={this.onClickPen.bind(this)} title="pen"></button>
-            <button className={`button transparent highlight-button ${highlighterState}`} id="highlight" onClick={this.onClickHighlight.bind(this)} title="highlighter"></button>
-            <button className={`button transparent clear-button`} id="clear" onClick={this.onClickClear.bind(this)} title="clear"></button>
+            <button className={`button transparent pen-button ${penState}`} id="pen" onClick={this.onClickPen.bind(this)} title="Pen"></button>
+            <button className={`button transparent highlight-button ${highlighterState}`} id="highlight" onClick={this.onClickHighlight.bind(this)} title="Highlighter"></button>
+            <ColorPicker setColor={this.setColor.bind(this)} />
+            <button className={`button transparent clear-button`} id="clear" onClick={this.onClickClear.bind(this)} title="Clear"></button>
           </div>
         </div>
         <div className="shot-alt-actions annotation-alt-actions">
@@ -36,12 +37,16 @@ exports.Editor = class Editor extends React.Component {
         <div className="canvas-container" id="canvas-container" ref={(canvasContainer) => this.canvasContainer = canvasContainer}>
           <canvas className="image-holder centered" id="image-holder" ref={(image) => { this.imageCanvas = image }} height={ canvasHeight } width={ canvasWidth } style={{height: canvasHeight, width: canvasWidth}}></canvas>
           <canvas className="highlighter centered" id="highlighter" ref={(highlighter) => { this.highlighter = highlighter }} height={canvasHeight} width={canvasWidth}></canvas>
-          <canvas className={"editor centered " + this.state.tool} id="editor" ref={(editor) => { this.editor = editor }} height={canvasHeight} width={canvasWidth}></canvas>
+          <canvas className="editor centered" id="editor" ref={(editor) => { this.editor = editor }} height={canvasHeight} width={canvasWidth}></canvas>
         </div>
       </div>
     </div>
   }
 
+  setColor(color) {
+    this.setState({color});
+  }
+
   componentDidUpdate() {
     this.edit();
   }
@@ -49,7 +54,7 @@ exports.Editor = class Editor extends React.Component {
   onClickClear() {
     this.setState({tool: this.state.tool});
     sendEvent("clear-select", "annotation-toolbar");
-    this.drawContext.clearRect(0, 0, this.editor.width, this.editor.height);
+    this.penContext.clearRect(0, 0, this.editor.width, this.editor.height);
     this.highlightContext.clearRect(0, 0, this.editor.width, this.editor.height);
   }
 
@@ -82,7 +87,7 @@ exports.Editor = class Editor extends React.Component {
   }
 
   componentDidMount() {
-    this.context = this.editor.getContext('2d');
+    this.penContext = this.editor.getContext('2d');
     this.highlightContext = this.highlighter.getContext('2d');
     let imageContext = this.imageCanvas.getContext('2d');
     let img = new Image();
@@ -100,12 +105,14 @@ exports.Editor = class Editor extends React.Component {
   edit() {
     this.pos = { x: 0, y: 0 };
     if (this.state.tool == 'highlighter') {
+      this.drawContext = this.highlightContext;
       this.highlightContext.lineWidth = 20;
-      this.highlightContext.strokeStyle = '#ff0';
+      this.highlightContext.strokeStyle = this.state.color;
     } else if (this.state.tool == 'pen') {
-      this.context.strokeStyle = this.state.color;
+      this.drawContext = this.penContext;
+      this.penContext.strokeStyle = this.state.color;
+      this.penContext.lineWidth = this.state.size;
     }
-    this.context.lineWidth = this.state.size;
     if (this.state.tool == 'none') {
       this.canvasContainer.removeEventListener("mousemove", this.draw);
       this.canvasContainer.removeEventListener("mousedown", this.setPosition);
@@ -127,7 +134,6 @@ exports.Editor = class Editor extends React.Component {
     if (e.buttons !== 1) {
       return null;
     }
-    this.drawContext = this.state.tool == 'highlighter' ? this.highlightContext : this.context;
     this.drawContext.beginPath();
 
     this.drawContext.lineCap = this.state.tool == 'highlighter' ? 'square' : 'round';
@@ -140,3 +146,52 @@ exports.Editor = class Editor extends React.Component {
     this.drawContext.stroke();
   }
 }
+
+class ColorPicker extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      pickerActive: false,
+      color: '#000'
+    };
+  }
+
+  render() {
+    let border = this.state.color == 'rgb(255, 255, 255)' ? '#000' : this.state.color;
+    return <div><button className="color-button" id="color-picker" onClick={this.onClickColorPicker.bind(this)} title="Color Picker" style={{"backgroundColor": this.state.color, "border": `1px solid ${border}`}}></button>
+      {this.state.pickerActive ? this.renderColorBoard() : null}
+    </div>
+  }
+
+  renderColorBoard() {
+    return <div className="color-board">
+      <div className="row">
+        <div className="swatch" title="White" style={{backgroundColor: "#FFF", border: "1px solid #000"}} onClick={this.onClickSwatch.bind(this)}></div>
+        <div className="swatch" title="Black" style={{backgroundColor: "#000"}} onClick={this.onClickSwatch.bind(this)}></div>
+        <div className="swatch" title="Red" style={{backgroundColor: "#E74C3C"}} onClick={this.onClickSwatch.bind(this)}></div>
+      </div>
+        <div className="row">
+        <div className="swatch" title="Green" style={{backgroundColor: "#2ECC71"}} onClick={this.onClickSwatch.bind(this)}></div>
+        <div className="swatch" title="Blue" style={{backgroundColor: "#3498DB"}} onClick={this.onClickSwatch.bind(this)}></div>
+        <div className="swatch" title="Yellow" style={{backgroundColor: "#FF0"}} onClick={this.onClickSwatch.bind(this)}></div>
+      </div>
+      <div className="row">
+        <div className="swatch" title="Purple" style={{backgroundColor: "#8E44AD"}} onClick={this.onClickSwatch.bind(this)}></div>
+        <div className="swatch" title="Sea Green" style={{backgroundColor: "#1ABC9C"}} onClick={this.onClickSwatch.bind(this)}></div>
+        <div className="swatch" title="Grey" style={{backgroundColor: "#34495E"}} onClick={this.onClickSwatch.bind(this)}></div>
+      </div>
+    </div>
+  }
+
+  onClickSwatch(e) {
+    let color = e.target.style.backgroundColor
+    this.setState({color, pickerActive: false});
+    this.props.setColor(color);
+  }
+
+  onClickColorPicker() {
+    let pickerActive = !this.state.pickerActive;
+    this.setState({pickerActive});
+  }
+}
diff --git a/static/css/frame.scss b/static/css/frame.scss
index 8ea9991449..b303550e03 100644
--- a/static/css/frame.scss
+++ b/static/css/frame.scss
@@ -421,3 +421,38 @@ body {
   overflow: hidden;
   margin-bottom: 20px;
 }
+
+.color-button {
+  height: 25px;
+  width: 25px;
+  border-radius: 12.5px;
+  margin: 12px 5px 0 5px;
+}
+
+.color-board {
+  margin-top: $grid-unit/2;
+  width: 160px;
+  height: 160px;
+  position: absolute;
+  background: $light-default;
+  border: 1px solid $light-border;
+  padding: 20px;
+}
+
+.color-board .row {
+  display: flex;
+}
+
+.swatch {
+  margin: 5px;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 30px;
+  height: 30px;
+  border-radius: 15px;
+
+  &:hover
+    {
+      border: 2px solid $light-border-active !important;
+    }
+}