diff --git a/static/css/notes2.css b/static/css/notes2.css index 7c7c224..299b0af 100644 --- a/static/css/notes2.css +++ b/static/css/notes2.css @@ -6,7 +6,6 @@ html { display: grid; grid-template-areas: "tree crumbs" "tree sync" "tree name" "tree content" "tree blank"; grid-template-columns: min-content 1fr; - grid-template-rows: 64px 56px 48px min-content 1fr; } @media only screen and (max-width: 600px) { #notes2 { @@ -78,7 +77,6 @@ html { #crumbs { grid-area: crumbs; display: grid; - align-items: center; justify-items: center; margin: 16px; } @@ -86,14 +84,19 @@ html { grid-area: sync; display: grid; justify-items: center; + justify-self: center; width: 100%; + max-width: 900px; height: 56px; position: relative; } +#sync-progress.hidden { + visibility: hidden; + opacity: 0; + transition: visibility 0s 500ms, opacity 500ms linear; +} #sync-progress progress { - width: 100%; - padding: 0 7px; - max-width: 900px; + width: calc(100% - 16px); height: 16px; border-radius: 4px; } @@ -118,18 +121,11 @@ html { border-radius: 4px; } #sync-progress .count { - width: min-content; - white-space: nowrap; margin-top: 0px; color: #888; position: absolute; top: 22px; } -#sync-progress.hidden { - visibility: hidden; - opacity: 0; - transition: visibility 0s 500ms, opacity 500ms linear; -} .crumbs { display: flex; flex-wrap: wrap; diff --git a/static/js/node.mjs b/static/js/node.mjs index 8648057..4db59a0 100644 --- a/static/js/node.mjs +++ b/static/js/node.mjs @@ -385,7 +385,9 @@ export class Node { if (this._children_fetched) return this.Children + this.Children = await nodeStore.getTreeNodes(this.UUID, this.Level + 1) + this._children_fetched = true // Children are sorted to allow for storing siblings befare and after. @@ -401,9 +403,6 @@ export class Node { this.Children[i]._parent = this } - // Notify the tree that all children are fetched and ready to process. - _notes2.current.tree.fetchChildrenOn(this.UUID) - return this.Children }//}}} hasChildren() {//{{{ diff --git a/static/js/notes2.mjs b/static/js/notes2.mjs index 9eb9503..3155043 100644 --- a/static/js/notes2.mjs +++ b/static/js/notes2.mjs @@ -29,7 +29,10 @@ export class Notes2 extends Component { return html` <${Tree} app=${this} key=${treeKey} startNode=${startNode} /> - <${NodeUI} app=${this} ref=${this.nodeUI} startNode=${startNode} /> + +
+ <${NodeUI} app=${this} ref=${this.nodeUI} startNode=${startNode} /> +
` }//}}} getStartNode() {//{{{ @@ -81,11 +84,6 @@ class Tree extends Component { this.expandedNodes = {} // keyed on UUID this.treeDiv = createRef() - // childrenFetchedCallbacks is keyed on a UUID and each - // item is an array with callbacks called when a UUID has - // had all children fetched. - this.childrenFetchedCallbacks = {} - this.props.app.tree = this this.populateFirstLevel() @@ -115,20 +113,6 @@ class Tree extends Component { this.setSelected(node) }//}}} - fetchChildrenNotify(uuid, fn) {//{{{ - if (this.childrenFetchedCallbacks[uuid] === undefined) - this.childrenFetchedCallbacks[uuid] = [fn] - else - this.childrenFetchedCallbacks[uuid].push(fn) - }//}}} - fetchChildrenOn(uuid) {//{{{ - if (this.childrenFetchedCallbacks[uuid] === undefined) - return - for (const fn of this.childrenFetchedCallbacks[uuid]) - fn(uuid) - delete this.childrenFetchedCallbacks[uuid] - }//}}} - populateFirstLevel(callback = null) {//{{{ nodeStore.get(ROOT_NODE) .then(node => node.fetchChildren()) @@ -161,7 +145,7 @@ class Tree extends Component { this.treeNodeComponents[node.UUID]?.current.forceUpdate() if (!dontExpand) - this.setNodeExpanded(node, true) + this.setNodeExpanded(node.UUID, true) }//}}} isSelected(node) {//{{{ return this.selectedNode?.UUID === node.UUID @@ -171,7 +155,7 @@ class Tree extends Component { const ancestry = await nodeStore.getNodeAncestry(node, []) for (const i in ancestry) { await nodeStore.node(ancestry[i].UUID).fetchChildren() - this.setNodeExpanded(ancestry[i], true) + this.setNodeExpanded(ancestry[i].UUID, true) } // Already a top node, no need to expand anything. @@ -179,29 +163,17 @@ class Tree extends Component { return // Start the chain of by expanding the top node. - this.setNodeExpanded(ancestry[ancestry.length - 1], true) + this.setNodeExpanded(ancestry[ancestry.length - 1].UUID, true) }//}}} getNodeExpanded(UUID) {//{{{ if (this.expandedNodes[UUID] === undefined) this.expandedNodes[UUID] = signal(false) return this.expandedNodes[UUID].value }//}}} - async setNodeExpanded(node, value) {//{{{ - return new Promise((resolve, reject) => { - const work = uuid=>{ - // Creating a default value if it doesn't exist already. - this.getNodeExpanded(uuid) - this.expandedNodes[uuid].value = value - resolve() - } - - if (node.hasFetchedChildren()) { - work(node.UUID) - return - } else { - this.fetchChildrenNotify(node.UUID, uuid=>work(uuid)) - } - }) + setNodeExpanded(UUID, value) {//{{{ + // Creating a default value if it doesn't exist already. + this.getNodeExpanded(UUID) + this.expandedNodes[UUID].value = value }//}}} getParentWithNextSibling(node) {//{{{ let currNode = node @@ -218,33 +190,17 @@ class Tree extends Component { return currNode }//}}} - async recursiveExpand(node, state) {//{{{ - if (state) - await this.setNodeExpanded(node, true) - - for (const child of node.Children) - await this.recursiveExpand(child, state) - - if (!state) - await this.setNodeExpanded(node, false) - }//}}} - async keyHandler(event) {//{{{ let handled = true const n = this.selectedNode const Space = ' ' switch (event.key) { - // Space and enter is toggling expansion. - // Holding shift down does it recursively. + // Space is toggling expansion. case Space: case 'Enter': const expanded = this.getNodeExpanded(n.UUID) - if (event.shiftKey) { - this.recursiveExpand(n, !expanded) - } else { - this.setNodeExpanded(n, !expanded) - } + this.setNodeExpanded(n.UUID, !expanded) break case 'g': @@ -293,7 +249,7 @@ class Tree extends Component { const expanded = this.getNodeExpanded(n.UUID) if (expanded && n.hasChildren()) { - this.setNodeExpanded(n, false) + this.setNodeExpanded(n.UUID, false) return } @@ -320,7 +276,7 @@ class Tree extends Component { const expanded = this.getNodeExpanded(n.UUID) if (!expanded && n.hasChildren()) { - this.setNodeExpanded(n, true) + this.setNodeExpanded(n.UUID, true) return } @@ -452,7 +408,7 @@ class TreeNode extends Component { return html`
-
{ tree.setNodeExpanded(node, !tree.getNodeExpanded(node.UUID)) }}>${expandImg}
+
{ tree.setNodeExpanded(node.UUID, !tree.getNodeExpanded(node.UUID)) }}>${expandImg}
window._notes2.current.goToNode(node.UUID)}>${node.get('Name')}
${children}
` diff --git a/static/less/notes2.less b/static/less/notes2.less index a2c0f81..93b75cd 100644 --- a/static/less/notes2.less +++ b/static/less/notes2.less @@ -19,13 +19,6 @@ html { "tree blank" ; grid-template-columns: min-content 1fr; - grid-template-rows: - 64px - 56px - 48px - min-content - 1fr; - @media only screen and (max-width: 600px) { grid-template-areas: @@ -53,10 +46,6 @@ html { color: #ddd; z-index: 100; // Over crumbs shadow - &:focus { - //background-color: #f0f; - } - #logo { display: grid; position: relative; @@ -125,7 +114,6 @@ html { #crumbs { grid-area: crumbs; display: grid; - align-items: center; justify-items: center; margin: 16px; } @@ -134,15 +122,20 @@ html { grid-area: sync; display: grid; justify-items: center; - + justify-self: center; width: 100%; + max-width: 900px; height: 56px; position: relative; + &.hidden { + visibility: hidden; + opacity: 0; + transition: visibility 0s 500ms, opacity 500ms linear; + } + progress { - width: 100%; - padding: 0 7px; - max-width: 900px; + width: calc(100% - 16px); height: 16px; border-radius: 4px; } @@ -173,20 +166,11 @@ html { } .count { - width: min-content; - white-space: nowrap; margin-top: 0px; color: #888; position: absolute; top: 22px; } - - &.hidden { - visibility: hidden; - opacity: 0; - transition: visibility 0s 500ms, opacity 500ms linear; - } - } .crumbs {