From 646f5db87cf116533915814a790cb77565ceb515 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Mon, 25 Feb 2019 19:17:23 -0500 Subject: added in editableview stuff and minor css styling --- src/client/views/collections/CollectionTreeView.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'src/client/views/collections/CollectionTreeView.scss') 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; } -- cgit v1.2.3-70-g09d2 From 96895c70498957466db704dae01acc07d5ae677c Mon Sep 17 00:00:00 2001 From: madelinegr Date: Mon, 25 Feb 2019 19:57:17 -0500 Subject: refactored out bullets and can retitle main collection, but still need to retitle nested collections --- .../views/collections/CollectionTreeView.scss | 18 ++-------- .../views/collections/CollectionTreeView.tsx | 38 +++++++++++++++++++--- 2 files changed, 37 insertions(+), 19 deletions(-) (limited to 'src/client/views/collections/CollectionTreeView.scss') 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 { @observable collapsed: boolean = false; + renderBullet(type: BulletType) { + switch (type) { + case BulletType.Collapsed: + return
▶
+ case BulletType.Collapsible: + return
▼
+ case BulletType.List: + return
—
+ } + } + /** * 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 { // otherwise, check if it's a collection. else if (children && children !== "") { // 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 ( -
  • this.collapsed = true)} > +
  • this.collapsed = true)} > + {this.renderBullet(BulletType.Collapsible)} {title.Data}
      { ); } else { - return
    • this.collapsed = false)}>{title.Data}
      • + return
    • this.collapsed = false)}> + {this.renderBullet(BulletType.Collapsed)} + {title.Data} +
      • } } // finally, if it's a normal document, then render it as such. else { return
    • + {this.renderBullet(BulletType.List)} { let title = document.GetT(KeyStore.Title, TextField); @@ -97,7 +118,16 @@ export class CollectionTreeView extends CollectionViewBase { } return (
      -

      {titleStr}

      +

      { + let title = this.props.Document.GetT(KeyStore.Title, TextField); + if (title && title !== "") + return title.Data; + return ""; + }} SetValue={(value: string) => { + this.props.Document.SetData(KeyStore.Title, value, TextField); + return true; + }}>

        Date: Tue, 26 Feb 2019 18:59:56 -0500 Subject: set up infrastructure for deletedoc --- src/client/views/collections/CollectionTreeView.scss | 10 ++++++++++ src/client/views/collections/CollectionTreeView.tsx | 13 ++++++++++--- 2 files changed, 20 insertions(+), 3 deletions(-) (limited to 'src/client/views/collections/CollectionTreeView.scss') diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index 75feebbbe..f8d580a7b 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -24,4 +24,14 @@ li { border-style: solid; box-sizing: border-box; height: 100%; +} + +.docContainer { + display: inline-table; +} + +.delete-button { + color: #999999; + float: right; + margin-left: 1em; } \ No newline at end of file diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 924312d06..b075737d2 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -14,6 +14,7 @@ import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; export interface TreeViewProps { document: Document; + deleteDoc: (doc: Document) => void; } export enum BulletType { @@ -31,6 +32,10 @@ class TreeView extends React.Component { @observable collapsed: boolean = false; + delete() { + this.props.deleteDoc; + } + renderBullet(type: BulletType) { let onClicked = action(() => this.collapsed = !this.collapsed); @@ -55,7 +60,7 @@ class TreeView extends React.Component { return
        ; } - return { let title = this.props.document.GetT(KeyStore.Title, TextField); if (title && title !== "") @@ -65,6 +70,8 @@ class TreeView extends React.Component { this.props.document.SetData(KeyStore.Title, value, TextField); return true; }} /> +
        x
        +
      } render() { @@ -80,7 +87,7 @@ class TreeView extends React.Component { // render all children elements let childrenElement = (children.Data.map(value => - ) + console.log("test")} />) ) // if uncollapsed, then add the children elements @@ -129,7 +136,7 @@ export class CollectionTreeView extends CollectionViewBase { var children = this.props.Document.GetT>(KeyStore.Data, ListField); let childrenElement = !children || children === FieldWaiting ? (null) : (children.Data.map(value => - ) + console.log("test")} />) ) return ( -- cgit v1.2.3-70-g09d2