magnus/Notes
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases 4 Packages Wiki Activity

Added UI elements for toggling checklist

Browse source
This commit is contained in:
Magnus Åhall 2024-01-13 10:46:52 +01:00
parent 44f5d92815
commit 08f2344ef9
6 changed files with 193 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

6
static/js/checklist.mjs
View file

@ -104,7 +104,7 @@ export class ChecklistItem {
export class Checklist extends Component {
constructor() {//{{{
super()
this.edit = signal(true)
this.edit = signal(false)
this.dragItemSource = null
this.dragItemTarget = null
this.groupElements = {}
@ -113,9 +113,9 @@ export class Checklist extends Component {
}
window._checklist = this
}//}}}
render({ groups }, { confirmDeletion }) {//{{{
render({ ui, groups }, { confirmDeletion }) {//{{{
this.groupElements = {}
if (groups.length == 0)
if (groups.length == 0 && !ui.node.value.ShowChecklist.value)
return
if (typeof groups.sort != 'function')

32
static/js/node.mjs
View file

@ -72,7 +72,7 @@ export class NodeUI extends Component {
${node.Name} ${padlock}
</div>
<${NodeContent} key=${node.ID} node=${node} ref=${this.nodeContent} />
<${Checklist} groups=${node.ChecklistGroups} />
<${Checklist} ui=${this} groups=${node.ChecklistGroups} />
<${NodeFiles} node=${this.node.value} />
`
}
@ -99,16 +99,20 @@ export class NodeUI extends Component {
break
}
let menu = ''
if (this.menu.value)
menu = html`<${Menu} nodeui=${this} />`
let menu = ()=> (this.menu.value ? html`<${Menu} nodeui=${this} />` : null)
let checklist = ()=>
html`
<div class="checklist" onclick=${evt => { evt.stopPropagation(); this.toggleChecklist() }}>
<img src="/images/${window._VERSION}/${this.showChecklist() ? 'checklist-on.svg' : 'checklist-off.svg'}" />
</div>`
return html`
${menu}
<${menu} />
<header class="${modified}" onclick=${() => this.saveNode()}>
<div class="tree"><img src="/images/${window._VERSION}/tree.svg" onclick=${() => document.getElementById('app').classList.toggle('toggle-tree')} /></div>
<div class="name">Notes</div>
<div class="markdown" onclick=${evt => { evt.stopPropagation(); this.toggleMarkdown() }}><img src="/images/${window._VERSION}/${node.RenderMarkdown.value ? 'markdown.svg' : 'markdown-hollow.svg'}" /></div>
<div class="markdown" onclick=${evt => { evt.stopPropagation(); this.toggleMarkdown() }}><img src="/images/${window._VERSION}/${node.RenderMarkdown.value ? 'markdown.svg' : 'markdown-hollow.svg'}" /></div>
<${checklist} />
<div class="search" onclick=${evt => { evt.stopPropagation(); this.showPage('search') }}><img src="/images/${window._VERSION}/search.svg" /></div>
<div class="add" onclick=${evt => this.createNode(evt)}><img src="/images/${window._VERSION}/add.svg" /></div>
<div class="keys" onclick=${evt => { evt.stopPropagation(); this.showPage('keys') }}><img src="/images/${window._VERSION}/padlock.svg" /></div>
@ -296,6 +300,12 @@ export class NodeUI extends Component {
showPage(pg) {//{{{
this.page.value = pg
}//}}}
showChecklist() {//{{{
return (this.node.value.ChecklistGroups && this.node.value.ChecklistGroups.length > 0) | this.node.value.ShowChecklist.value
}//}}}
toggleChecklist() {//{{{
this.node.value.ShowChecklist.value = !this.node.value.ShowChecklist.value
}//}}}
toggleMarkdown() {//{{{
this.node.value.RenderMarkdown.value = !this.node.value.RenderMarkdown.value
}//}}}
@ -420,6 +430,7 @@ export class Node {
this.Name = ''
this.RenderMarkdown = signal(false)
this.Markdown = false
this.ShowChecklist = signal(false)
this._content = ''
this.Children = []
this.Crumbs = []
@ -763,10 +774,13 @@ class NodeProperties extends Component {
<div id="properties">
<h1>Note properties</h1>
These properties are only for this note.
<div style="margin-bottom: 16px">These properties are only for this note.</div>
<h2>Markdown</h2>
<input type="checkbox" id="render-markdown" checked=${nodeui.node.value.Markdown} onchange=${evt=>nodeui.node.value.Markdown = evt.target.checked} /> <label for="render-markdown">Render this node with markdown.</label>
<div class="checks">
<input type="checkbox" id="render-markdown" checked=${nodeui.node.value.Markdown} onchange=${evt=>nodeui.node.value.Markdown = evt.target.checked} />
<label for="render-markdown">Markdown view</label>
</div>
<h2>Encryption</h2>
<div class="key">