Mirror/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2024-11-02 06:01:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fixed CSS for maximising output pane

Browse Source
This commit is contained in:
n1474335 2022-05-30 19:25:41 +01:00
parent cc9d51b7be
commit ec577fc075
5 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/web/html/index.html
View File

@ -176,7 +176,7 @@
<div id="recipe" class="split split-horizontal no-select">
<div class="title no-select">
Recipe
<span class="float-right">
<span class="pane-controls hide-on-maximised-output">
<button type="button" class="btn btn-primary bmd-btn-icon" id="save" data-toggle="tooltip" title="Save recipe">
<i class="material-icons">save</i>
</button>
@ -190,7 +190,7 @@
</div>
<ul id="rec-list" class="list-area no-select"></ul>
<div id="controls" class="no-select">
<div id="controls" class="no-select hide-on-maximised-output">
<div id="controls-content" class="d-flex align-items-center">
<button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe">
Step
@ -217,7 +217,10 @@
<div id="input" class="split no-select">
<div class="title no-select">
<label for="input-text">Input</label>
<span class="float-right">
<span class="pane-controls">
<div class="io-info" id="input-files-info"></div>
<div class="io-info" id="input-selection-info"></div>
<div class="io-info" id="input-info"></div>
<button type="button" class="btn btn-primary bmd-btn-icon" id="btn-new-tab" data-toggle="tooltip" title="Add a new input tab">
<i class="material-icons">add</i>
</button>
@ -236,9 +239,7 @@
<i class="material-icons">view_compact</i>
</button>
</span>
<div class="io-info" id="input-files-info"></div>
<div class="io-info" id="input-info"></div>
<div class="io-info" id="input-selection-info"></div>
</div>
<div id="input-tabs-wrapper" style="display: none;" class="no-select">
<span id="btn-previous-input-tab" class="input-tab-buttons">
@ -288,7 +289,10 @@
<div id="output" class="split">
<div class="title no-select">
<label for="output-text">Output</label>
<span class="float-right">
<span class="pane-controls">
<div class="io-info" id="bake-info"></div>
<div class="io-info" id="output-selection-info"></div>
<div class="io-info" id="output-info"></div>
<button type="button" class="btn btn-primary bmd-btn-icon" id="save-all-to-file" data-toggle="tooltip" title="Save all outputs to a zip file" style="display: none">
<i class="material-icons">archive</i>
</button>
@ -308,9 +312,7 @@
<i class="material-icons">fullscreen</i>
</button>
</span>
<div class="io-info" id="bake-info"></div>
<div class="io-info" id="output-info"></div>
<div class="io-info" id="output-selection-info"></div>
<button type="button" class="btn btn-primary bmd-btn-icon hidden" id="magic" data-toggle="tooltip" title="Magic!" data-html="true">
<svg width="22" height="22" viewBox="0 0 24 24">
<path d="M7.5,5.6L5,7L6.4,4.5L5,2L7.5,3.4L10,2L8.6,4.5L10,7L7.5,5.6M19.5,15.4L22,14L20.6,16.5L22,19L19.5,17.6L17,19L18.4,16.5L17,14L19.5,15.4M22,2L20.6,4.5L22,7L19.5,5.6L17,7L18.4,4.5L17,2L19.5,3.4L22,2M13.34,12.78L15.78,10.34L13.66,8.22L11.22,10.66L13.34,12.78M14.37,7.29L16.71,9.63C17.1,10 17.1,10.65 16.71,11.04L5.04,22.71C4.65,23.1 4,23.1 3.63,22.71L1.29,20.37C0.9,20 0.9,19.35 1.29,18.96L12.96,7.29C13.35,6.9 14,6.9 14.37,7.29Z" />

15
src/web/stylesheets/components/_pane.css
View File

@ -24,9 +24,16 @@
line-height: calc(var(--title-height) - 14px);
}
.title>span,
.title>.btn {
margin-top: -4px;
.pane-controls {
position: absolute;
right: 8px;
top: 8px;
display: flex;
flex-direction: row;
}
.pane-controls .btn {
margin-left: 2px;
}
.list-area {
@ -107,4 +114,4 @@
#files .card-header .float-right a:hover {
text-decoration: none;
}
}

4
src/web/stylesheets/layout/_controls.css
View File

@ -58,6 +58,10 @@
border-radius: 30px;
}
.output-maximised .hide-on-maximised-output {
display: none !important;
}
.spin {
animation-name: spin;
animation-duration: 3s;

3
src/web/stylesheets/layout/_io.css
View File

@ -280,9 +280,8 @@
}
.io-info {
margin-right: 20px;
margin-right: 18px;
margin-top: 1px;
float: right;
height: 30px;
text-align: right;
line-height: 12px;

2
src/web/waiters/OutputWaiter.mjs
View File

@ -1373,6 +1373,7 @@ class OutputWaiter {
const el = e.target.id === "maximise-output" ? e.target : e.target.parentNode;
if (el.getAttribute("data-original-title").indexOf("Maximise") === 0) {
document.body.classList.add("output-maximised");
this.app.initialiseSplitter(true);
this.app.columnSplitter.collapse(0);
this.app.columnSplitter.collapse(1);
@ -1381,6 +1382,7 @@ class OutputWaiter {
$(el).attr("data-original-title", "Restore output pane");
el.querySelector("i").innerHTML = "fullscreen_exit";
} else {
document.body.classList.remove("output-maximised");
$(el).attr("data-original-title", "Maximise output pane");
el.querySelector("i").innerHTML = "fullscreen";
this.app.initialiseSplitter(false);