From 068e21c962a328e8a0eaa150e82f4e055341cd70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Sat, 23 May 2026 22:55:16 +0200 Subject: [PATCH 1/2] Rename nodes. --- static/js/node.mjs | 38 ++++++++++++++++++++++---------------- static/js/tree.mjs | 15 +++++++++++++-- 2 files changed, 35 insertions(+), 18 deletions(-) diff --git a/static/js/node.mjs b/static/js/node.mjs index 5f002a8..acebbb7 100644 --- a/static/js/node.mjs +++ b/static/js/node.mjs @@ -48,6 +48,7 @@ export class N2NodeUI extends CustomHTMLElement { _mbus.subscribe('NODE_MODIFIED', () => { document.querySelector('#crumbs .crumbs')?.classList.add('node-modified') this.elIconSave.src = `/images/${_VERSION}/icon_save.svg` + this.render() }) _mbus.subscribe('NODE_UNMODIFIED', () => { @@ -58,6 +59,18 @@ export class N2NodeUI extends CustomHTMLElement { _mbus.subscribe('MARKDOWN_TOGGLE', () => this.showMarkdown(!this.showMarkdown())) _mbus.subscribe('MARKDOWN_EDIT', ({ detail }) => this.editMarkdown(detail.data)) + this.elName.addEventListener('click', () => { + const name = prompt('Change title', this.node.data.Name) + if (name === null) + return + + try { + this.node.setName(name) + } catch (err) { + console.error(err) + alert(err) + } + }) this.elNodeContent.addEventListener('input', event => this.contentChanged(event)) this.elIconMarkdown.addEventListener('click', () => this.showMarkdown(!this.showMarkdown())) @@ -150,21 +163,6 @@ export class Node { this._parent = null this.reset() - - /* - this.RenderMarkdown = signal(nodeData.RenderMarkdown) - this.Markdown = false - this.ShowChecklist = signal(false) - this._content = nodeData.Content - this.Crumbs = [] - this.Files = [] - this._decrypted = false - this._expanded = false // start value for the TreeNode component, - this.ChecklistGroups = {} - this.ScheduleEvents = signal([]) - // it doesn't control it afterwards. - // Used to expand the crumbs upon site loading. - */ }//}}} reset() {// {{{ @@ -235,8 +233,16 @@ export class Node { setContent(new_content) {//{{{ this._content = new_content this._modified = true - _mbus.dispatch('NODE_MODIFIED') + _mbus.dispatch('NODE_MODIFIED', { node: this }) }//}}} + setName(new_name) {// {{{ + if (new_name.trim() === '') + throw new Error(`The name can't be empty`) + + this.data.Name = new_name + this._modified = true + _mbus.dispatch('NODE_MODIFIED', { node: this }) + }// }}} async save() {//{{{ this.data.Content = this._content this.data.Updated = new Date().toISOString() diff --git a/static/js/tree.mjs b/static/js/tree.mjs index 1da5dee..3732fc5 100644 --- a/static/js/tree.mjs +++ b/static/js/tree.mjs @@ -31,6 +31,17 @@ export class N2Tree extends CustomHTMLElement { this.elSync.addEventListener('click', () => _sync.run()) this.elLogo.addEventListener('click', () => _app.goToNode(ROOT_NODE, false, false)) + _mbus.subscribe('NODE_MODIFIED', ({ detail })=>{ + const node = detail.data.node + const treenode = this.treeNodeComponents[node.get('UUID')] + + if (!treenode) + return + + treenode.node = node + treenode.render(true) + }) + this.populateFirstLevel() }// }}} render() {// {{{ @@ -46,14 +57,14 @@ export class N2Tree extends CustomHTMLElement { this.rendered = true return this }// }}} - reset() { + reset() {// {{{ console.log('tree reset') this.treeNodeComponents = {} this.treeTrunk = [] this.rendered = false this.elTreenodes.replaceChildren() this.populateFirstLevel() - } + }// }}} populateFirstLevel() {//{{{ nodeStore.get(ROOT_NODE) .then(node => node.fetchChildren()) From 21d93f0188b1d86a891df1222133bafdcef518ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Magnus=20=C3=85hall?= Date: Sat, 23 May 2026 22:55:29 +0200 Subject: [PATCH 2/2] Design change. --- static/css/markdown.css | 5 ++ static/css/notes2.css | 31 +++++++----- static/images/collapsed.svg | 94 ++++++++++++++----------------------- static/images/expanded.svg | 77 +++++++++++------------------- static/images/leaf.svg | 77 ++++++++++++++---------------- 5 files changed, 124 insertions(+), 160 deletions(-) diff --git a/static/css/markdown.css b/static/css/markdown.css index 8b4c97e..84eb0b2 100644 --- a/static/css/markdown.css +++ b/static/css/markdown.css @@ -19,6 +19,7 @@ h2 { font-size: 1.25em; + margin-top: 32px; margin-bottom: 0px; color: var(--color1); } @@ -29,6 +30,10 @@ color: var(--color1); } + p { + line-height: 150%; + } + img { max-width: var(--thumbnail-width); max-height: var(--thumbnail-height); diff --git a/static/css/notes2.css b/static/css/notes2.css index 477b05a..71737dd 100644 --- a/static/css/notes2.css +++ b/static/css/notes2.css @@ -52,18 +52,22 @@ html { #tree { grid-area: tree; display: grid; - padding: 16px 0px 16px 16px; - color: #ddd; + background-color: #fafafa; + color: #444; z-index: 100; - border-left: 2px solid #333; + + border-right: 1px solid #ddd; n2-tree { - border: 2px solid #333; + /*border: 2px solid #f8f8f8;*/ + padding: 16px 48px 16px 24px; } &:focus-within { n2-tree { + /* border: 2px solid #fe5f55; + */ } } @@ -95,18 +99,20 @@ html { .node { display: grid; - grid-template-columns: 24px min-content; + grid-template-columns: 40px min-content; grid-template-rows: min-content 1fr; margin-top: 12px; - + align-items: center; .expand-toggle { user-select: none; + cursor: pointer; + justify-self: center; img { - width: 16px; - height: 16px; + width: auto; + height: 18px; } } @@ -128,8 +134,8 @@ html { .children { padding-left: 24px; - margin-left: 8px; - border-left: 1px solid #444; + margin-left: 18px; + border-left: 1px solid #ddd; grid-column: 1 / -1; &.collapsed { @@ -141,9 +147,12 @@ html { #tree-nodes { padding: 16px 32px; - background-color: #333; + /* border-radius: 8px; +*/ + /* box-shadow: 5px 5px 10px -5px rgba(0, 0, 0, 0.75); + */ } #crumbs { diff --git a/static/images/collapsed.svg b/static/images/collapsed.svg index 8bd376f..d93f4ca 100644 --- a/static/images/collapsed.svg +++ b/static/images/collapsed.svg @@ -2,73 +2,49 @@ + image/svg+xml + + + transform="translate(-102.39375,-146.31458)"> + folder-outline + + + diff --git a/static/images/expanded.svg b/static/images/expanded.svg index e1a6f66..017e8a4 100644 --- a/static/images/expanded.svg +++ b/static/images/expanded.svg @@ -2,64 +2,43 @@ image/svg+xml + transform="translate(-101.33542,-147.10833)">folder-openfolder-open-outline diff --git a/static/images/leaf.svg b/static/images/leaf.svg index ed44541..306a2a0 100644 --- a/static/images/leaf.svg +++ b/static/images/leaf.svg @@ -2,56 +2,51 @@ image/svg+xml + transform="translate(-107.95,-148.16667)">folder-openfolder-open-outlinenotebook-outlinetext-box-outline