diff options
author | Sam Wilkins <abdullah_ahmed@brown.edu> | 2019-03-09 23:00:41 -0500 |
---|---|---|
committer | Sam Wilkins <abdullah_ahmed@brown.edu> | 2019-03-09 23:00:41 -0500 |
commit | 81c0a8373fd5cb051531762243e200f11f8c7297 (patch) | |
tree | 5436511d43ec2d77133160ad193155ab1ae4ac8e | |
parent | f9f0fd90791562c295f8d9b237596cbabb086b79 (diff) |
editable workspace titles now supported, added 'display' prop to EditableView
4 files changed, 33 insertions, 15 deletions
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 84b1b91c3..55a49863d 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -20,6 +20,7 @@ export interface EditableProps { */ contents: any; height: number + display: string; } /** @@ -46,10 +47,10 @@ export class EditableView extends React.Component<EditableProps> { render() { if (this.editing) { return <input defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus onBlur={action(() => this.editing = false)} - style={{ display: "inline" }}></input> + style={{ display: this.props.display }}></input> } else { return ( - <div className="editableView-container-editing" style={{ display: "inline", height: "100%", maxHeight: `${this.props.height}` }} + <div className="editableView-container-editing" style={{ display: this.props.display, height: "100%", maxHeight: `${this.props.height}` }} onClick={action(() => this.editing = true)}> {this.props.contents} </div> diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 49f95c014..2868e1322 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -50,7 +50,9 @@ export class CollectionSchemaView extends CollectionViewBase { let onItemDown = setupDrag(reference, () => props.doc); return ( <div onPointerDown={onItemDown} key={props.doc.Id} ref={reference}> - <EditableView contents={contents} + <EditableView + display={"inline"} + contents={contents} height={36} GetValue={() => { let field = props.doc.Get(props.fieldKey); if (field && field instanceof Field) { @@ -59,7 +61,7 @@ export class CollectionSchemaView extends CollectionViewBase { return field || ""; }} SetValue={(value: string) => { - let script = CompileScript(value, undefined, true); + let script = CompileScript(value); if (!script.compiled) { return false; } diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 8b06d9ac4..9c31bdae2 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -69,7 +69,9 @@ class TreeView extends React.Component<TreeViewProps> { return <div key={this.props.document.Id}></div>; } - return <div className="docContainer"> <EditableView contents={title.Data} + 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>") @@ -159,6 +161,7 @@ export class CollectionTreeView extends CollectionViewBase { <div id="body" className="collectionTreeView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}> <h3> <EditableView contents={titleStr} + display={"inline"} height={72} GetValue={() => { return this.props.Document.Title; }} SetValue={(value: string) => { diff --git a/src/server/authentication/controllers/WorkspacesMenu.tsx b/src/server/authentication/controllers/WorkspacesMenu.tsx index 70c37774c..ffef2e11c 100644 --- a/src/server/authentication/controllers/WorkspacesMenu.tsx +++ b/src/server/authentication/controllers/WorkspacesMenu.tsx @@ -7,6 +7,8 @@ import './WorkspacesMenu.css' import { Document } from '../../../fields/Document'; import { Server } from '../../../client/Server'; import { Field } from '../../../fields/Field'; +import { EditableView } from '../../../client/views/EditableView'; +import { KeyStore } from '../../../fields/KeyStore'; export interface WorkspaceMenuProps { active: Document; @@ -67,19 +69,29 @@ export class WorkspacesMenu extends React.Component<WorkspaceMenuProps> { }} onClick={this.addNewWorkspace} /> - {this.props.allWorkspaces.map(s => - <li className={"ids"} + {this.props.allWorkspaces.map((s, i) => + <div key={s.Id} - style={{ - listStyleType: "none", - color: s.Id === this.props.active.Id ? "darkblue" : "black", - cursor: "grab" - }} - onClick={() => { + onContextMenu={(e) => { + e.preventDefault(); this.props.open(s); - console.log(this.props.allWorkspaces.length); }} - >{s.Title}</li> + style={{ + marginTop: 10 + }} + > + <span>{i + 1} - </span> + <EditableView + display={"inline"} + GetValue={() => { return s.Title }} + SetValue={(title: string): boolean => { + s.SetText(KeyStore.Title, title); + return true; + }} + contents={s.Title} + height={20} + /> + </div> )} </div> ); |