diff options
| -rw-r--r-- | src/client/views/ContextMenu.scss | 13 | ||||
| -rw-r--r-- | src/client/views/ContextMenu.tsx | 5 | ||||
| -rw-r--r-- | src/client/views/ContextMenuItem.tsx | 49 | ||||
| -rw-r--r-- | src/client/views/nodes/FormattedTextBox.tsx | 23 |
4 files changed, 67 insertions, 23 deletions
diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index ea40c8e99..82e736520 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -6,9 +6,18 @@ flex-direction: column; } +.subMenu-cont { + position: relative; + display: flex; + z-index: 1000; + box-shadow: #AAAAAA .2vw .2vw .4vw; + flex-direction: column; + left: 100%; //should make this appear 100% to the right of the parent element (the original context menu) +} + .contextMenu-item { - width: auto; - height: auto; + width: 10vw; //auto + height: 2vh; //auto background: #F0F8FF; display: flex; justify-content: left; diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index fcb934860..8a8403c62 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -9,6 +9,7 @@ export class ContextMenu extends React.Component { static Instance: ContextMenu @observable private _items: Array<ContextMenuProps> = [{ description: "test", event: (e: React.MouseEvent) => e.preventDefault() }]; + //need to add a subitems component? @observable private _pageX: number = 0; @observable private _pageY: number = 0; @observable private _display: string = "none"; @@ -80,4 +81,6 @@ export class ContextMenu extends React.Component { onChange = (e: React.ChangeEvent<HTMLInputElement>) => { this._searchString = e.target.value; } -}
\ No newline at end of file +} + +//<input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange}></input>
\ No newline at end of file diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx index 4801c1555..67bbc3082 100644 --- a/src/client/views/ContextMenuItem.tsx +++ b/src/client/views/ContextMenuItem.tsx @@ -1,6 +1,8 @@ import React = require("react"); +import { observable, action } from "mobx"; +import { observer } from "mobx-react"; -export interface ContextMenuProps { +export interface OriginalMenuProps { description: string; event: (e: React.MouseEvent<HTMLDivElement>) => void; } @@ -10,16 +12,45 @@ export interface SubmenuProps { subitems: ContextMenuProps[]; } -export interface ContextMenuItemProps { - type: ContextMenuProps | SubmenuProps -} +export type ContextMenuProps = OriginalMenuProps | SubmenuProps; +@observer export class ContextMenuItem extends React.Component<ContextMenuProps> { + @observable private _items: Array<ContextMenuProps> = []; + @observable private _pageX: number = 0; + @observable private _pageY: number = 0; + @observable private overItem = false; + + constructor(props: ContextMenuProps) { + super(props); + if ("subitems" in this.props) { + this.props.subitems.forEach(i => this._items.push(i)); + } + } + render() { - return ( - <div className="contextMenu-item" onClick={this.props.event}> - <div className="contextMenu-description">{this.props.description}</div> - </div> - ) + if ("event" in this.props) { + return ( + <div className="contextMenu-item" onClick={this.props.event}> + <div className="contextMenu-description"> {this.props.description}</div> + </div>) + } + else { + let submenu = null; + if (this.overItem) { + submenu = (<div className="subMenu-cont" style={{ left: this._pageX, top: this._pageY, marginLeft: "47.5%" }}> + {this._items.map(prop => { + return <ContextMenuItem {...prop} key={prop.description} /> + })} + </div>) + } + return ( + <div className="contextMenu-item" onMouseEnter={action(() => { + this.overItem = true + })} onMouseLeave={action(() => this.overItem = false)}> + <div className="contextMenu-description"> {this.props.description}</div> + {submenu} + </div>) + } } }
\ No newline at end of file diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index ad7ddf37a..411b43cd5 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -124,17 +124,18 @@ export class FormattedTextBox extends React.Component<FieldViewProps> { specificContextMenu = (e: React.MouseEvent): void => { ContextMenu.Instance.addItem({ description: "Text Capability", event: this.textCapability }); - // ContextMenu.Instance.addItem({ - // description: "Submenu", - // items: [ - // { - // description: "item 1", event: - // }, - // { - // description: "item 2", event: - // } - // ] - // }) + ContextMenu.Instance.addItem({ + description: "Submenu", subitems: + [{ description: "Sub 1", event: this.textCapability }] + // [{ description: "Sub 2", event: this.textCapability }] + // { + // description: "item 1", event: + // }, + // { + // description: "item 2", event: + // } + // ] + }) // e.stopPropagation() } |