diff options
| -rw-r--r-- | src/client/views/InkingCanvas.scss | 260 | ||||
| -rw-r--r-- | src/client/views/InkingControl.tsx | 33 |
2 files changed, 152 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>▼</span> : <span>▲</span>} + {/* {this._colorPickerDisplay ? <span>▼</span> : <span>▲</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 > ) } |