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] handle the correct resetting of layouts in any maximised pane situation, i.e. window resizing while panels are maximised etc. Prevent mobile keyboard popup window resize events to trigger layout resetting when panes are maximised, use JS to calculate the innerHeight available for mobile devices as they are of variable / unreliable / inconsistent heights

Browse source
This commit is contained in:
Robin Scholtes 2023-05-09 14:56:44 +12:00
parent f80284cb36
commit ee9ea051d1
10 changed files with 151 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/web/App.mjs
View file

@ -306,9 +306,9 @@ class App {
}
/**
* Set desktop layout
* Set desktop splitters
*/
setDesktopLayout(minimise){
setDesktopSplitter(minimise){
if (this.columnSplitter) this.columnSplitter.destroy();
if (this.ioSplitter) this.ioSplitter.destroy();
@ -327,14 +327,12 @@ class App {
gutterSize: 4,
minSize: minimise ? [0, 0] : [50, 50]
});
this.adjustComponentSizes();
}
/**
* Set mobile layout
* Set mobile splitters
*/
setMobileLayout() {
setMobileSplitter() {
if (this.columnSplitter) this.columnSplitter.destroy();
if (this.ioSplitter) this.ioSplitter.destroy();
@ -345,7 +343,6 @@ class App {
});
this.ioSplitter = Split(["#input", "#output"], {
sizes: [45,55],
direction: "vertical",
gutterSize: 0,
});
@ -875,30 +872,47 @@ class App {
}
/**
* Set desktop UI ( on init and on window resize events )
*
* @param {boolean} minimise
*/
setDesktopUI(minimise){
// enable tooltips on desktop as normal
$("[data-toggle=tooltip]").tooltip("enable");
this.setDesktopLayout(minimise);
// repopulate to enable popovers and drag events
this.setDesktopSplitter(minimise);
this.adjustComponentSizes();
this.populateOperationsList();
/**
* We don't want to display any checkmarks on desktop, so we clear them.
* It has no effect on the recipe list, it's purely a visual indicator
*/
this.manager.recipe.clearAllSelectedClasses();
}
/**
* Set mobile UI ( on init and on window resize events )
*/
setMobileUI(){
// tooltips on mobile are reducing UX, so we disable it
$("[data-toggle=tooltip]").tooltip("disable");
this.setMobileLayout();
// repopulate to disable popovers and drag events
this.setMobileSplitter();
this.divideAvailableSpace();
this.populateOperationsList();
// restore the appropriate checkmarks
this.manager.recipe.updateSelectedOperations();
}
/**
* Due to variable available heights on mobile devices ( due to the
* address bar etc. ), we need to calculate the available space and
* set some heights programmatically.
*
* The numbers 40, 70 and 90 refer to divs with fixed heights,
* that is: #banner, #operations and #controls. -2 is accounting for
* some borders.
* Be mindful to update these accordingly in the stylesheets
* ( themes/_structure ) if you want to make changes.
*/
divideAvailableSpace( isMobile ){
const remainingSpace = window.innerHeight - (40+70+90-2); // banner, operations, controls height + borders
["recipe", "input", "output"].forEach(( div ) => {
document.getElementById(div).style.height = `${remainingSpace/3}px`;
});
}
}
export default App;