From 06fb2bef46222c65d594b600bfeb72fb6a7f8212 Mon Sep 17 00:00:00 2001 From: Fawn 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') 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 ( -
-
- - - - -
-
- - +
  • +
    + + + + +
    +
    • +
  • + + ) => this.switchWidth(e.target.value)} /> + ) => this.switchWidth(e.target.value)} /> -
    • -
    - -
    -
    + +
  • + +
    this.toggleColorPicker()}> + {this._colorPickerDisplay ? ▼ : ▲} +
    +
    + +
    +
    • + ) } } \ 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" > - {/* @TODO do the ink thing */} - < button className="toolbar-button round-button" title="Ink" > + {/* 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) => { - {/* */} + ), document.getElementById('root')); }) -- cgit v1.2.3-70-g09d2 From d10a091db9b2dd2656fde172628d62c4dbf67970 Mon Sep 17 00:00:00 2001 From: laurawilsonri Date: Sun, 10 Mar 2019 20:23:56 -0400 Subject: changed the format of the text tooltip menu --- .DS_Store | Bin 8196 -> 8196 bytes src/.DS_Store | Bin 6148 -> 6148 bytes src/client/util/TooltipTextMenu.scss | 7 ++++--- src/client/util/TooltipTextMenu.tsx | 2 +- 4 files changed, 5 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/.DS_Store b/.DS_Store index 60446cb09..0964d5ff3 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/src/.DS_Store b/src/.DS_Store index 620e4ebce..90213270f 100644 Binary files a/src/.DS_Store and b/src/.DS_Store differ diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss index fa43f5326..ea580d104 100644 --- a/src/client/util/TooltipTextMenu.scss +++ b/src/client/util/TooltipTextMenu.scss @@ -1,8 +1,9 @@ +@import "../views/global_variables"; .tooltipMenu { position: absolute; z-index: 20; - background: rgb(19, 18, 18); + background: $dark-color; border: 1px solid silver; border-radius: 4px; padding: 2px 10px; @@ -31,14 +32,14 @@ bottom: -4.5px; border: 5px solid transparent; border-bottom-width: 0; - border-top-color: black; + border-top-color: $dark-color; } .menuicon { display: inline-block; border-right: 1px solid rgba(0, 0, 0, 0.2); //color: rgb(19, 18, 18); - color: white; + color: $light-color; line-height: 1; padding: 0px 2px; margin: 1px; diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 3b87fe9de..8cc653bf2 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -117,7 +117,7 @@ export class TooltipTextMenu { let width = Math.abs(start.left - end.left) / 2; let mid = Math.min(start.left, end.left) + width; //THIS WIDTH IS 15 * NUMBER OF ICONS + 15 - this.tooltip.style.width = 120 + "px"; + this.tooltip.style.width = 122 + "px"; this.tooltip.style.bottom = (box.bottom - start.top) + "px"; } -- cgit v1.2.3-70-g09d2