aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-rw-r--r--src/client/views/nodes/DocumentView.scss4
-rw-r--r--src/client/views/nodes/DocumentView.tsx55
-rw-r--r--src/client/views/nodes/FieldView.tsx10
-rw-r--r--src/client/views/nodes/FormattedTextBox.scss3
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx60
-rw-r--r--src/client/views/nodes/KeyValueBox.scss93
-rw-r--r--src/client/views/nodes/KeyValueBox.tsx53
-rw-r--r--src/client/views/nodes/KeyValuePair.scss22
-rw-r--r--src/client/views/nodes/KeyValuePair.tsx60
-rw-r--r--src/client/views/nodes/LinkBox.scss2
-rw-r--r--src/client/views/nodes/LinkBox.tsx24
-rw-r--r--src/client/views/nodes/LinkEditor.scss2
-rw-r--r--src/client/views/nodes/VideoBox.tsx2
13 files changed, 262 insertions, 128 deletions
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 5126e69f9..a946ac1a8 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,7 +1,7 @@
-@import "../global_variables";
+@import "../globalCssVariables";
.documentView-node {
- position: absolute;
+ position: inherit;
top: 0;
left:0;
background: $light-color; //overflow: hidden;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 1d7e9aa79..4eef07a2f 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,4 +1,4 @@
-import { action, computed, IReactionDisposer, reaction, runInAction } from "mobx";
+import { action, computed, IReactionDisposer, reaction, runInAction, trace } from "mobx";
import { observer } from "mobx-react";
import { Document } from "../../../fields/Document";
import { Field, FieldWaiting, Opt } from "../../../fields/Field";
@@ -8,7 +8,7 @@ import { ListField } from "../../../fields/ListField";
import { BooleanField } from "../../../fields/BooleanField";
import { TextField } from "../../../fields/TextField";
import { ServerUtils } from "../../../server/ServerUtil";
-import { Utils } from "../../../Utils";
+import { Utils, emptyFunction } from "../../../Utils";
import { Documents } from "../../documents/Documents";
import { DocumentManager } from "../../util/DocumentManager";
import { DragManager } from "../../util/DragManager";
@@ -20,6 +20,7 @@ import { ContextMenu } from "../ContextMenu";
import { DocumentContentsView } from "./DocumentContentsView";
import "./DocumentView.scss";
import React = require("react");
+import { undoBatch, UndoManager } from "../../util/UndoManager";
export interface DocumentViewProps {
@@ -62,12 +63,12 @@ export function FakeJsxArgs(keys: string[], fields: string[] = []): JsxArgs {
let Keys: { [name: string]: any } = {};
let Fields: { [name: string]: any } = {};
for (const key of keys) {
- let fn = () => { };
+ let fn = emptyFunction;
Object.defineProperty(fn, "name", { value: key + "Key" });
Keys[key] = fn;
}
for (const field of fields) {
- let fn = () => { };
+ let fn = emptyFunction;
Object.defineProperty(fn, "name", { value: field });
Fields[field] = fn;
}
@@ -108,7 +109,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
e.stopPropagation();
} else {
- if (this.active && !e.isDefaultPrevented()) {
+ if (this.active) {
e.stopPropagation();
document.removeEventListener("pointermove", this.onPointerMove);
document.addEventListener("pointermove", this.onPointerMove);
@@ -160,7 +161,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
dragData.moveDocument = this.props.moveDocument;
DragManager.StartDocumentDrag([this._mainCont.current], dragData, x, y, {
handlers: {
- dragComplete: action(() => { })
+ dragComplete: action(emptyFunction)
},
hideSource: !dropAliasOfDraggedDoc
});
@@ -189,6 +190,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
document.removeEventListener("pointerup", this.onPointerUp);
e.stopPropagation();
if (!SelectionManager.IsSelected(this) &&
+ e.button !== 2 &&
Math.abs(e.clientX - this._downX) < 4 &&
Math.abs(e.clientY - this._downY) < 4
) {
@@ -240,19 +242,18 @@ export class DocumentView extends React.Component<DocumentViewProps> {
SelectionManager.DeselectAll();
}
+ @undoBatch
@action
drop = (e: Event, de: DragManager.DropEvent) => {
if (de.data instanceof DragManager.LinkDragData) {
- let sourceDoc: Document = de.data.linkSourceDocumentView.props.Document;
+ let sourceDoc: Document = de.data.linkSourceDocument;
let destDoc: Document = this.props.Document;
- if (this.props.isTopMost) {
- return;
- }
let linkDoc: Document = new Document();
destDoc.GetTAsync(KeyStore.Prototype, Document).then(protoDest =>
sourceDoc.GetTAsync(KeyStore.Prototype, Document).then(protoSrc =>
runInAction(() => {
+ let batch = UndoManager.StartBatch("document view drop");
linkDoc.Set(KeyStore.Title, new TextField("New Link"));
linkDoc.Set(KeyStore.LinkDescription, new TextField(""));
linkDoc.Set(KeyStore.LinkTags, new TextField("Default"));
@@ -261,20 +262,23 @@ export class DocumentView extends React.Component<DocumentViewProps> {
let srcTarg = protoSrc ? protoSrc : sourceDoc;
linkDoc.Set(KeyStore.LinkedToDocs, dstTarg);
linkDoc.Set(KeyStore.LinkedFromDocs, srcTarg);
- dstTarg.GetOrCreateAsync(
+ const prom1 = new Promise(resolve => dstTarg.GetOrCreateAsync(
KeyStore.LinkedFromDocs,
ListField,
field => {
(field as ListField<Document>).Data.push(linkDoc);
+ resolve();
}
- );
- srcTarg.GetOrCreateAsync(
+ ));
+ const prom2 = new Promise(resolve => srcTarg.GetOrCreateAsync(
KeyStore.LinkedToDocs,
ListField,
field => {
(field as ListField<Document>).Data.push(linkDoc);
+ resolve();
}
- );
+ ));
+ Promise.all([prom1, prom2]).finally(() => batch.end());
})
)
);
@@ -380,14 +384,26 @@ export class DocumentView extends React.Component<DocumentViewProps> {
SelectionManager.SelectDoc(this, ctrlPressed);
}
+ @computed get nativeWidth(): number { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
+ @computed get nativeHeight(): number { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
+ @computed
+ get contents() {
+ return (<DocumentContentsView
+ {...this.props}
+ isSelected={this.isSelected}
+ select={this.select}
+ layoutKey={KeyStore.Layout}
+ />);
+ }
+
render() {
if (!this.props.Document) {
return null;
}
var scaling = this.props.ContentScaling();
- var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
- var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
+ var nativeWidth = this.nativeWidth;
+ var nativeHeight = this.nativeHeight;
if (this.isMinimized()) {
return (
@@ -423,12 +439,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
onContextMenu={this.onContextMenu}
onPointerDown={this.onPointerDown}
>
- <DocumentContentsView
- {...this.props}
- isSelected={this.isSelected}
- select={this.select}
- layoutKey={KeyStore.Layout}
- />
+ {this.contents}
</div>
);
}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 07c5b332c..0037d7b28 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -19,7 +19,7 @@ import { ListField } from "../../../fields/ListField";
import { DocumentContentsView } from "./DocumentContentsView";
import { Transform } from "../../util/Transform";
import { KeyStore } from "../../../fields/KeyStore";
-import { returnFalse } from "../../../Utils";
+import { returnFalse, emptyDocFunction } from "../../../Utils";
//
@@ -85,9 +85,9 @@ export class FieldView extends React.Component<FieldViewProps> {
PanelHeight={() => 100}
isTopMost={true} //TODO Why is this top most?
selectOnLoad={false}
- focus={() => { }}
- isSelected={() => false}
- select={() => false}
+ focus={emptyDocFunction}
+ isSelected={returnFalse}
+ select={returnFalse}
layoutKey={KeyStore.Layout}
ContainingCollectionView={undefined}
parentActive={this.props.active}
@@ -111,7 +111,7 @@ export class FieldView extends React.Component<FieldViewProps> {
}
else {
return <p> {"Waiting for server..."} </p>;
- }
+ }
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 32da2632e..3978c3d38 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -1,4 +1,4 @@
-@import "../global_variables";
+@import "../globalCssVariables";
.ProseMirror {
width: 100%;
height: auto;
@@ -22,6 +22,7 @@
overflow-x: hidden;
color: initial;
height: 100%;
+ pointer-events: all;
}
.menuicon {
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index beca6cdc6..8ea747b1c 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -5,7 +5,6 @@ import { keymap } from "prosemirror-keymap";
import { EditorState, Plugin, Transaction } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { FieldWaiting, Opt } from "../../../fields/Field";
-import { KeyStore } from "../../../fields/KeyStore";
import { RichTextField } from "../../../fields/RichTextField";
import { inpRules } from "../../util/RichTextRules";
import { schema } from "../../util/RichTextSchema";
@@ -34,7 +33,12 @@ const { menuBar } = require("prosemirror-menu");
// specified Key and assigns it to an HTML input node. When changes are made to this node,
// this will edit the document and assign the new value to that field.
//]
-export class FormattedTextBox extends React.Component<FieldViewProps> {
+
+export interface FormattedTextBoxOverlay {
+ isOverlay?: boolean;
+}
+
+export class FormattedTextBox extends React.Component<(FieldViewProps & FormattedTextBoxOverlay)> {
public static LayoutString(fieldStr: string = "DataKey") {
return FieldView.LayoutString(FormattedTextBox, fieldStr);
}
@@ -42,6 +46,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
private _editorView: Opt<EditorView>;
private _reactionDisposer: Opt<IReactionDisposer>;
private _inputReactionDisposer: Opt<IReactionDisposer>;
+ private _proxyReactionDisposer: Opt<IReactionDisposer>;
constructor(props: FieldViewProps) {
super(props);
@@ -54,8 +59,8 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
if (this._editorView) {
const state = this._editorView.state.apply(tx);
this._editorView.updateState(state);
- this.FieldDoc.SetDataOnPrototype(
- this.FieldKey,
+ this.props.Document.SetDataOnPrototype(
+ this.props.fieldKey,
JSON.stringify(state.toJSON()),
RichTextField
);
@@ -63,22 +68,23 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
}
}
- get FieldDoc() { return this.props.fieldKey === KeyStore.Archives ? Main.Instance._textDoc! : this.props.Document; }
- get FieldKey() { return this.props.fieldKey === KeyStore.Archives ? KeyStore.Data : this.props.fieldKey; }
-
componentDidMount() {
const config = {
schema,
inpRules, //these currently don't do anything, but could eventually be helpful
- plugins: [
+ plugins: this.props.isOverlay ? [
history(),
keymap({ "Mod-z": undo, "Mod-y": redo }),
keymap(baseKeymap),
this.tooltipMenuPlugin()
- ]
+ ] : [
+ history(),
+ keymap({ "Mod-z": undo, "Mod-y": redo }),
+ keymap(baseKeymap),
+ ]
};
- if (this.props.fieldKey === KeyStore.Archives) {
+ if (this.props.isOverlay) {
this._inputReactionDisposer = reaction(() => Main.Instance._textDoc && Main.Instance._textDoc.Id,
() => {
if (this._editorView) {
@@ -88,11 +94,14 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
this.setupEditor(config);
}
);
+ } else {
+ this._proxyReactionDisposer = reaction(() => this.props.isSelected(),
+ () => this.props.isSelected() && Main.Instance.SetTextDoc(this.props.Document, this.props.fieldKey, this._ref.current!, this.props.ScreenToLocalTransform()));
}
this._reactionDisposer = reaction(
() => {
- const field = this.FieldDoc.GetT(this.FieldKey, RichTextField);
+ const field = this.props.Document ? this.props.Document.GetT(this.props.fieldKey, RichTextField) : undefined;
return field && field !== FieldWaiting ? field.Data : undefined;
},
field => {
@@ -107,9 +116,8 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
}
private setupEditor(config: any) {
-
let state: EditorState;
- let field = this.FieldDoc.GetT(this.FieldKey, RichTextField);
+ let field = this.props.Document ? this.props.Document.GetT(this.props.fieldKey, RichTextField) : undefined;
if (field && field !== FieldWaiting && field.Data) {
state = EditorState.fromJSON(config, JSON.parse(field.Data));
} else {
@@ -138,6 +146,9 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
if (this._inputReactionDisposer) {
this._inputReactionDisposer();
}
+ if (this._proxyReactionDisposer) {
+ this._proxyReactionDisposer();
+ }
}
shouldComponentUpdate() {
@@ -151,23 +162,26 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
// doc.SetData(fieldKey, e.target.value, RichTextField);
}
onPointerDown = (e: React.PointerEvent): void => {
- if (e.buttons === 1 && this.props.isSelected() && !e.altKey) {
+ if (e.button === 1 && this.props.isSelected() && !e.altKey && !e.ctrlKey && !e.metaKey) {
e.stopPropagation();
}
+ if (e.button === 2) {
+ e.preventDefault();
+ }
}
onPointerUp = (e: React.PointerEvent): void => {
if (e.buttons === 1 && this.props.isSelected() && !e.altKey) {
e.stopPropagation();
}
- if (this.props.fieldKey !== KeyStore.Archives) {
- e.preventDefault();
- Main.Instance.SetTextDoc(this.props.Document, this._ref.current!);
- }
}
onFocused = (e: React.FocusEvent): void => {
- if (this.props.fieldKey !== KeyStore.Archives) {
- Main.Instance.SetTextDoc(this.props.Document, this._ref.current!);
+ if (!this.props.isOverlay) {
+ Main.Instance.SetTextDoc(this.props.Document, this.props.fieldKey, this._ref.current!, this.props.ScreenToLocalTransform());
+ } else {
+ if (this._ref.current) {
+ this._ref.current.scrollTop = Main.Instance._textScroll;
+ }
}
}
@@ -199,9 +213,10 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
}
tooltipMenuPlugin() {
+ let myprops = this.props;
return new Plugin({
view(_editorView) {
- return new TooltipTextMenu(_editorView);
+ return new TooltipTextMenu(_editorView, myprops);
}
});
}
@@ -214,9 +229,10 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
render() {
return (
<div
- className="formattedTextBox-cont"
+ className={`formattedTextBox-cont`}
onKeyDown={this.onKeyPress}
onKeyPress={this.onKeyPress}
+ onFocus={this.onFocused}
onPointerUp={this.onPointerUp}
onPointerDown={this.onPointerDown}
onContextMenu={this.specificContextMenu}
diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss
index 63ae75424..6ebd73f2c 100644
--- a/src/client/views/nodes/KeyValueBox.scss
+++ b/src/client/views/nodes/KeyValueBox.scss
@@ -1,6 +1,7 @@
-@import "../global_variables";
+@import "../globalCssVariables";
.keyValueBox-cont {
overflow-y: scroll;
+ width:100%;
height: 100%;
background-color: $light-color;
border: 1px solid $intermediate-color;
@@ -8,31 +9,58 @@
box-sizing: border-box;
display: inline-block;
.imageBox-cont img {
- max-height: 45px;
- height: auto;
- }
- td {
- padding: 6px 8px;
- border-right: 1px solid $intermediate-color;
- border-top: 1px solid $intermediate-color;
- &:last-child {
- border-right: none;
- }
+ width: auto;
}
}
+$header-height: 30px;
+.keyValueBox-tbody {
+ width:100%;
+ height:100%;
+ position: absolute;
+ overflow-y: scroll;
+}
+.keyValueBox-key {
+ display: inline-block;
+ height:100%;
+ width:50%;
+ text-align: center;
+}
+.keyValueBox-fields {
+ display: inline-block;
+ height:100%;
+ width:50%;
+ text-align: center;
+}
.keyValueBox-table {
- position: relative;
+ position: absolute;
+ width:100%;
+ height:100%;
border-collapse: collapse;
}
-
+.keyValueBox-td-key {
+ display:inline-block;
+ height:30px;
+}
+.keyValueBox-td-value {
+ display:inline-block;
+ height:30px;
+}
+.keyValueBox-valueRow {
+ width:100%;
+ height:30px;
+ display: inline-block;
+}
.keyValueBox-header {
+ width:100%;
+ position: relative;
+ display: inline-block;
background: $intermediate-color;
color: $light-color;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
- height: 30px;
+ height: $header-height;
padding-top: 4px;
th {
font-weight: normal;
@@ -43,13 +71,50 @@
}
.keyValueBox-evenRow {
+ position: relative;
+ display: inline-block;
+ width:100%;
+ height:$header-height;
background: $light-color;
.formattedTextBox-cont {
background: $light-color;
}
}
+.keyValueBox-cont {
+ .collectionfreeformview-overlay {
+ position: relative;
+ }
+}
+.keyValueBox-dividerDraggerThumb{
+ position: relative;
+ width: 4px;
+ float: left;
+ height: 30px;
+ width: 10px;
+ z-index: 20;
+ right: 0;
+ top: 0;
+ border-radius: 10px;
+ background: gray;
+ pointer-events: all;
+}
+.keyValueBox-dividerDragger{
+ position: relative;
+ width: 100%;
+ float: left;
+ height: 37px;
+ z-index: 20;
+ right: 0;
+ top: 0;
+ background: transparent;
+ pointer-events: none;
+}
.keyValueBox-oddRow {
+ position: relative;
+ display: inline-block;
+ width:100%;
+ height:30px;
background: $light-color-secondary;
.formattedTextBox-cont {
background: $light-color-secondary;
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index bcac113f0..29e4af160 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -1,23 +1,25 @@
+import { action, computed, observable } from "mobx";
import { observer } from "mobx-react";
import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
import { Document } from '../../../fields/Document';
-import { FieldWaiting, Field } from '../../../fields/Field';
+import { Field, FieldWaiting } from '../../../fields/Field';
+import { Key } from '../../../fields/Key';
import { KeyStore } from '../../../fields/KeyStore';
+import { CompileScript, ToField } from "../../util/Scripting";
import { FieldView, FieldViewProps } from './FieldView';
import "./KeyValueBox.scss";
import { KeyValuePair } from "./KeyValuePair";
import React = require("react");
-import { CompileScript, ToField } from "../../util/Scripting";
-import { Key } from '../../../fields/Key';
-import { observable, action } from "mobx";
@observer
export class KeyValueBox extends React.Component<FieldViewProps> {
+ private _mainCont = React.createRef<HTMLDivElement>();
public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr); }
@observable private _keyInput: string = "";
@observable private _valueInput: string = "";
+ @computed get splitPercentage() { return this.props.Document.GetNumber(KeyStore.SchemaSplitPercentage, 50); }
constructor(props: FieldViewProps) {
@@ -90,7 +92,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
let rows: JSX.Element[] = [];
let i = 0;
for (let key in ids) {
- rows.push(<KeyValuePair doc={realDoc} rowStyle={"keyValueBox-" + (i++ % 2 ? "oddRow" : "evenRow")} fieldId={key} key={key} />);
+ rows.push(<KeyValuePair doc={realDoc} keyWidth={100 - this.splitPercentage} rowStyle={"keyValueBox-" + (i++ % 2 ? "oddRow" : "evenRow")} fieldId={key} key={key} />);
}
return rows;
}
@@ -107,24 +109,51 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
newKeyValue = () =>
(
- <tr>
- <td><input type="text" value={this._keyInput} placeholder="Key" onChange={this.keyChanged} /></td>
- <td><input type="text" value={this._valueInput} placeholder="Value" onChange={this.valueChanged} onKeyPress={this.onEnterKey} /></td>
+ <tr className="keyValueBox-valueRow">
+ <td className="keyValueBox-td-key" style={{ width: `${100 - this.splitPercentage}%` }}>
+ <input style={{ width: "100%" }} type="text" value={this._keyInput} placeholder="Key" onChange={this.keyChanged} />
+ </td>
+ <td className="keyValueBox-td-value" style={{ width: `${this.splitPercentage}%` }}>
+ <input style={{ width: "100%" }} type="text" value={this._valueInput} placeholder="Value" onChange={this.valueChanged} onKeyPress={this.onEnterKey} />
+ </td>
</tr>
)
+ @action
+ onDividerMove = (e: PointerEvent): void => {
+ let nativeWidth = this._mainCont.current!.getBoundingClientRect();
+ this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, Math.max(0, 100 - Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100)));
+ }
+ @action
+ onDividerUp = (e: PointerEvent): void => {
+ document.removeEventListener("pointermove", this.onDividerMove);
+ document.removeEventListener('pointerup', this.onDividerUp);
+ }
+ onDividerDown = (e: React.PointerEvent) => {
+ e.stopPropagation();
+ e.preventDefault();
+ document.addEventListener("pointermove", this.onDividerMove);
+ document.addEventListener('pointerup', this.onDividerUp);
+ }
+
render() {
- return (<div className="keyValueBox-cont" onWheel={this.onPointerWheel}>
+ let dividerDragger = this.splitPercentage === 0 ? (null) :
+ <div className="keyValueBox-dividerDragger" style={{ transform: `translate(calc(${100 - this.splitPercentage}% - 5px), 0px)` }}>
+ <div className="keyValueBox-dividerDraggerThumb" onPointerDown={this.onDividerDown} />
+ </div>;
+
+ return (<div className="keyValueBox-cont" onWheel={this.onPointerWheel} ref={this._mainCont}>
<table className="keyValueBox-table">
- <tbody>
+ <tbody className="keyValueBox-tbody">
<tr className="keyValueBox-header">
- <th>Key</th>
- <th>Fields</th>
+ <th className="keyValueBox-key" style={{ width: `${100 - this.splitPercentage}%` }}>Key</th>
+ <th className="keyValueBox-fields" style={{ width: `${this.splitPercentage}%` }}>Fields</th>
</tr>
{this.createTable()}
{this.newKeyValue()}
</tbody>
</table>
+ {dividerDragger}
</div>);
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/KeyValuePair.scss b/src/client/views/nodes/KeyValuePair.scss
index 64e871e1c..04d002c7b 100644
--- a/src/client/views/nodes/KeyValuePair.scss
+++ b/src/client/views/nodes/KeyValuePair.scss
@@ -1,12 +1,30 @@
-@import "../global_variables";
+@import "../globalCssVariables";
.container{
+ width:100%;
+ height:100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
+.keyValuePair-td-key {
+ display:inline-block;
+ width: 50%;
+}
+.keyValuePair-td-value {
+ display:inline-block;
+ width: 50%;
+}
+.keyValuePair-keyField {
+ width:100%;
+ text-align: center;
+ position: relative;
+ overflow: auto;
+}
.delete{
- color: red;
+ position: relative;
+ background-color: transparent;
+ color:red;
} \ No newline at end of file
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index a1050dc6e..3e0b61c3d 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -12,7 +12,7 @@ import { Server } from "../../Server";
import { EditableView } from "../EditableView";
import { CompileScript, ToField } from "../../util/Scripting";
import { Transform } from '../../util/Transform';
-import { returnFalse, emptyFunction } from '../../../Utils';
+import { returnFalse, emptyFunction, emptyDocFunction } from '../../../Utils';
// Represents one row in a key value plane
@@ -20,6 +20,7 @@ export interface KeyValuePairProps {
rowStyle: string;
fieldId: string;
doc: Document;
+ keyWidth: number;
}
@observer
export class KeyValuePair extends React.Component<KeyValuePairProps> {
@@ -54,52 +55,53 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
active: returnFalse,
onActiveChanged: emptyFunction,
ScreenToLocalTransform: Transform.Identity,
- focus: emptyFunction,
+ focus: emptyDocFunction,
};
let contents = (
<FieldView {...props} />
);
return (
<tr className={this.props.rowStyle}>
- {/* <button>X</button> */}
- <td>
+ <td className="keyValuePair-td-key" style={{ width: `${this.props.keyWidth}%` }}>
<div className="container">
- <div>{this.key.Name}</div>
<button className="delete" onClick={() => {
let field = props.Document.Get(props.fieldKey);
if (field && field instanceof Field) {
props.Document.Set(props.fieldKey, undefined);
}
}}>X</button>
+ <div className="keyValuePair-keyField">{this.key.Name}</div>
</div>
</td>
- <td><EditableView contents={contents} height={36} GetValue={() => {
- let field = props.Document.Get(props.fieldKey);
- if (field && field instanceof Field) {
- return field.ToScriptString();
- }
- return field || "";
- }}
- SetValue={(value: string) => {
- let script = CompileScript(value, { addReturn: true });
- if (!script.compiled) {
- return false;
+ <td className="keyValuePair-td-value" style={{ width: `${100 - this.props.keyWidth}%` }}>
+ <EditableView contents={contents} height={36} GetValue={() => {
+ let field = props.Document.Get(props.fieldKey);
+ if (field && field instanceof Field) {
+ return field.ToScriptString();
}
- let res = script.run();
- if (!res.success) return false;
- const field = res.result;
- if (field instanceof Field) {
- props.Document.Set(props.fieldKey, field);
- return true;
- } else {
- let dataField = ToField(field);
- if (dataField) {
- props.Document.Set(props.fieldKey, dataField);
+ return field || "";
+ }}
+ SetValue={(value: string) => {
+ let script = CompileScript(value, { addReturn: true });
+ if (!script.compiled) {
+ return false;
+ }
+ let res = script.run();
+ if (!res.success) return false;
+ const field = res.result;
+ if (field instanceof Field) {
+ props.Document.Set(props.fieldKey, field);
return true;
+ } else {
+ let dataField = ToField(field);
+ if (dataField) {
+ props.Document.Set(props.fieldKey, dataField);
+ return true;
+ }
}
- }
- return false;
- }}></EditableView></td>
+ return false;
+ }}>
+ </EditableView></td>
</tr>
);
}
diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss
index 5d5f782d2..8bc70b48f 100644
--- a/src/client/views/nodes/LinkBox.scss
+++ b/src/client/views/nodes/LinkBox.scss
@@ -1,4 +1,4 @@
-@import "../global_variables";
+@import "../globalCssVariables";
.link-container {
width: 100%;
height: 35px;
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index b016a3d48..1c0e316e8 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -1,24 +1,16 @@
-import { observable, computed, action } from "mobx";
-import React = require("react");
-import { SelectionManager } from "../../util/SelectionManager";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faEdit, faEye, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { observer } from "mobx-react";
-import './LinkBox.scss';
-import { KeyStore } from '../../../fields/KeyStore';
-import { props } from "bluebird";
-import { DocumentView } from "./DocumentView";
import { Document } from "../../../fields/Document";
+import { KeyStore } from '../../../fields/KeyStore';
import { ListField } from "../../../fields/ListField";
+import { NumberField } from "../../../fields/NumberField";
import { DocumentManager } from "../../util/DocumentManager";
-import { LinkEditor } from "./LinkEditor";
-import { CollectionDockingView } from "../collections/CollectionDockingView";
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faEye } from '@fortawesome/free-solid-svg-icons';
-import { faEdit } from '@fortawesome/free-solid-svg-icons';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { undoBatch } from "../../util/UndoManager";
-import { FieldWaiting } from "../../../fields/Field";
-import { NumberField } from "../../../fields/NumberField";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import './LinkBox.scss';
+import React = require("react");
library.add(faEye);
diff --git a/src/client/views/nodes/LinkEditor.scss b/src/client/views/nodes/LinkEditor.scss
index fb0c69cff..ea2e7289c 100644
--- a/src/client/views/nodes/LinkEditor.scss
+++ b/src/client/views/nodes/LinkEditor.scss
@@ -1,4 +1,4 @@
-@import "../global_variables";
+@import "../globalCssVariables";
.edit-container {
width: 100%;
height: auto;
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 314af64c9..9d7c2bc56 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -66,7 +66,7 @@ export class VideoBox extends React.Component<FieldViewProps> {
<Measure onResize={this.setScaling}>
{({ measureRef }) =>
<div style={{ width: "100%", height: "auto" }} ref={measureRef}>
- <video className="videobox-cont" onClick={() => { }} ref={this.setVideoRef}>
+ <video className="videobox-cont" ref={this.setVideoRef}>
<source src={path} type="video/mp4" />
Not supported.
</video>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-27 20:08:52 +0000