Added grid icons for adding empty rows/columns
This commit is contained in:
Magnus Åhall
parent
8b51b444f6
commit
d8a5c6d6c9
2 changed files with 270 additions and 15 deletions
|
|
@ -7,7 +7,7 @@
|
|||
viewBox="0 0 36 36"
|
||||
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="grid_management.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
|
|
@ -25,15 +25,15 @@
|
|||
inkscape:deskcolor="#ffffff"
|
||||
inkscape:document-units="px"
|
||||
showborder="false"
|
||||
inkscape:zoom="4"
|
||||
inkscape:cx="47.625"
|
||||
inkscape:cy="77.625001"
|
||||
inkscape:window-width="2190"
|
||||
inkscape:window-height="1401"
|
||||
inkscape:window-x="1463"
|
||||
inkscape:zoom="1"
|
||||
inkscape:cx="49.5"
|
||||
inkscape:cy="139"
|
||||
inkscape:window-width="1916"
|
||||
inkscape:window-height="1161"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="g144"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false">
|
||||
<inkscape:grid
|
||||
id="grid8"
|
||||
|
|
@ -974,8 +974,8 @@
|
|||
x="1"
|
||||
y="1" />
|
||||
<path
|
||||
id="path146"
|
||||
style="fill:#80b3ff;stroke-width:0.580833"
|
||||
id="path146"
|
||||
d="M 23,12 V 23 H 12 Z"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
<rect
|
||||
|
|
@ -1035,11 +1035,247 @@
|
|||
x="0"
|
||||
y="2" />
|
||||
<path
|
||||
id="path165"
|
||||
style="fill:#c83737;stroke-width:1.1495"
|
||||
id="path165"
|
||||
d="M 13,13 H 23 L 13,23 Z"
|
||||
sodipodi:nodetypes="cccc" />
|
||||
</symbol>
|
||||
<symbol
|
||||
id="add-empty-columns">
|
||||
<rect
|
||||
style="fill:#ffffff;stroke-width:2"
|
||||
id="rect28"
|
||||
width="34"
|
||||
height="34"
|
||||
x="1"
|
||||
y="1" />
|
||||
<rect
|
||||
style="fill:#b8de69;fill-opacity:1;stroke:none;stroke-width:1.1495;stroke-dasharray:none"
|
||||
id="rect29"
|
||||
width="10"
|
||||
height="10"
|
||||
x="13"
|
||||
y="24" />
|
||||
<rect
|
||||
style="fill:#80b3ff;stroke:none;stroke-width:0.580833;stroke-dasharray:none"
|
||||
id="rect30"
|
||||
width="10"
|
||||
height="10"
|
||||
x="2"
|
||||
y="13" />
|
||||
<rect
|
||||
style="fill:#333333;stroke-width:2"
|
||||
id="rect31"
|
||||
width="34"
|
||||
height="1"
|
||||
x="1"
|
||||
y="12" />
|
||||
<rect
|
||||
style="fill:#333333;stroke-width:2"
|
||||
id="rect32"
|
||||
width="34"
|
||||
height="1"
|
||||
x="1"
|
||||
y="23" />
|
||||
<rect
|
||||
style="fill:#333333;stroke-width:2"
|
||||
id="rect33"
|
||||
width="1"
|
||||
height="34"
|
||||
x="12"
|
||||
y="1" />
|
||||
<rect
|
||||
style="fill:#333333;stroke-width:2"
|
||||
id="rect34"
|
||||
width="1"
|
||||
height="34"
|
||||
x="23"
|
||||
y="1" />
|
||||
<rect
|
||||
style="fill:#000000;stroke-width:2"
|
||||
id="rect35"
|
||||
width="36"
|
||||
height="2"
|
||||
x="0"
|
||||
y="0" />
|
||||
<rect
|
||||
style="fill:#000000;stroke-width:2"
|
||||
id="rect36"
|
||||
width="2"
|
||||
height="34"
|
||||
x="34"
|
||||
y="2" />
|
||||
<rect
|
||||
style="fill:#000000;stroke-width:2"
|
||||
id="rect37"
|
||||
width="36"
|
||||
height="2"
|
||||
x="0"
|
||||
y="34" />
|
||||
<rect
|
||||
style="fill:#000000;stroke-width:2"
|
||||
id="rect38"
|
||||
width="2"
|
||||
height="32"
|
||||
x="0"
|
||||
y="2" />
|
||||
<rect
|
||||
style="fill:#b8de69;fill-opacity:1;stroke:none;stroke-width:1.1495;stroke-dasharray:none"
|
||||
id="rect39"
|
||||
width="10"
|
||||
height="10"
|
||||
x="13"
|
||||
y="2" />
|
||||
<rect
|
||||
style="fill:#b8de69;fill-opacity:1;stroke:none;stroke-width:1.1495;stroke-dasharray:none"
|
||||
id="rect40"
|
||||
width="10"
|
||||
height="10"
|
||||
x="13"
|
||||
y="13" />
|
||||
<rect
|
||||
style="fill:#b8de69;fill-opacity:1;stroke:none;stroke-width:1.1495;stroke-dasharray:none"
|
||||
id="rect76"
|
||||
width="10"
|
||||
height="10"
|
||||
x="24"
|
||||
y="24" />
|
||||
<rect
|
||||
style="fill:#b8de69;fill-opacity:1;stroke:none;stroke-width:1.1495;stroke-dasharray:none"
|
||||
id="rect77"
|
||||
width="10"
|
||||
height="10"
|
||||
x="24"
|
||||
y="2" />
|
||||
<rect
|
||||
style="fill:#b8de69;fill-opacity:1;stroke:none;stroke-width:1.1495;stroke-dasharray:none"
|
||||
id="rect78"
|
||||
width="10"
|
||||
height="10"
|
||||
x="24"
|
||||
y="13" />
|
||||
</symbol>
|
||||
<symbol
|
||||
id="add-empty-rows">
|
||||
<g
|
||||
id="g3">
|
||||
<g
|
||||
id="use3">
|
||||
<rect
|
||||
style="fill:#ffffff;stroke-width:2"
|
||||
id="rect82"
|
||||
width="34"
|
||||
height="34"
|
||||
x="1"
|
||||
y="1" />
|
||||
<rect
|
||||
style="fill:#b8de69;fill-opacity:1;stroke:none;stroke-width:1.1495;stroke-dasharray:none"
|
||||
id="rect83"
|
||||
width="10"
|
||||
height="10"
|
||||
x="13"
|
||||
y="24" />
|
||||
<rect
|
||||
style="fill:#80b3ff;stroke:none;stroke-width:0.580833;stroke-dasharray:none"
|
||||
id="rect84"
|
||||
width="10"
|
||||
height="10"
|
||||
x="13"
|
||||
y="2" />
|
||||
<rect
|
||||
style="fill:#333333;stroke-width:2"
|
||||
id="rect85"
|
||||
width="34"
|
||||
height="1"
|
||||
x="1"
|
||||
y="12" />
|
||||
<rect
|
||||
style="fill:#333333;stroke-width:2"
|
||||
id="rect86"
|
||||
width="34"
|
||||
height="1"
|
||||
x="1"
|
||||
y="23" />
|
||||
<rect
|
||||
style="fill:#333333;stroke-width:2"
|
||||
id="rect87"
|
||||
width="1"
|
||||
height="34"
|
||||
x="12"
|
||||
y="1" />
|
||||
<rect
|
||||
style="fill:#333333;stroke-width:2"
|
||||
id="rect88"
|
||||
width="1"
|
||||
height="34"
|
||||
x="23"
|
||||
y="1" />
|
||||
<rect
|
||||
style="fill:#000000;stroke-width:2"
|
||||
id="rect89"
|
||||
width="36"
|
||||
height="2"
|
||||
x="0"
|
||||
y="0" />
|
||||
<rect
|
||||
style="fill:#000000;stroke-width:2"
|
||||
id="rect90"
|
||||
width="2"
|
||||
height="34"
|
||||
x="34"
|
||||
y="2" />
|
||||
<rect
|
||||
style="fill:#000000;stroke-width:2"
|
||||
id="rect91"
|
||||
width="36"
|
||||
height="2"
|
||||
x="0"
|
||||
y="34" />
|
||||
<rect
|
||||
style="fill:#000000;stroke-width:2"
|
||||
id="rect92"
|
||||
width="2"
|
||||
height="32"
|
||||
x="0"
|
||||
y="2" />
|
||||
<rect
|
||||
style="fill:#b8de69;fill-opacity:1;stroke:none;stroke-width:1.1495;stroke-dasharray:none"
|
||||
id="rect93"
|
||||
width="10"
|
||||
height="10"
|
||||
x="2"
|
||||
y="24" />
|
||||
<rect
|
||||
style="fill:#b8de69;fill-opacity:1;stroke:none;stroke-width:1.1495;stroke-dasharray:none"
|
||||
id="rect94"
|
||||
width="10"
|
||||
height="10"
|
||||
x="13"
|
||||
y="13" />
|
||||
<rect
|
||||
style="fill:#b8de69;fill-opacity:1;stroke:none;stroke-width:1.1495;stroke-dasharray:none"
|
||||
id="rect95"
|
||||
width="10"
|
||||
height="10"
|
||||
x="24"
|
||||
y="24" />
|
||||
<rect
|
||||
style="fill:#b8de69;fill-opacity:1;stroke:none;stroke-width:1.1495;stroke-dasharray:none"
|
||||
id="rect96"
|
||||
width="10"
|
||||
height="10"
|
||||
x="2"
|
||||
y="13" />
|
||||
<rect
|
||||
style="fill:#b8de69;fill-opacity:1;stroke:none;stroke-width:1.1495;stroke-dasharray:none"
|
||||
id="rect109"
|
||||
width="10"
|
||||
height="10"
|
||||
x="24"
|
||||
y="13" />
|
||||
</g>
|
||||
</g>
|
||||
</symbol>
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
|
|
@ -1119,5 +1355,22 @@
|
|||
xlink:href="#remove"
|
||||
id="use165" />
|
||||
</g>
|
||||
<g
|
||||
id="use81">
|
||||
<use
|
||||
xlink:href="#symbol96"
|
||||
id="use96" />
|
||||
<g
|
||||
id="use1-8"
|
||||
transform="translate(0,120)">
|
||||
<use
|
||||
xlink:href="#add-empty-columns"
|
||||
id="use78" />
|
||||
</g>
|
||||
</g>
|
||||
<use
|
||||
xlink:href="#add-empty-rows"
|
||||
id="use109"
|
||||
transform="translate(40,120)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 32 KiB |
|
|
@ -112,8 +112,10 @@ export class SmonDashboard extends CustomHTMLElement {// {{{
|
|||
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<button data-el="edit-dashboard">Edit dashboard</button>
|
||||
<button class="only-on-edit" data-el="add-columns">Add columns</button>
|
||||
<button class="only-on-edit" data-el="add-rows">Add rows</button>
|
||||
|
||||
<svg class="only-on-edit" data-el="grid-add-empty-columns" style="width: 36px; height: 36px; cursor: pointer;"><use href="/images/${_VERSION}/grid_management.svg#add-empty-columns" /></svg>
|
||||
<svg class="only-on-edit" data-el="grid-add-empty-rows" style="width: 36px; height: 36px; cursor: pointer;"><use href="/images/${_VERSION}/grid_management.svg#add-empty-rows" /></svg>
|
||||
|
||||
<button class="only-on-edit" data-el="update-dashboard">Update dashboard</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -164,8 +166,8 @@ export class SmonDashboard extends CustomHTMLElement {// {{{
|
|||
this.widgetsEdited = false
|
||||
|
||||
this.elEditDashboard.addEventListener('click', () => this.classList.toggle('edit'))
|
||||
this.elAddColumns.addEventListener('click', () => { this.addColumns += 5; this.render() })
|
||||
this.elAddRows.addEventListener('click', () => { this.addRows += 5; this.render() })
|
||||
this.elGridAddEmptyColumns.addEventListener('click', () => { this.addColumns += 5; this.render() })
|
||||
this.elGridAddEmptyRows.addEventListener('click', () => { this.addRows += 5; this.render() })
|
||||
this.elUpdateDashboard.addEventListener('click', () => this.updateDashboard())
|
||||
this.elEditUpdate.addEventListener('click', () => this.editUpdate())
|
||||
|
||||
|
|
@ -185,7 +187,7 @@ export class SmonDashboard extends CustomHTMLElement {// {{{
|
|||
|
||||
this.render()
|
||||
this.fetchData() // Retrieve one as fast as possible since setInterval doesn't run before an interval.
|
||||
setInterval(() => this.fetchData(), 1000)
|
||||
setInterval(() => this.fetchData(), 10000)
|
||||
}// }}}
|
||||
|
||||
render() {// {{{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue