Skip to content

Commit 4fc4c25

Browse files
Commanderk3Commanderk3
authored
Timbre UI Fix (sugarlabs#4614)
* TimbreUI * linting * unused elements
1 parent 3a772e3 commit 4fc4c25

File tree

2 files changed

+24
-56
lines changed

2 files changed

+24
-56
lines changed

‎js/utils/platformstyle.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@ const platformThemes = {
4444
cancelButton: "#f1f1f1",
4545
cancelButtonHover: "#afafaf",
4646
hoverColor: "#808080",
47+
widgetButton: "#225A91",
48+
widgetButtonSelect: "#979797",
49+
widgetBackground: "#454545",
4750
paletteColors: {
4851
widgets: ["#2E7D32", "#1B5E20", "#388E3C", "#81C784"],
4952
pitch: ["#2E7D32", "#1B5E20", "#388E3C", "#81C784"],
@@ -198,6 +201,9 @@ const platformThemes = {
198201
cancelButton: "#f1f1f1",
199202
cancelButtonHover: "#afafaf",
200203
hoverColor: "#E0E0E0",
204+
widgetBackground: "#ccc",
205+
widgetButton: "#8cc6ff",
206+
widgetButtonSelect: "#C8C8C8",
201207
paletteColors: {
202208
widgets: ["#7CD622", "#57AD02", "#77C428", "#B4EB7D"],
203209
pitch: ["#7CD622", "#57AD02", "#77C428", "#B4EB7D"],

‎js/widgets/timbre.js‎

Lines changed: 18 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -766,7 +766,7 @@ class TimbreWidget {
766766
this.isActive["synth"] = false;
767767

768768
synthButtonCell.onclick = () => {
769-
_unhighlightButtons();
769+
_unhighlightButtons(synthButtonCell);
770770
for (let i = 0; i < this.activeParams.length; i++) {
771771
this.isActive[this.activeParams[i]] = false;
772772
}
@@ -789,7 +789,7 @@ class TimbreWidget {
789789
this.isActive["oscillator"] = false;
790790

791791
oscillatorButtonCell.onclick = async () => {
792-
_unhighlightButtons();
792+
_unhighlightButtons(oscillatorButtonCell);
793793
for (let i = 0; i < this.activeParams.length; i++) {
794794
this.isActive[this.activeParams[i]] = false;
795795
}
@@ -840,7 +840,7 @@ class TimbreWidget {
840840
this.isActive["envelope"] = false;
841841

842842
envelopeButtonCell.onclick = async () => {
843-
_unhighlightButtons();
843+
_unhighlightButtons(envelopeButtonCell);
844844
for (let i = 0; i < this.activeParams.length; i++) {
845845
this.isActive[this.activeParams[i]] = false;
846846
}
@@ -886,7 +886,7 @@ class TimbreWidget {
886886
this.isActive["effects"] = false;
887887

888888
effectsButtonCell.onclick = () => {
889-
_unhighlightButtons();
889+
_unhighlightButtons(effectsButtonCell);
890890
for (let i = 0; i < this.activeParams.length; i++) {
891891
this.isActive[this.activeParams[i]] = false;
892892
}
@@ -904,7 +904,7 @@ class TimbreWidget {
904904
this.isActive["filter"] = false;
905905

906906
filterButtonCell.onclick = async () => {
907-
_unhighlightButtons();
907+
_unhighlightButtons(filterButtonCell);
908908
for (let i = 0; i < this.activeParams.length; i++) {
909909
this.isActive[this.activeParams[i]] = false;
910910
}
@@ -972,13 +972,14 @@ class TimbreWidget {
972972
// this.activity.logo.hideMsgs();
973973
// };
974974

975-
_unhighlightButtons = () => {
976-
addFilterButtonCell.style.backgroundColor = "#808080";
977-
synthButtonCell.style.backgroundColor = platformColor.selectorBackground;
978-
oscillatorButtonCell.style.backgroundColor = platformColor.selectorBackground;
979-
envelopeButtonCell.style.backgroundColor = platformColor.selectorBackground;
980-
effectsButtonCell.style.backgroundColor = platformColor.selectorBackground;
981-
filterButtonCell.style.backgroundColor = platformColor.selectorBackground;
975+
_unhighlightButtons = (button) => {
976+
addFilterButtonCell.style.backgroundColor = platformColor.widgetButton;
977+
synthButtonCell.style.backgroundColor = platformColor.widgetButton;
978+
oscillatorButtonCell.style.backgroundColor = platformColor.widgetButton;
979+
envelopeButtonCell.style.backgroundColor = platformColor.widgetButton;
980+
effectsButtonCell.style.backgroundColor = platformColor.widgetButton;
981+
filterButtonCell.style.backgroundColor = platformColor.widgetButton;
982+
button.style.backgroundColor = platformColor.widgetButtonSelect;
982983
};
983984

984985
activity.textMsg(_("Click on buttons to open the timbre design tools."), 3000);
@@ -1185,9 +1186,6 @@ class TimbreWidget {
11851186
_synth = () => {
11861187
let blockValue = 0;
11871188

1188-
docById("synthButtonCell").style.backgroundColor = "#C8C8C8";
1189-
docById("synthButtonCell").onmouseover = () => {};
1190-
docById("synthButtonCell").onmouseout = () => {};
11911189

11921190
this.timbreTableDiv.style.display = "inline";
11931191
this.timbreTableDiv.style.visibility = "visible";
@@ -1206,7 +1204,7 @@ class TimbreWidget {
12061204
env.innerHTML = htmlElements;
12071205
const envAppend = document.createElement("div");
12081206
envAppend.id = "envAppend";
1209-
envAppend.style.backgroundColor = platformColor.selectorBackground;
1207+
envAppend.style.backgroundColor = platformColor.widgetBackground;
12101208
envAppend.style.height = "30px";
12111209
envAppend.style.marginTop = "40px";
12121210
envAppend.style.overflow = "auto";
@@ -1283,7 +1281,6 @@ class TimbreWidget {
12831281
}
12841282

12851283
document.getElementById("wrapperS0").addEventListener("change", (event) => {
1286-
docById("synthButtonCell").style.backgroundColor = "#C8C8C8";
12871284
const elem = event.target;
12881285
docById("myRangeS0").value = parseFloat(elem.value);
12891286
this.amSynthParamvals["harmonicity"] = parseFloat(elem.value);
@@ -1350,7 +1347,6 @@ class TimbreWidget {
13501347
}
13511348

13521349
document.getElementById("wrapperS0").addEventListener("change", (event) => {
1353-
docById("synthButtonCell").style.backgroundColor = "#C8C8C8";
13541350
const elem = event.target;
13551351
docById("myRangeS0").value = parseFloat(elem.value);
13561352
docById("myspanS0").textContent = elem.value;
@@ -1416,7 +1412,6 @@ class TimbreWidget {
14161412
}
14171413

14181414
document.getElementById("wrapperS0").addEventListener("change", (event) => {
1419-
docById("synthButtonCell").style.backgroundColor = "#C8C8C8";
14201415
const elem = event.target;
14211416
docById("myRangeS0").value = parseFloat(elem.value);
14221417
docById("myspanS0").textContent = elem.value;
@@ -1495,7 +1490,6 @@ class TimbreWidget {
14951490
document
14961491
.getElementById("wrapperS" + i)
14971492
.addEventListener("change", (event) => {
1498-
docById("synthButtonCell").style.backgroundColor = "#C8C8C8";
14991493
const elem = event.target;
15001494
const m = elem.id.slice(-1);
15011495
docById("myRangeS" + m).value = parseFloat(elem.value);
@@ -1535,10 +1529,6 @@ class TimbreWidget {
15351529
blockValue = this.osc.length - 1;
15361530
}
15371531

1538-
docById("oscillatorButtonCell").style.backgroundColor = "#C8C8C8";
1539-
docById("oscillatorButtonCell").onmouseover = () => {};
1540-
docById("oscillatorButtonCell").onmouseout = () => {};
1541-
15421532
this.timbreTableDiv.style.display = "inline";
15431533
this.timbreTableDiv.style.visibility = "visible";
15441534
this.timbreTableDiv.style.border = "0px";
@@ -1564,7 +1554,7 @@ class TimbreWidget {
15641554
env.innerHTML = htmlElements;
15651555
const envAppend = document.createElement("div");
15661556
envAppend.id = "envAppend";
1567-
envAppend.style.backgroundColor = platformColor.selectorBackground;
1557+
envAppend.style.backgroundColor = platformColor.widgetBackground;
15681558
envAppend.style.height = "30px";
15691559
envAppend.style.marginTop = "40px";
15701560
envAppend.style.overflow = "auto";
@@ -1607,7 +1597,6 @@ class TimbreWidget {
16071597
myDiv.innerHTML = selectOpt;
16081598

16091599
document.getElementById("wrapperOsc0").addEventListener("change", (event) => {
1610-
docById("oscillatorButtonCell").style.backgroundColor = "#C8C8C8";
16111600
const elem = event.target;
16121601
this.oscParams[0] = elem.value;
16131602
this.synthVals["oscillator"]["type"] = elem.value + this.oscParams[1].toString();
@@ -1623,7 +1612,6 @@ class TimbreWidget {
16231612
});
16241613

16251614
document.getElementById("wrapperOsc1").addEventListener("change", (event) => {
1626-
docById("oscillatorButtonCell").style.backgroundColor = "#C8C8C8";
16271615
const elem = event.target;
16281616
this.oscParams[1] = parseFloat(elem.value);
16291617
this.synthVals["oscillator"]["type"] = this.oscParams[0] + parseFloat(elem.value);
@@ -1668,10 +1656,6 @@ class TimbreWidget {
16681656
blockValue = this.env.length - 1;
16691657
}
16701658

1671-
docById("envelopeButtonCell").style.backgroundColor = "#C8C8C8";
1672-
docById("envelopeButtonCell").onmouseover = () => {};
1673-
docById("envelopeButtonCell").onmouseout = () => {};
1674-
16751659
this.timbreTableDiv.style.display = "inline";
16761660
this.timbreTableDiv.style.visibility = "visible";
16771661
this.timbreTableDiv.style.border = "0px";
@@ -1702,7 +1686,7 @@ class TimbreWidget {
17021686
env.innerHTML = htmlElements;
17031687
const envAppend = document.createElement("div");
17041688
envAppend.id = "envAppend";
1705-
envAppend.style.backgroundColor = platformColor.selectorBackground;
1689+
envAppend.style.backgroundColor = platformColor.widgetBackground;
17061690
envAppend.style.height = "30px";
17071691
envAppend.style.marginTop = "40px";
17081692
envAppend.style.overflow = "auto";
@@ -1715,7 +1699,6 @@ class TimbreWidget {
17151699

17161700
for (let i = 0; i < 4; i++) {
17171701
document.getElementById("wrapperEnv" + i).addEventListener("change", (event) => {
1718-
docById("envelopeButtonCell").style.backgroundColor = "#C8C8C8";
17191702
const elem = event.target;
17201703
const m = elem.id.slice(-1);
17211704
docById("myRange" + m).value = parseFloat(elem.value);
@@ -1748,9 +1731,6 @@ class TimbreWidget {
17481731
* Adds and updates filters
17491732
*/
17501733
_filter() {
1751-
docById("filterButtonCell").style.backgroundColor = "#C8C8C8";
1752-
docById("filterButtonCell").onmouseover = () => {};
1753-
docById("filterButtonCell").onmouseout = () => {};
17541734

17551735
this.timbreTableDiv.style.display = "inline";
17561736
this.timbreTableDiv.style.visibility = "visible";
@@ -1956,15 +1936,11 @@ class TimbreWidget {
19561936

19571937
// Cache button
19581938
const filterButtonCell = docById("filterButtonCell");
1959-
const synthButtonCell = docById("synthButtonCell");
1960-
const oscillatorButtonCell = docById("oscillatorButtonCell");
1961-
const envelopeButtonCell = docById("envelopeButtonCell");
1962-
const effectsButtonCell = docById("effectsButtonCell");
19631939

19641940
// single event handler
19651941
this._eventHandler = (event) => {
19661942
const target = event.target;
1967-
const targetId = target.id || '';
1943+
const targetId = target.id || "";
19681944

19691945
if (targetId.startsWith("sel") && event.type === "change") {
19701946
filterButtonCell.style.backgroundColor = "#C8C8C0";
@@ -2004,22 +1980,18 @@ class TimbreWidget {
20041980
}
20051981

20061982
else if (targetId.startsWith("wrapperS") && event.type === "change") {
2007-
synthButtonCell.style.backgroundColor = "#C8C8C8";
20081983
this._playNote("G4", 1 / 8);
20091984
}
20101985

20111986
else if (targetId.startsWith("wrapperOsc") && event.type === "change") {
2012-
oscillatorButtonCell.style.backgroundColor = "#C8C8C8";
20131987
this._playNote("G4", 1 / 8);
20141988
}
20151989

20161990
else if (targetId.startsWith("wrapperEnv") && event.type === "change") {
2017-
envelopeButtonCell.style.backgroundColor = "#C8C8C8";
20181991
this._playNote("G4", 1 / 8);
20191992
}
20201993

20211994
else if (targetId.startsWith("wrapperFx") && event.type === "change") {
2022-
effectsButtonCell.style.backgroundColor = "#C8C8C8";
20231995
this._playNote("G4", 1 / 8);
20241996
}
20251997
};
@@ -2162,10 +2134,6 @@ class TimbreWidget {
21622134
_effects = () => {
21632135
let blockValue = 0;
21642136

2165-
docById("effectsButtonCell").style.backgroundColor = "#C8C8C8";
2166-
docById("effectsButtonCell").onmouseover = () => {};
2167-
docById("effectsButtonCell").onmouseout = () => {};
2168-
21692137
this.timbreTableDiv.style.display = "inline";
21702138
this.timbreTableDiv.style.visibility = "visible";
21712139
this.timbreTableDiv.style.border = "0px";
@@ -2183,7 +2151,7 @@ class TimbreWidget {
21832151
env.innerHTML = htmlElements;
21842152
const envAppend = document.createElement("div");
21852153
envAppend.id = "envAppend";
2186-
envAppend.style.backgroundColor = platformColor.selectorBackground;
2154+
envAppend.style.backgroundColor = platformColor.widgetBackground;
21872155
envAppend.style.height = "30px";
21882156
envAppend.style.marginTop = "40px";
21892157
envAppend.style.overflow = "auto";
@@ -2273,7 +2241,6 @@ class TimbreWidget {
22732241
document
22742242
.getElementById("wrapperFx" + i)
22752243
.addEventListener("change", (event) => {
2276-
docById("effectsButtonCell").style.backgroundColor = "#C8C8C8";
22772244
const elem = event.target;
22782245
const m = elem.id.slice(-1);
22792246
docById("myRangeFx" + m).value = parseFloat(elem.value);
@@ -2366,7 +2333,6 @@ class TimbreWidget {
23662333

23672334
// Add the listeners for the sliders.
23682335
document.getElementById("wrapperFx0").addEventListener("change", (event) => {
2369-
docById("effectsButtonCell").style.backgroundColor = "#C8C8C8";
23702336
const elem = event.target;
23712337
docById("myRangeFx0").value = parseFloat(elem.value);
23722338
docById("myspanFx0").textContent = elem.value;
@@ -2378,7 +2344,6 @@ class TimbreWidget {
23782344
});
23792345

23802346
document.getElementById("wrapperFx1").addEventListener("change", (event) => {
2381-
docById("effectsButtonCell").style.backgroundColor = "#C8C8C8";
23822347
const elem = event.target;
23832348
docById("myRangeFx1").value = parseFloat(elem.value);
23842349
const obj = oneHundredToFraction(elem.value);
@@ -2465,7 +2430,6 @@ class TimbreWidget {
24652430
document
24662431
.getElementById("wrapperFx" + i)
24672432
.addEventListener("change", (event) => {
2468-
docById("effectsButtonCell").style.backgroundColor = "#C8C8C8";
24692433
const elem = event.target;
24702434
const m = elem.id.slice(-1);
24712435
docById("myRangeFx" + m).value = parseFloat(elem.value);
@@ -2561,7 +2525,6 @@ class TimbreWidget {
25612525
document
25622526
.getElementById("wrapperFx" + i)
25632527
.addEventListener("change", (event) => {
2564-
docById("effectsButtonCell").style.backgroundColor = "#C8C8C8";
25652528
const elem = event.target;
25662529
const m = elem.id.slice(-1);
25672530
docById("myRangeFx" + m).value = parseFloat(elem.value);
@@ -2634,7 +2597,6 @@ class TimbreWidget {
26342597
}
26352598

26362599
document.getElementById("wrapperFx0").addEventListener("change", (event) => {
2637-
docById("effectsButtonCell").style.backgroundColor = "#C8C8C8";
26382600
const elem = event.target;
26392601
docById("myRangeFx0").value = parseFloat(elem.value);
26402602
docById("myspanFx0").textContent = elem.value;

0 commit comments

Comments
 (0)