diff options
Diffstat (limited to 'src/client/views/ContextMenu.tsx')
| -rw-r--r-- | src/client/views/ContextMenu.tsx | 118 |
1 files changed, 82 insertions, 36 deletions
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index de985263d..9472fb95c 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -5,11 +5,17 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { DivHeight, DivWidth } from '../../ClientUtils'; +import { DivHeight, DivWidth, returnFalse, setupMoveUpEvents } from '../../ClientUtils'; import { SnappingManager } from '../util/SnappingManager'; import './ContextMenu.scss'; import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from './ContextMenuItem'; import { ObservableReactComponent } from './ObservableReactComponent'; +import { ColorResult, SketchPicker } from 'react-color'; +import { DocumentView } from './nodes/DocumentView'; +import { Doc } from '../../fields/Doc'; +import { undoable } from '../util/UndoManager'; +import { NumCast, StrCast } from '../../fields/Types'; +import { emptyFunction } from '../../Utils'; @observer export class ContextMenu extends ObservableReactComponent<{}> { @@ -38,6 +44,8 @@ export class ContextMenu extends ObservableReactComponent<{}> { @observable _mouseX: number = -1; @observable _mouseY: number = -1; @observable _shouldDisplay: boolean = false; + @observable _displayColorPicker: boolean = false; + @observable _selectorWidth: number = 0; constructor(props: any) { super(props); @@ -116,6 +124,10 @@ export class ContextMenu extends ObservableReactComponent<{}> { this._defaultItem = item; } + @action setColorPickerDisplay = (display: boolean) => { + this._displayColorPicker = display; + } + static readonly buffer = 20; get pageX() { return this._pageX + this._width > window.innerWidth - ContextMenu.buffer ? window.innerWidth - ContextMenu.buffer - this._width : Math.max(0, this._pageX); @@ -206,45 +218,79 @@ export class ContextMenu extends ObservableReactComponent<{}> { _searchRef = React.createRef<HTMLInputElement>(); // bcz: we shouldn't need this, since we set autoFocus on the <input> tag, but for some reason we do... + get colorPicker() { + const doc = DocumentView.Selected().lastElement().Document; + const layoutDoc = doc ? Doc.Layout(doc) : doc; + + return ( + <div className='contextMenu-borderMenu' style={{position: 'absolute', right: `${this._pageX}`, top: `${this._pageY}`}}> + <div className='top-bar'> + <button className='close-menu' onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, + undoable(clickEv => { + clickEv.stopPropagation(); + clickEv.preventDefault(); + this.setColorPickerDisplay(false); + }, 'close border menu'))}> + <FontAwesomeIcon icon='minus'/> + </button> + </div> + <SketchPicker + onChange={undoable( + action((col: ColorResult) => layoutDoc._layout_borderColor = col.hex), + 'set stroke color property' + )} + presetColors={[]} + color={StrCast(layoutDoc._layout_borderColor)} + /> + <div className='bottom-box'> + <input className='width-selector' type="range" min="1" max="100" value={this._selectorWidth} id="myRange" onChange={e => {layoutDoc._layout_borderWidth = e.target.value; this._selectorWidth = Number(e.target.value); console.log(layoutDoc._layout_borderWidth)}}/> + </div> + </div> + ); + } + render() { this.itemsNeedSearch && setTimeout(() => this._searchRef.current?.focus()); return ( - <div - className="contextMenu-cont" - ref={action((r: any) => { - if (r) { - this._width = DivWidth(r); - this._height = DivHeight(r); - } - this._searchRef.current?.focus(); - })} - style={{ - display: this._display ? '' : 'none', - left: this.pageX, - ...(this._yRelativeToTop ? { top: Math.max(0, this.pageY) } : { bottom: this.pageY }), - background: SnappingManager.userBackgroundColor, - color: SnappingManager.userColor, - }}> - {!this.itemsNeedSearch ? null : ( - <span className="search-icon"> - <span className="icon-background"> - <FontAwesomeIcon icon="search" size="lg" /> + <div> + {this._displayColorPicker ? this.colorPicker : null} + <div + className="contextMenu-cont" + ref={action((r: any) => { + if (r) { + this._width = DivWidth(r); + this._height = DivHeight(r); + } + this._searchRef.current?.focus(); + })} + style={{ + display: this._display ? '' : 'none', + left: this.pageX, + ...(this._yRelativeToTop ? { top: Math.max(0, this.pageY) } : { bottom: this.pageY }), + background: SnappingManager.userBackgroundColor, + color: SnappingManager.userColor, + }}> + {!this.itemsNeedSearch ? null : ( + <span className="search-icon"> + <span className="icon-background"> + <FontAwesomeIcon icon="search" size="lg" /> + </span> + <input + ref={this._searchRef} + style={{ color: 'black' }} + className="contextMenu-item contextMenu-description search" + type="text" + placeholder="Filter Menu..." + value={this._searchString} + onKeyDown={this.onKeyDown} + onChange={this.onChange} + // eslint-disable-next-line jsx-a11y/no-autofocus + autoFocus + /> </span> - <input - ref={this._searchRef} - style={{ color: 'black' }} - className="contextMenu-item contextMenu-description search" - type="text" - placeholder="Filter Menu..." - value={this._searchString} - onKeyDown={this.onKeyDown} - onChange={this.onChange} - // eslint-disable-next-line jsx-a11y/no-autofocus - autoFocus - /> - </span> - )} - {this.menuItems} + )} + {this.menuItems} + </div> </div> ); } |