Added UI elements for toggling checklist

static/css/main.css

@@ -16,6 +16,9 @@ html {
 [onClick] {
   cursor: pointer;
 }
+label {
+  user-select: none;
+}
 html,
 body {
   margin: 0px;
@@ -141,10 +144,15 @@ button {
 #properties .key label {
   margin-left: 8px;
 }
+#properties .checks {
+  display: grid;
+  grid-template-columns: min-content 1fr;
+  grid-gap: 4px 8px;
+}
 header {
   display: grid;
   grid-area: header;
-  grid-template-columns: min-content 1fr repeat(5, min-content);
+  grid-template-columns: min-content 1fr repeat(6, min-content);
   align-items: center;
   padding: 8px 0px;
   color: #333c11;
@@ -169,12 +177,14 @@ header .name {
   font-size: 1.25em;
 }
 header .markdown,
+header .checklist,
 header .search,
 header .add,
 header .keys {
   padding-right: 16px;
 }
 header .markdown img,
+header .checklist img,
 header .search img,
 header .add img,
 header .keys img {

static/images/checklist-off.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="4.7624998mm"
+   height="5.2916698mm"
+   viewBox="0 0 4.7624996 5.2916701"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)"
+   sodipodi:docname="checklist-off.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#0088ff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="4"
+     inkscape:cx="9"
+     inkscape:cy="9.5"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1916"
+     inkscape:window-height="1404"
+     inkscape:window-x="1280"
+     inkscape:window-y="16"
+     inkscape:window-maximized="0"
+     inkscape:showpageshadow="true"
+     inkscape:pagecheckerboard="false"
+     inkscape:deskcolor="#dddddd"
+     showborder="true" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-120.36363,-120.48512)">
+    <title
+       id="title1">clipboard-check</title>
+    <title
+       id="title1-7">clipboard-check</title>
+    <title
+       id="title1-5">clipboard-check-outline</title>
+    <path
+       d="m 124.59697,121.01429 h -1.10596 c -0.11113,-0.30692 -0.40217,-0.52917 -0.74613,-0.52917 -0.34395,0 -0.635,0.22225 -0.74612,0.52917 h -1.10596 a 0.52916667,0.52916667 0 0 0 -0.52917,0.52917 v 3.70416 a 0.52916667,0.52916667 0 0 0 0.52917,0.52917 h 3.70417 a 0.52916667,0.52916667 0 0 0 0.52916,-0.52917 v -3.70416 a 0.52916667,0.52916667 0 0 0 -0.52916,-0.52917 m -1.85209,0 a 0.26458333,0.26458333 0 0 1 0.26459,0.26458 0.26458333,0.26458333 0 0 1 -0.26459,0.26459 0.26458333,0.26458333 0 0 1 -0.26458,-0.26459 0.26458333,0.26458333 0 0 1 0.26458,-0.26458 m -1.32291,1.05833 h 2.64583 v -0.52916 h 0.52917 v 3.70416 h -3.70417 v -3.70416 h 0.52917 v 0.52916 m 0.13229,1.7198 0.39687,-0.39688 0.52917,0.52917 1.19063,-1.19063 0.39687,0.39688 -1.5875,1.5875 z"
+       id="path1"
+       style="stroke-width:0.264583;fill:#f9f9f9" />
+  </g>
+</svg>

static/images/checklist-on.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="4.7624998mm"
+   height="5.2916698mm"
+   viewBox="0 0 4.7624996 5.2916701"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)"
+   sodipodi:docname="checklist-on.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#0088ff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="4"
+     inkscape:cx="9"
+     inkscape:cy="9.5"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1916"
+     inkscape:window-height="1404"
+     inkscape:window-x="1280"
+     inkscape:window-y="16"
+     inkscape:window-maximized="0"
+     inkscape:showpageshadow="true"
+     inkscape:pagecheckerboard="false"
+     inkscape:deskcolor="#dddddd"
+     showborder="true" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-120.36363,-120.48512)">
+    <title
+       id="title1">clipboard-check</title>
+    <title
+       id="title1-7">clipboard-check</title>
+    <title
+       id="title1-5">clipboard-check-outline</title>
+    <title
+       id="title1-3">clipboard-check</title>
+    <path
+       d="m 122.21571,124.71846 -1.05833,-1.05834 0.37306,-0.37306 0.68527,0.68263 1.74361,-1.74361 0.37306,0.37571 m -1.5875,-1.5875 a 0.26458333,0.26458333 0 0 1 0.26458,0.26458 0.26458333,0.26458333 0 0 1 -0.26458,0.26459 0.26458333,0.26458333 0 0 1 -0.26458,-0.26459 0.26458333,0.26458333 0 0 1 0.26458,-0.26458 m 1.85208,0 H 123.491 c -0.11112,-0.30692 -0.40216,-0.52917 -0.74612,-0.52917 -0.34396,0 -0.635,0.22225 -0.74613,0.52917 h -1.10595 a 0.52916666,0.52916666 0 0 0 -0.52917,0.52917 v 3.70416 a 0.52916666,0.52916666 0 0 0 0.52917,0.52917 h 3.70416 a 0.52916666,0.52916666 0 0 0 0.52917,-0.52917 v -3.70416 a 0.52916666,0.52916666 0 0 0 -0.52917,-0.52917 z"
+       id="path1"
+       style="stroke-width:0.264583;fill:#f9f9f9" />
+  </g>
+</svg>

static/js/checklist.mjs

@@ -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')

static/js/node.mjs

@@ -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 = ''
+		let menu = ()=> (this.menu.value ? html`<${Menu} nodeui=${this} />` : null)
-		if (this.menu.value)
+		let checklist = ()=>
-			menu = html`<${Menu} nodeui=${this} />`
+			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>
+				<${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>
+				<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">Render this node with markdown.</label>
+					<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">

static/less/main.less

@@ -12,6 +12,10 @@ html {
         cursor: pointer;
 }
 
+label {
+	user-select: none;
+}
+
 html, body {
 	margin: 0px;
 	padding: 0px;
@@ -157,12 +161,18 @@ button {
 			margin-left: 8px;
 		}
 	}
+
+	.checks {
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		grid-gap: 4px 8px;
+	}
 }
 
 header {
 	display: grid;
 	grid-area: header;
-	grid-template-columns: min-content 1fr repeat(5, min-content);
+	grid-template-columns: min-content 1fr repeat(6, min-content);
 	align-items: center;
 	padding: 8px 0px;
 	color: darken(@accent_1, 35%);
@@ -189,7 +199,7 @@ header {
 		font-size: 1.25em;
 	}
 
-	.markdown, .search, .add, .keys {
+	.markdown, .checklist, .search, .add, .keys {
 		padding-right: 16px;
 
 		img {