Control statusimg using CSS, rather than setting an img src.

This commit is contained in:
David Fifield 2019-07-23 10:13:46 -06:00
parent 8f885c7557
commit 990047b2f5
5 changed files with 29 additions and 9 deletions

View file

@ -11,6 +11,19 @@ body {
text-align: center;
}
#statusimg {
background-image: url("assets/status-off.png");
background-repeat: no-repeat;
background-position: center center;
min-height: 60px;
}
#statusimg.on {
background-image: url("assets/status-on.png");
}
#statusimg.on.running {
background-image: url("assets/status-running.png");
}
.b {
border-top: 1px solid gainsboro;
padding: 10px;

View file

@ -10,7 +10,7 @@
</head>
<body>
<div id="active">
<img id="statusimg" src="assets/status-off.png" />
<div id="statusimg"></div>
<p id="statustext">Snowflake is off</p>
<p id="statusdesc"></p>
</div>

View file

@ -16,8 +16,11 @@ class Popup {
this.statusdesc = document.getElementById('statusdesc');
this.img = document.getElementById('statusimg');
}
setImgSrc(src) {
this.img.src = `assets/status-${src}.png`;
setEnabled(enabled) {
setClass(this.img, 'on', enabled);
}
setActive(active) {
setClass(this.img, 'running', active);
}
setStatusText(txt) {
this.statustext.innerText = txt;