diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/CollectionTreeView.scss | 18 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionTreeView.tsx | 38 |
2 files changed, 37 insertions, 19 deletions
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 054e605a0..452c56f54 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -15,19 +15,7 @@ li { padding-left: 0; } -/* ALL THESE SPACINGS ARE SUPER HACKY RIGHT NOW HANNAH PLS HELP */ - -li:before { - content: '\2014'; - margin-right: 0.7em; -} - -.collapsed:before { - content: '\25b6'; - margin-right: 0.65em; -} - -.uncollapsed:before { - content: '\25bc'; - margin-right: 0.5em; +.bullet { + width: 1.5em; + display: inline-block; }
\ No newline at end of file diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 2bcd8e8ef..3dbbb045a 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -13,6 +13,12 @@ export interface TreeViewProps { document: Document; } +export enum BulletType { + Collapsed, + Collapsible, + List +} + @observer /** * Component that takes in a document prop and a boolean whether it's collapsed or not. @@ -22,6 +28,17 @@ class TreeView extends React.Component<TreeViewProps> { @observable collapsed: boolean = false; + renderBullet(type: BulletType) { + switch (type) { + case BulletType.Collapsed: + return <div className="bullet">▶</div> + case BulletType.Collapsible: + return <div className="bullet">▼</div> + case BulletType.List: + return <div className="bullet">—</div> + } + } + /** * 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. @@ -38,10 +55,10 @@ 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)} > + <li key={document.Id} onClick={action(() => this.collapsed = true)} > + {this.renderBullet(BulletType.Collapsible)} {title.Data} <ul key={document.Id}> <TreeView @@ -51,13 +68,17 @@ class TreeView extends React.Component<TreeViewProps> { </li> ); } else { - return <li className="collapsed" key={document.Id} onClick={action(() => this.collapsed = false)}>{title.Data}</li> + return <li key={document.Id} onClick={action(() => this.collapsed = false)}> + {this.renderBullet(BulletType.Collapsed)} + {title.Data} + </li> } } // finally, if it's a normal document, then render it as such. else { return <li key={document.Id}> + {this.renderBullet(BulletType.List)} <EditableView contents={title.Data} height={36} GetValue={() => { let title = document.GetT<TextField>(KeyStore.Title, TextField); @@ -97,7 +118,16 @@ export class CollectionTreeView extends CollectionViewBase { } return ( <div id="body"> - <h3>{titleStr}</h3> + <h3><EditableView contents={titleStr} + height={72} 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; + }}></EditableView></h3> <ul className="no-indent"> <TreeView document={this.props.Document} |