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 @@
+ 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 @@
+ 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 @@
+ transform="translate(-107.95,-148.16667)">folder-openfolder-open-outlinenotebook-outlinetext-box-outline
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())