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

Move the tab buttons onto the tab bar

This commit is contained in:
j433866 2019-04-04 10:57:01 +01:00
parent b90cca77a9
commit de21f14fd8
2 changed files with 51 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -229,7 +229,7 @@
<div class="title no-select">
<label for="input-text">Input</label>
<span class="float-right">
<button type="button" class="btn btn-primary bmd-btn-icon input-tab-buttons" id="btn-previous-input-tab" data-toggle="tooltip" title="Go to the previous tab">
<!-- <button type="button" class="btn btn-primary bmd-btn-icon input-tab-buttons" id="btn-previous-input-tab" data-toggle="tooltip" title="Go to the previous tab">
<i class="material-icons">keyboard_arrow_left</i>
</button>
<button type="button" class="btn btn-primary bmd-btn-icon input-tab-buttons" id="btn-go-to-input-tab" data-toggle="tooltip" title="Go to a specific tab">
@ -237,7 +237,7 @@
</button>
<button type="button" class="btn btn-primary bmd-btn-icon input-tab-buttons" id="btn-next-input-tab" data-toggle="tooltip" title="Go to the next tab">
<i class="material-icons">keyboard_arrow_right</i>
</button>
</button> -->
<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>
@ -257,6 +257,15 @@
<div class="io-info" id="input-selection-info"></div>
</div>
<div id="input-tabs-wrapper" style="display: none;">
<span id="btn-previous-input-tab" class="input-tab-buttons">
&lt;
</span>
<span id="btn-go-to-input-tab" class="input-tab-buttons">
···
</span>
<span id="btn-next-input-tab" class="input-tab-buttons">
&gt;
</span>
<ul id="input-tabs">
</ul>
</div>
@ -285,16 +294,7 @@
<div class="title no-select">
<label for="output-text">Output</label>
<span class="float-right">
<button type="button" class="btn btn-primary bmd-btn-icon output-tab-buttons" id="btn-previous-output-tab" data-toggle="tooltip" title="Go to the previous tab">
<i class="material-icons">keyboard_arrow_left</i>
</button>
<button type="button" class="btn btn-primary bmd-btn-icon output-tab-buttons" id="btn-go-to-output-tab" data-toggle="tooltip" title="Go to a specific tab">
<i class="material-icons">more_horiz</i>
</button>
<button type="button" class="btn btn-primary bmd-btn-icon output-tab-buttons" id="btn-next-output-tab" data-toggle="tooltip" title="Go to the next tab">
<i class="material-icons">keyboard_arrow_right</i>
</button>
<button type="button" class="btn btn-primary bmd-btn-icon output-tab-buttons" id="save-all-to-file" data-toggle="tooltip" title="Save all outputs to a file">
<button type="button" class="btn btn-primary bmd-btn-icon" id="save-all-to-file" data-toggle="tooltip" title="Save all outputs to a file">
<i class="material-icons">archive</i>
</button>
<button type="button" class="btn btn-primary bmd-btn-icon" id="save-to-file" data-toggle="tooltip" title="Save output to file">
@ -327,6 +327,15 @@
</div>
<div id="output-wrapper">
<div id="output-tabs-wrapper" style="display: none">
<span id="btn-previous-output-tab" class="output-tab-buttons">
&lt;
</span>
<span id="btn-go-to-output-tab" class="output-tab-buttons">
···
</span>
<span id="btn-next-output-tab" class="output-tab-buttons">
&gt;
</span>
<ul id="output-tabs">
</ul>
</div>

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

@ -56,7 +56,10 @@
display: flex;
flex-direction: row;
border-bottom: 1px solid var(--primary-border-colour);
border-left: 1px solid var(--primary-border-colour);
height: var(--tab-height);
width: calc(100% - 75px);
clear: none;
}
#input-tabs li,
@ -87,8 +90,33 @@
.input-tab-buttons,
.output-tab-buttons {
transition: 1s all ease;
display: none;
width: 25px;
text-align: center;
margin: 0;
height: var(--tab-height);
line-height: var(--tab-height);
font-weight: bold;
background-color: var(--title-background-colour);
border-bottom: 1px solid var(--primary-border-colour);
}
.input-tab-buttons:hover,
.output-tab-buttons:hover {
cursor: pointer;
background-color: var(--primary-background-colour);
}
#btn-next-input-tab,
#btn-go-to-input-tab,
#btn-next-output-tab,
#btn-go-to-output-tab {
float: right;
}
#btn-previous-input-tab,
#btn-previous-output-tab {
float: left;
}
.input-tab-content,