aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/DocumentDecorations.tsx4
-rw-r--r--src/client/views/collections/CollectionSchemaView.scss73
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx78
3 files changed, 153 insertions, 2 deletions
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index a8090dc8f..47098c3b5 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -10,8 +10,8 @@ import { DragManager } from "../util/DragManager";
import { LinkMenu } from "./nodes/LinkMenu";
import { ListField } from "../../fields/ListField";
const higflyout = require("@hig/flyout");
-const { anchorPoints } = higflyout;
-const Flyout = higflyout.default;
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
@observer
export class DocumentDecorations extends React.Component {
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 863bb256a..d16f0edf9 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,3 +1,65 @@
+//options menu styling
+#schemaOptionsMenuBtn {
+ position: absolute;
+ height: 15px;
+ width: 15px;
+ border-radius: 50%;
+ z-index: 21;
+ right: 3px;
+ top: 3px;
+ pointer-events: auto;
+ background-color:red;
+}
+
+.dd-item-containter:hover {
+ background-color: rgb(204, 204, 204);
+}
+
+.dd-item {
+ color: black;
+ padding-left: 6px;
+ padding-bottom: 0px;
+ padding-top: 4px;
+ font-size: 12px;
+ margin: 0px;
+ display: block;
+ width: 100%;
+ height: 25px;
+ z-index: 100;
+}
+.dd-item:hover {
+ color: black;
+ font-weight: 500;
+}
+
+.dropdown-menu {
+ height: 100px;
+ overflow-y: scroll;
+ }
+
+#dropdown-basic-button {
+ background-color: #fff;
+ border: .75px solid #bbbbbb;
+ border-radius: 0;
+ -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ margin:10px;
+ margin-top: 8px;
+ color: black;
+ display: inline-block;
+ width: 160px;
+ height: 25px;
+ font-size: 15px;
+ padding: 0px;
+ border-radius: 3px;
+ font-size: 12px;
+ }
+
+ #options-flyout-div {
+ text-align: center;
+ padding:0px;
+ }
+
@import "../global_variables";
.collectionSchemaView-container {
border: 1px solid $intermediate-color;
@@ -21,6 +83,17 @@
}
.collectionSchemaView-previewHandle {
position: absolute;
+ height: 15px;
+ width: 15px;
+ z-index: 20;
+ right: 0;
+ top: 20px;
+ background: Black ;
+ }
+ .collectionSchemaView-dividerDragger{
+ position: relative;
+ background: black;
+ float: left;
height: 37px;
width: 20px;
z-index: 20;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 50f5e9618..2598dd3a9 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -1,5 +1,10 @@
+<<<<<<< HEAD
+import React = require("react");
+import { action, observable } from "mobx";
+=======
import React = require("react")
import { action, observable, ObservableMap, computed } from "mobx";
+>>>>>>> f70ad315167b714f11f7d68f35a46abe9e525a4d
import { observer } from "mobx-react";
import Measure from "react-measure";
import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table";
@@ -17,10 +22,23 @@ import "./CollectionSchemaView.scss";
import { COLLECTION_BORDER_WIDTH, CollectionView } from "./CollectionView";
import { CollectionViewBase } from "./CollectionViewBase";
import { setupDrag } from "../../util/DragManager";
+<<<<<<< HEAD
+import '../DocumentDecorations.scss';
+import { Flyout, anchorPoints } from "../DocumentDecorations";
+import { DropdownButton, Dropdown } from 'react-bootstrap';
+import { ListField } from "../../../fields/ListField";
+import { Key } from "../../../fields/Key";
+//import { Server } from "http";
+//import { Server } from "http";
+import { Server } from "../../Server";
+
+//import { MenuItem } from 'react-bootstrap';
+=======
import { Key } from "./../../../fields/Key";
import { Server } from "../../Server";
import { ListField } from "../../../fields/ListField";
+>>>>>>> f70ad315167b714f11f7d68f35a46abe9e525a4d
// bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
@@ -288,6 +306,19 @@ export class CollectionSchemaView extends CollectionViewBase {
focusDocument = (doc: Document) => { }
+ keyDropDownOnSelect = (keyId: string) => {
+ const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]);
+ const listOfFields = this.props.Document.GetList<Document>(this.props.fieldKey, [])[1].fields;
+ if (listOfFields.has(keyId)) {
+ let index = columns.push(listOfFields!.get(keyId)!.key);
+ this.props.Document.SetData(KeyStore.ColumnsKey, columns, ListField);
+ }
+ }
+
+ dropdownItemOnPointerDown = (e: React.PointerEvent): void => {
+ //(e.currentTarget.children[0] as Dropdown.Item ).onSelect();
+ }
+
render() {
const columns = this.columns;
const children = this.props.Document.GetList<Document>(this.props.fieldKey, []);
@@ -318,8 +349,51 @@ export class CollectionSchemaView extends CollectionViewBase {
<div className="collectionSchemaView-columnsHandle" onPointerDown={this.onColumnsDown} />);
let dividerDragger = this.splitPercentage == 0 ? (null) :
<div className="collectionSchemaView-dividerDragger" onPointerDown={this.onDividerDown} style={{ width: `${this.DIVIDER_WIDTH}px` }} />
+<<<<<<< HEAD
+
+ //get the union of all childrens' keys
+ let addFields: { id: string, name: string }[] = [];
+ let removeFields: { id: string, name: string }[] = [];
+ //children.forEach((child) => {
+ // for (var keyId in fields.keys) {
+ // if (!allFields.includes(keyId)) {
+ // allFields.push(keyId);
+ // }
+ // }
+ // });
+ let optionsMenu = null;
+ if (this.props.active()) {
+ let protos = this.props.Document.GetAllPrototypes();
+ for (const proto of protos) {
+ proto._proxies.forEach((val, key) => {
+ if (!(key in addFields.keys)) {
+ let this_name: string = proto.fields!.get(key)!.key.Name;
+ addFields.push({ id: key, name: this_name });
+ }
+ })
+ }
+ optionsMenu = !this.props.active() ? (null) : (<Flyout
+ anchorPoint={anchorPoints.LEFT_TOP}
+ content={<div id="options-flyout-div"> <h5>Options</h5>
+ <DropdownButton id="dropdown-basic-button" className="colDropDown" title="Add Column">
+ {addFields.map(({ id, name }) => (
+ <div className="dd-item-containter"><Dropdown.Item className="dd-item" eventKey={id} onSelect={this.keyDropDownOnSelect}>{name} </Dropdown.Item></div>))}
+ </DropdownButton>
+ <DropdownButton id="dropdown-basic-button" className="colDropDown" title="Remove Column">
+ {addFields.map(({ id, name }) => (
+ <div className="dd-item-containter"><Dropdown.Item className="dd-item" eventKey={id} onSelect={this.keyDropDownOnSelect}>{name} </Dropdown.Item></div>))}
+ </DropdownButton>
+ </div>
+ }>
+ <div id="schemaOptionsMenuBtn" />
+ </Flyout>);
+ }
+
+
+=======
let colDividerDragger = this._columnsPercentage == 0 ? (null) :
<div className="collectionSchemaView-colDividerDragger" onPointerDown={this.onColDividerDown} style={{ height: `${this.DIVIDER_WIDTH}px` }} />
+>>>>>>> f70ad315167b714f11f7d68f35a46abe9e525a4d
return (
<div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} ref={this._mainCont} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
@@ -371,7 +445,11 @@ export class CollectionSchemaView extends CollectionViewBase {
{content}
</div>
{previewHandle}
+<<<<<<< HEAD
+ {optionsMenu}
+=======
{columnsHandle}
+>>>>>>> f70ad315167b714f11f7d68f35a46abe9e525a4d
</div>
</div >
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 20:11:26 +0000