Mirror
/
CyberChef
mirror of https://github.com/gchq/CyberChef.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed CSS for maximising output pane

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 id="recipe" class="split split-horizontal no-select">
<div class="title no-select"> <div class="title no-select">
Recipe 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"> <button type="button" class="btn btn-primary bmd-btn-icon" id="save" data-toggle="tooltip" title="Save recipe">
<i class="material-icons">save</i> <i class="material-icons">save</i>
</button> </button>
@ -190,7 +190,7 @@
</div> </div>
<ul id="rec-list" class="list-area no-select"></ul> <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"> <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"> <button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe">
Step Step
@ -217,7 +217,10 @@
<div id="input" class="split no-select"> <div id="input" class="split no-select">
<div class="title no-select"> <div class="title no-select">
<label for="input-text">Input</label> <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"> <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> <i class="material-icons">add</i>
</button> </button>
@ -236,9 +239,7 @@
<i class="material-icons">view_compact</i> <i class="material-icons">view_compact</i>
</button> </button>
</span> </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>
<div id="input-tabs-wrapper" style="display: none;" class="no-select"> <div id="input-tabs-wrapper" style="display: none;" class="no-select">
<span id="btn-previous-input-tab" class="input-tab-buttons"> <span id="btn-previous-input-tab" class="input-tab-buttons">
@ -288,7 +289,10 @@
<div id="output" class="split"> <div id="output" class="split">
<div class="title no-select"> <div class="title no-select">
<label for="output-text">Output</label> <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"> <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> <i class="material-icons">archive</i>
</button> </button>
@ -308,9 +312,7 @@
<i class="material-icons">fullscreen</i> <i class="material-icons">fullscreen</i>
</button> </button>
</span> </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"> <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"> <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" /> <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); line-height: calc(var(--title-height) - 14px);
} }
.title>span, .pane-controls {
.title>.btn { position: absolute;
margin-top: -4px; right: 8px;
top: 8px;
display: flex;
flex-direction: row;
}
.pane-controls .btn {
margin-left: 2px;
} }
.list-area { .list-area {
@ -107,4 +114,4 @@
#files .card-header .float-right a:hover { #files .card-header .float-right a:hover {
text-decoration: none; text-decoration: none;
} }

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

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

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

@ -280,9 +280,8 @@
} }
.io-info { .io-info {
margin-right: 20px; margin-right: 18px;
margin-top: 1px; margin-top: 1px;
float: right;
height: 30px; height: 30px;
text-align: right; text-align: right;
line-height: 12px; 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; const el = e.target.id === "maximise-output" ? e.target : e.target.parentNode;
if (el.getAttribute("data-original-title").indexOf("Maximise") === 0) { if (el.getAttribute("data-original-title").indexOf("Maximise") === 0) {
document.body.classList.add("output-maximised");
this.app.initialiseSplitter(true); this.app.initialiseSplitter(true);
this.app.columnSplitter.collapse(0); this.app.columnSplitter.collapse(0);
this.app.columnSplitter.collapse(1); this.app.columnSplitter.collapse(1);
@ -1381,6 +1382,7 @@ class OutputWaiter {
$(el).attr("data-original-title", "Restore output pane"); $(el).attr("data-original-title", "Restore output pane");
el.querySelector("i").innerHTML = "fullscreen_exit"; el.querySelector("i").innerHTML = "fullscreen_exit";
} else { } else {
document.body.classList.remove("output-maximised");
$(el).attr("data-original-title", "Maximise output pane"); $(el).attr("data-original-title", "Maximise output pane");
el.querySelector("i").innerHTML = "fullscreen"; el.querySelector("i").innerHTML = "fullscreen";
this.app.initialiseSplitter(false); this.app.initialiseSplitter(false);