mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-05-08 15:25:01 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

[#181] resolve lingering layout issues window resizing, update todos

Browse source
This commit is contained in:
Robin Scholtes 2023-04-19 22:25:23 +12:00
parent bc12a194a0
commit c779d39a2b
3 changed files with 38 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/web/App.mjs
View file

@ -298,37 +298,51 @@ class App {
* @param {boolean} [minimise=false] - Set this flag if attempting to minimise frames to 0 width
*/
initialiseSplitter(minimise=false) {
if (this.columnSplitter) this.columnSplitter.destroy();
if (this.ioSplitter) this.ioSplitter.destroy();
if ( window.innerWidth < this.breakpoint ){
this.setMobileLayout();
} else {
this.columnSplitter = Split(["#operations", "#recipe", "#IO"], {
sizes: [20, 30, 50],
minSize: minimise ? [0, 0, 0] : [240, 310, 450],
gutterSize: 4,
expandToMin: true,
onDrag: debounce(function() {
this.adjustComponentSizes();
}, 50, "dragSplitter", this, [])
});
this.ioSplitter = Split(["#input", "#output"], {
direction: "vertical",
gutterSize: 4,
minSize: minimise ? [0, 0] : [100, 100]
});
this.adjustComponentSizes();
this.setDesktopLayout(minimise);
}
}
/**
* Set mobile splitter UI ( there is some code repetition in regard to the splitters above, but
* I think the tradeoff for ease of (DevX) use is worth it )
* Set desktop layout
*/
setDesktopLayout(minimise){
if (this.columnSplitter) this.columnSplitter.destroy();
if (this.ioSplitter) this.ioSplitter.destroy();
this.columnSplitter = Split(["#operations", "#recipe", "#IO"], {
sizes: [20, 30, 50],
minSize: minimise ? [0, 0, 0] : [240, 310, 450],
gutterSize: 4,
expandToMin: true,
onDrag: debounce(function() {
this.adjustComponentSizes();
}, 50, "dragSplitter", this, [])
});
this.ioSplitter = Split(["#input", "#output"], {
direction: "vertical",
gutterSize: 4,
minSize: minimise ? [0, 0] : [100, 100]
});
this.adjustComponentSizes();
}
/**
* Set mobile layout.
*
* A note: there is some code repetition here ( re setDesktopLayout ),
* but I found some lingering gutters or odd behaviour on window resizing that is
* resolved by always destroying splitters. Now setDesktopLayout and setMobileLayout
* can be called on window resizing events and the switch gets handled smoothly.
*/
setMobileLayout() {
if (this.columnSplitter) this.columnSplitter.destroy();
if (this.ioSplitter) this.ioSplitter.destroy();
this.columnSplitter = Split(["#operations", "#recipe", "#IO"], {
sizes: [100, 100, 100],
minSize: [0, 0, 0],