mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-04-23 16:26:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Output buttons now adjust when there is limited screen space.

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

8
src/html/index.html
View file

@ -114,10 +114,10 @@
<div class="title no-select">
Output
<div class="btn-group io-btn-group">
<button type="button" class="btn btn-default btn-sm" id="save-to-file"><img src="images/save_as-16x16.png" /> Save to file</button>
<button type="button" class="btn btn-default btn-sm" id="switch"><img src="images/switch-16x16.png" /> Move output to input</button>
<button type="button" class="btn btn-default btn-sm" id="undo-switch" disabled="disabled"><img src="images/undo-16x16.png" /> Undo</button>
<button type="button" class="btn btn-default btn-sm" id="maximise-output"><img src="images/maximise-16x16.png" /> Max</button>
<button type="button" class="btn btn-default btn-sm" id="save-to-file" title="Save to file"><img src="images/save_as-16x16.png" /> Save to file</button>
<button type="button" class="btn btn-default btn-sm" id="switch" title="Move output to input"><img src="images/switch-16x16.png" /> Move output to input</button>
<button type="button" class="btn btn-default btn-sm" id="undo-switch" title="Undo move" disabled="disabled"><img src="images/undo-16x16.png" /> Undo</button>
<button type="button" class="btn btn-default btn-sm" id="maximise-output" title="Maximise"><img src="images/maximise-16x16.png" /> Max</button>
</div>
<div class="io-info" id="output-info"></div>
<div class="io-info" id="output-selection-info"></div>

8
src/js/views/html/HTMLApp.js
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();
};

37
src/js/views/html/OutputWaiter.js
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();
}
};

6
src/static/stats.txt
View file

@ -1,9 +1,9 @@
206 source files
113322 lines
113355 lines
4.2M size
137 JavaScript source files
104164 lines
104197 lines
3.7M size
79 third party JavaScript source files
@ -11,7 +11,7 @@
3.0M size
58 first party JavaScript source files
19112 lines
19145 lines
724K size
3.4M uncompressed JavaScript size