From 4c84114b79eaadb494258d3d8e8163280266247d Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 25 Feb 2019 21:21:14 -0500 Subject: fixed some small things --- src/client/views/collections/CollectionFreeFormView.scss | 2 +- src/client/views/collections/CollectionSchemaView.scss | 2 +- src/client/views/collections/CollectionSchemaView.tsx | 4 ++-- src/client/views/nodes/FormattedTextBox.scss | 6 ++++-- 4 files changed, 8 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index d583a8218..7dd6223bc 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -2,7 +2,7 @@ ::-webkit-scrollbar { -webkit-appearance: none; - width: 10px; + height:5px; } ::-webkit-scrollbar-thumb { border-radius: 5px; diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 0bd5a2ed3..9a7165209 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -7,7 +7,7 @@ height: 100%; ::-webkit-scrollbar { -webkit-appearance: none; - width: 10px; + width: 5px; } ::-webkit-scrollbar-thumb { border-radius: 5px; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 38217d7c4..79c688f6b 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -116,8 +116,8 @@ export class CollectionSchemaView extends CollectionViewBase { } }), style: { - background: rowInfo.index == this._selectedIndex ? "#00afec" : "white", - color: rowInfo.index == this._selectedIndex ? "white" : "black" + background: rowInfo.index == this._selectedIndex ? "lightGray" : "white", + //color: rowInfo.index == this._selectedIndex ? "white" : "black" } }; } diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss index 0389a3f85..f06fdae24 100644 --- a/src/client/views/nodes/FormattedTextBox.scss +++ b/src/client/views/nodes/FormattedTextBox.scss @@ -9,8 +9,10 @@ } .formattedTextBox-cont { - background: beige; - padding: 0; + background: rgb(218, 215, 215); + padding: 1; + border: black; + border-width: 10; overflow-y: scroll; overflow-x: hidden; color: initial; -- cgit v1.2.3-70-g09d2 From 245904b619675cda216218e8d38d0970b7b6b249 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 25 Feb 2019 22:00:22 -0500 Subject: for mac --- src/client/documents/Documents.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 15ecfbfe6..9770e5cdc 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -130,13 +130,13 @@ export namespace Documents {
` + ImageBox.LayoutString() + `
-
` +
` + FormattedTextBox.LayoutString("CaptionKey") + `
` }; function FixedCaption() { return `
-
` +
` + FormattedTextBox.LayoutString("CaptionKey") + `
` }; -- cgit v1.2.3-70-g09d2 From 56cecd09e098e39592c1ace0da7c73f5d080c0a7 Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 26 Feb 2019 10:18:04 -0500 Subject: scrollbar redux --- src/client/views/collections/CollectionFreeFormView.scss | 3 ++- src/client/views/collections/CollectionSchemaView.scss | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index 7dd6223bc..737f28318 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -3,9 +3,10 @@ ::-webkit-scrollbar { -webkit-appearance: none; height:5px; + width:5px; } ::-webkit-scrollbar-thumb { - border-radius: 5px; + border-radius: 2px; background-color: rgba(0,0,0,.5); } diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 9a7165209..f86094a98 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -7,10 +7,11 @@ height: 100%; ::-webkit-scrollbar { -webkit-appearance: none; - width: 5px; + height:5px; + width:5px; } ::-webkit-scrollbar-thumb { - border-radius: 5px; + border-radius: 2px; background-color: rgba(0,0,0,.5); } -- cgit v1.2.3-70-g09d2 From 3ff149e05a76fa0a0ace32a1b0c9876c4850aa2a Mon Sep 17 00:00:00 2001 From: bob Date: Tue, 26 Feb 2019 12:32:52 -0500 Subject: extended CollectionTreeView to support drag and drop. updated CollectionSchemaView's drag drop --- src/client/util/DragManager.ts | 33 ++++++ .../views/collections/CollectionSchemaView.scss | 27 +++++ .../views/collections/CollectionSchemaView.tsx | 111 ++++++++------------- .../views/collections/CollectionTreeView.scss | 6 ++ .../views/collections/CollectionTreeView.tsx | 78 ++++++--------- src/client/views/nodes/DocumentView.tsx | 30 +++--- src/client/views/nodes/FieldView.tsx | 11 +- 7 files changed, 160 insertions(+), 136 deletions(-) (limited to 'src') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index aab23f91c..8adadee0f 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -1,4 +1,37 @@ import { DocumentDecorations } from "../views/DocumentDecorations"; +import { CollectionDockingView } from "../views/collections/CollectionDockingView"; +import { Document } from "../../fields/Document" +import { action } from "mobx"; + +export function setupDrag(_reference: React.RefObject, _dragDocument: Document) { + let onRowMove = action((e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + + document.removeEventListener("pointermove", onRowMove); + document.removeEventListener('pointerup', onRowUp); + DragManager.StartDrag(_reference.current!, { document: _dragDocument }); + }); + let onRowUp = action((e: PointerEvent): void => { + document.removeEventListener("pointermove", onRowMove); + document.removeEventListener('pointerup', onRowUp); + }); + let onItemDown = (e: React.PointerEvent) => { + // if (this.props.isSelected() || this.props.isTopMost) { + if (e.button == 0) { + e.stopPropagation(); + e.preventDefault(); + if (e.shiftKey) { + CollectionDockingView.Instance.StartOtherDrag(_reference.current!, _dragDocument); + } else { + document.addEventListener("pointermove", onRowMove); + document.addEventListener('pointerup', onRowUp); + } + } + //} + } + return onItemDown; +} export namespace DragManager { export function Root() { diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index f86094a98..995d60f74 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -1,4 +1,5 @@ + .collectionSchemaView-container { border-style: solid; box-sizing: border-box; @@ -14,6 +15,32 @@ border-radius: 2px; background-color: rgba(0,0,0,.5); } + .collectionSchemaView-previewRegion { + position: relative; + background: black; + float: left; + height: 100%; + } + .collectionSchemaView-previewHandle { + position: absolute; + height: 37px; + width: 20px; + z-index: 20; + right: 0; + top: 0; + background: Black ; + } + .collectionSchemaView-dividerDragger{ + position: relative; + background: black; + float: left; + height: 100%; + } + .collectionSchemaView-tableContainer { + position: relative; + float: left; + height: 100%; + } .ReactTable { position: absolute; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 79c688f6b..106a5c4f5 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -15,11 +15,11 @@ import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; -import { DragManager } from "../../util/DragManager"; -import { CollectionDockingView } from "./CollectionDockingView"; +import { setupDrag } from "../../util/DragManager"; // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 + @observer export class CollectionSchemaView extends CollectionViewBase { private _mainCont = React.createRef(); @@ -32,9 +32,6 @@ export class CollectionSchemaView extends CollectionViewBase { @observable _selectedIndex = 0; @observable _splitPercentage: number = 50; - - - renderCell = (rowProps: CellInfo) => { let props: FieldViewProps = { doc: rowProps.value[0], @@ -48,31 +45,9 @@ export class CollectionSchemaView extends CollectionViewBase { ) let reference = React.createRef(); - let onRowMove = action((e: PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - - document.removeEventListener("pointermove", onRowMove); - document.removeEventListener('pointerup', onRowUp); - DragManager.StartDrag(reference.current!, { document: props.doc }); - }); - let onRowUp = action((e: PointerEvent): void => { - document.removeEventListener("pointermove", onRowMove); - document.removeEventListener('pointerup', onRowUp); - }); - let onRowDown = (e: React.PointerEvent) => { - if (this.props.isSelected() || this.props.isTopMost) { - if (e.shiftKey) { - CollectionDockingView.Instance.StartOtherDrag(reference.current!, props.doc); - e.stopPropagation(); - } else { - document.addEventListener("pointermove", onRowMove); - document.addEventListener('pointerup', onRowUp); - } - } - } + let onItemDown = setupDrag(reference, props.doc); return ( -
+
{ let field = props.doc.Get(props.fieldKey); @@ -80,7 +55,8 @@ export class CollectionSchemaView extends CollectionViewBase { return field.ToScriptString(); } return field || ""; - }} SetValue={(value: string) => { + }} + SetValue={(value: string) => { let script = CompileScript(value); if (!script.compiled) { return false; @@ -97,7 +73,9 @@ export class CollectionSchemaView extends CollectionViewBase { } } return false; - }}>
+ }}> + +
) } @@ -216,44 +194,43 @@ export class CollectionSchemaView extends CollectionViewBase { } ) - let handle = !this.props.active() ? (null) : ( -
); + let previewHandle = !this.props.active() ? (null) : ( +
); return ( -
- { - this._dividerX = r.entry.width; - this._panelHeight = r.entry.height; - })}> - {({ measureRef }) => -
- ({ - Header: col.Name, - accessor: (doc: Document) => [doc, col], - id: col.Id - }))} - column={{ - ...ReactTableDefaults.column, - Cell: this.renderCell, - - }} - getTrProps={this.getTrProps} - /> -
- } - -
-
this.onDrop(e, {})} - ref={this.createDropTarget} - style={{ position: "relative", float: "left", width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)`, height: "100%" }}> - {content} +
+
this.onDrop(e, {})} ref={this.createDropTarget}> + { + this._dividerX = r.entry.width; + this._panelHeight = r.entry.height; + })}> + {({ measureRef }) => +
+ ({ + Header: col.Name, + accessor: (doc: Document) => [doc, col], + id: col.Id + }))} + column={{ + ...ReactTableDefaults.column, + Cell: this.renderCell, + + }} + getTrProps={this.getTrProps} + /> +
+ } + +
+
+ {content} +
+ {previewHandle}
- {handle}
) } diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 675fc6c53..c488e2894 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -25,4 +25,10 @@ li:before { .uncollapsed:before { content: '\25bc'; margin-right: 0.5em; +} + +.collectionTreeView-dropTarget { + border-style: solid; + box-sizing: border-box; + height:100%; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 52e853bf7..64f4c0970 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -7,6 +7,9 @@ import React = require("react") import { TextField } from "../../../fields/TextField"; import { observable, action } from "mobx"; import "./CollectionTreeView.scss"; +import { setupDrag } from "../../util/DragManager"; +import { FieldWaiting } from "../../../fields/Field"; +import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; export interface TreeViewProps { document: Document; @@ -23,60 +26,39 @@ class TreeView extends React.Component { /** * Renders a single child document. If this child is a collection, it will call renderTreeView again. Otherwise, it will just append a list element. - * @param document The document to render. + * @param childDocument The document to render. */ - renderChild(document: Document) { - var children = document.GetT>(KeyStore.Data, ListField); - let title = document.GetT(KeyStore.Title, TextField); + renderChild(childDocument: Document) { + let reference = React.createRef(); - // if the title hasn't loaded, immediately return the div - if (!title || title === "") { - return
; - } - - // otherwise, check if it's a collection. - else if (children && children !== "") { - // if it's not collapsed, then render the full TreeView. - if (!this.collapsed) { - return ( -
  • this.collapsed = true)} > - {title.Data} -
      - -
    -
    • - ); - } else { - return
  • this.collapsed = false)}>{title.Data}
    • - } - } + var children = childDocument.GetT>(KeyStore.Data, ListField); + let title = childDocument.GetT(KeyStore.Title, TextField); + let onItemDown = setupDrag(reference, childDocument); - // finally, if it's a normal document, then render it as such. - else { - return
  • {title.Data}
    • ; + if (title && title != FieldWaiting) { + let subView = !children || this.collapsed || children === FieldWaiting ? (null) : +
      + +
    ; + return
    +
  • this.collapsed = !this.collapsed)} > + {title.Data} + {subView} +
    • +
    } + return (null); } render() { var children = this.props.document.GetT>(KeyStore.Data, ListField); - - if (children && children !== "") { - return (
    - {children.Data.map(value => this.renderChild(value))} -
    ) - // let results: JSX.Element[] = []; - - // // append a list item for each child in the collection - // children.Data.forEach((value) => { - // results.push(this.renderChild(value)); - // }) - - // return results; - } else { - return
    ; - } + return !children || children === FieldWaiting ? (null) : + (children.Data.map(value => +
    + {this.renderChild(value)} +
    ) + ) } } @@ -87,11 +69,11 @@ export class CollectionTreeView extends CollectionViewBase { render() { let titleStr = ""; let title = this.props.Document.GetT(KeyStore.Title, TextField); - if (title && title !== "") { + if (title && title !== FieldWaiting) { titleStr = title.Data; } return ( -
    +
    this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >

    {titleStr}

      { return; } - if (this.topMost) { - ContextMenu.Instance.clearItems() - ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) - ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) - } - else { + ContextMenu.Instance.clearItems() + ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) + ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) }) + ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) }) + ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) }) + ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) }) + //ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) }) + ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) + if (!this.topMost) { // DocumentViews should stop propagation of this event e.stopPropagation(); - - ContextMenu.Instance.clearItems(); - ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked }) - ContextMenu.Instance.addItem({ description: "Open Right", event: () => CollectionDockingView.Instance.AddRightSplit(this.props.Document) }) - ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }) - ContextMenu.Instance.addItem({ description: "Freeform", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Freeform) }) - ContextMenu.Instance.addItem({ description: "Schema", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Schema) }) - ContextMenu.Instance.addItem({ description: "Treeview", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Tree) }) - ContextMenu.Instance.addItem({ description: "Docking", event: () => this.props.Document.SetNumber(KeyStore.ViewType, CollectionViewType.Docking) }) - ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) - SelectionManager.SelectDoc(this, e.ctrlKey); } + + ContextMenu.Instance.addItem({ description: "Delete", event: this.deleteClicked }) + ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15) + SelectionManager.SelectDoc(this, e.ctrlKey); } @computed get mainContent() { diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 1a9d325db..b71309bf5 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -52,11 +52,14 @@ export class FieldView extends React.Component { } else if (field instanceof NumberField) { return

      {field.Data}

      - } else if (field instanceof HtmlField) { + } + else if (field instanceof HtmlField) { return - } else if (field != FieldWaiting) { - return

      {field.GetValue}

      - } else + } + else if (field != FieldWaiting) { + return

      {JSON.stringify(field.GetValue())}

      + } + else return

      {"Waiting for server..."}

      } -- cgit v1.2.3-70-g09d2