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

Colorization of icons

Browse source
This commit is contained in:
Magnus Åhall 2026-06-02 21:05:28 +02:00
parent cc69f7194e
commit 3c6648f227
7 changed files with 90 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

11
static/js/page_node.mjs
View file

@ -9,7 +9,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
<style>
.el-functions {
display: grid;
grid-template-columns: 1fr min-content min-content;
grid-template-columns: 1fr repeat(3, min-content);
grid-gap: 8px;
align-items: center;
justify-items: end;
@ -25,9 +25,10 @@ export class N2PageNodeUI extends CustomHTMLElement {
<div data-el="node-markdown" tabindex=1></div>
<div data-el="functions">
<img data-el="icon-markdown">
<img data-el="icon-save" src="/images/${_VERSION}/icon_save_disabled.svg">
<img data-el="icon-table-format" src="/images/${_VERSION}/icon_table.svg">
<img data-el="icon-markdown">
<img data-el="icon-table-format" class="colorize" src="/images/${_VERSION}/icon_table.svg">
<img data-el="icon-history" class="colorize" src="/images/${_VERSION}/icon_history.svg">
</div>
`
}// }}}
@ -49,12 +50,14 @@ export class N2PageNodeUI extends CustomHTMLElement {
_mbus.subscribe('NODE_MODIFIED', () => {
document.querySelector('#crumbs .crumbs')?.classList.add('node-modified')
this.elIconSave.src = `/images/${_VERSION}/icon_save.svg`
this.elIconSave.classList.add('colorize')
this.renderName()
})
_mbus.subscribe('NODE_UNMODIFIED', () => {
document.querySelector('#crumbs .crumbs')?.classList.remove('node-modified')
this.elIconSave.src = `/images/${_VERSION}/icon_save_disabled.svg`
this.elIconSave.classList.remove('colorize')
})
_mbus.subscribe('MARKDOWN_TOGGLE', () => this.showMarkdown(!this.showMarkdown()))
@ -123,10 +126,12 @@ export class N2PageNodeUI extends CustomHTMLElement {
case true:
this.elNodeMarkdown.innerHTML = this.marked.parse(this.elNodeContent.value)
this.elIconMarkdown.src = `/images/${_VERSION}/icon_markdown.svg`
this.elIconMarkdown.classList.add('colorize')
this.classList.add('show-markdown')
break
case false:
this.elIconMarkdown.src = `/images/${_VERSION}/icon_markdown_hollow.svg`
this.elIconMarkdown.classList.remove('colorize')
this.classList.remove('show-markdown')
break
case null:

8
static/js/tree.mjs
View file

@ -12,8 +12,8 @@ export class N2Tree extends CustomHTMLElement {
<img data-el="search" class='search' src="/images/${_VERSION}/icon_search.svg" style="height: 22px" />
</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" />
<img data-el="sync" class='sync colorize' src="/images/${_VERSION}/icon_refresh.svg" />
<img data-el="settings" class='settings colorize' src="/images/${_VERSION}/icon_settings.svg" />
</div>
<div data-el="treenodes"></div>
`
@ -50,10 +50,10 @@ export class N2Tree extends CustomHTMLElement {
this.populateFirstLevel()
/* XXX - set color */
let color = new Color(255, 96, 80)
let color = new Color(0x80, 0x00, 0x33)
let solver = new Solver(color)
let result = solver.solve()
this.elSettings.style.filter = result.filter
// console.log(result.filter)
}// }}}
render() {// {{{
if (this.rendered)