diff options
| author | Tyler Schicke <tyler_schicke@brown.edu> | 2019-06-17 23:04:22 -0400 |
|---|---|---|
| committer | Tyler Schicke <tyler_schicke@brown.edu> | 2019-06-17 23:04:22 -0400 |
| commit | 9c7ff72a8ad249c05b672a46e3fbbb69ffca3a2a (patch) | |
| tree | 0b8b226f215824613a5d70755dca4a09c07318e0 /src | |
| parent | 8c64ffd92e382050bc8727981cf9fb830e4f02a7 (diff) | |
| parent | 71b1cfbebdc771440c1f3b1169611b5747450064 (diff) | |
Merge branch 'master' of github-tsch-brown:browngraphicslab/Dash-Web
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/MainView.tsx | 14 |
1 files changed, 11 insertions, 3 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 29015995f..ea49ebd5d 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -3,7 +3,7 @@ import { faFilePdf, faFilm, faFont, faGlobeAsia, faImage, faMusic, faObjectGroup import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, configure, observable, runInAction, trace } from 'mobx'; import { observer } from 'mobx-react'; -import { CirclePicker } from 'react-color'; +import { CirclePicker, SliderPicker, BlockPicker, TwitterPicker } from 'react-color'; import "normalize.css"; import * as React from 'react'; import Measure from 'react-measure'; @@ -230,6 +230,14 @@ export class MainView extends React.Component { return { fontSize: "50%" }; } + onColorClick = (e: React.MouseEvent) => { + let target = (e.nativeEvent! as any).path[0]; + let parent = (e.nativeEvent! as any).path[1]; + if (target.localName === "input" || parent.localName === "span") + e.stopPropagation(); + } + + @observable private _colorPickerDisplay = false; /* for the expandable add nodes menu. Not included with the miscbuttons because once it expands it expands the whole div with it, making canvas interactions limited. */ nodesMenu() { @@ -257,8 +265,8 @@ export class MainView extends React.Component { <li key="redo"><button className="add-button round-button" title="Redo" onClick={() => UndoManager.Redo()}><FontAwesomeIcon icon="redo-alt" size="sm" /></button></li> <li key="color"><button className="add-button round-button" title="Redo" onClick={() => this.toggleColorPicker()}><div className="toolbar-color-button" style={{ backgroundColor: InkingControl.Instance.selectedColor }} > - <div className="toolbar-color-picker" style={this._colorPickerDisplay ? { display: "block" } : { display: "none" }}> - <CirclePicker onChange={InkingControl.Instance.switchColor} circleSize={22} width={"220"} /> + <div className="toolbar-color-picker" onClick={this.onColorClick} style={this._colorPickerDisplay ? { display: "block" } : { display: "none" }}> + <TwitterPicker color={InkingControl.Instance.selectedColor} onChange={InkingControl.Instance.switchColor} /> </div> </div></button></li> {btns.map(btn => |