aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx2
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss10
-rw-r--r--src/client/views/collections/collectionFreeForm/MarqueeView.scss2
-rw-r--r--src/client/views/nodes/DocumentView.scss2
-rw-r--r--src/client/views/nodes/KeyValueBox.scss91
-rw-r--r--src/client/views/nodes/KeyValueBox.tsx53
-rw-r--r--src/client/views/nodes/KeyValuePair.scss20
-rw-r--r--src/client/views/nodes/KeyValuePair.tsx56
8 files changed, 175 insertions, 61 deletions
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 162a39170..fdb82690a 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -17,6 +17,7 @@ import { Server } from "../../Server";
import { SetupDrag } from "../../util/DragManager";
import { CompileScript, ToField } from "../../util/Scripting";
import { Transform } from "../../util/Transform";
+import { COLLECTION_BORDER_WIDTH } from "../../views/globalCssVariables.scss";
import { anchorPoints, Flyout } from "../DocumentDecorations";
import '../DocumentDecorations.scss';
import { EditableView } from "../EditableView";
@@ -24,7 +25,6 @@ import { DocumentView } from "../nodes/DocumentView";
import { FieldView, FieldViewProps } from "../nodes/FieldView";
import "./CollectionSchemaView.scss";
import { CollectionSubView } from "./CollectionSubView";
-import { COLLECTION_BORDER_WIDTH } from "../../views/globalCssVariables.scss";
// bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index f3ac4a383..26c794e91 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -1,13 +1,13 @@
@import "../../globalCssVariables";
.collectionfreeformview-measure {
- position: absolute;
+ position: inherit;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.collectionfreeformview {
- position: absolute;
+ position: inherit;
top: 0;
left: 0;
width: 100%;
@@ -16,7 +16,7 @@
}
.collectionfreeformview-container {
.collectionfreeformview > .jsx-parser {
- position: absolute;
+ position: inherit;
height: 100%;
width: 100%;
}
@@ -43,7 +43,7 @@
}
.collectionfreeformview-overlay {
.collectionfreeformview > .jsx-parser {
- position: absolute;
+ position: inherit;
height: 100%;
}
.formattedTextBox-cont {
@@ -56,7 +56,7 @@
border-style: solid;
border-radius: $border-radius;
box-sizing: border-box;
- position:absolute;
+ position: absolute;
overflow: hidden;
top: 0;
left: 0;
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.scss b/src/client/views/collections/collectionFreeForm/MarqueeView.scss
index 0b406e722..e5ffcec76 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.scss
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.scss
@@ -1,6 +1,6 @@
.marqueeView {
- position: absolute;
+ position: inherit;
top:0;
left:0;
width:100%;
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 039d1bcc6..a946ac1a8 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,7 +1,7 @@
@import "../globalCssVariables";
.documentView-node {
- position: absolute;
+ position: inherit;
top: 0;
left:0;
background: $light-color; //overflow: hidden;
diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss
index f60edc675..6ebd73f2c 100644
--- a/src/client/views/nodes/KeyValueBox.scss
+++ b/src/client/views/nodes/KeyValueBox.scss
@@ -1,6 +1,7 @@
@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 0bb92e5a3..04d002c7b 100644
--- a/src/client/views/nodes/KeyValuePair.scss
+++ b/src/client/views/nodes/KeyValuePair.scss
@@ -1,12 +1,30 @@
@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 7f43d8fdf..3e0b61c3d 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -20,6 +20,7 @@ export interface KeyValuePairProps {
rowStyle: string;
fieldId: string;
doc: Document;
+ keyWidth: number;
}
@observer
export class KeyValuePair extends React.Component<KeyValuePairProps> {
@@ -61,45 +62,46 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
);
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>
);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 18:41:20 +0000