Colorization of icons
This commit is contained in:
Magnus Åhall
parent
cc69f7194e
commit
3c6648f227
7 changed files with 90 additions and 26 deletions
|
|
@ -4,12 +4,22 @@
|
|||
--content-width: 900px;
|
||||
--thumbnail-width: 300px;
|
||||
--thumbnail-height: 100px;
|
||||
|
||||
/*
|
||||
--colorize: invert(10%) sepia(61%) saturate(5017%) hue-rotate(323deg) brightness(90%) contrast(109%);
|
||||
*/
|
||||
--colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%);
|
||||
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.colorize {
|
||||
filter: var(--colorize);
|
||||
}
|
||||
|
||||
#notes2 {
|
||||
min-height: 100vh;
|
||||
|
||||
|
|
@ -21,7 +31,7 @@ html {
|
|||
"tree hum content content ding"
|
||||
"tree hum blank blank ding"
|
||||
;
|
||||
grid-template-columns: min-content minmax(16px, 1fr) minmax(min-content, calc(900px - 120px)) 120px minmax(16px, 1fr);
|
||||
grid-template-columns: min-content minmax(16px, 1fr) minmax(min-content, calc(900px - 156px)) 156px minmax(16px, 1fr);
|
||||
grid-template-rows:
|
||||
min-content min-content 48px 1fr;
|
||||
|
||||
|
|
|
|||
49
static/images/icon_history.svg
Normal file
49
static/images/icon_history.svg
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="7.40833mm"
|
||||
height="6.3499999mm"
|
||||
viewBox="0 0 7.40833 6.3499999"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
|
||||
sodipodi:docname="icon_history.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">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="1"
|
||||
inkscape:cx="10"
|
||||
inkscape:cy="9"
|
||||
inkscape:window-width="1916"
|
||||
inkscape:window-height="1161"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-102.39375,-146.05)">
|
||||
<title
|
||||
id="title1">history</title>
|
||||
<path
|
||||
d="m 106.80347,147.81389 h -0.52916 v 1.76388 l 1.50988,0.89606 0.254,-0.42686 -1.23472,-0.73377 v -1.49931 M 106.62708,146.05 a 3.175,3.175 0 0 0 -3.175,3.175 h -1.05833 l 1.397,1.42169 1.42523,-1.42169 h -1.05834 a 2.4694444,2.4694444 0 0 1 2.46944,-2.46944 2.4694444,2.4694444 0 0 1 2.46944,2.46944 2.4694444,2.4694444 0 0 1 -2.46944,2.46944 c -0.68086,0 -1.29822,-0.27869 -1.74272,-0.72672 l -0.50094,0.50095 c 0.57502,0.57856 1.36172,0.93133 2.24366,0.93133 a 3.175,3.175 0 0 0 3.175,-3.175 3.175,3.175 0 0 0 -3.175,-3.175"
|
||||
id="path1"
|
||||
style="stroke-width:0.352777" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -9,8 +9,8 @@
|
|||
role="img"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="markdown.svg"
|
||||
inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
|
||||
sodipodi:docname="icon_markdown.svg"
|
||||
inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
|
||||
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"
|
||||
|
|
@ -33,10 +33,10 @@
|
|||
inkscape:zoom="0.70710678"
|
||||
inkscape:cx="453.96255"
|
||||
inkscape:cy="60.811183"
|
||||
inkscape:window-width="2190"
|
||||
inkscape:window-height="1401"
|
||||
inkscape:window-x="1463"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-width="1916"
|
||||
inkscape:window-height="1161"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="18"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg1" />
|
||||
<title
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
<path
|
||||
d="M 338.73829,224.67957 H 26.316564 A 26.316564,26.316564 0 0 1 0,198.363 V 26.316564 A 26.316564,26.316564 0 0 1 26.316564,0 H 338.73829 a 26.316564,26.316564 0 0 1 26.31657,26.316564 V 198.33258 a 26.316564,26.316564 0 0 1 -26.31657,26.33177 z M 87.742162,172.01601 v -68.45349 l 35.109038,43.8863 35.09382,-43.8863 v 68.45349 h 35.10903 V 52.678763 H 157.94502 L 122.8512,96.565057 87.742162,52.678763 H 52.633128 V 172.04644 Z M 322.94835,112.33978 H 287.83932 V 52.663552 H 252.7455 v 59.676228 h -35.10904 l 52.64834,61.44081 z"
|
||||
id="path1"
|
||||
style="stroke-width:15.2119;fill:#fe5f55;fill-opacity:1" />
|
||||
style="stroke-width:15.2119;fill:#000000;fill-opacity:1" />
|
||||
<metadata
|
||||
id="metadata1">
|
||||
<rdf:RDF>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
|
@ -25,11 +25,11 @@
|
|||
inkscape:document-units="mm"
|
||||
inkscape:zoom="23.548693"
|
||||
inkscape:cx="6.9218279"
|
||||
inkscape:cy="12.5697"
|
||||
inkscape:cy="12.612165"
|
||||
inkscape:window-width="1916"
|
||||
inkscape:window-height="1161"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-y="18"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false" />
|
||||
|
|
@ -45,6 +45,6 @@
|
|||
<path
|
||||
d="m 104.775,150.01875 a 1.5875,1.5875 0 0 1 -1.5875,-1.5875 c 0,-0.26458 0.0661,-0.52123 0.18521,-0.74083 l -0.38629,-0.3863 c -0.20638,0.32544 -0.32809,0.71173 -0.32809,1.12713 a 2.1166667,2.1166667 0 0 0 2.11667,2.11667 v 0.79375 l 1.05833,-1.05834 -1.05833,-1.05833 m 0,-2.91042 v -0.79375 l -1.05833,1.05834 1.05833,1.05833 v -0.79375 a 1.5875,1.5875 0 0 1 1.5875,1.5875 c 0,0.26458 -0.0661,0.52123 -0.18521,0.74083 l 0.38629,0.38629 c 0.20638,-0.32543 0.32809,-0.71172 0.32809,-1.12712 a 2.1166667,2.1166667 0 0 0 -2.11667,-2.11667 z"
|
||||
id="path1"
|
||||
style="stroke-width:0.264583;fill:#fe5f55;fill-opacity:1" />
|
||||
style="stroke-width:0.264583;fill:#000000;fill-opacity:1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2 KiB After Width: | Height: | Size: 2 KiB |
|
|
@ -7,7 +7,7 @@
|
|||
viewBox="0 0 4.7624998 4.7624998"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
|
||||
inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
|
||||
sodipodi:docname="icon_save.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
|
|
@ -24,12 +24,12 @@
|
|||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="5.6568542"
|
||||
inkscape:cx="41.454135"
|
||||
inkscape:cy="-3.8890873"
|
||||
inkscape:window-width="1093"
|
||||
inkscape:window-height="1401"
|
||||
inkscape:window-x="2560"
|
||||
inkscape:window-y="0"
|
||||
inkscape:cx="41.365747"
|
||||
inkscape:cy="-3.7123106"
|
||||
inkscape:window-width="1916"
|
||||
inkscape:window-height="1161"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="18"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
|
|
@ -44,6 +44,6 @@
|
|||
<path
|
||||
d="m 43.65625,209.81458 h -2.645833 v -1.05833 h 2.645833 m -0.79375,3.70417 a 0.79375,0.79375 0 0 1 -0.79375,-0.79375 0.79375,0.79375 0 0 1 0.79375,-0.79375 0.79375,0.79375 0 0 1 0.79375,0.79375 0.79375,0.79375 0 0 1 -0.79375,0.79375 m 1.322917,-4.23334 h -3.175 c -0.293688,0 -0.529167,0.23813 -0.529167,0.52917 v 3.70417 a 0.52916667,0.52916667 0 0 0 0.529167,0.52916 h 3.704166 a 0.52916667,0.52916667 0 0 0 0.529167,-0.52916 v -3.175 z"
|
||||
id="path1"
|
||||
style="stroke-width:0.264583;fill:#fe5f55;fill-opacity:1" />
|
||||
style="stroke-width:0.264583;fill:#000000;fill-opacity:1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue