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: