aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/ContextMenu.scss25
-rw-r--r--src/client/views/ContextMenu.tsx19
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx10
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx12
-rw-r--r--src/client/views/nodes/ImageBox.tsx12
5 files changed, 67 insertions, 11 deletions
diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 234f82eb9..c810aef3e 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -3,16 +3,17 @@
display: flex;
z-index: 1000;
box-shadow: #AAAAAA .2vw .2vw .4vw;
+ flex-direction: column; //E
+ // border-radius: 20px;
}
.contextMenu-item {
- width: 10vw;
- height: 4vh;
- background: #DDDDDD;
+ width: auto; //10vw
+ height: auto; //4vh
+ background: #F0F8FF; // background: #DDDDDD;
display: flex;
- justify-content: center;
+ justify-content: left; //center
align-items: center;
- flex-direction: column;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
@@ -20,15 +21,27 @@
-ms-user-select: none;
user-select: none;
transition: all .1s;
+ border-width: .11px;
+ border-color: rgb(187, 186, 186);
+ border-bottom-style: solid;
+ border-top-style: none;
+ padding: 10px;
+ white-space: nowrap;
}
.contextMenu-item:hover {
transition: all .1s;
- background: #AAAAAA
+ background: #B0E0E6; // background: #AAAAAA
}
.contextMenu-description {
font-size: 1.5vw;
text-align: left;
width: 8vw;
+}
+
+#mySearch {
+ font-size: 1.5vw;
+ border-left-style: none;
+ border-right-style: none;
} \ No newline at end of file
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 4f26a75d2..fcb934860 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -1,6 +1,6 @@
import React = require("react");
import { ContextMenuItem, ContextMenuProps } from "./ContextMenuItem";
-import { observable } from "mobx";
+import { observable, action } from "mobx";
import { observer } from "mobx-react";
import "./ContextMenu.scss"
@@ -12,6 +12,8 @@ export class ContextMenu extends React.Component {
@observable private _pageX: number = 0;
@observable private _pageY: number = 0;
@observable private _display: string = "none";
+ @observable private _searchString: string = "";
+
private ref: React.RefObject<HTMLDivElement>;
@@ -23,11 +25,13 @@ export class ContextMenu extends React.Component {
ContextMenu.Instance = this;
}
+ @action
clearItems() {
this._items = []
this._display = "none"
}
+ @action
addItem(item: ContextMenuProps) {
if (this._items.indexOf(item) === -1) {
this._items.push(item);
@@ -38,10 +42,13 @@ export class ContextMenu extends React.Component {
return this._items;
}
+ @action
displayMenu(x: number, y: number) {
this._pageX = x
this._pageY = y
+ this._searchString = "";
+
this._display = "flex"
}
@@ -59,10 +66,18 @@ export class ContextMenu extends React.Component {
render() {
return (
<div className="contextMenu-cont" style={{ left: this._pageX, top: this._pageY, display: this._display }} ref={this.ref}>
- {this._items.map(prop => {
+ <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange}></input>
+ {this._items.filter(prop => {
+ return prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1;
+ }).map(prop => {
return <ContextMenuItem {...prop} key={prop.description} />
})}
</div>
)
}
+
+ @action
+ onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ this._searchString = e.target.value;
+ }
} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 38217d7c4..22b5989a0 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -9,6 +9,7 @@ import { Field, FieldWaiting } from "../../../fields/Field";
import { KeyStore } from "../../../fields/KeyStore";
import { CompileScript, ToField } from "../../util/Scripting";
import { Transform } from "../../util/Transform";
+import { ContextMenu } from "../ContextMenu";
import { EditableView } from "../EditableView";
import { DocumentView } from "../nodes/DocumentView";
import { FieldView, FieldViewProps } from "../nodes/FieldView";
@@ -180,6 +181,13 @@ export class CollectionSchemaView extends CollectionViewBase {
}
}
+ //REPLACE THIS WITH CAPABILITIES SPECIFIC TO THIS TYPE OF NODE
+ collectionCapability = (e: React.MouseEvent): void => {
+ }
+
+ specificContextMenu = (e: React.MouseEvent): void => {
+ ContextMenu.Instance.addItem({ description: "Collection Capability", event: this.collectionCapability });
+ }
@action
setScaling = (r: any) => {
const children = this.props.Document.GetList<Document>(this.props.fieldKey, []);
@@ -219,7 +227,7 @@ export class CollectionSchemaView extends CollectionViewBase {
let handle = !this.props.active() ? (null) : (
<div style={{ position: "absolute", height: "37px", width: "20px", zIndex: 20, right: 0, top: 0, background: "Black" }} onPointerDown={this.onExpanderDown} />);
return (
- <div onPointerDown={this.onPointerDown} ref={this._mainCont} className="collectionSchemaView-container" style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
+ <div onPointerDown={this.onPointerDown} onContextMenu={this.specificContextMenu} ref={this._mainCont} className="collectionSchemaView-container" style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
<Measure onResize={action((r: any) => {
this._dividerX = r.entry.width;
this._panelHeight = r.entry.height;
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index a58e1955f..d0dd9e91f 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -10,6 +10,7 @@ import "./FormattedTextBox.scss";
import React = require("react")
import { RichTextField } from "../../../fields/RichTextField";
import { FieldViewProps, FieldView } from "./FieldView";
+import { ContextMenu } from "../../views/ContextMenu";
// FormattedTextBox: Displays an editable plain text node that maps to a specified Key of a Document
@@ -111,12 +112,23 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
e.stopPropagation();
}
}
+
+ //REPLACE THIS WITH CAPABILITIES SPECIFIC TO THIS TYPE OF NODE
+ textCapability = (e: React.MouseEvent): void => {
+ }
+
+ specificContextMenu = (e: React.MouseEvent): void => {
+ ContextMenu.Instance.addItem({ description: "Text Capability", event: this.textCapability });
+ }
+
onPointerWheel = (e: React.WheelEvent): void => {
e.stopPropagation();
}
+
render() {
return (<div className="formattedTextBox-cont"
onPointerDown={this.onPointerDown}
+ onContextMenu={this.specificContextMenu}
onWheel={this.onPointerWheel}
ref={this._ref} />)
}
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 4fe73fb8d..8c44395f4 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -7,9 +7,9 @@ import { ImageField } from '../../../fields/ImageField';
import { FieldViewProps, FieldView } from './FieldView';
import { FieldWaiting } from '../../../fields/Field';
import { observer } from "mobx-react"
+import { ContextMenu } from "../../views/ContextMenu";
import { observable, action } from 'mobx';
import { KeyStore } from '../../../fields/KeyStore';
-import { element } from 'prop-types';
@observer
export class ImageBox extends React.Component<FieldViewProps> {
@@ -89,13 +89,21 @@ export class ImageBox extends React.Component<FieldViewProps> {
}
}
+ //REPLACE THIS WITH CAPABILITIES SPECIFIC TO THIS TYPE OF NODE
+ imageCapability = (e: React.MouseEvent): void => {
+ }
+
+ specificContextMenu = (e: React.MouseEvent): void => {
+ ContextMenu.Instance.addItem({ description: "Image Capability", event: this.imageCapability });
+ }
+
render() {
let field = this.props.doc.Get(this.props.fieldKey);
let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
let nativeWidth = this.props.doc.GetNumber(KeyStore.NativeWidth, 1);
return (
- <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
+ <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} onContextMenu={this.specificContextMenu}>
<img src={path} width={nativeWidth} alt="Image not found" ref={this._imgRef} onLoad={this.onLoad} />
{this.lightbox(path)}
</div>)
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 19:26:12 +0000