mirror of https://github.com/gchq/CyberChef.git
Operation arguments are now arranged using CSS Grid
This commit is contained in:
n1474335
parent
974ab29e36
commit
ba79144036
|
|
@ -241,7 +241,10 @@ class App {
|
|||
this.columnSplitter = Split(["#operations", "#recipe", "#IO"], {
|
||||
sizes: [20, 30, 50],
|
||||
minSize: [240, 370, 450],
|
||||
gutterSize: 4
|
||||
gutterSize: 4,
|
||||
onDrag: function() {
|
||||
this.manager.recipe.adjustWidth();
|
||||
}.bind(this)
|
||||
});
|
||||
|
||||
this.ioSplitter = Split(["#input", "#output"], {
|
||||
|
|
|
|||
|
|
@ -40,10 +40,10 @@ class HTMLCategory {
|
|||
toHtml() {
|
||||
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}">
|
||||
<a class="category-title" data-toggle="collapse" data-target="#${catName}">
|
||||
${this.name}
|
||||
</a>
|
||||
<div id="${catName}" class="panel-collapse collapse ${(this.selected ? " show" : "")}">
|
||||
<div id="${catName}" class="panel-collapse collapse ${(this.selected ? " show" : "")}" data-parent="#categories">
|
||||
<ul class="op-list">`;
|
||||
|
||||
for (let i = 0; i < this.opList.length; i++) {
|
||||
|
|
|
|||
|
|
@ -205,7 +205,6 @@ class HTMLIngredient {
|
|||
default:
|
||||
break;
|
||||
}
|
||||
html += "</div>";
|
||||
|
||||
return html;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,13 +69,15 @@ class HTMLOperation {
|
|||
* @returns {string}
|
||||
*/
|
||||
toFullHtml() {
|
||||
let html = `<div class="op-title">${this.name}</div>`;
|
||||
let html = `<div class="op-title">${this.name}</div>
|
||||
<div class="ingredients">`;
|
||||
|
||||
for (let i = 0; i < this.ingList.length; i++) {
|
||||
html += this.ingList[i].toHtml();
|
||||
}
|
||||
|
||||
html += `<div class="recip-icons">
|
||||
html += `</div>
|
||||
<div class="recip-icons">
|
||||
<i class="material-icons breakpoint" title="Set breakpoint" break="false">pause</i>
|
||||
<i class="material-icons disable-icon" title="Disable operation" disabled="false">not_interested</i>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -479,6 +479,44 @@ class RecipeWaiter {
|
|||
op.insertAdjacentHTML("beforeend", registerListEl);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adjusts the number of ingredient columns as the width of the recipe changes.
|
||||
*/
|
||||
adjustWidth() {
|
||||
const recList = document.getElementById("rec-list");
|
||||
|
||||
if (!this.ingredientRuleID) {
|
||||
this.ingredientRuleID = null;
|
||||
this.ingredientChildRuleID = null;
|
||||
|
||||
// Find relevant rules in the stylesheet
|
||||
for (const i in document.styleSheets[0].cssRules) {
|
||||
if (document.styleSheets[0].cssRules[i].selectorText === ".ingredients") {
|
||||
this.ingredientRuleID = i;
|
||||
}
|
||||
if (document.styleSheets[0].cssRules[i].selectorText === ".ingredients > div") {
|
||||
this.ingredientChildRuleID = i;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.ingredientRuleID || !this.ingredientChildRuleID) return;
|
||||
|
||||
const ingredientRule = document.styleSheets[0].cssRules[this.ingredientRuleID],
|
||||
ingredientChildRule = document.styleSheets[0].cssRules[this.ingredientChildRuleID];
|
||||
|
||||
if (recList.clientWidth < 450) {
|
||||
ingredientRule.style.gridTemplateColumns = "auto auto";
|
||||
ingredientChildRule.style.gridColumn = "1 / span 2";
|
||||
} else if (recList.clientWidth < 620) {
|
||||
ingredientRule.style.gridTemplateColumns = "auto auto auto";
|
||||
ingredientChildRule.style.gridColumn = "1 / span 3";
|
||||
} else {
|
||||
ingredientRule.style.gridTemplateColumns = "auto auto auto auto";
|
||||
ingredientChildRule.style.gridColumn = "1 / span 4";
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default RecipeWaiter;
|
||||
|
|
|
|||
|
|
@ -282,7 +282,9 @@
|
|||
</span>
|
||||
<div class="io-info" id="output-info"></div>
|
||||
<div class="io-info" id="output-selection-info"></div>
|
||||
<span id="stale-indicator" title="The output is stale. The input or recipe has changed since this output was generated. Bake again to get the new value.">🕑</span>
|
||||
<span id="stale-indicator" title="The output is stale. The input or recipe has changed since this output was generated. Bake again to get the new value.">
|
||||
<i class="material-icons">access_time</i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="textarea-wrapper">
|
||||
<div id="output-highlighter" class="no-select"></div>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
|
||||
.operation {
|
||||
cursor: pointer;
|
||||
cursor: grab;
|
||||
padding: 10px;
|
||||
list-style-type: none;
|
||||
position: relative;
|
||||
|
|
@ -18,10 +18,29 @@
|
|||
border-right: none;
|
||||
}
|
||||
|
||||
#rec-list .operation {
|
||||
cursor: pointer;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.op-title {
|
||||
font-weight: var(--op-title-font-weight);
|
||||
}
|
||||
|
||||
.ingredients {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-column-gap: 14px;
|
||||
}
|
||||
|
||||
.ingredients > div {
|
||||
grid-column: 1 / span 3;
|
||||
}
|
||||
|
||||
.ingredients > div.inline {
|
||||
grid-column: unset;
|
||||
}
|
||||
|
||||
.arg {
|
||||
font-family: var(--fixed-width-font-family);
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -33,28 +52,10 @@ select.arg {
|
|||
}
|
||||
|
||||
textarea.arg {
|
||||
min-height: 68px;
|
||||
min-height: 74px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.arg.inline {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.form-group.inline {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.input-group-append.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
div.toggle-string {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -69,7 +70,8 @@ div.toggle-string {
|
|||
.operation .is-focused [class*=' bmd-label'],
|
||||
.operation .is-focused [class^='bmd-label'],
|
||||
.operation .is-focused [class*=' bmd-label'],
|
||||
.operation .is-focused label {
|
||||
.operation .is-focused label,
|
||||
.operation .checkbox label:hover {
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
.title {
|
||||
padding: 8px;
|
||||
padding-left: 20px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
height: var(--title-height);
|
||||
border-bottom: 1px solid var(--primary-border-colour);
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
font-size: var(--title-size);
|
||||
color: var(--title-colour);
|
||||
background-color: var(--title-background-colour);
|
||||
line-height: calc(var(--title-height) - 20px);
|
||||
line-height: calc(var(--title-height) - 14px);
|
||||
}
|
||||
|
||||
.list-area {
|
||||
|
|
|
|||
|
|
@ -129,11 +129,14 @@
|
|||
visibility: hidden;
|
||||
transition: all 0.3s;
|
||||
margin-left: 5px;
|
||||
font-size: larger;
|
||||
font-weight: normal;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
#stale-indicator i {
|
||||
vertical-align: middle;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#output-loader .loading-msg {
|
||||
opacity: 1;
|
||||
font-family: var(--primary-font-family);
|
||||
|
|
|
|||
|
|
@ -31,3 +31,13 @@
|
|||
border: 2px dashed var(--rec-list-operation-font-colour) !important;
|
||||
padding: 8px 8px 9px 8px;
|
||||
}
|
||||
|
||||
#categories a {
|
||||
color: #1976d2;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#categories a:hover,
|
||||
.op-list .operation:hover {
|
||||
filter: brightness(98%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
--rec-list-operation-font-colour: #468847;
|
||||
--rec-list-operation-bg-colour: #dff0d8;
|
||||
--rec-list-operation-border-colour: #d6e9c6;
|
||||
--rec-list-operation-border-colour: #d3e8c0;
|
||||
|
||||
--selected-operation-font-color: #c09853;
|
||||
--selected-operation-bg-colour: #fcf8e3;
|
||||
|
|
|
|||
|
|
@ -108,6 +108,10 @@ input[type="search"]::-webkit-search-cancel-button {
|
|||
appearance: searchfield-cancel-button;
|
||||
}
|
||||
|
||||
select.form-control:not([size]):not([multiple]), select.custom-file-control:not([size]):not([multiple]) {
|
||||
height: unset;
|
||||
}
|
||||
|
||||
code {
|
||||
border: 0;
|
||||
white-space: pre-wrap;
|
||||
|
|
|
|||
Loading…
Reference in New Issue