Set favourites icon in pane controls following a consistent template pattern

This commit is contained in:
Robin Scholtes 2023-04-17 13:28:14 +12:00
parent 6da34bcf52
commit c1a5b67603
5 changed files with 15 additions and 16 deletions

View file

@ -252,9 +252,6 @@ class App {
* @fires Manager#oplistcreate
*/
populateOperationsList() {
// Move edit button away before we overwrite it
document.body.appendChild(document.getElementById("edit-favourites"));
let html = "";
let i;

View file

@ -179,21 +179,26 @@
<span class="desktop-only">About / Support</span>
<i class="material-icons">help</i>
</a>
<!-- @TODO:-->
<!-- <button type="button" class="btn btn-warning bmd-btn-icon" id="edit-favourites" data-toggle="tooltip" title="Edit favourites">-->
<!-- <i class="material-icons">star</i>-->
<!-- </button>-->
</div>
</div>
<div id="workspace-wrapper">
<!--operations-->
<div id="operations" class="no-select">
<div id="operations"
class="no-select">
<div class="title no-select"
data-help-title="Operations list"
data-help="<p>The Operations list contains all the operations in CyberChef arranged into
categories. Some operations may be present in multiple categories. You can search for operations using the search box.</p><p>To use an operation, either double click it, or drag it into the Recipe pane. You will then be able to configure its arguments (or 'Ingredients' in CyberChef terminology).</p>">
data-help="<p>The Operations list contains all the operations in CyberChef arranged into categories. Some operations may be present in multiple categories. You can search for operations using the search box.</p><p>To use an operation, either double click it, or drag it into the Recipe pane. You will then be able to configure its arguments (or 'Ingredients' in CyberChef terminology).</p>">
Operations
<span class="pane-controls hide-on-maximised-output">
<button type="button"
class="btn btn-warning bmd-btn-icon"
id="edit-favourites"
data-toggle="tooltip"
title="Edit favourites">
<i class="material-icons">star</i>
</button>
</span>
</div>
<input id="search"
type="search"

View file

@ -15,7 +15,7 @@
color: var(--banner-font-colour);
background-color: var(--banner-bg-colour);
margin: 0;
/* flex is applied through .row */
/* flex is applied through .row on the banner element */
justify-content: space-between;
}

View file

@ -20,11 +20,6 @@
linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
}
/*#edit-favourites {*/
/* float: right;*/
/* margin-top: -7px;*/
/*}*/
.favourites-hover {
color: var(--rec-list-operation-font-colour);
background-color: var(--rec-list-operation-bg-colour);
@ -42,3 +37,4 @@
filter: brightness(98%);
}

View file

@ -37,6 +37,7 @@ body {
height: 20vh;
}
#operations .title,
#recipe .title,
#input .title,
#output .title {