From 0e49d52546b8b368a658df92625a18b852875da6 Mon Sep 17 00:00:00 2001 From: Robin Scholtes Date: Mon, 17 Apr 2023 16:03:46 +1200 Subject: [PATCH] tidy up code, add controls-height var and implement across stylesheets, start work on operation/category lists --- src/web/App.mjs | 3 ++ src/web/HTMLOperation.mjs | 2 +- src/web/html/index.html | 29 ++++++++++++------- src/web/stylesheets/components/_list.css | 2 +- src/web/stylesheets/components/_operation.css | 27 ++++++++++++++++- src/web/stylesheets/layout/_controls.css | 11 ++----- src/web/stylesheets/layout/_structure.css | 20 ++++++++----- src/web/stylesheets/themes/_classic.css | 3 +- 8 files changed, 65 insertions(+), 32 deletions(-) diff --git a/src/web/App.mjs b/src/web/App.mjs index 6963f779..5db558b7 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -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; diff --git a/src/web/HTMLOperation.mjs b/src/web/HTMLOperation.mjs index d0523aa4..3f59dc48 100755 --- a/src/web/HTMLOperation.mjs +++ b/src/web/HTMLOperation.mjs @@ -51,7 +51,7 @@ class HTMLOperation { if (this.description) { const infoLink = this.infoURL ? `
${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'`; } diff --git a/src/web/html/index.html b/src/web/html/index.html index 289e4571..4c3d60c1 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -197,6 +197,8 @@ data-help-title="Operations list" data-help="

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.

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).

"> Operations + + - + +
diff --git a/src/web/stylesheets/components/_list.css b/src/web/stylesheets/components/_list.css index 31e40837..45f5a4d1 100755 --- a/src/web/stylesheets/components/_list.css +++ b/src/web/stylesheets/components/_list.css @@ -40,4 +40,4 @@ margin: 0 !important; border-radius: 0 !important; border: none; -} \ No newline at end of file +} diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css index 685a368a..c4235736 100755 --- a/src/web/stylesheets/components/_operation.css +++ b/src/web/stylesheets/components/_operation.css @@ -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); +} + diff --git a/src/web/stylesheets/layout/_controls.css b/src/web/stylesheets/layout/_controls.css index a1a9d064..c34acc07 100755 --- a/src/web/stylesheets/layout/_controls.css +++ b/src/web/stylesheets/layout/_controls.css @@ -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, diff --git a/src/web/stylesheets/layout/_structure.css b/src/web/stylesheets/layout/_structure.css index 01702f9c..62188440 100755 --- a/src/web/stylesheets/layout/_structure.css +++ b/src/web/stylesheets/layout/_structure.css @@ -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, diff --git a/src/web/stylesheets/themes/_classic.css b/src/web/stylesheets/themes/_classic.css index cbbef9cb..fe005999 100755 --- a/src/web/stylesheets/themes/_classic.css +++ b/src/web/stylesheets/themes/_classic.css @@ -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; }