diff --git a/static/css/main.css b/static/css/main.css index 398d55a..edc0cd1 100644 --- a/static/css/main.css +++ b/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 { diff --git a/static/images/checklist-off.svg b/static/images/checklist-off.svg new file mode 100644 index 0000000..bea3071 --- /dev/null +++ b/static/images/checklist-off.svg @@ -0,0 +1,71 @@ + + + + + + + + + + image/svg+xml + + + + + + clipboard-check + clipboard-check + clipboard-check-outline + + + diff --git a/static/images/checklist-on.svg b/static/images/checklist-on.svg new file mode 100644 index 0000000..3bd1daa --- /dev/null +++ b/static/images/checklist-on.svg @@ -0,0 +1,73 @@ + + + + + + + + + + image/svg+xml + + + + + + clipboard-check + clipboard-check + clipboard-check-outline + clipboard-check + + + diff --git a/static/js/checklist.mjs b/static/js/checklist.mjs index 498e08f..1e639a8 100644 --- a/static/js/checklist.mjs +++ b/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') diff --git a/static/js/node.mjs b/static/js/node.mjs index c1d6f94..5d0992a 100644 --- a/static/js/node.mjs +++ b/static/js/node.mjs @@ -72,7 +72,7 @@ export class NodeUI extends Component { ${node.Name} ${padlock} <${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` +
{ evt.stopPropagation(); this.toggleChecklist() }}> + +
` return html` - ${menu} + <${menu} />
this.saveNode()}>
document.getElementById('app').classList.toggle('toggle-tree')} />
Notes
-
{ evt.stopPropagation(); this.toggleMarkdown() }}>
+
{ evt.stopPropagation(); this.toggleMarkdown() }}>
+ <${checklist} />
{ evt.stopPropagation(); this.showPage('search') }}>
this.createNode(evt)}>
{ evt.stopPropagation(); this.showPage('keys') }}>
@@ -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 {

Note properties

- These properties are only for this note. +
These properties are only for this note.
-

Markdown

- nodeui.node.value.Markdown = evt.target.checked} /> +
+ nodeui.node.value.Markdown = evt.target.checked} /> + + +

Encryption

diff --git a/static/less/main.less b/static/less/main.less index ca10433..8058b08 100644 --- a/static/less/main.less +++ b/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 {