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

tidy up code, add controls-height var and implement across stylesheets, start work on operation/category lists

Browse source
This commit is contained in:
Robin Scholtes 2023-04-17 16:03:46 +12:00
parent b872ac6e68
commit 0e49d52546
8 changed files with 65 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/web/App.mjs
View file

@ -252,6 +252,9 @@ 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;

2
src/web/HTMLOperation.mjs
View file

@ -51,7 +51,7 @@ class HTMLOperation {
if (this.description) {
const infoLink = this.infoURL ? `<hr>${titleFromWikiLink(this.infoURL)}` : "";
html += ` data-container='body' data-toggle='popover' data-placement='right'
html += ` data-container='body' data-toggle='popover' data-placement='left'
data-content="${this.description}${infoLink}" data-html='true' data-trigger='hover'
data-boundary='viewport'`;
}

29
src/web/html/index.html
View file

@ -197,6 +197,8 @@
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>">
Operations
<!--@TODO: this should just be removed, however that currently breaks some code-->
<span class="pane-controls hide-on-maximised-output">
<button type="button"
class="btn btn-warning bmd-btn-icon"
@ -207,16 +209,20 @@
</button>
</span>
</div>
<input id="search"
type="search"
class="form-control"
placeholder="Search..."
autocomplete="off"
tabindex="2"
data-help-title="Searching for operations"
data-help="<p>Use the search box to find useful operations.</p><p>Both operation names and descriptions are queried using a fuzzy matching algorithm.</p>"/>
<!-- <ul id="search-results" class="op-list"></ul>-->
<!-- <div id="categories" class="panel-group no-select"></div>-->
<div class="foo">
<input id="search"
type="search"
class="form-control"
placeholder="Search..."
autocomplete="off"
tabindex="2"
data-help-title="Searching for operations"
data-help="<p>Use the search box to find useful operations.</p><p>Both operation names and descriptions are queried using a fuzzy matching algorithm.</p>"
/>
<!--operation list and categories-->
<ul id="search-results" class="op-list"></ul>
<div id="categories" class="panel-group no-select"></div>
</div>
</div>
<!--recipe-->
@ -235,7 +241,8 @@
</button>
</span>
</div>
<!-- <ul id="rec-list" class="list-area no-select"></ul>-->
<!--selected recipes list-->
<ul id="rec-list" class="list-area no-select"></ul>
<!--controls-->
<div id="controls" class="no-select hide-on-maximised-output">

2
src/web/stylesheets/components/_list.css
View file

@ -40,4 +40,4 @@
margin: 0 !important;
border-radius: 0 !important;
border: none;
}
}

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

@ -7,7 +7,7 @@
*/
.operation {
cursor: grab;
cursor: pointer;
padding: 10px;
list-style-type: none;
position: relative;
@ -18,6 +18,12 @@
border-right: none;
}
@media only screen and ( min-width: 768px ) {
.operation {
cursor: grab;
}
}
#rec-list .operation {
padding: 14px;
}
@ -320,3 +326,22 @@ input.toggle-string {
color: var(--disabled-font-colour) !important;
background-color: var(--disabled-border-colour) !important;
}
/* ================ experimentation ================ */
.foo {
position: relative;
}
#search-results,
#categories {
position: absolute;
top: 40px; /* the height of the search input */
left: 0;
right: 0;
z-index: 10;
height: auto;
max-height: 60vh;
overflow: scroll;
border-bottom: 1px solid var(--primary-border-colour);
}

11
src/web/stylesheets/layout/_controls.css
View file

@ -13,6 +13,8 @@
padding: 10px 0;
border-top: 1px solid var(--primary-border-colour);
background-color: var(--secondary-background-colour);
height: var(--controls-height);
overflow: hidden;
}
#controls-content {
@ -31,15 +33,6 @@
color: var(--primary-font-colour);
font-size: 14px;
cursor: pointer;
/*line-height: 0;*/
}
#auto-bake {
position: relative;
width: auto;
height: auto;
opacity: 1;
z-index: initial;
}
#auto-bake-label .check,

20
src/web/stylesheets/layout/_structure.css
View file

@ -10,10 +10,6 @@ body {
overflow: hidden;
}
#workspace-wrapper {
margin-top: var(--banner-height);
}
#content-wrapper {
position: absolute;
top: 0;
@ -22,19 +18,27 @@ body {
left: 0;
}
#recipe,
#input .cm-scroller,
#output .cm-scroller {
overflow-y: auto;
/*@TODO: test with keyboard popping up because that messes with the viewheight probably*/
#workspace-wrapper {
/* The workspaces' available height minus the top banner and control element at the bottom */
height: calc( 100vh - calc( var(--banner-height) + var(--controls-height)) );
margin-top: var(--banner-height);
}
#operations {
height: auto;
}
#recipe {
height: 15vh;
overflow-y: auto;
}
#input .cm-scroller,
#output .cm-scroller {
height: 20vh;
overflow-y: auto;
}
#operations .title,

3
src/web/stylesheets/themes/_classic.css
View file

@ -36,7 +36,6 @@
--banner-font-colour: #468847;
--banner-bg-colour: #dff0d8;
--banner-url-colour: #1976d2;
--banner-height: 40px;
--category-list-font-colour: #1976d2;
@ -133,5 +132,7 @@
--code-font-colour: #c7254e;
--input-highlight-colour: #1976d2;
--input-border-colour: #424242;
--banner-height: 40px;
--controls-height: 70px;
}