mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-04-20 23:06:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Argument hints are not tooltips instead of bmd-help elements

Browse source
This commit is contained in:
n1474335 2019-10-31 13:39:06 +00:00
parent 0630c094e0
commit 6a1d11b9b5
3 changed files with 33 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/web/HTMLIngredient.mjs
View file

@ -54,7 +54,9 @@ class HTMLIngredient {
case "binaryString": case "binaryString":
case "byteArray": case "byteArray":
html += `<div class="form-group"> html += `<div class="form-group">
<label for="${this.id}" class="bmd-label-floating">${this.name}</label> <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating">${this.name}</label>
<input type="text" <input type="text"
class="form-control arg" class="form-control arg"
id="${this.id}" id="${this.id}"
@ -62,13 +64,14 @@ class HTMLIngredient {
arg-name="${this.name}" arg-name="${this.name}"
value="${this.value}" value="${this.value}"
${this.disabled ? "disabled" : ""}> ${this.disabled ? "disabled" : ""}>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div>`; </div>`;
break; break;
case "shortString": case "shortString":
case "binaryShortString": case "binaryShortString":
html += `<div class="form-group inline"> html += `<div class="form-group inline">
<label for="${this.id}" class="bmd-label-floating inline">${this.name}</label> <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating inline">${this.name}</label>
<input type="text" <input type="text"
class="form-control arg inline" class="form-control arg inline"
id="${this.id}" id="${this.id}"
@ -76,13 +79,14 @@ class HTMLIngredient {
arg-name="${this.name}" arg-name="${this.name}"
value="${this.value}" value="${this.value}"
${this.disabled ? "disabled" : ""}> ${this.disabled ? "disabled" : ""}>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div>`; </div>`;
break; break;
case "toggleString": case "toggleString":
html += `<div class="form-group input-group"> html += `<div class="form-group input-group">
<div class="toggle-string"> <div class="toggle-string">
<label for="${this.id}" class="bmd-label-floating toggle-string">${this.name}</label> <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating toggle-string">${this.name}</label>
<input type="text" <input type="text"
class="form-control arg toggle-string" class="form-control arg toggle-string"
id="${this.id}" id="${this.id}"
@ -90,7 +94,6 @@ class HTMLIngredient {
arg-name="${this.name}" arg-name="${this.name}"
value="${this.value}" value="${this.value}"
${this.disabled ? "disabled" : ""}> ${this.disabled ? "disabled" : ""}>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div> </div>
<div class="input-group-append"> <div class="input-group-append">
<button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${this.toggleValues[0]}</button> <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${this.toggleValues[0]}</button>
@ -105,7 +108,9 @@ class HTMLIngredient {
break; break;
case "number": case "number":
html += `<div class="form-group inline"> html += `<div class="form-group inline">
<label for="${this.id}" class="bmd-label-floating inline">${this.name}</label> <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating inline">${this.name}</label>
<input type="number" <input type="number"
class="form-control arg inline" class="form-control arg inline"
id="${this.id}" id="${this.id}"
@ -116,13 +121,12 @@ class HTMLIngredient {
max="${this.max}" max="${this.max}"
step="${this.step}" step="${this.step}"
${this.disabled ? "disabled" : ""}> ${this.disabled ? "disabled" : ""}>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div>`; </div>`;
break; break;
case "boolean": case "boolean":
html += `<div class="form-group inline boolean-arg"> html += `<div class="form-group inline boolean-arg">
<div class="checkbox"> <div class="checkbox">
<label> <label ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}>
<input type="checkbox" <input type="checkbox"
class="arg" class="arg"
id="${this.id}" id="${this.id}"
@ -132,13 +136,14 @@ class HTMLIngredient {
${this.disabled ? " disabled" : ""} ${this.disabled ? " disabled" : ""}
value="${this.name}"> ${this.name} value="${this.name}"> ${this.name}
</label> </label>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div> </div>
</div>`; </div>`;
break; break;
case "option": case "option":
html += `<div class="form-group inline"> html += `<div class="form-group inline">
<label for="${this.id}" class="bmd-label-floating inline">${this.name}</label> <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating inline">${this.name}</label>
<select <select
class="form-control arg inline" class="form-control arg inline"
id="${this.id}" id="${this.id}"
@ -155,13 +160,14 @@ class HTMLIngredient {
} }
} }
html += `</select> html += `</select>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div>`; </div>`;
break; break;
case "populateOption": case "populateOption":
case "populateMultiOption": case "populateMultiOption":
html += `<div class="form-group"> html += `<div class="form-group">
<label for="${this.id}" class="bmd-label-floating">${this.name}</label> <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating">${this.name}</label>
<select <select
class="form-control arg no-state-change populate-option" class="form-control arg no-state-change populate-option"
id="${this.id}" id="${this.id}"
@ -181,7 +187,6 @@ class HTMLIngredient {
} }
} }
html += `</select> html += `</select>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div>`; </div>`;
eventFn = this.type === "populateMultiOption" ? eventFn = this.type === "populateMultiOption" ?
@ -191,7 +196,9 @@ class HTMLIngredient {
break; break;
case "editableOption": case "editableOption":
html += `<div class="form-group input-group"> html += `<div class="form-group input-group">
<label for="${this.id}" class="bmd-label-floating">${this.name}</label> <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating">${this.name}</label>
<input type="text" <input type="text"
class="form-control arg" class="form-control arg"
id="${this.id}" id="${this.id}"
@ -199,7 +206,6 @@ class HTMLIngredient {
arg-name="${this.name}" arg-name="${this.name}"
value="${this.value[this.defaultIndex].value}" value="${this.value[this.defaultIndex].value}"
${this.disabled ? "disabled" : ""}> ${this.disabled ? "disabled" : ""}>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
<div class="input-group-append"> <div class="input-group-append">
<button type="button" <button type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
@ -221,7 +227,9 @@ class HTMLIngredient {
break; break;
case "editableOptionShort": case "editableOptionShort":
html += `<div class="form-group input-group inline"> html += `<div class="form-group input-group inline">
<label for="${this.id}" class="bmd-label-floating inline">${this.name}</label> <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating inline">${this.name}</label>
<input type="text" <input type="text"
class="form-control arg inline" class="form-control arg inline"
id="${this.id}" id="${this.id}"
@ -229,7 +237,6 @@ class HTMLIngredient {
arg-name="${this.name}" arg-name="${this.name}"
value="${this.value[this.defaultIndex].value}" value="${this.value[this.defaultIndex].value}"
${this.disabled ? "disabled" : ""}> ${this.disabled ? "disabled" : ""}>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
<div class="input-group-append inline"> <div class="input-group-append inline">
<button type="button" <button type="button"
class="btn btn-secondary dropdown-toggle dropdown-toggle-split" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
@ -251,7 +258,9 @@ class HTMLIngredient {
break; break;
case "text": case "text":
html += `<div class="form-group"> html += `<div class="form-group">
<label for="${this.id}" class="bmd-label-floating">${this.name}</label> <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating">${this.name}</label>
<textarea <textarea
class="form-control arg" class="form-control arg"
id="${this.id}" id="${this.id}"
@ -259,12 +268,13 @@ class HTMLIngredient {
arg-name="${this.name}" arg-name="${this.name}"
rows="${this.rows ? this.rows : 3}" rows="${this.rows ? this.rows : 3}"
${this.disabled ? "disabled" : ""}>${this.value}</textarea> ${this.disabled ? "disabled" : ""}>${this.value}</textarea>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div>`; </div>`;
break; break;
case "argSelector": case "argSelector":
html += `<div class="form-group inline"> html += `<div class="form-group inline">
<label for="${this.id}" class="bmd-label-floating inline">${this.name}</label> <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating inline">${this.name}</label>
<select <select
class="form-control arg inline arg-selector" class="form-control arg inline arg-selector"
id="${this.id}" id="${this.id}"
@ -279,7 +289,6 @@ class HTMLIngredient {
</option>`; </option>`;
} }
html += `</select> html += `</select>
${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
</div>`; </div>`;
this.manager.addDynamicListener(".arg-selector", "change", this.argSelectorChange, this); this.manager.addDynamicListener(".arg-selector", "change", this.argSelectorChange, this);

4
src/web/stylesheets/components/_operation.css
View file

@ -159,10 +159,6 @@ div.toggle-string {
width: calc(100% - 13px); width: calc(100% - 13px);
} }
.operation .bmd-form-group .bmd-help {
margin-top: -17px;
}
.input-group .form-control { .input-group .form-control {
border-top-left-radius: 4px !important; border-top-left-radius: 4px !important;
} }

2
src/web/waiters/RecipeWaiter.mjs
View file

@ -399,6 +399,8 @@ class RecipeWaiter {
this.buildRecipeOperation(item); this.buildRecipeOperation(item);
document.getElementById("rec-list").appendChild(item); document.getElementById("rec-list").appendChild(item);
$(item).find("[data-toggle='tooltip']").tooltip();
item.dispatchEvent(this.manager.operationadd); item.dispatchEvent(this.manager.operationadd);
return item; return item;
} }