aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/EditableView.tsx7
-rw-r--r--src/client/views/collections/CollectionTreeView.scss25
-rw-r--r--src/client/views/collections/CollectionTreeView.tsx98
3 files changed, 95 insertions, 35 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 c488e2894..75feebbbe 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;
}
@@ -10,25 +15,13 @@ 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;
}
.collectionTreeView-dropTarget {
border-style: solid;
box-sizing: border-box;
- height:100%;
+ height: 100%;
} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 55c804337..25885cf49 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";
import { setupDrag } from "../../util/DragManager";
import { FieldWaiting } from "../../../fields/Field";
import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
@@ -15,6 +16,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.
@@ -24,31 +31,81 @@ class TreeView extends React.Component<TreeViewProps> {
@observable
collapsed: boolean = false;
+
+ // TODO this will eventually come with functions for what to attach to them
+ renderBullet(type: BulletType) {
+ let onClicked = action(() => this.collapsed = !this.collapsed);
+
+ switch (type) {
+ case BulletType.Collapsed:
+ return <div className="bullet" onClick={onClicked}>&#9654;</div>
+ case BulletType.Collapsible:
+ return <div className="bullet" onClick={onClicked}>&#9660;</div>
+ case BulletType.List:
+ return <div className="bullet">&mdash;</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 childDocument The document to render.
*/
renderChild(childDocument: Document) {
let reference = React.createRef<HTMLDivElement>();
-
var children = childDocument.GetT<ListField<Document>>(KeyStore.Data, ListField);
let title = childDocument.GetT<TextField>(KeyStore.Title, TextField);
let onItemDown = setupDrag(reference, () => childDocument);
- if (title && title != FieldWaiting) {
- let subView = !children || this.collapsed || children === FieldWaiting ? (null) :
- <ul>
- <TreeView document={childDocument} />
- </ul>;
- return <div className="treeViewItem-container" onPointerDown={onItemDown} ref={reference}>
- <li className={!children ? "leaf" : this.collapsed ? "collapsed" : "uncollapsed"}
- onClick={action(() => this.collapsed = !this.collapsed)} >
- {title.Data}
- {subView}
+ // if the title hasn't loaded, immediately return the div
+ if (!title || title === "<Waiting>") {
+ return <div key={childDocument.Id}></div>;
+ }
+
+ // set up the title element, which will be rendered the same way for everyone
+ let titleElement = <EditableView contents={title.Data}
+ height={36} GetValue={() => {
+ let title = childDocument.GetT<TextField>(KeyStore.Title, TextField);
+ if (title && title !== "<Waiting>")
+ return title.Data;
+ return "";
+ }} SetValue={(value: string) => {
+ childDocument.SetData(KeyStore.Title, value, TextField);
+ return true;
+ }} />
+
+ // otherwise, check if it's a collection.
+ if (children && children !== "<Waiting>") {
+ // if it's not collapsed, then render the full TreeView.
+ var subView = null;
+
+ if (!this.collapsed) {
+ subView =
+ <li key={childDocument.Id} >
+ {this.renderBullet(BulletType.Collapsible)}
+ {titleElement}
+ <ul key={childDocument.Id}>
+ <TreeView document={childDocument} />
+ </ul>
+ </li>
+ } else {
+ subView = <li key={childDocument.Id}>
+ {this.renderBullet(BulletType.Collapsed)}
+ {titleElement}
</li>
+ }
+
+ return <div className="treeViewItem-container" onPointerDown={onItemDown} ref={reference}>
+ {subView}
</div>
}
- return (null);
+
+ // finally, if it's a normal document, then render it as such.
+ else {
+ return <li key={childDocument.Id}>
+ {this.renderBullet(BulletType.List)}
+ {titleElement}
+ </li>;
+ }
}
render() {
@@ -73,14 +130,25 @@ export class CollectionTreeView extends CollectionViewBase {
titleStr = title.Data;
}
return (
- <div className="collectionTreeView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
- <h3>{titleStr}</h3>
+ <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}
+ 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;
+ }} />
+ </h3>
<ul className="no-indent">
<TreeView
document={this.props.Document}
/>
</ul>
- </div>
+ </div >
);
}
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 05:07:45 +0000