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

Updated buttons, fonts and collapse

This commit is contained in:
n1474335 2018-03-02 16:30:20 +00:00
parent 5a7bb092c7
commit bcc8804495
8 changed files with 44 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/web/ControlsWaiter.js
View File

@ -105,9 +105,9 @@ ControlsWaiter.prototype.autoBakeChange = function() {
if (autoBakeCheckbox.checked) {
autoBakeLabel.classList.add("btn-success");
autoBakeLabel.classList.remove("btn-default");
autoBakeLabel.classList.remove("btn-secondary");
} else {
autoBakeLabel.classList.add("btn-default");
autoBakeLabel.classList.add("btn-secondary");
autoBakeLabel.classList.remove("btn-success");
}
};

13
src/web/HTMLCategory.js
View File

@ -33,13 +33,12 @@ HTMLCategory.prototype.addOperation = function(operation) {
*/
HTMLCategory.prototype.toHtml = function() {
const catName = "cat" + this.name.replace(/[\s/-:_]/g, "");
let html = "<div class='panel category'>\
<a class='category-title' data-toggle='collapse'\
data-parent='#categories' href='#" + catName + "'>\
" + this.name + "\
</a>\
<div id='" + catName + "' class='panel-collapse collapse\
" + (this.selected ? " in" : "") + "'><ul class='op-list'>";
let html = `<div class="panel category">
<a class="category-title" data-toggle="collapse" data-parent="#categories" href="#${catName}">
${this.name}
</a>
<div id="${catName}" class="panel-collapse collapse ${(this.selected ? " show" : "")}">
<ul class="op-list">`;
for (let i = 0; i < this.opList.length; i++) {
html += this.opList[i].toStubHtml();

2
src/web/HTMLIngredient.js
View File

@ -62,7 +62,7 @@ HTMLIngredient.prototype.toHtml = function() {
break;
case "toggleString":
html += "<div class='input-group'><div class='input-group-btn'>\
<button type='button' class='btn btn-default dropdown-toggle' data-toggle='dropdown'\
<button type='button' class='btn btn-secondary dropdown-toggle' data-toggle='dropdown'\
aria-haspopup='true' aria-expanded='false'" +
(this.disabled ? " disabled='disabled'" : "") + ">" + this.toggleValues[0] +
" <span class='caret'></span></button><ul class='dropdown-menu'>";

2
src/web/OperationsWaiter.js
View File

@ -78,7 +78,7 @@ OperationsWaiter.prototype.searchOperations = function(e) {
searchResultsEl.removeChild(searchResultsEl.firstChild);
}
$("#categories .in").collapse("hide");
$("#categories .show").collapse("hide");
if (str) {
const matchedOps = this.filterOperations(str, true);
const matchedOpsHtml = matchedOps

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

@ -102,7 +102,7 @@
<div id="preloader-msg" class="loading-msg"></div>
</div>
<!-- End preloader overlay -->
<span id="edit-favourites" class="btn btn-default btn-sm"><img aria-hidden="true" src="<%- require('../static/images/favourite-16x16.png') %>" alt="Star Icon"/> Edit</span>
<span id="edit-favourites" class="btn btn-secondary btn-sm"><img aria-hidden="true" src="<%- require('../static/images/favourite-16x16.png') %>" alt="Star Icon"/> Edit</span>
<div id="alert" class="alert alert-danger">
<button type="button" class="close" id="alert-close">&times;</button>
<span id="alert-content"></span>
@ -159,15 +159,15 @@
</div>
<div class="btn-group" style="padding-top: 10px;">
<button type="button" class="btn btn-default" id="step"><img aria-hidden="true" src="<%- require('../static/images/step-16x16.png') %>" alt="Footstep Icon"/> Step through</button>
<button type="button" class="btn btn-default" id="clr-breaks"><img aria-hidden="true" src="<%- require('../static/images/erase-16x16.png') %>" alt="Eraser Icon"/> Clear breakpoints</button>
<button type="button" class="btn btn-secondary" id="step"><img aria-hidden="true" src="<%- require('../static/images/step-16x16.png') %>" alt="Footstep Icon"/> Step through</button>
<button type="button" class="btn btn-secondary" id="clr-breaks"><img aria-hidden="true" src="<%- require('../static/images/erase-16x16.png') %>" alt="Eraser Icon"/> Clear breakpoints</button>
</div>
</div>
<div class="btn-group-vertical" id="extra-controls">
<button type="button" class="btn btn-default" id="save"><img aria-hidden="true" src="<%- require('../static/images/save-16x16.png') %>" alt="Save Icon"/> Save recipe</button>
<button type="button" class="btn btn-default" id="load"><img aria-hidden="true" src="<%- require('../static/images/open_yellow-16x16.png') %>" alt="Open Icon"/> Load recipe</button>
<button type="button" class="btn btn-default" id="clr-recipe"><img aria-hidden="true" src="<%- require('../static/images/clean-16x16.png') %>" alt="Broom Icon"/> Clear recipe</button>
<button type="button" class="btn btn-secondary" id="save"><img aria-hidden="true" src="<%- require('../static/images/save-16x16.png') %>" alt="Save Icon"/> Save recipe</button>
<button type="button" class="btn btn-secondary" id="load"><img aria-hidden="true" src="<%- require('../static/images/open_yellow-16x16.png') %>" alt="Open Icon"/> Load recipe</button>
<button type="button" class="btn btn-secondary" id="clr-recipe"><img aria-hidden="true" src="<%- require('../static/images/clean-16x16.png') %>" alt="Broom Icon"/> Clear recipe</button>
</div>
</div>
</div>
@ -177,8 +177,8 @@
<div class="title no-select">
<label for="input-text">Input</label>
<div class="btn-group io-btn-group">
<button type="button" class="btn btn-default btn-sm" id="clr-io"><img aria-hidden="true" src="<%- require('../static/images/recycle-16x16.png') %>" alt="Recycle Icon"/> Clear I/O</button>
<button type="button" class="btn btn-default btn-sm" id="reset-layout"><img aria-hidden="true" src="<%- require('../static/images/layout-16x16.png') %>" alt="Grid Icon"/> Reset layout</button>
<button type="button" class="btn btn-secondary btn-sm" id="clr-io"><img aria-hidden="true" src="<%- require('../static/images/recycle-16x16.png') %>" alt="Recycle Icon"/> Clear I/O</button>
<button type="button" class="btn btn-secondary btn-sm" id="reset-layout"><img aria-hidden="true" src="<%- require('../static/images/layout-16x16.png') %>" alt="Grid Icon"/> Reset layout</button>
</div>
<div class="io-info" id="input-info"></div>
<div class="io-info" id="input-selection-info"></div>
@ -208,11 +208,11 @@
<div class="title no-select">
<label for="output-text">Output</label>
<div class="btn-group io-btn-group">
<button type="button" class="btn btn-default btn-sm" id="save-to-file" title="Save to file"><img aria-hidden="true" src="<%- require('../static/images/save_as-16x16.png') %>" alt="Save Icon"/> Save to file</button>
<button type="button" class="btn btn-default btn-sm" id="copy-output" title="Copy output"><img aria-hidden="true" src="<%- require('../static/images/copy-16x16.png') %>" alt="Copy Icon"/> Copy raw output</button>
<button type="button" class="btn btn-default btn-sm" id="switch" title="Move output to input"><img aria-hidden="true" src="<%- require('../static/images/switch-16x16.png') %>" alt="Switch Icon"/> Move output to input</button>
<button type="button" class="btn btn-default btn-sm" id="undo-switch" title="Undo move" disabled="disabled"><img aria-hidden="true" src="<%- require('../static/images/undo-16x16.png') %>" alt="Undo Icon"/> Undo</button>
<button type="button" class="btn btn-default btn-sm" id="maximise-output" title="Maximise"><img aria-hidden="true" src="<%- require('../static/images/maximise-16x16.png') %>" alt="Maximise Icon"/> Max</button>
<button type="button" class="btn btn-secondary btn-sm" id="save-to-file" title="Save to file"><img aria-hidden="true" src="<%- require('../static/images/save_as-16x16.png') %>" alt="Save Icon"/> Save to file</button>
<button type="button" class="btn btn-secondary btn-sm" id="copy-output" title="Copy output"><img aria-hidden="true" src="<%- require('../static/images/copy-16x16.png') %>" alt="Copy Icon"/> Copy raw output</button>
<button type="button" class="btn btn-secondary btn-sm" id="switch" title="Move output to input"><img aria-hidden="true" src="<%- require('../static/images/switch-16x16.png') %>" alt="Switch Icon"/> Move output to input</button>
<button type="button" class="btn btn-secondary btn-sm" id="undo-switch" title="Undo move" disabled="disabled"><img aria-hidden="true" src="<%- require('../static/images/undo-16x16.png') %>" alt="Undo Icon"/> Undo</button>
<button type="button" class="btn btn-secondary btn-sm" id="maximise-output" title="Maximise"><img aria-hidden="true" src="<%- require('../static/images/maximise-16x16.png') %>" alt="Maximise Icon"/> Max</button>
</div>
<div class="io-info" id="output-info"></div>
<div class="io-info" id="output-selection-info"></div>
@ -233,7 +233,7 @@
<button id="output-file-download" type="button" class="btn btn-primary">Download</button>
<div class="input-group">
<span class="input-group-btn">
<button id="output-file-slice" type="button" class="btn btn-default" title="View slice">&#x1f50d;</button>
<button id="output-file-slice" type="button" class="btn btn-secondary" title="View slice">&#x1f50d;</button>
</span>
<input type="number" class="form-control" id="output-file-slice-from" placeholder="From" value="0" step="1024" min="0">
<div class="input-group-addon">to</div>
@ -287,7 +287,7 @@
</div>
<div class="modal-footer" id="save-footer">
<button type="button" class="btn btn-primary" id="save-button" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Done</button>
</div>
<div class="modal-body">
<div class="form-group" id="save-link-group">
@ -324,7 +324,7 @@
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="load-button" data-dismiss="modal">Load</button>
<button type="button" class="btn btn-danger" id="load-delete-button">Delete</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
@ -392,8 +392,8 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="reset-options">Reset options to default</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary" id="reset-options">Reset options to default</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
@ -418,7 +418,7 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="reset-favourites">Reset favourites to default</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="reset-favourites">Reset favourites to default</button>
<button type="button" class="btn btn-success" data-dismiss="modal" id="save-favourites">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
@ -549,7 +549,7 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
<a href="https://github.com/gchq/CyberChef">
<img aria-hidden="true" style="position: absolute; top: 0; right: 0; border: 0;" src="<%- require('../static/images/fork_me.png') %>" alt="Fork me on GitHub">

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

@ -7,7 +7,7 @@
*/
:root {
--controls-height: 120px;
--controls-height: 130px;
--controls-division: 65%;
}

6
src/web/stylesheets/themes/_classic.css
View File

@ -8,12 +8,14 @@
:root,
:root.classic {
--primary-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
--primary-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
--primary-font-colour: #333;
--primary-font-size: 14px;
--primary-line-height: 20px;
--fixed-width-font-family: "Consolas", monospace;
--fixed-width-font-family: SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
--fixed-width-font-colour: inherit;
--fixed-width-font-size: inherit;

18
src/web/stylesheets/utils/_overrides.css
View File

@ -13,30 +13,30 @@ a:focus {
outline: none;
}
.btn-default {
.btn-secondary {
color: var(--btn-default-font-colour);
background-color: var(--btn-default-bg-colour);
border-color: var(--btn-default-border-colour);
}
.btn-default:hover,
.btn-default:active,
.btn-default:hover:active,
.open>.dropdown-toggle.btn-default {
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:hover:active,
.open>.dropdown-toggle.btn-secondary {
color: var(--btn-default-hover-font-colour);
background-color: var(--btn-default-hover-bg-colour);
border-color: var(--btn-default-hover-border-colour);
}
.btn-default:focus,
.open>.dropdown-toggle.btn-default:hover,
.open>.dropdown-toggle.btn-default:focus {
.btn-secondary:focus,
.open>.dropdown-toggle.btn-secondary:hover,
.open>.dropdown-toggle.btn-secondary:focus {
color: var(--btn-default-font-colour);
background-color: var(--btn-default-bg-colour);
border-color: var(--btn-default-hover-border-colour);
}
.btn-default[disabled]:hover {
.btn-secondary[disabled]:hover {
background-color: var(--primary-background-colour);
border-color: var(--primary-border-colour);
}