Output buttons now adjust when there is limited screen space.

This commit is contained in:
n1474335 2016-12-21 12:13:03 +00:00
parent 9c1fb7ddf4
commit e1ef228575
7 changed files with 55 additions and 22 deletions

View file

@ -207,9 +207,12 @@ HTMLApp.prototype.populate_operations_list = function() {
HTMLApp.prototype.initialise_splitter = function() {
this.column_splitter = Split(["#operations", "#recipe", "#IO"], {
sizes: [20, 30, 50],
minSize: [240, 325, 500],
minSize: [240, 325, 440],
gutterSize: 4,
onDrag: this.manager.controls.adjust_width.bind(this.manager.controls)
onDrag: function() {
this.manager.controls.adjust_width();
this.manager.output.adjust_width();
}.bind(this)
});
this.io_splitter = Split(["#input", "#output"], {
@ -467,6 +470,7 @@ HTMLApp.prototype.reset_layout = function() {
this.io_splitter.setSizes([50, 50]);
this.manager.controls.adjust_width();
this.manager.output.adjust_width();
};

View file

@ -95,6 +95,32 @@ OutputWaiter.prototype.set_output_info = function(length, lines, duration) {
};
/**
* Adjusts the display properties of the output buttons so that they fit within the current width
* without wrapping or overflowing.
*/
OutputWaiter.prototype.adjust_width = function() {
var output = document.getElementById("output"),
save_to_file = document.getElementById("save-to-file"),
switch_io = document.getElementById("switch"),
undo_switch = document.getElementById("undo-switch"),
maximise_output = document.getElementById("maximise-output");
if (output.clientWidth < 680) {
save_to_file.childNodes[1].nodeValue = "";
switch_io.childNodes[1].nodeValue = "";
undo_switch.childNodes[1].nodeValue = "";
maximise_output.childNodes[1].nodeValue = "";
} else {
save_to_file.childNodes[1].nodeValue = " Save to file";
switch_io.childNodes[1].nodeValue = " Move output to input";
undo_switch.childNodes[1].nodeValue = " Undo";
maximise_output.childNodes[1].nodeValue =
maximise_output.getAttribute("title") === "Maximise" ? " Max" : " Restore";
}
};
/**
* Handler for save click events.
* Saves the current output to a file, downloaded as a URL octet stream.
@ -144,16 +170,19 @@ OutputWaiter.prototype.undo_switch_click = function() {
* Resizes the output frame to be as large as possible, or restores it to its original size.
*/
OutputWaiter.prototype.maximise_output_click = function(e) {
var el = e.target;
if (el.textContent.indexOf("Max") >= 0) {
var el = e.target.id === "maximise-output" ? e.target : e.target.parentNode;
if (el.getAttribute("title") === "Maximise") {
this.app.column_splitter.collapse(0);
this.app.column_splitter.collapse(1);
this.app.io_splitter.collapse(0);
el.setAttribute("title", "Restore");
el.innerHTML = "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAlUlEQVQ4y93RwQpBQRQG4C9ba1fxBteGPIj38BTejFJKLFnwCJIiCsW1mcV0k9yx82/OzGK+OXMGOpiiLTFjFNiilQI0sQ7IJiAjLKsgGVYB2YdaVO0kwy46/BVQi9ZDNPyQWen2ub/KufS8y7shfkq9tF9U7SC+/YluKvAI9YZeFeCECXJcA3JHP2WgMXJM/ZUcBwxeM+YuSWTgMtUAAAAASUVORK5CYII='> Restore";
this.adjust_width();
} else {
this.app.reset_layout();
el.setAttribute("title", "Maximise");
el.innerHTML = "<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAi0lEQVQ4y83TMQrCQBCF4S+5g4rJEdJ7KE+RQ1lrIQQCllroEULuoM0Ww3a7aXwwLAzMPzDvLcz4hnooUItT1rsoVNy+4lgLWNL7RlcCmDBij2eCfNCrUITc0dRCrhj8m5otw0O6SV8LuAV3uhrAAa8sJ2Np7KPFawhgscVLjH9bCDhjt8WNKft88w/HjCvuVqu53QAAAABJRU5ErkJggg=='> Max";
this.app.reset_layout();
}
};