Added UI elements for toggling checklist

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

View File

@ -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 {

View File

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

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

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

After

Width:  |  Height:  |  Size: 2.7 KiB

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

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>
<${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">

View File

@ -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 {