diff --git a/src/css/hues-editor.css b/src/css/hues-editor.css index c6c15e1..d435439 100644 --- a/src/css/hues-editor.css +++ b/src/css/hues-editor.css @@ -169,7 +169,10 @@ } #edit-controls { + display: flex; + justify-content: space-between; height: 25px !important; + margin: 0 20px; } #edit-waveform { diff --git a/src/js/HuesEditor.js b/src/js/HuesEditor.js index 59c1ea1..599991d 100644 --- a/src/js/HuesEditor.js +++ b/src/js/HuesEditor.js @@ -798,11 +798,6 @@ HuesEditor.prototype.uiCreateControls = function() { controls.id = "edit-controls"; this.root.appendChild(controls); - var playRateLab = document.createElement("span"); - playRateLab.className = "settings-individual"; - playRateLab.textContent = "1.00x"; - controls.appendChild(playRateLab); - var changeRate = function(change) { var rate = this.core.soundManager.playbackRate; rate += change; @@ -812,17 +807,28 @@ HuesEditor.prototype.uiCreateControls = function() { playRateLab.textContent = newRate.toFixed(2) + "x"; } + var speedControl = document.createElement("div"); + controls.appendChild(speedControl); + // BACKWARD - var speedDown = this.createButton("", controls, false, "hues-icon"); + var speedDown = this.createButton("", speedControl, false, "hues-icon"); speedDown.onclick = changeRate.bind(this, -0.25); // FORWARD - var speedUp = this.createButton("", controls, false, "hues-icon"); + var speedUp = this.createButton("", speedControl, false, "hues-icon"); speedUp.onclick = changeRate.bind(this, 0.25); + + var playRateLab = document.createElement("span"); + playRateLab.className = "settings-individual"; + playRateLab.textContent = "1.00x"; + speedControl.appendChild(playRateLab); + + var wrapControl = document.createElement("div"); + controls.appendChild(wrapControl); var wrapLab = document.createElement("span"); wrapLab.className = "settings-individual"; wrapLab.textContent = "New line at beat "; - controls.appendChild(wrapLab); + wrapControl.appendChild(wrapLab); var wrapAt = document.createElement("input"); wrapAt.className = "settings-input"; @@ -839,7 +845,7 @@ HuesEditor.prototype.uiCreateControls = function() { this.reflow(this.loopEdit, this.song.rhythm); }; - controls.appendChild(wrapAt); + wrapControl.appendChild(wrapAt); }; HuesEditor.prototype.uiCreateVisualiser = function() {