magnus/Notes2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Small design changes, introducing CSS colorization, doubleclick to edit markdown

Browse source
This commit is contained in:
Magnus Åhall 2026-05-30 09:28:36 +02:00
parent 43212a4487
commit 5bd5ef1f02
9 changed files with 455 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

19
static/js/tree.mjs
View file

@ -1,14 +1,19 @@
import { ROOT_NODE } from 'node_store'
import { CustomHTMLElement } from './lib/custom_html_element.mjs'
import { Color, Solver } from './lib/css_colorize.mjs'
export class N2Tree extends CustomHTMLElement {
static {// {{{
this.tmpl = document.createElement('template')
this.tmpl.innerHTML = `
<div data-el="logo" id="logo"><img src="/images/${_VERSION}/logo.svg" /></div>
<div class="icons">
<div data-el="logo" id="logo">
<img src="/images/${_VERSION}/logo_small.svg" />
<img src="/images/${_VERSION}/logo.svg" />
<img data-el="search" class='search' src="/images/${_VERSION}/icon_search.svg" style="height: 22px" />
<img data-el="sync" class='sync' src="/images/${_VERSION}/icon_refresh.svg" />
</div>
<div class="icons">
<img data-el="sync" class='sync' src="/images/${_VERSION}/icon_refresh.svg" />
<img data-el="settings" class='settings' src="/images/${_VERSION}/icon_settings.svg" />
</div>
<div data-el="treenodes"></div>
`
@ -31,7 +36,7 @@ export class N2Tree extends CustomHTMLElement {
this.elSync.addEventListener('click', () => _sync.run())
this.elLogo.addEventListener('click', () => _app.goToNode(ROOT_NODE, false, false))
_mbus.subscribe('NODE_MODIFIED', ({ detail })=>{
_mbus.subscribe('NODE_MODIFIED', ({ detail }) => {
const node = detail.data.node
const treenode = this.treeNodeComponents[node.get('UUID')]
@ -43,6 +48,12 @@ export class N2Tree extends CustomHTMLElement {
})
this.populateFirstLevel()
/* XXX - set color */
let color = new Color(255, 96, 80)
let solver = new Solver(color)
let result = solver.solve()
this.elSettings.style.filter = result.filter
}// }}}
render() {// {{{
if (this.rendered)