diff --git a/static/css/markdown.css b/static/css/markdown.css
index 84eb0b2..8b4c97e 100644
--- a/static/css/markdown.css
+++ b/static/css/markdown.css
@@ -19,7 +19,6 @@
h2 {
font-size: 1.25em;
- margin-top: 32px;
margin-bottom: 0px;
color: var(--color1);
}
@@ -30,10 +29,6 @@
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 71737dd..477b05a 100644
--- a/static/css/notes2.css
+++ b/static/css/notes2.css
@@ -52,22 +52,18 @@ html {
#tree {
grid-area: tree;
display: grid;
- background-color: #fafafa;
- color: #444;
+ padding: 16px 0px 16px 16px;
+ color: #ddd;
z-index: 100;
-
- border-right: 1px solid #ddd;
+ border-left: 2px solid #333;
n2-tree {
- /*border: 2px solid #f8f8f8;*/
- padding: 16px 48px 16px 24px;
+ border: 2px solid #333;
}
&:focus-within {
n2-tree {
- /*
border: 2px solid #fe5f55;
- */
}
}
@@ -99,20 +95,18 @@ html {
.node {
display: grid;
- grid-template-columns: 40px min-content;
+ grid-template-columns: 24px 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: auto;
- height: 18px;
+ width: 16px;
+ height: 16px;
}
}
@@ -134,8 +128,8 @@ html {
.children {
padding-left: 24px;
- margin-left: 18px;
- border-left: 1px solid #ddd;
+ margin-left: 8px;
+ border-left: 1px solid #444;
grid-column: 1 / -1;
&.collapsed {
@@ -147,12 +141,9 @@ 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 d93f4ca..8bd376f 100644
--- a/static/images/collapsed.svg
+++ b/static/images/collapsed.svg
@@ -2,49 +2,73 @@
+ transform="translate(-42.756321,-24.613384)">
diff --git a/static/images/expanded.svg b/static/images/expanded.svg
index 017e8a4..e1a6f66 100644
--- a/static/images/expanded.svg
+++ b/static/images/expanded.svg
@@ -2,43 +2,64 @@
+ transform="translate(-42.756321,-24.613384)">
diff --git a/static/images/leaf.svg b/static/images/leaf.svg
index 306a2a0..ed44541 100644
--- a/static/images/leaf.svg
+++ b/static/images/leaf.svg
@@ -2,51 +2,56 @@
+ transform="translate(-42.756321,-24.613384)">
diff --git a/static/js/node.mjs b/static/js/node.mjs
index acebbb7..5f002a8 100644
--- a/static/js/node.mjs
+++ b/static/js/node.mjs
@@ -48,7 +48,6 @@ 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', () => {
@@ -59,18 +58,6 @@ 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()))
@@ -163,6 +150,21 @@ 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() {// {{{
@@ -233,16 +235,8 @@ export class Node {
setContent(new_content) {//{{{
this._content = new_content
this._modified = true
- _mbus.dispatch('NODE_MODIFIED', { node: this })
+ _mbus.dispatch('NODE_MODIFIED')
}//}}}
- 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 3732fc5..1da5dee 100644
--- a/static/js/tree.mjs
+++ b/static/js/tree.mjs
@@ -31,17 +31,6 @@ 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() {// {{{
@@ -57,14 +46,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())