Skip to content

Commit

Permalink
Implementing scrolling on the phrase maker (sugarlabs#3311)
Browse files Browse the repository at this point in the history 
* Implementing scrolling on yhe phrase maker

* implementing scrolling on the widget window

* Fixing phrase maker scrolling

* phrase maker optimisation

* phrase maker optimisation

* making border cell constant

* making border cell constant for keyboard

* Fixing Music keyboard toolbar

* Making bottom oannek of music keyboard always visible during scrolling
  • Loading branch information
@MohitGupta14
MohitGupta14 authored Aug 29, 2023
1 parent ca24861 commit 03b419c
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 4 deletions.
2 changes: 1 addition & 1 deletion dist/css/windows.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,8 @@
}
#floatingWindows > .windowFrame > .wfWinBody > .wfbWidget {
flex-grow: 1;
position: relative;
overflow: hidden;
position: relative;
}
#floatingWindows td {
padding: 0;
Expand Down
15 changes: 15 additions & 0 deletions js/widgets/musickeyboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,7 @@ function MusicKeyboard(activity) {
docById("mkbOuterDiv").style.width = "calc(200vh - 64px)";
docById("keyboardHolder2").style.width = "calc(200vh - 64px)";
docById("mkbInnerDiv").style.width = "95.5vw";
docById("mkbInnerDiv").style.height = "75%";
const innerDiv = docById("mkbInnerDiv");
innerDiv.scrollLeft = innerDiv.scrollWidth;
this.widgetWindow.getWidgetBody().style.left = "60px";
Expand All @@ -321,6 +322,7 @@ function MusicKeyboard(activity) {
this.widgetWindow.getWidgetBody().style.height = "550px";
this.widgetWindow.getWidgetBody().style.width = "1000px";
docById("mkbOuterDiv").style.width = w + "px";
docById("mkbInnerDiv").style.height = "100%";
}
delete startTime[id];
delete temp1[id];
Expand Down Expand Up @@ -425,6 +427,7 @@ function MusicKeyboard(activity) {
docById("mkbOuterDiv").style.width = "calc(200vh - 64px)";
docById("keyboardHolder2").style.width = "calc(200vh - 64px)";
docById("mkbInnerDiv").style.width = "95.5vw";
docById("mkbInnerDiv").style.height = "75%";
this.widgetWindow.getWidgetBody().style.left = "60px";
} else {
const outerDiv = docById("mkbOuterDiv");
Expand All @@ -434,6 +437,7 @@ function MusicKeyboard(activity) {
this.widgetWindow.getWidgetBody().style.height = "550px";
this.widgetWindow.getWidgetBody().style.width = "1000px";
docById("mkbOuterDiv").style.width = w + "px";
docById("mkbInnerDiv").style.height = "100%";
}
};

Expand Down Expand Up @@ -468,6 +472,7 @@ function MusicKeyboard(activity) {
docById("mkbOuterDiv").style.height = "calc(100vh - 64px)";
docById("mkbOuterDiv").style.width = "calc(200vh - 64px)";
widgetWindow.getWidgetBody().style.left = "60px";
docById("mkbInnerDiv").style.height = "75%";
} else {
const outerDiv = docById("mkbOuterDiv");
outerDiv.style.maxHeight = "400px";
Expand All @@ -476,6 +481,7 @@ function MusicKeyboard(activity) {
widgetWindow.getWidgetBody().style.height = "550px";
widgetWindow.getWidgetBody().style.width = "1000px";
docById("mkbOuterDiv").style.width = w + "px";
docById("mkbInnerDiv").style.height = "100%";
}
};

Expand Down Expand Up @@ -534,6 +540,7 @@ function MusicKeyboard(activity) {
outerDiv.style.maxHeight = "725px";
docById("mkbOuterDiv").style.height = "calc(100vh - 64px)";
docById("mkbOuterDiv").style.width = "calc(200vh - 64px)";
docById("mkbInnerDiv").style.height = "75%";
widgetWindow.getWidgetBody().style.left = "60px";
} else {
const outerDiv = docById("mkbOuterDiv");
Expand All @@ -543,6 +550,7 @@ function MusicKeyboard(activity) {
widgetWindow.getWidgetBody().style.height = "550px";
widgetWindow.getWidgetBody().style.width = "1000px";
docById("mkbOuterDiv").style.width = w + "px";
docById("mkbInnerDiv").style.height = "100%";
}
// }
};
Expand Down Expand Up @@ -1228,6 +1236,8 @@ function MusicKeyboard(activity) {
cell.style.width = Math.floor(MATRIXSOLFEWIDTH * this._cellScale) * 1.5 + "px";
cell.style.minWidth = Math.floor(MATRIXSOLFEWIDTH * this._cellScale) * 1.5 + "px";
cell.style.maxWidth = cell.style.minWidth;
cell.style.position = "sticky";
cell.style.left = "0px";
cell.className = "headcol"; // This cell is fixed horizontally.
if (this.displayLayout[i].noteName === "drum") {
cell.innerHTML = this.displayLayout[i].voice;
Expand Down Expand Up @@ -1272,6 +1282,8 @@ function MusicKeyboard(activity) {
}

mkbTableRow = mkbTable.insertRow();
mkbTableRow.style.position = "sticky";
mkbTableRow.style.bottom = "0px"
cell = mkbTableRow.insertCell();
cell.style.backgroundColor = platformColor.graphicsLabelBackground;
cell.style.fontSize = this._cellScale * 100 + "%";
Expand All @@ -1281,6 +1293,9 @@ function MusicKeyboard(activity) {
cell.style.maxWidth = cell.style.minWidth;
cell.className = "headcol"; // This cell is fixed horizontally.
cell.innerHTML = _("duration");
cell.style.position = "sticky";
cell.style.left = "0px";
cell.style.zIndex = "1";

const newCell = mkbTableRow.insertCell();
newCell.innerHTML =
Expand Down
38 changes: 37 additions & 1 deletion js/widgets/phrasemaker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ class PhraseMaker {
static INNERWINDOWWIDTH = 630;
static BUTTONSIZE = 53;
static ICONSIZE = 24;

// stylePhraseMaker();
constructor() {
this._stopOrCloseClicked = false;
this._instrumentName = DEFAULTVOICE;
Expand Down Expand Up @@ -150,6 +150,30 @@ class PhraseMaker {
this.columnBlocksMap = [];
}

stylePhraseMaker(){

var floatingWindowsDiv = document.getElementById("floatingWindows");
var windowFrameElements = floatingWindowsDiv.querySelectorAll(".windowFrame");

for (var i = 0; i < windowFrameElements.length; i++) {
var windowFrame = windowFrameElements[i];
var wfWinBody = document.querySelector(".wfWinBody");
var wfbWidget = document.querySelector(".wfbWidget");
wfbWidget.style.overflow = "auto"
wfbWidget.style.width = "-webkit-fill-available"
wfbWidget.style.height = "-webkit-fill-available"
windowFrame.style.height = "405px";
windowFrame.style.width = "685px";
wfWinBody.style.position = "absolute";
wfWinBody.style.overflow = "auto";
wfWinBody.style.width = "-webkit-fill-available";
wfWinBody.style.height = "-webkit-fill-available";
wfWinBody.style.background = "#cccccc";
wfbWidget.style.position = "absolute";
wfbWidget.style.left = "55px";
}
}

clearBlocks() {
// When creating a new matrix, we want to clear out any old
// block references.
Expand Down Expand Up @@ -412,6 +436,8 @@ class PhraseMaker {
cell.style.minWidth = Math.floor(MATRIXSOLFEWIDTH * this._cellScale) + "px";
cell.style.maxWidth = cell.style.minWidth;
cell.className = "headcol"; // This cell is fixed horizontally.
cell.style.position = "sticky";
cell.style.left = "1.2px";
cell.innerHTML = "";
this._headcols[i] = cell;

Expand Down Expand Up @@ -515,6 +541,7 @@ class PhraseMaker {
cell.style.minWidth = Math.floor(MATRIXSOLFEWIDTH * this._cellScale) + "px";
cell.style.maxWidth = cell.style.minWidth;
cell.className = "labelcol"; // This cell is fixed horizontally.
cell.style.position = "sticky";
cell.style.left = PhraseMaker.BUTTONSIZE * this._cellScale + "px";
cell.setAttribute("alt", i);
this._labelcols[i] = cell;
Expand Down Expand Up @@ -678,7 +705,15 @@ class PhraseMaker {
// An extra row for the note and tuplet values
ptmTableRow = ptmTable.insertRow();
ptmCell = ptmTableRow.insertCell();
ptmTableRow.setAttribute('id', 'bottomRow');
ptmTableRow.style.position = "sticky";
ptmTableRow.style.bottom = '0px';
ptmTableRow.style.zIndex = '1';

ptmCell.setAttribute("colspan", "2");
ptmCell.style.position = "sticky";
ptmCell.style.left = '1.2px';
ptmCell.style.zIndex = '1';
ptmCell.className = "headcol"; // This cell is fixed horizontally.

tempTable = document.createElement("table");
Expand Down Expand Up @@ -2231,6 +2266,7 @@ class PhraseMaker {
console.debug("pushing " + obj[1] + " " + last(this.rowLabels));
this._sortedRowMap.push(last(this._sortedRowMap) + 1);
lastObj = i;
this.stylePhraseMaker();
}

this.rowLabels.push(obj[1]);
Expand Down
8 changes: 6 additions & 2 deletions js/widgets/widgetWindows.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,9 @@ class WidgetWindow {
if (this._rolled) this.unroll();
else this._rollup();
this.takeFocus();

this._frame.style.width = "auto";
this._frame.style.height = "auto";
this._frame.style.minHeight = "0px";
e.preventDefault();
e.stopPropagation();
};
Expand Down Expand Up @@ -381,7 +383,7 @@ class WidgetWindow {
const siblings = windows.children;
for (let i = 0; i < siblings.length; i++) {
siblings[i].style.zIndex = "0";
siblings[i].style.opacity = ".7";
siblings[i].style.opacity = "0";
}

// When in focus, the zIndex of the help must be the highest. Even greater than the input search display block
Expand Down Expand Up @@ -454,6 +456,8 @@ class WidgetWindow {
this._overlay(false);
this._frame.style.width = "auto";
this._frame.style.height = "auto";
this._frame.style.minHeight = "420px";
this._frame.style.minWidth = "470px";
}

/**
Expand Down

0 comments on commit 03b419c

Please sign in to comment.