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

@ -14,7 +14,8 @@ class BadgeUI extends UI {
setStatus() {} setStatus() {}
missingFeature(missing) { missingFeature(missing) {
this.popup.setImgSrc('off'); this.popup.setEnabled(false);
this.popup.setActive(false);
this.popup.setStatusText("Snowflake is off"); this.popup.setStatusText("Snowflake is off");
this.popup.setStatusDesc(missing, true); this.popup.setStatusDesc(missing, true);
this.popup.hideButton(); this.popup.hideButton();
@ -28,7 +29,8 @@ class BadgeUI extends UI {
// FIXME: Share stats from webext // FIXME: Share stats from webext
const total = 0; const total = 0;
this.popup.setStatusDesc(`Your snowflake has helped ${total} user${(total !== 1) ? 's' : ''} circumvent censorship in the last 24 hours.`); this.popup.setStatusDesc(`Your snowflake has helped ${total} user${(total !== 1) ? 's' : ''} circumvent censorship in the last 24 hours.`);
this.popup.setImgSrc(this.active ? "running" : "on"); this.popup.setEnabled(true);
this.popup.setActive(this.active);
} }
turnOff() { turnOff() {
@ -36,7 +38,8 @@ class BadgeUI extends UI {
this.popup.setToggleText('Turn On'); this.popup.setToggleText('Turn On');
this.popup.setStatusText("Snowflake is off"); this.popup.setStatusText("Snowflake is off");
this.popup.setStatusDesc(""); this.popup.setStatusDesc("");
this.popup.setImgSrc("off"); this.popup.setEnabled(false);
this.popup.setActive(false);
} }
setActive(connected) { setActive(connected) {

View file

@ -11,6 +11,19 @@ body {
text-align: center; 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 { .b {
border-top: 1px solid gainsboro; border-top: 1px solid gainsboro;
padding: 10px; padding: 10px;

View file

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

View file

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

View file

@ -9,7 +9,8 @@ port.onMessage.addListener((m) => {
const popup = new Popup(); const popup = new Popup();
if (missingFeature) { if (missingFeature) {
popup.setImgSrc('off'); popup.setEnabled(false);
popup.setActive(false);
popup.setStatusText("Snowflake is off"); popup.setStatusText("Snowflake is off");
popup.setStatusDesc("WebRTC feature is not detected.", true); popup.setStatusDesc("WebRTC feature is not detected.", true);
popup.hideButton(); popup.hideButton();
@ -29,8 +30,8 @@ port.onMessage.addListener((m) => {
popup.setStatusText("Snowflake is off"); popup.setStatusText("Snowflake is off");
popup.setStatusDesc(""); popup.setStatusDesc("");
} }
popup.setEnabled(enabled);
popup.setImgSrc(active ? "running" : enabled ? "on" : "off"); popup.setActive(active);
}); });
document.addEventListener('change', (event) => { document.addEventListener('change', (event) => {