diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/DocumentDecorations.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/EditableView.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/InkingCanvas.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/Main.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionDockingView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.scss | 35 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.scss | 66 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionSchemaView.tsx | 234 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionTreeView.scss | 5 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionTreeView.tsx | 156 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionView.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/nodes/ImageBox.tsx | 4 |
14 files changed, 248 insertions, 277 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/EditableView.tsx b/src/client/views/EditableView.tsx index 98a6ed1ba..579d6e6ad 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -1,6 +1,6 @@ import React = require('react') import { observer } from 'mobx-react'; -import { observable, action } from 'mobx'; +import { observable, action, trace } from 'mobx'; import "./EditableView.scss" export interface EditableProps { @@ -52,7 +52,7 @@ export class EditableView extends React.Component<EditableProps> { } else { return ( <div className="editableView-container-editing" style={{ display: this.props.display, height: "auto", maxHeight: `${this.props.height}` }} - onClick={action(() => this.editing = true)}> + onClick={action(() => this.editing = true)} > {this.props.contents} </div> ) diff --git a/src/client/views/InkingCanvas.tsx b/src/client/views/InkingCanvas.tsx index 8d0121035..36a8834a0 100644 --- a/src/client/views/InkingCanvas.tsx +++ b/src/client/views/InkingCanvas.tsx @@ -137,7 +137,7 @@ export class InkingCanvas extends React.Component<InkCanvasProps> { // get data from server // let inkField = this.props.Document.GetT(KeyStore.Ink, InkField); - // if (!inkField || inkField == "<Waiting>") { + // if (!inkField || inkField == FieldWaiting) { // return (<div className="inking-canvas" style={canvasStyle} // onMouseDown={this.handleMouseDown} onMouseMove={this.handleMouseMove} > // <svg> diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index a1a6cc475..06a9a92d3 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -100,6 +100,7 @@ export class Main extends React.Component { library.add(faFilm); library.add(faMusic); + this.initEventListeners(); Documents.initProtos(() => this.initAuthenticationRouters()); } diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 0f0276929..fd0810242 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -61,6 +61,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp docconfig.callDownwards('_$init'); this._goldenLayout._$maximiseItem(docconfig); this._fullScreen = docconfig; + this._ignoreStateChange = JSON.stringify(this._goldenLayout.toConfig()); this.stateChanged(); } @action @@ -69,6 +70,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp this._goldenLayout._$minimiseItem(this._fullScreen); this._goldenLayout.root.contentItems[0].removeChild(this._fullScreen); this._fullScreen = null; + this._ignoreStateChange = JSON.stringify(this._goldenLayout.toConfig()); this.stateChanged(); } } diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index 0e0570397..bdc597a25 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -7,6 +7,9 @@ width: 100%; } + .inking-canvas { + transform-origin: 50000px 50000px; + } //nested freeform views // .collectionfreeformview-container { // background-image: linear-gradient(to right, $light-color-secondary 1px, transparent 1px), @@ -14,22 +17,25 @@ // background-size: 30px 30px; // } + box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; border: 0px solid $light-color-secondary; border-radius: $border-radius; box-sizing: border-box; position: relative; + overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; - overflow: hidden; - box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; .collectionfreeformview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; + .inking-canvas { + transform-origin: 50000px 50000px; + } } } .collectionfreeformview-overlay { @@ -41,33 +47,32 @@ background: $light-color-secondary; } + .inking-canvas { + transform-origin: 50000px 50000px; + } + opacity: 0.99; - position:absolute; border: 0px solid transparent; border-radius: $border-radius; - overflow: hidden; box-sizing: border-box; + position:relative; + overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; .collectionfreeformview { - .collectionfreeformview > .jsx-parser{ - position:absolute; - height: 100%; - } - .formattedTextBox-cont { - background:yellow; - } - - // overflow: hidden; - // border-style: solid; - // box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; + .inking-canvas { + transform-origin: 50000px 50000px; + } + .formattedTextBox-cont { + background:yellow; + } } } diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index 8bf4a7539..da9f7b392 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -219,13 +219,13 @@ export class CollectionFreeFormView extends CollectionViewBase { @computed get backgroundLayout(): string | undefined { let field = this.props.Document.GetT(KeyStore.BackgroundLayout, TextField); - if (field && field !== "<Waiting>") { + if (field && field !== FieldWaiting) { return field.Data; } } @computed get overlayLayout(): string | undefined { let field = this.props.Document.GetT(KeyStore.OverlayLayout, TextField); - if (field && field !== "<Waiting>") { + if (field && field !== FieldWaiting) { return field.Data; } } diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 863bb256a..c3a2e88ac 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -1,4 +1,57 @@ @import "../global_variables"; + +//options menu styling +#schemaOptionsMenuBtn { + position: absolute; + height: 20px; + width: 20px; + border-radius: 50%; + z-index: 21; + right: 4px; + top: 4px; + pointer-events: auto; + background-color:black; + display:inline-block; + padding: 0px; + font-size: 100%; +} +#schema-options-header { + text-align: center; + padding: 0px; + margin: 0px; +} +.schema-options-subHeader { + color: $intermediate-color; + margin-bottom: 5px; +} +#schemaOptionsMenuBtn:hover { + transform: scale(1.15); +} + +#preview-schema-checkbox-div { + margin-left: 20px; + font-size: 12px; +} + + #options-flyout-div { + text-align: left; + padding:0px; + z-index: 100; + font-family: $sans-serif; + padding-left: 5px; + } + + #schema-col-checklist { + overflow: scroll; + text-align: left; + //background-color: $light-color-secondary; + line-height: 25px; + max-height: 175px; + font-family: $sans-serif; + font-size: 12px; + } + + .collectionSchemaView-container { border: 1px solid $intermediate-color; border-radius: $border-radius; @@ -6,7 +59,7 @@ position: absolute; width: 100%; height: 100%; - overflow: hidden; + .collectionSchemaView-content { position: absolute; height: 100%; @@ -21,6 +74,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 062babe58..b986f394c 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -1,24 +1,29 @@ import React = require("react") -import { action, observable, ObservableMap, computed } from "mobx"; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { faCog } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import Measure from "react-measure"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; import "react-table/react-table.css"; import { Document } from "../../../fields/Document"; import { Field, Opt } from "../../../fields/Field"; +import { Key } from "../../../fields/Key"; import { KeyStore } from "../../../fields/KeyStore"; +import { ListField } from "../../../fields/ListField"; +import { Server } from "../../Server"; +import { setupDrag } from "../../util/DragManager"; import { CompileScript, ToField } from "../../util/Scripting"; import { Transform } from "../../util/Transform"; +import { anchorPoints, Flyout } from "../DocumentDecorations"; +import '../DocumentDecorations.scss'; import { EditableView } from "../EditableView"; import { DocumentView } from "../nodes/DocumentView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; -import { COLLECTION_BORDER_WIDTH, CollectionView } from "./CollectionView"; +import { CollectionView, COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; -import { setupDrag } from "../../util/DragManager"; -import { Key } from "./../../../fields/Key"; -import { Server } from "../../Server"; -import { ListField } from "../../../fields/ListField"; // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 @@ -39,17 +44,18 @@ class KeyToggle extends React.Component<{ keyId: string, checked: boolean, toggl render() { if (this.key) { return (<div key={this.key.Id}> - <input type="checkbox" checked={this.props.checked} onChange={() => this.key && this.props.toggle(this.key)} />{this.key.Name} + <input type="checkbox" checked={this.props.checked} onChange={() => this.key && this.props.toggle(this.key)} /> + {this.key.Name} </div>) - } else { - return <div></div> } + return (null); } } @observer export class CollectionSchemaView extends CollectionViewBase { private _mainCont = React.createRef<HTMLDivElement>(); + private _startSplitPercent = 0; private DIVIDER_WIDTH = 4; @observable _columns: Array<Key> = [KeyStore.Title, KeyStore.Data, KeyStore.Author]; @@ -59,8 +65,11 @@ export class CollectionSchemaView extends CollectionViewBase { @observable _panelHeight = 0; @observable _selectedIndex = 0; @observable _columnsPercentage = 0; + @observable _keys: Key[] = []; + @computed get splitPercentage() { return this.props.Document.GetNumber(KeyStore.SchemaSplitPercentage, 0); } + renderCell = (rowProps: CellInfo) => { let props: FieldViewProps = { doc: rowProps.value[0], @@ -118,9 +127,8 @@ export class CollectionSchemaView extends CollectionViewBase { } return { onClick: action((e: React.MouseEvent, handleOriginal: Function) => { + that.props.select(e.ctrlKey); that._selectedIndex = rowInfo.index; - // bcz - ugh - needed to force Measure to do its thing and call onResize - this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage - 0.05) if (handleOriginal) { handleOriginal() @@ -151,30 +159,26 @@ export class CollectionSchemaView extends CollectionViewBase { }) } - @observable keys: Key[] = []; - + //toggles preview side-panel of schema + @action + toggleExpander = (event: React.ChangeEvent<HTMLInputElement>) => { + this._startSplitPercent = this.splitPercentage; + if (this._startSplitPercent == this.splitPercentage) { + this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage == 0 ? 33 : 0); + } + } findAllDocumentKeys = (): { [id: string]: boolean } => { const docs = this.props.Document.GetList<Document>(this.props.fieldKey, []); let keys: { [id: string]: boolean } = {} - docs.forEach(doc => { - let protos = doc.GetAllPrototypes(); - for (const proto of protos) { - proto._proxies.forEach((val: any, key: string) => { - keys[key] = false - }) - } - }) - this.columns.forEach(key => { - keys[key.Id] = true; - }) + docs.map(doc => doc.GetAllPrototypes().map(proto => proto._proxies.forEach((val: any, key: string) => keys[key] = false))); + this.columns.forEach(key => keys[key.Id] = true) return keys; } - _startSplitPercent = 0; @action onDividerMove = (e: PointerEvent): void => { let nativeWidth = this._mainCont.current!.getBoundingClientRect(); - this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, 100 - Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100)); + this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, Math.max(0, 100 - Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100))); } @action onDividerUp = (e: PointerEvent): void => { @@ -192,83 +196,12 @@ export class CollectionSchemaView extends CollectionViewBase { document.addEventListener('pointerup', this.onDividerUp); } - - @action - onColDividerMove = (e: PointerEvent): void => { - let nativeWidth = this._mainCont.current!.getBoundingClientRect(); - this._columnsPercentage = 100 - (e.clientY - nativeWidth.top) / nativeWidth.height * 100; - } - @action - onColDividerUp = (e: PointerEvent): void => { - document.removeEventListener("pointermove", this.onColDividerMove); - document.removeEventListener('pointerup', this.onColDividerUp); - } - onColDividerDown = (e: React.PointerEvent) => { - e.stopPropagation(); - e.preventDefault(); - document.addEventListener("pointermove", this.onColDividerMove); - document.addEventListener('pointerup', this.onColDividerUp); - } - - @action - onExpanderMove = (e: PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - } - @action - onExpanderUp = (e: PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - document.removeEventListener("pointermove", this.onExpanderMove); - document.removeEventListener('pointerup', this.onExpanderUp); - if (this._startSplitPercent == this.splitPercentage) { - this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage == 0 ? 33 : 0); - } - } - onExpanderDown = (e: React.PointerEvent) => { - this._startSplitPercent = this.splitPercentage; - e.stopPropagation(); - e.preventDefault(); - document.addEventListener("pointermove", this.onExpanderMove); - document.addEventListener('pointerup', this.onExpanderUp); - } - - onPointerDown = (e: React.PointerEvent) => { - // if (e.button === 2 && this.active) { - // e.stopPropagation(); - // e.preventDefault(); - // } else - { - // if (e.buttons === 1) { - // if (this.props.isSelected()) { - // e.stopPropagation(); - // } - // } - } - } - + @observable _tableWidth = 0; @action - onColumnsMove = (e: PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); + setTableDimensions = (r: any) => { + this._tableWidth = r.entry.width; } @action - onColumnsUp = (e: PointerEvent): void => { - e.stopPropagation(); - e.preventDefault(); - document.removeEventListener("pointermove", this.onColumnsMove); - document.removeEventListener('pointerup', this.onColumnsUp); - this._columnsPercentage = this._columnsPercentage ? 0 : 50; - } - onColumnsDown = (e: React.PointerEvent) => { - this._startSplitPercent = this.splitPercentage; - e.stopPropagation(); - e.preventDefault(); - document.addEventListener("pointermove", this.onColumnsMove); - document.addEventListener('pointerup', this.onColumnsUp); - } - - @action setScaling = (r: any) => { const children = this.props.Document.GetList<Document>(this.props.fieldKey, []); const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; @@ -283,13 +216,24 @@ export class CollectionSchemaView extends CollectionViewBase { getTransform = (): Transform => { return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling); } + getPreviewTransform = (): Transform => { + return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX - this._tableWidth, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling); + } focusDocument = (doc: Document) => { } + onPointerDown = (e: React.PointerEvent): void => { + if (this.props.isSelected()) { + e.stopPropagation(); + } + } + render() { + library.add(faCog); const columns = this.columns; const children = this.props.Document.GetList<Document>(this.props.fieldKey, []); const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; + //all the keys/columns that will be displayed in the schema const allKeys = this.findAllDocumentKeys(); let content = this._selectedIndex == -1 || !selected ? (null) : ( <Measure onResize={this.setScaling}> @@ -299,7 +243,7 @@ export class CollectionSchemaView extends CollectionViewBase { AddDocument={this.props.addDocument} RemoveDocument={this.props.removeDocument} isTopMost={false} SelectOnLoad={false} - ScreenToLocalTransform={this.getTransform} + ScreenToLocalTransform={this.getPreviewTransform} ContentScaling={this.getContentScaling} PanelWidth={this.getPanelWidth} PanelHeight={this.getPanelHeight} @@ -310,67 +254,59 @@ export class CollectionSchemaView extends CollectionViewBase { } </Measure> ) - let previewHandle = !this.props.active() ? (null) : ( - <div className="collectionSchemaView-previewHandle" onPointerDown={this.onExpanderDown} />); - let columnsHandle = !this.props.active() ? (null) : ( - <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` }} /> - let colDividerDragger = this._columnsPercentage == 0 ? (null) : - <div className="collectionSchemaView-colDividerDragger" onPointerDown={this.onColDividerDown} style={{ height: `${this.DIVIDER_WIDTH}px` }} /> + + //options button and menu + let optionsMenu = !this.props.active() ? (null) : (<Flyout + anchorPoint={anchorPoints.LEFT_TOP} + content={<div> + <div id="schema-options-header"><h5><b>Options</b></h5></div> + <div id="options-flyout-div"> + <h6 className="schema-options-subHeader">Preview Window</h6> + <div id="preview-schema-checkbox-div"><input type="checkbox" key={"Show Preview"} checked={this.splitPercentage != 0} onChange={this.toggleExpander} /> Show Preview </div> + <h6 className="schema-options-subHeader" >Displayed Columns</h6> + <ul id="schema-col-checklist" > + {Array.from(Object.keys(allKeys)).map(item => { + return (<KeyToggle checked={allKeys[item]} key={item} keyId={item} toggle={this.toggleKey} />) + })} + </ul> + </div> + </div> + }> + <button id="schemaOptionsMenuBtn"><FontAwesomeIcon style={{ color: "white" }} icon="cog" size="sm" /></button> + </Flyout>); return ( <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} ref={this._mainCont} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} > <div className="collectionSchemaView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget}> - <Measure onResize={action((r: any) => { - this._dividerX = r.entry.width; - this._panelHeight = r.entry.height; - })}> + <Measure onResize={this.setTableDimensions}> {({ measureRef }) => - <div ref={measureRef} className="collectionSchemaView-tableContainer" - style={{ width: `calc(100% - ${this.splitPercentage}%)` }}> - <div className="collectionSchemaView-reactContainer" style={{ height: `calc(100% - ${this._columnsPercentage}%)` }}> - <ReactTable - data={children} - pageSize={children.length} - page={0} - showPagination={false} - columns={columns.map(col => ({ - Header: col.Name, - accessor: (doc: Document) => [doc, col], - id: col.Id - }))} - column={{ - ...ReactTableDefaults.column, - Cell: this.renderCell, - - }} - getTrProps={this.getTrProps} - /> - </div> - {colDividerDragger} - <div className="collectionSchemaView-addColumn" style={{ height: `${this._columnsPercentage}%` }} > - {/* <input type="checkbox" id="addColumn-toggle" /> - <label htmlFor="addColumn-toggle" title="Add Column"><p>+</p></label> */} + <div className="collectionSchemaView-tableContainer" ref={measureRef} style={{ width: `calc(100% - ${this.splitPercentage}%)` }}> + <ReactTable + data={children} + pageSize={children.length} + page={0} + showPagination={false} + columns={columns.map(col => ({ + Header: col.Name, + accessor: (doc: Document) => [doc, col], + id: col.Id + }))} + column={{ + ...ReactTableDefaults.column, + Cell: this.renderCell, - <div className="addColumn-options"> - <ul style={{ overflow: "scroll" }}> - {Array.from(Object.keys(allKeys)).map(item => { - return (<KeyToggle checked={allKeys[item]} key={item} keyId={item} toggle={this.toggleKey} />) - })} - </ul> - </div> - </div> - </div> - } + }} + getTrProps={this.getTrProps} + /> + </div>} </Measure> {dividerDragger} <div className="collectionSchemaView-previewRegion" style={{ width: `calc(${this.props.Document.GetNumber(KeyStore.SchemaSplitPercentage, 0)}% - ${this.DIVIDER_WIDTH}px)` }}> {content} </div> - {previewHandle} - {columnsHandle} - + {optionsMenu} </div> </div > ) diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index fa0f1c761..5a14aa54d 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -1,6 +1,8 @@ @import "../global_variables"; #body { padding: 20px; + padding-left: 10px; + padding-right: 0px; background: $light-color-secondary; font-size: 13px; overflow: scroll; @@ -49,6 +51,7 @@ li { .docContainer:hover { .delete-button { display: inline; + width: auto; } } @@ -57,5 +60,5 @@ li { float: right; margin-left: 15px; margin-top: 3px; - display: none; + display: inline; }
\ No newline at end of file diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index f9da759fd..ec1bf5d0e 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -1,20 +1,19 @@ +import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; +import { faCaretDown, faCaretRight, faTrashAlt } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { action, observable, trace } from "mobx"; import { observer } from "mobx-react"; -import { CollectionViewBase } from "./CollectionViewBase"; import { Document } from "../../../fields/Document"; +import { FieldWaiting } from "../../../fields/Field"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; -import React = require("react") -import { TextField } from "../../../fields/TextField"; -import { observable, action } from "mobx"; -import "./CollectionTreeView.scss"; -import { EditableView } from "../EditableView"; import { setupDrag } from "../../util/DragManager"; -import { FieldWaiting } from "../../../fields/Field"; -import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; +import { EditableView } from "../EditableView"; +import "./CollectionTreeView.scss"; +import { CollectionView, COLLECTION_BORDER_WIDTH } from "./CollectionView"; +import { CollectionViewBase } from "./CollectionViewBase"; +import React = require("react") -import { library } from '@fortawesome/fontawesome-svg-core'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faTrashAlt, faCaretRight, faCaretDown } from '@fortawesome/free-solid-svg-icons'; export interface TreeViewProps { document: Document; @@ -37,13 +36,9 @@ library.add(faCaretRight); */ class TreeView extends React.Component<TreeViewProps> { - @observable - collapsed: boolean = false; - - delete = () => { - this.props.deleteDoc(this.props.document); - } + @observable _collapsed: boolean = true; + delete = () => this.props.deleteDoc(this.props.document); @action remove = (document: Document) => { @@ -54,93 +49,63 @@ class TreeView extends React.Component<TreeViewProps> { } renderBullet(type: BulletType) { - let onClicked = action(() => this.collapsed = !this.collapsed); - + let onClicked = action(() => this._collapsed = !this._collapsed); + let bullet: IconProp | undefined = undefined; switch (type) { - case BulletType.Collapsed: - return <div className="bullet" onClick={onClicked}><FontAwesomeIcon icon="caret-right" /></div> - case BulletType.Collapsible: - return <div className="bullet" onClick={onClicked}><FontAwesomeIcon icon="caret-down" /></div> - case BulletType.List: - return <div className="bullet"></div> + case BulletType.Collapsed: bullet = "caret-right"; break; + case BulletType.Collapsible: bullet = "caret-down"; break; } + return <div className="bullet" onClick={onClicked}>{bullet ? <FontAwesomeIcon icon={bullet} /> : ""} </div> } /** * Renders the EditableView title element for placement into the tree. */ renderTitle() { - let title = this.props.document.GetT<TextField>(KeyStore.Title, TextField); - - // if the title hasn't loaded, immediately return the div - if (!title || title === "<Waiting>") { - return <div key={this.props.document.Id}></div>; - } - - return <div className="docContainer"> <EditableView - display={"inline"} - contents={title.Data} - height={36} GetValue={() => { - let title = this.props.document.GetT<TextField>(KeyStore.Title, TextField); - if (title && title !== "<Waiting>") - return title.Data; - return ""; - }} SetValue={(value: string) => { - this.props.document.SetData(KeyStore.Title, value, TextField); - return true; - }} /> - <div className="delete-button" onClick={this.delete}><FontAwesomeIcon icon="trash-alt" size="xs" /></div> - </div > + let reference = React.createRef<HTMLDivElement>(); + let onItemDown = setupDrag(reference, () => this.props.document, (containingCollection: CollectionView) => this.props.deleteDoc(this.props.document)); + let editableView = (titleString: string) => + (<EditableView + display={"inline"} + contents={titleString} + height={36} + GetValue={() => this.props.document.Title} + SetValue={(value: string) => { + this.props.document.SetText(KeyStore.Title, value); + return true; + }} + />); + return ( + <div key={this.props.document.Id} className="docContainer" ref={reference} onPointerDown={onItemDown}> + {editableView(this.props.document.Title)} + <div className="delete-button" onClick={this.delete}><FontAwesomeIcon icon="trash-alt" size="xs" /></div> + </div >) } render() { - var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField); - - let reference = React.createRef<HTMLDivElement>(); - let onItemDown = setupDrag(reference, () => this.props.document); - let titleElement = this.renderTitle(); + let bulletType = BulletType.List; + let childElements: JSX.Element | undefined = undefined; - // check if this document is a collection - if (children && children !== FieldWaiting) { - let subView; - - // if uncollapsed, then add the children elements - if (!this.collapsed) { - // render all children elements - let childrenElement = (children.Data.map(value => - <TreeView document={value} deleteDoc={this.remove} />) - ) - subView = - <li className="collection-child" key={this.props.document.Id} > - {this.renderBullet(BulletType.Collapsible)} - {titleElement} - <ul key={this.props.document.Id}> - {childrenElement} - </ul> - </li> - } else { - subView = <li className="collection-child" key={this.props.document.Id}> - {this.renderBullet(BulletType.Collapsed)} - {titleElement} - </li> + var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField); + if (children && children !== FieldWaiting) { // add children for a collection + if (!this._collapsed) { + bulletType = BulletType.Collapsible; + childElements = <ul> + {children.Data.map(value => <TreeView key={value.Id} document={value} deleteDoc={this.remove} />)} + </ul> } - - return <div className="treeViewItem-container" onPointerDown={onItemDown} ref={reference}> - {subView} - </div> - } - - // otherwise this is a normal leaf node - else { - return <li key={this.props.document.Id}> - {this.renderBullet(BulletType.List)} - {titleElement} - </li>; + else bulletType = BulletType.Collapsed; } + return <div className="treeViewItem-container" > + <li className="collection-child"> + {this.renderBullet(bulletType)} + {this.renderTitle()} + {childElements ? childElements : (null)} + </li> + </div> } } - @observer export class CollectionTreeView extends CollectionViewBase { @@ -153,12 +118,6 @@ export class CollectionTreeView extends CollectionViewBase { } render() { - let titleStr = ""; - let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField); - if (title && title !== FieldWaiting) { - titleStr = title.Data; - } - var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField); let childrenElement = !children || children === FieldWaiting ? (null) : (children.Data.map(value => @@ -168,12 +127,13 @@ export class CollectionTreeView extends CollectionViewBase { return ( <div id="body" className="collectionTreeView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}> <div className="coll-title"> - <EditableView contents={titleStr} + <EditableView + contents={this.props.Document.Title} display={"inline"} - height={72} GetValue={() => { - return this.props.Document.Title; - }} SetValue={(value: string) => { - this.props.Document.SetData(KeyStore.Title, value, TextField); + height={72} + GetValue={() => this.props.Document.Title} + SetValue={(value: string) => { + this.props.Document.SetText(KeyStore.Title, value); return true; }} /> </div> diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index d4afc69cf..7e1d31018 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -12,7 +12,7 @@ import { CollectionDockingView } from "./CollectionDockingView"; import { CollectionSchemaView } from "./CollectionSchemaView"; import { CollectionViewProps } from "./CollectionViewBase"; import { CollectionTreeView } from "./CollectionTreeView"; -import { Field, FieldId } from "../../../fields/Field"; +import { Field, FieldId, FieldWaiting } from "../../../fields/Field"; import { Main } from "../Main"; export enum CollectionViewType { @@ -86,7 +86,7 @@ export class CollectionView extends React.Component<CollectionViewProps> { get collectionViewType(): CollectionViewType { let Document = this.props.Document; let viewField = Document.GetT(KeyStore.ViewType, NumberField); - if (viewField === "<Waiting>") { + if (viewField === FieldWaiting) { return CollectionViewType.Invalid; } else if (viewField) { return viewField.Data; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 9e34b2b60..fec451b09 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1,7 +1,7 @@ import { action, computed, IReactionDisposer, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; -import { Field, Opt } from "../../../fields/Field"; +import { Field, Opt, FieldWaiting } from "../../../fields/Field"; import { Key } from "../../../fields/Key"; import { KeyStore } from "../../../fields/KeyStore"; import { ListField } from "../../../fields/ListField"; @@ -315,7 +315,7 @@ export class DocumentView extends React.Component<DocumentViewProps> { return (null); } let lkeys = this.props.Document.GetT(KeyStore.LayoutKeys, ListField); - if (!lkeys || lkeys === "<Waiting>") { + if (!lkeys || lkeys === FieldWaiting) { return <p>Error loading layout keys</p>; } var scaling = this.props.ContentScaling(); diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 2db0cc4e2..60d1f7214 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -50,7 +50,7 @@ export class ImageBox extends React.Component<FieldViewProps> { onPointerDown = (e: React.PointerEvent): void => { if (Date.now() - this._lastTap < 300) { - if (e.buttons === 1 && this.props.isSelected()) { + if (e.buttons === 1) { e.stopPropagation(); this._downX = e.clientX; this._downY = e.clientY; @@ -72,7 +72,7 @@ export class ImageBox extends React.Component<FieldViewProps> { lightbox = (path: string) => { const images = [path]; - if (this._isOpen && this.props.isSelected()) { + if (this._isOpen) { return (<Lightbox mainSrc={images[this._photoIndex]} nextSrc={images[(this._photoIndex + 1) % images.length]} |