From dea7f95d6df8d466e2b211b4b4d2ec15bfd21bce Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Wed, 27 Jan 2021 10:53:32 +0530 Subject: [PATCH 01/16] Made cursor as Pointer on Clear button in temperament widget --- js/widgets/temperament.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index cbe08d36fa..0ef3db2f75 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -447,6 +447,7 @@ class TemperamentWidget { divAppend1.style.width = docById("wheelDiv2").style.width; divAppend1.style.marginTop = docById("wheelDiv2").style.height; divAppend1.style.overflow = "auto"; + divAppend1.style.cursor = "pointer"; docById("temperamentTable").append(divAppend1); } From 83365c5e590430555713a31206d4b847a2e010c0 Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Wed, 27 Jan 2021 11:00:29 +0530 Subject: [PATCH 02/16] Made cursor as Pointer on Done and Back buttons in temperament widget --- js/widgets/temperament.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index 0ef3db2f75..6eb7df6589 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -926,6 +926,7 @@ class TemperamentWidget { divAppend.style.height = "32px"; divAppend.style.marginTop = "40px"; divAppend.style.overflow = "auto"; + divAppend.style.cursor = "pointer"; equalEdit.append(divAppend); const divAppend1 = docById("preview"); @@ -933,13 +934,15 @@ class TemperamentWidget { divAppend1.style.marginLeft = "3px"; divAppend1.style.backgroundColor = platformColor.selectorBackground; divAppend1.style.width = "215px"; + divAppend1.style.cursor = "pointer"; const divAppend2 = docById("done_"); divAppend2.style.height = "30px"; divAppend2.style.marginRight = "3px"; divAppend2.style.backgroundColor = platformColor.selectorBackground; divAppend2.style.width = "205px"; - }; + divAppend2.style.cursor = "pointer"; + } addDivision(false); From c0d6c7629611f5b1a4408ba5a3fff2bfcd77fe47 Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Wed, 27 Jan 2021 11:08:36 +0530 Subject: [PATCH 03/16] Centrally Aligned the button-texts --- js/widgets/temperament.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index 6eb7df6589..5962084cbd 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -926,7 +926,7 @@ class TemperamentWidget { divAppend.style.height = "32px"; divAppend.style.marginTop = "40px"; divAppend.style.overflow = "auto"; - divAppend.style.cursor = "pointer"; + divAppend.style.cursor = "32px"; equalEdit.append(divAppend); const divAppend1 = docById("preview"); @@ -934,6 +934,7 @@ class TemperamentWidget { divAppend1.style.marginLeft = "3px"; divAppend1.style.backgroundColor = platformColor.selectorBackground; divAppend1.style.width = "215px"; + divAppend1.style.lineHeight = "30px"; divAppend1.style.cursor = "pointer"; const divAppend2 = docById("done_"); @@ -941,6 +942,7 @@ class TemperamentWidget { divAppend2.style.marginRight = "3px"; divAppend2.style.backgroundColor = platformColor.selectorBackground; divAppend2.style.width = "205px"; + divAppend2.style.lineHeight = "30px"; divAppend2.style.cursor = "pointer"; } @@ -1112,18 +1114,23 @@ class TemperamentWidget { divAppend.style.height = "32px"; divAppend.style.marginTop = "40px"; divAppend.style.overflow = "auto"; + divAppend.style.lineHeight = "32px"; ratioEdit.append(divAppend); const divAppend1 = docById("preview"); divAppend1.style.height = "30px"; divAppend1.style.marginLeft = "3px"; divAppend1.style.backgroundColor = platformColor.selectorBackground; + divAppend1.style.cursor = "pointer"; + divAppend1.style.lineHeight = "30px"; divAppend1.style.width = "215px"; const divAppend2 = docById("done_"); divAppend2.style.height = "30px"; divAppend2.style.marginRight = "3px"; divAppend2.style.backgroundColor = platformColor.selectorBackground; + divAppend2.style.cursor = "pointer"; + divAppend2.style.lineHeight = "30px"; divAppend2.style.width = "205px"; }; From ee241d3711d8bfd844689d9c7ce95457ccb881f5 Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Tue, 2 Feb 2021 19:09:36 +0530 Subject: [PATCH 04/16] Update Octave Space and Done Buttons --- js/widgets/temperament.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index 5962084cbd..3fb604d5d1 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -851,9 +851,10 @@ class TemperamentWidget { const menuItems = document.querySelectorAll("#editMenus"); for (let i = 0; i < editMenus.length; i++) { menuItems[i].style.background = platformColor.selectorBackground; - menuItems[i].style.height = 30 + "px"; + menuItems[i].style.height = 40 + "px"; menuItems[i].style.textAlign = "center"; menuItems[i].style.fontWeight = "bold"; + menuItems[i].style.paddingRight = "5px"; } menuItems[0].style.background = "#c8C8C8"; @@ -1611,18 +1612,14 @@ class TemperamentWidget { divAppend.id = "divAppend"; divAppend.innerHTML = "Done"; divAppend.style.textAlign = "center"; - divAppend.style.paddingTop = "5px"; divAppend.style.marginLeft = "-70px"; divAppend.style.backgroundColor = platformColor.selectorBackground; - divAppend.style.height = "25px"; + divAppend.style.height = "30px"; divAppend.style.marginTop = "40px"; - divAppend.style.overflow = "auto"; + divAppend.style.lineHeight = divAppend.style.height; + divAppend.style.cursor = "pointer"; octaveSpaceEdit.append(divAppend); - divAppend.onmouseover = (event) => { - event.target.style.cursor = "pointer"; - }; - divAppend.onclick = () => { const startRatio = docById("startNote").value; const endRatio = docById("endNote").value; From 68b68fe0b99d2996cd21468b5db085c760227b65 Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Tue, 2 Feb 2021 19:18:49 +0530 Subject: [PATCH 05/16] Removed unneccesary onmouseover functions --- js/widgets/temperament.js | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index 3fb604d5d1..a41dcc2848 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -928,6 +928,7 @@ class TemperamentWidget { divAppend.style.marginTop = "40px"; divAppend.style.overflow = "auto"; divAppend.style.cursor = "32px"; + divAppend.style.cursor = "pointer"; equalEdit.append(divAppend); const divAppend1 = docById("preview"); @@ -949,10 +950,6 @@ class TemperamentWidget { addDivision(false); - divAppend.onmouseover = (event) => { - event.target.style.cursor = "pointer"; - }; - let pitchNumber = this.pitchNumber; let pitchNumber1 = Number(docById("octaveIn").value); let pitchNumber2 = Number(docById("octaveOut").value); @@ -1116,6 +1113,7 @@ class TemperamentWidget { divAppend.style.marginTop = "40px"; divAppend.style.overflow = "auto"; divAppend.style.lineHeight = "32px"; + divAppend.style.cursor = "pointer"; ratioEdit.append(divAppend); const divAppend1 = docById("preview"); @@ -1137,10 +1135,6 @@ class TemperamentWidget { addButtons(false); - divAppend.onmouseover = (event) => { - event.target.style.cursor = "pointer"; - }; - divAppend.onclick = (event) => { const input1 = docById("ratioIn").value; const input2 = docById("ratioOut").value; @@ -1467,12 +1461,9 @@ class TemperamentWidget { divAppend.style.height = "25px"; divAppend.style.marginTop = "40px"; divAppend.style.overflow = "auto"; + divAppend.style.cursor = "pointer"; arbitraryEdit.append(divAppend); - divAppend.onmouseover = (event) => { - event.target.style.cursor = "pointer"; - }; - divAppend.onclick = () => { this.ratios = this.tempRatios1.slice(); this.typeOfEdit = "nonequal"; From 4cc9c8d5ccf2a66fcb0ada558d5eea0f0f31de31 Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Tue, 2 Feb 2021 19:24:56 +0530 Subject: [PATCH 06/16] Capitalised first letter of Titles --- js/widgets/temperament.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index a41dcc2848..63e6fd1ec6 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -214,11 +214,11 @@ class TemperamentWidget { this.toggleNotesButton = () => { if (this.circleIsVisible) { noteCell.getElementsByTagName("img")[0].src = "header-icons/circle.svg"; - noteCell.getElementsByTagName("img")[0].title = "circle"; + noteCell.getElementsByTagName("img")[0].title = "Circle"; noteCell.getElementsByTagName("img")[0].alt = "circle"; } else { noteCell.getElementsByTagName("img")[0].src = "header-icons/table.svg"; - noteCell.getElementsByTagName("img")[0].title = "table"; + noteCell.getElementsByTagName("img")[0].title = "Table"; noteCell.getElementsByTagName("img")[0].alt = "table"; } }; @@ -522,12 +522,12 @@ class TemperamentWidget { 'px;">'; if (i !== 0) { docById("noteInfo").innerHTML += - 'edit'; } docById("noteInfo").innerHTML += - 'close
'; + 'close
'; noteDefined = false; for (let j = 0; j < this.ratiosNotesPair.length; j++) { if (this.ratios[i] == this.ratiosNotesPair[j][0]) { @@ -729,7 +729,7 @@ class TemperamentWidget { notesCell[(i, 0)] = notesRow[i].insertCell(-1); notesCell[(i, 0)].innerHTML = - '  play'; + 'close'; docById("noteInfo1").innerHTML += '
Date: Tue, 2 Feb 2021 22:08:31 +0530 Subject: [PATCH 08/16] Centered the Circle of Notes in Arbitrary Tab --- js/widgets/temperament.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index e800bf7622..1de17ffbaa 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -863,7 +863,7 @@ class TemperamentWidget { menuItems[1].style.background = platformColor.selectorBackground; menuItems[2].style.background = platformColor.selectorBackground; menuItems[3].style.background = platformColor.selectorBackground; - menuItems[0].style.background = "#c8C8C8"; + menuItems[0].style.background = "#FFFFFF"; this.equalEdit(); }; @@ -871,7 +871,7 @@ class TemperamentWidget { menuItems[0].style.background = platformColor.selectorBackground; menuItems[2].style.background = platformColor.selectorBackground; menuItems[3].style.background = platformColor.selectorBackground; - menuItems[1].style.background = "#c8C8C8"; + menuItems[1].style.background = "#FFFFFF"; this.ratioEdit(); }; @@ -879,7 +879,7 @@ class TemperamentWidget { menuItems[0].style.background = platformColor.selectorBackground; menuItems[1].style.background = platformColor.selectorBackground; menuItems[3].style.background = platformColor.selectorBackground; - menuItems[2].style.background = "#c8C8C8"; + menuItems[2].style.background = "#FFFFFF"; this.arbitraryEdit(); }; @@ -887,7 +887,7 @@ class TemperamentWidget { menuItems[0].style.background = platformColor.selectorBackground; menuItems[1].style.background = platformColor.selectorBackground; menuItems[2].style.background = platformColor.selectorBackground; - menuItems[3].style.background = "#c8C8C8"; + menuItems[3].style.background = "#FFFFFF"; this.octaveSpaceEdit(); }; } @@ -900,7 +900,7 @@ class TemperamentWidget { this.editMode = "equal"; docById("userEdit").innerHTML = ""; const equalEdit = docById("userEdit"); - equalEdit.style.backgroundColor = "#c8C8C8"; + equalEdit.style.backgroundColor = "#FFFFFF"; equalEdit.innerHTML = '
Pitch Number         To   

'; equalEdit.innerHTML += @@ -1088,7 +1088,7 @@ class TemperamentWidget { this.editMode = "ratio"; docById("userEdit").innerHTML = ""; const ratioEdit = docById("userEdit"); - ratioEdit.style.backgroundColor = "#c8C8C8"; + ratioEdit.style.backgroundColor = "#FFFFFF"; ratioEdit.innerHTML = '
Ratio         :   

'; ratioEdit.innerHTML += @@ -1272,6 +1272,7 @@ class TemperamentWidget { const arbitraryEdit = docById("userEdit"); arbitraryEdit.innerHTML = '
'; arbitraryEdit.style.paddingLeft = "0px"; + arbitraryEdit.style.backgroundColor = "#FFFFFF"; const radius = 128; const height = 2 * radius; @@ -1299,6 +1300,8 @@ class TemperamentWidget { docById("wheelDiv4").style.background = "none"; docById("wheelDiv4").style.position = "relative"; docById("wheelDiv4").style.zIndex = 5; + docById("wheelDiv4").style.marginTop = "13.5px"; + docById("wheelDiv4").style.marginLeft = "37.5px"; this.wheel1 = new wheelnav("wheelDiv4"); this.wheel1.wheelRadius = 200; this.wheel1.navItemsEnabled = false; @@ -1368,7 +1371,8 @@ class TemperamentWidget { const canvas = docById("circ1"); canvas.style.position = "absolute"; canvas.style.zIndex = 1; - canvas.style.marginTop = "-305px"; + canvas.style.marginTop = "-310px"; + canvas.style.marginLeft = "-5px"; const ctx = canvas.getContext("2d"); const centerX = canvas.width / 2; const centerY = canvas.height / 2; @@ -1591,7 +1595,7 @@ class TemperamentWidget { const len = this.ratios.length; const octaveRatio = this.ratios[len - 1]; const octaveSpaceEdit = docById("userEdit"); - octaveSpaceEdit.style.backgroundColor = "#c8C8C8"; + octaveSpaceEdit.style.backgroundColor = "#FFFFFF"; octaveSpaceEdit.innerHTML = '

Octave Space      { docById("noteInfo").remove(); }; @@ -1527,6 +1530,8 @@ class TemperamentWidget { docById("noteInfo1").style.top = "100px"; docById("noteInfo1").style.left = "90px"; + docById("close").style.cursor = "pointer"; + docById("frequencySlider").oninput = () => { this._refreshInnerWheel(); }; From 3e1e00704cb5f2b473fc612e1a8a93b411f61723 Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Tue, 2 Feb 2021 22:26:28 +0530 Subject: [PATCH 10/16] Updated buttons --- js/widgets/temperament.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index 901f43728c..8221ae0a1d 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -439,13 +439,13 @@ class TemperamentWidget { divAppend1.style.textAlign = "center"; divAppend1.style.position = "absolute"; divAppend1.style.zIndex = 2; - divAppend1.style.paddingTop = "5px"; divAppend1.style.backgroundColor = platformColor.selectorBackground; - divAppend1.style.height = "25px"; + divAppend1.style.height = "30px"; divAppend1.style.width = docById("wheelDiv2").style.width; divAppend1.style.marginTop = docById("wheelDiv2").style.height; divAppend1.style.overflow = "auto"; divAppend1.style.cursor = "pointer"; + divAppend1.style.lineHeight = divAppend1.style.height; docById("temperamentTable").append(divAppend1); } @@ -1462,12 +1462,12 @@ class TemperamentWidget { divAppend.id = "divAppend"; divAppend.innerHTML = "Done"; divAppend.style.textAlign = "center"; - divAppend.style.paddingTop = "5px"; divAppend.style.backgroundColor = platformColor.selectorBackground; - divAppend.style.height = "25px"; + divAppend.style.height = "30px"; divAppend.style.marginTop = "40px"; divAppend.style.overflow = "auto"; divAppend.style.cursor = "pointer"; + divAppend.style.lineHeight = "30px"; arbitraryEdit.append(divAppend); divAppend.onclick = () => { From 0c9febeb024ee553d32ca4310851bb2f644e10f9 Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Wed, 3 Feb 2021 10:46:51 +0530 Subject: [PATCH 11/16] Fixed errors --- js/widgets/temperament.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index 8221ae0a1d..c6c0fd191f 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -445,7 +445,7 @@ class TemperamentWidget { divAppend1.style.marginTop = docById("wheelDiv2").style.height; divAppend1.style.overflow = "auto"; divAppend1.style.cursor = "pointer"; - divAppend1.style.lineHeight = divAppend1.style.height; + divAppend1.style.lineHeight = divAppend1.style.height; docById("temperamentTable").append(divAppend1); } @@ -948,7 +948,7 @@ class TemperamentWidget { divAppend2.style.width = "205px"; divAppend2.style.lineHeight = "30px"; divAppend2.style.cursor = "pointer"; - } + }; addDivision(false); From 7af9600aee0483735db72fc206583e75cca40051 Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Wed, 3 Feb 2021 18:43:14 +0530 Subject: [PATCH 12/16] Refactored some code and updated UI in Add Pitches section --- js/widgets/temperament.js | 71 ++++++++++++++++++++++----------------- 1 file changed, 40 insertions(+), 31 deletions(-) diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index c6c0fd191f..178ca173fa 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -859,40 +859,50 @@ class TemperamentWidget { menuItems[i].style.paddingRight = "5px"; } - menuItems[0].style.background = "#c8C8C8"; + menuItems[0].style.background = "#FFFFFF"; this.equalEdit(); - menuItems[0].onclick = () => { - menuItems[1].style.background = platformColor.selectorBackground; - menuItems[2].style.background = platformColor.selectorBackground; - menuItems[3].style.background = platformColor.selectorBackground; - menuItems[0].style.background = "#FFFFFF"; - this.equalEdit(); - }; - - menuItems[1].onclick = () => { - menuItems[0].style.background = platformColor.selectorBackground; - menuItems[2].style.background = platformColor.selectorBackground; - menuItems[3].style.background = platformColor.selectorBackground; - menuItems[1].style.background = "#FFFFFF"; - this.ratioEdit(); - }; + for(let i = 0;i<4;i++){ + menuItems[i].onmouseover = () => { + menuItems[i].style.backgroundColor = "#7bb5ee"; + } + } - menuItems[2].onclick = () => { - menuItems[0].style.background = platformColor.selectorBackground; - menuItems[1].style.background = platformColor.selectorBackground; - menuItems[3].style.background = platformColor.selectorBackground; - menuItems[2].style.background = "#FFFFFF"; - this.arbitraryEdit(); - }; + for(let i = 0;i<4;i++){ + menuItems[i].onmouseout = () => { + if((i==0 && this.editMode!="equal") + || (i==1 && this.editMode!="ratio") + || (i==2 && this.editMode!="arbitrary") + || (i==3 && this.editMode!="octave")){ + menuItems[i].style.backgroundColor = "#8cc6ff"; + } + } + } - menuItems[3].onclick = () => { - menuItems[0].style.background = platformColor.selectorBackground; - menuItems[1].style.background = platformColor.selectorBackground; - menuItems[2].style.background = platformColor.selectorBackground; - menuItems[3].style.background = "#FFFFFF"; - this.octaveSpaceEdit(); - }; + for(let i = 0;i<4;i++){ + menuItems[i].onclick = () => { + for(let j = 0;j<4;j++){ + if(i!=j){ + menuItems[j].style.background = platformColor.selectorBackground; + } + else{ + menuItems[i].style.background = "#FFFFFF"; + } + } + if(i==0){ + this.equalEdit(); + } + else if(i==1){ + this.ratioEdit(); + } + else if(i==2){ + this.arbitraryEdit(); + } + else{ + this.octaveSpaceEdit(); + } + } + } } /** @@ -1531,7 +1541,6 @@ class TemperamentWidget { docById("noteInfo1").style.left = "90px"; docById("close").style.cursor = "pointer"; - docById("frequencySlider").oninput = () => { this._refreshInnerWheel(); }; From 37aa9c7c58bbc44b999a19ace9e26688b225ff5e Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Wed, 3 Feb 2021 19:04:11 +0530 Subject: [PATCH 13/16] Update Done button --- js/widgets/temperament.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index 178ca173fa..765bf3e7d0 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -1521,7 +1521,7 @@ class TemperamentWidget { docById("noteInfo1").remove(); } docById("wheelDiv3").innerHTML += - ''; + ''; docById("noteInfo1").innerHTML += 'close'; docById("noteInfo1").innerHTML += @@ -1535,10 +1535,12 @@ class TemperamentWidget { frequencies[i] + ""; docById("noteInfo1").innerHTML += - '

Done
'; + '

Done
'; docById("noteInfo1").style.top = "100px"; docById("noteInfo1").style.left = "90px"; + docById("done").style.height = "30px"; + docById("done").style.lineHeight = "30px"; docById("close").style.cursor = "pointer"; docById("frequencySlider").oninput = () => { From 3b1f058b4667314da7586748d88cd88086966e48 Mon Sep 17 00:00:00 2001 From: Daksh Doshi Date: Wed, 3 Feb 2021 19:10:30 +0530 Subject: [PATCH 14/16] Fixed Linting errors --- js/widgets/temperament.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index 765bf3e7d0..5d814722b1 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -865,25 +865,25 @@ class TemperamentWidget { for(let i = 0;i<4;i++){ menuItems[i].onmouseover = () => { menuItems[i].style.backgroundColor = "#7bb5ee"; - } + }; } for(let i = 0;i<4;i++){ menuItems[i].onmouseout = () => { - if((i==0 && this.editMode!="equal") + if((i==0 && this.editMode!="equal") || (i==1 && this.editMode!="ratio") - || (i==2 && this.editMode!="arbitrary") + || (i==2 && this.editMode!="arbitrary") || (i==3 && this.editMode!="octave")){ menuItems[i].style.backgroundColor = "#8cc6ff"; } - } + }; } for(let i = 0;i<4;i++){ menuItems[i].onclick = () => { for(let j = 0;j<4;j++){ if(i!=j){ - menuItems[j].style.background = platformColor.selectorBackground; + menuItems[j].style.background = platformColor.selectorBackground; } else{ menuItems[i].style.background = "#FFFFFF"; @@ -901,7 +901,7 @@ class TemperamentWidget { else{ this.octaveSpaceEdit(); } - } + }; } } From 1a78ddfa04b7d884d849d303bad7f90df04a9769 Mon Sep 17 00:00:00 2001 From: Anindya Kundu Date: Wed, 3 Feb 2021 20:35:15 +0530 Subject: [PATCH 15/16] Format code --- js/widgets/temperament.js | 44 +++++++++++++++++++-------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index 5d814722b1..8addab151d 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -365,8 +365,10 @@ class TemperamentWidget { const angleDiff = []; for (let i = 0; i < this.notesCircle.navItemCount; i++) { this.notesCircle.navItems[i].fillAttr = "#c8C8C8"; - this.notesCircle.navItems[i].titleAttr.font = "20 20px Impact, Charcoal, sans-serif"; - this.notesCircle.navItems[i].titleSelectedAttr.font = "20 20px Impact, Charcoal, sans-serif"; + this.notesCircle.navItems[i].titleAttr.font = + "20 20px Impact, Charcoal, sans-serif"; + this.notesCircle.navItems[i].titleSelectedAttr.font = + "20 20px Impact, Charcoal, sans-serif"; angle[i] = 270 + 360 * (Math.log10(ratios[i]) / Math.log10(this.powerBase)); if (i !== 0) { if (i == pitchNumber - 1) { @@ -575,7 +577,7 @@ class TemperamentWidget { docById("noteInfo").style.zIndex = 10; docById("close").style.cursor = "pointer"; - + docById("close").onclick = () => { docById("noteInfo").remove(); }; @@ -862,43 +864,41 @@ class TemperamentWidget { menuItems[0].style.background = "#FFFFFF"; this.equalEdit(); - for(let i = 0;i<4;i++){ + for (let i = 0; i < 4; i++) { menuItems[i].onmouseover = () => { menuItems[i].style.backgroundColor = "#7bb5ee"; }; } - for(let i = 0;i<4;i++){ + for (let i = 0; i < 4; i++) { menuItems[i].onmouseout = () => { - if((i==0 && this.editMode!="equal") - || (i==1 && this.editMode!="ratio") - || (i==2 && this.editMode!="arbitrary") - || (i==3 && this.editMode!="octave")){ + if ( + (i == 0 && this.editMode != "equal") || + (i == 1 && this.editMode != "ratio") || + (i == 2 && this.editMode != "arbitrary") || + (i == 3 && this.editMode != "octave") + ) { menuItems[i].style.backgroundColor = "#8cc6ff"; } }; } - for(let i = 0;i<4;i++){ + for (let i = 0; i < 4; i++) { menuItems[i].onclick = () => { - for(let j = 0;j<4;j++){ - if(i!=j){ - menuItems[j].style.background = platformColor.selectorBackground; - } - else{ + for (let j = 0; j < 4; j++) { + if (i != j) { + menuItems[j].style.background = platformColor.selectorBackground; + } else { menuItems[i].style.background = "#FFFFFF"; } } - if(i==0){ + if (i == 0) { this.equalEdit(); - } - else if(i==1){ + } else if (i == 1) { this.ratioEdit(); - } - else if(i==2){ + } else if (i == 2) { this.arbitraryEdit(); - } - else{ + } else { this.octaveSpaceEdit(); } }; From bd95746b1f27b7a4eba520c0dc3a07b4378ca885 Mon Sep 17 00:00:00 2001 From: Anindya Kundu Date: Wed, 3 Feb 2021 21:36:18 +0530 Subject: [PATCH 16/16] Improve notes table styling --- js/widgets/temperament.js | 59 ++++++++++++++++++++------------------- 1 file changed, 31 insertions(+), 28 deletions(-) diff --git a/js/widgets/temperament.js b/js/widgets/temperament.js index 8addab151d..cecf1386eb 100644 --- a/js/widgets/temperament.js +++ b/js/widgets/temperament.js @@ -697,6 +697,7 @@ class TemperamentWidget { menuItems[i].style.background = platformColor.labelColor; menuItems[i].style.height = 30 + "px"; menuItems[i].style.textAlign = "center"; + menuItems[i].style.fontSize = "0.9rem"; menuItems[i].style.fontWeight = "bold"; if (isCustom(this.inTemperament)) { menuItems[0].style.width = 40 + "px"; @@ -725,45 +726,52 @@ class TemperamentWidget { const notesRow = []; const notesCell = []; const ratios = []; - let playImage; for (let i = 0; i <= this.pitchNumber; i++) { notesRow[i] = docById("notes_" + i); + notesRow[i].style.background = platformColor.selectorBackground; + notesRow[i].style.transition = "background 0.25s ease"; + notesRow[i].onmouseover = () => { + notesRow[i].style.background = platformColor.paletteBackground; + }; + notesRow[i].onmouseout = () => { + notesRow[i].style.background = platformColor.selectorBackground; + }; notesCell[(i, 0)] = notesRow[i].insertCell(-1); - notesCell[(i, 0)].innerHTML = - '  play  '; notesCell[(i, 0)].style.width = 40 + "px"; - notesCell[(i, 0)].style.backgroundColor = platformColor.selectorBackground; notesCell[(i, 0)].style.textAlign = "center"; - notesCell[(i, 0)].onmouseover = (event) => { - event.target.style.backgroundColor = platformColor.selectorBackgroundHOVER; + const img_wrap = document.createElement("div"); + img_wrap.style.height = "2.5rem"; + img_wrap.style.display = "grid"; + img_wrap.style.alignItems = "center"; + img_wrap.style.justifyContent = "center"; + + const play_btn = document.createElement("img"); + play_btn.src = "header-icons/play-button.svg"; + play_btn.id = `play_${i}`; + play_btn.style.height = "1.25rem"; + play_btn.style.width = "1.25rem"; + play_btn.style.transition = "all 0.25s ease"; + play_btn.onmouseover = (event) => { + event.target.style.cursor = "pointer"; + event.target.style.transform = "scale(1.1)"; }; - - notesCell[(i, 0)].onmouseout = (event) => { - event.target.style.backgroundColor = platformColor.selectorBackground; + play_btn.onmouseout = (event) => { + event.target.style.transform = "scale(1)"; }; - - playImage = docById("play_" + i); - - playImage.onmouseover = (event) => { - event.target.style.cursor = "pointer"; + play_btn.onclick = (event) => { + this.playNote(event.target.id.split("_")[1]); }; - playImage.onclick = (event) => { - this.playNote(event.target.dataset.id); - }; + img_wrap.appendChild(play_btn); + notesCell[(i, 0)].appendChild(img_wrap); //Pitch Number notesCell[(i, 1)] = notesRow[i].insertCell(-1); notesCell[(i, 1)].id = "pitchNumber_" + i; notesCell[(i, 1)].innerHTML = i; - notesCell[(i, 1)].style.backgroundColor = platformColor.selectorBackground; notesCell[(i, 1)].style.textAlign = "center"; ratios[i] = this.ratios[i]; @@ -772,7 +780,6 @@ class TemperamentWidget { //Ratio notesCell[(i, 2)] = notesRow[i].insertCell(-1); notesCell[(i, 2)].innerHTML = ratios[i]; - notesCell[(i, 2)].style.backgroundColor = platformColor.selectorBackground; notesCell[(i, 2)].style.textAlign = "center"; if (!isCustom(this.inTemperament)) { @@ -780,14 +787,12 @@ class TemperamentWidget { notesCell[(i, 3)] = notesRow[i].insertCell(-1); notesCell[(i, 3)].innerHTML = this.intervals[i]; notesCell[(i, 3)].style.width = 120 + "px"; - notesCell[(i, 3)].style.backgroundColor = platformColor.selectorBackground; notesCell[(i, 3)].style.textAlign = "center"; //Notes notesCell[(i, 4)] = notesRow[i].insertCell(-1); - notesCell[(i, 4)].innerHTML = this.notes[i]; + notesCell[(i, 4)].innerHTML = `${this.notes[i][0]}, ${this.notes[i][1]}`; notesCell[(i, 4)].style.width = 50 + "px"; - notesCell[(i, 4)].style.backgroundColor = platformColor.selectorBackground; notesCell[(i, 4)].style.textAlign = "center"; //Mode @@ -802,14 +807,12 @@ class TemperamentWidget { notesCell[(i, 5)].innerHTML = "Non Scalar"; } notesCell[(i, 5)].style.width = 100 + "px"; - notesCell[(i, 5)].style.backgroundColor = platformColor.selectorBackground; notesCell[(i, 5)].style.textAlign = "center"; } //Frequency notesCell[(i, 6)] = notesRow[i].insertCell(-1); notesCell[(i, 6)].innerHTML = this.frequencies[i]; - notesCell[(i, 6)].style.backgroundColor = platformColor.selectorBackground; notesCell[(i, 6)].style.textAlign = "center"; if (isCustom(this.inTemperament)) {