From cedecd26f899fdf7baf251791f9938914a24047f Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 13 Jun 2019 11:10:43 -0400 Subject: moved ink controls into main panel of buttons. --- src/client/views/MainView.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 4b328f286..8a6790677 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -32,6 +32,8 @@ import { listSpec } from '../../new_fields/Schema'; import { Id } from '../../new_fields/FieldSymbols'; import { HistoryUtil } from '../util/History'; import { CollectionBaseView } from './collections/CollectionBaseView'; +import { InkTool } from '../../new_fields/InkField'; +import { InkingCanvas } from './InkingCanvas'; @observer @@ -217,6 +219,14 @@ export class MainView extends React.Component { ; } + selected = (tool: InkTool) => { + if (!InkingControl.Instance || InkingControl.Instance.selectedTool === InkTool.None) return { display: "none" }; + if (InkingControl.Instance.selectedTool === tool) { + return { color: "#61aaa3", fontSize: "50%" }; + } + return { fontSize: "50%" }; + } + /* 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() { @@ -247,7 +257,11 @@ export class MainView extends React.Component { )} -
    • +
    • +
    • +
    • +
    • +
    • ; @@ -295,7 +309,6 @@ export class MainView extends React.Component { {this.nodesMenu()} {this.miscButtons} - ); -- cgit v1.2.3-70-g09d2 From 618d3717e118f978de976cb34e8bc2051c726ffc Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 13 Jun 2019 12:49:17 -0400 Subject: text and menu fixes. --- src/client/views/InkingControl.tsx | 19 ------------------- src/client/views/Main.scss | 20 ++++++++++++++++++++ src/client/views/MainView.tsx | 16 +++++++++++++++- src/client/views/nodes/FormattedTextBox.tsx | 4 ++-- 4 files changed, 37 insertions(+), 22 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index e7f0968af..b98132c23 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -4,7 +4,6 @@ import React = require("react"); import { observer } from "mobx-react"; import "./InkingControl.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'; import { SelectionManager } from "../util/SelectionManager"; import { InkTool } from "../../new_fields/InkField"; @@ -19,7 +18,6 @@ export class InkingControl extends React.Component { @observable private _selectedColor: string = "rgb(244, 67, 54)"; @observable private _selectedWidth: string = "25"; @observable private _open: boolean = false; - @observable private _colorPickerDisplay = false; constructor(props: Readonly<{}>) { super(props); @@ -62,26 +60,9 @@ export class InkingControl extends React.Component { this._open = !this._open; this.switchTool(this._open ? InkTool.Pen : InkTool.None); } - - - @action - toggleColorPicker = () => { - this._colorPickerDisplay = !this._colorPickerDisplay; - } - render() { return (
      -
    • - -
      this.toggleColorPicker()}> - {/* {this._colorPickerDisplay ? ▼ : ▲} */} -
      -
      - -
      -
      • +
      • {btns.map(btn =>
    • ; } + + + @action + toggleColorPicker = () => { + this._colorPickerDisplay = !this._colorPickerDisplay; + } + /* @TODO this should really be moved into a moveable toolbar component, but for now let's put it here to meet the deadline */ @computed get miscButtons() { diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 0a4a67211..e5a43c60a 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -360,7 +360,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe let subitems: ContextMenuProps[] = []; subitems.push({ description: BoolCast(this.props.Document.autoHeight, false) ? "Manual Height" : "Auto Height", - event: action(() => this.props.Document.autoHeight = !BoolCast(this.props.Document.autoHeight, false)), icon: "expand-arrows-alt" + event: action(() => Doc.GetProto(this.props.Document).autoHeight = !BoolCast(this.props.Document.autoHeight, false)), icon: "expand-arrows-alt" }); ContextMenu.Instance.addItem({ description: "Text Funcs...", subitems: subitems }); } @@ -377,7 +377,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe color: this.props.color ? this.props.color : this.props.hideOnLeave ? "white" : "initial", pointerEvents: interactive ? "all" : "none", }} - onKeyPress={this.onKeyPress} + onKeyDown={this.onKeyPress} onFocus={this.onFocused} onClick={this.onClick} onContextMenu={this.specificContextMenu} -- cgit v1.2.3-70-g09d2