diff options
author | madelinegr <laura_wilson@brown.edu> | 2019-02-25 19:17:23 -0500 |
---|---|---|
committer | madelinegr <laura_wilson@brown.edu> | 2019-02-25 19:17:23 -0500 |
commit | 646f5db87cf116533915814a790cb77565ceb515 (patch) | |
tree | 10712637cd3d3423fa66b427604839bc5d8bcd0d /src | |
parent | 292ff1a8d75f8b15f9388d2c577e09a13836d5dc (diff) |
added in editableview stuff and minor css styling
Diffstat (limited to 'src')
-rw-r--r-- | src/client/views/EditableView.tsx | 7 | ||||
-rw-r--r-- | src/client/views/collections/CollectionTreeView.scss | 5 | ||||
-rw-r--r-- | src/client/views/collections/CollectionTreeView.tsx | 25 |
3 files changed, 23 insertions, 14 deletions
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 8d9a47eaa..88ef67afa 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -27,12 +27,11 @@ 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={{ width: "100%" }}></input> + style={{ display: "inline" }}></input> } else { return ( - <div className="editableView-container-editing" style={{ display: "flex", height: "100%", maxHeight: `${this.props.height}` }} - onClick={action(() => this.editing = true)} - > + <div className="editableView-container-editing" style={{ display: "inline", height: "100%", maxHeight: `${this.props.height}` }} + onClick={action(() => this.editing = true)}> {this.props.contents} </div> ) diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 675fc6c53..054e605a0 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -1,3 +1,8 @@ +#body { + padding: 20px; + background: #bbbbbb; +} + ul { list-style: none; } diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 52e853bf7..2bcd8e8ef 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -7,6 +7,7 @@ import React = require("react") import { TextField } from "../../../fields/TextField"; import { observable, action } from "mobx"; import "./CollectionTreeView.scss"; +import { EditableView } from "../EditableView"; export interface TreeViewProps { document: Document; @@ -37,6 +38,7 @@ class TreeView extends React.Component<TreeViewProps> { // otherwise, check if it's a collection. else if (children && children !== "<Waiting>") { // if it's not collapsed, then render the full TreeView. + // TODO once clicking the title no longer expands the thing also make collection titles editable if (!this.collapsed) { return ( <li className="uncollapsed" key={document.Id} onClick={action(() => this.collapsed = true)} > @@ -55,7 +57,18 @@ class TreeView extends React.Component<TreeViewProps> { // finally, if it's a normal document, then render it as such. else { - return <li key={document.Id}>{title.Data}</li>; + return <li key={document.Id}> + <EditableView contents={title.Data} + height={36} GetValue={() => { + let title = document.GetT<TextField>(KeyStore.Title, TextField); + if (title && title !== "<Waiting>") + return title.Data; + return ""; + }} SetValue={(value: string) => { + document.SetData(KeyStore.Title, value, TextField); + return true; + }}></EditableView> + </li>; } } @@ -66,14 +79,6 @@ class TreeView extends React.Component<TreeViewProps> { return (<div> {children.Data.map(value => this.renderChild(value))} </div>) - // 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 <div></div>; } @@ -91,7 +96,7 @@ export class CollectionTreeView extends CollectionViewBase { titleStr = title.Data; } return ( - <div> + <div id="body"> <h3>{titleStr}</h3> <ul className="no-indent"> <TreeView |