Added UI elements for toggling checklist
This commit is contained in:
Magnus Åhall
parent
44f5d92815
commit
08f2344ef9
@ -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 {
|
||||
|
||||
71
static/images/checklist-off.svg
Normal file
71
static/images/checklist-off.svg
Normal 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 |
73
static/images/checklist-on.svg
Normal file
73
static/images/checklist-on.svg
Normal 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 |
@ -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')
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user