From b60861b4b42bd31913f97abed3f809cc252b7c08 Mon Sep 17 00:00:00 2001 From: mchilli Date: Sun, 22 Oct 2023 19:42:13 +0200 Subject: [PATCH] fix download, button next/back event, drag key end --- webui/css/style.css | 11 +++++++---- webui/css/style.min.css | 2 +- webui/js/main.js | 5 ++++- webui/js/modules/utils.js | 4 +++- webui/scss/style.scss | 6 +++++- 5 files changed, 20 insertions(+), 8 deletions(-) diff --git a/webui/css/style.css b/webui/css/style.css index 0bd9f81..2eda180 100644 --- a/webui/css/style.css +++ b/webui/css/style.css @@ -8389,6 +8389,9 @@ body { .main-container .key-entries .key-container.blank .button.open, .main-container .key-entries .key-container.macro .button.open { display: none; } +.main-container .key-entries .key-container:nth-child(9n) { + margin-bottom: calc(var(--key-entries-gap) * 5); +} .main-container .app-controls, .main-container .device-controls, @@ -8427,10 +8430,10 @@ body { background-color: var(--color-blue); border: 1px solid var(--color-grey); } -.main-container .app-controls .button i, -.main-container .device-controls .button i, -.main-container .key-entries-controls .button i, -.dialog-container .dialog-reboot-buttons .button i { +.main-container .app-controls .button *, +.main-container .device-controls .button *, +.main-container .key-entries-controls .button *, +.dialog-container .dialog-reboot-buttons .button * { pointer-events: none; } diff --git a/webui/css/style.min.css b/webui/css/style.min.css index 2ca7713..c930996 100644 --- a/webui/css/style.min.css +++ b/webui/css/style.min.css @@ -6,4 +6,4 @@ * Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) * Copyright 2023 Fonticons, Inc. - */:root,:host{--fa-style-family-classic: "Font Awesome 6 Free";--fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url("../webfonts/fa-solid-900.woff2") format("woff2"),url("../webfonts/fa-solid-900.ttf") format("truetype")}.fas,.fa-solid{font-weight:900}:root{font-family:monospace;user-select:none;--color-blue: #4fc1e9;--color-red: #fc6e51;--color-green: #add468;--color-yellow: #ffce54;--color-grey: #808080;--color-black: #404040;--color-white: #ffffff;--shadow-color: #808080bf;--key-entry-size: 100px;--key-entries-gap: 10px;--key-control-button-size: 22px;--key-control-shadow-inset: inset 1px 1px 2px 0px var(--shadow-color);--key-control-border-radius: 10px;--key-control-padding: 2px;--dialog-button-size: 40px;--dialog-gap: 4px;--macro-entry-height: 30px}body{margin:var(--key-entries-gap);background-color:var(--color-white);color:var(--color-black)}.hidden{display:none !important}.invisible{visibility:hidden !important}.button{cursor:pointer}.github-corner:active,.github-corner:visited,.github-corner svg{fill:var(--color-black);color:var(--color-white)}.main-container{display:flex;flex-direction:column;align-items:center}.main-container .key-entries{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--key-entries-gap);margin-bottom:calc(var(--key-entries-gap)/2);padding:calc(var(--key-entries-gap)/2);max-height:calc(var(--key-entry-size)*3 + var(--key-entries-gap)*2);overflow:hidden}.main-container .key-entries .key-container{display:grid;grid-template-rows:max-content 1fr max-content;width:var(--key-entry-size);height:var(--key-entry-size);border-top:1px solid var(--shadow-color);border-left:1px solid var(--shadow-color);border-radius:var(--key-control-border-radius);box-sizing:border-box;box-shadow:3px 3px 2px 1px var(--shadow-color)}.main-container .key-entries .key-container.blank{background-color:rgba(0,0,0,0) !important}.main-container .key-entries .key-container .key-type-icon{grid-row:1;cursor:help;background-color:var(--color-white);border-radius:var(--key-control-border-radius) 0 var(--key-control-border-radius) 0;padding:0 var(--key-control-padding) 0 0;box-shadow:var(--key-control-shadow-inset)}.main-container .key-entries .key-container .key-handle{justify-self:end;grid-row:1;cursor:grab;background-color:var(--color-white);border-radius:0 var(--key-control-border-radius) 0 var(--key-control-border-radius);padding:0 0 0 var(--key-control-padding);box-shadow:var(--key-control-shadow-inset)}.main-container .key-entries .key-container.blank .key-label{display:none}.main-container .key-entries .key-container .key-label{grid-row:2;grid-column:1/3;justify-self:center;align-self:center;font-weight:bold;word-break:break-all;background-color:var(--color-white);border-radius:var(--key-control-border-radius);padding:var(--key-control-padding) calc(var(--key-control-padding)*3);box-shadow:var(--key-control-shadow-inset)}.main-container .key-entries .key-container .key-controls{display:flex;grid-row:3;grid-column:1/3;justify-self:end;background-color:var(--color-white);border-radius:var(--key-control-border-radius) 0 var(--key-control-border-radius) 0;padding:var(--key-control-padding) 0 0 var(--key-control-padding);box-shadow:var(--key-control-shadow-inset)}.main-container .key-entries .key-container .key-controls .button.edit:hover{color:var(--color-blue)}.main-container .key-entries .key-container .key-controls .button.open:hover{color:var(--color-green)}.main-container .key-entries .key-container .key-controls .button.delete:hover{color:var(--color-red)}.main-container .key-entries .key-container .key-type-icon,.main-container .key-entries .key-container .button{width:var(--key-control-button-size);height:var(--key-control-button-size);display:flex;justify-content:center;align-items:center}.main-container .key-entries .key-container.blank .button.delete{display:none}.main-container .key-entries .key-container.blank .button.open,.main-container .key-entries .key-container.macro .button.open{display:none}.main-container .app-controls,.main-container .device-controls,.main-container .key-entries-controls,.dialog-container .dialog-reboot-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--key-entries-gap);margin-bottom:var(--key-entries-gap)}.main-container .app-controls .button,.main-container .app-controls .info,.main-container .device-controls .button,.main-container .device-controls .info,.main-container .key-entries-controls .button,.main-container .key-entries-controls .info,.dialog-container .dialog-reboot-buttons .button,.dialog-container .dialog-reboot-buttons .info{display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;width:var(--key-entry-size);height:calc(var(--key-entry-size)/2);box-sizing:border-box;align-self:flex-end;user-select:none;word-break:break-word}.main-container .app-controls .button,.main-container .device-controls .button,.main-container .key-entries-controls .button,.dialog-container .dialog-reboot-buttons .button{position:relative;background-color:var(--color-blue);border:1px solid var(--color-grey)}.main-container .app-controls .button i,.main-container .device-controls .button i,.main-container .key-entries-controls .button i,.dialog-container .dialog-reboot-buttons .button i{pointer-events:none}.dialog-container{position:absolute;top:0;left:0;height:100%;width:100%}.dialog-container::before{display:block;height:100%;width:100%;content:"";background-color:var(--color-white);opacity:.5}.dialog-container .dialog{display:grid;grid-auto-columns:auto var(--dialog-button-size);column-gap:var(--dialog-gap);position:absolute;width:fit-content;min-width:320px;background-color:var(--color-white);border:1px solid var(--shadow-color);border-radius:var(--dialog-gap);box-sizing:border-box;box-shadow:5px 5px 4px 2px var(--shadow-color);overflow:auto}.dialog-container .dialog .dialog-header{grid-row:1;grid-column:1/3;display:flex;gap:var(--dialog-gap);margin-right:var(--dialog-button-size);padding-right:var(--dialog-gap);height:var(--dialog-button-size);background-color:var(--color-black);color:var(--color-white)}.dialog-container .dialog .dialog-header .dialog-header-label{display:flex;align-items:center;justify-content:center;width:100%;font-weight:bold;font-size:large;cursor:move}.dialog-container .dialog .dialog-header .dialog-button{border-top:none;color:var(--color-black)}.dialog-container .dialog .dialog-header .dialog-button .dialog-button-label{position:absolute;transform:rotate(-45deg);opacity:0}.dialog-container .dialog .dialog-prompt{grid-row:2;grid-column:1;max-width:265px;margin:4px}.dialog-container .dialog .dialog-inputs{grid-row:2;grid-column:1/3;display:grid;align-items:start;row-gap:var(--dialog-gap);margin-left:var(--dialog-gap);margin-top:var(--dialog-gap)}.dialog-container .dialog .dialog-inputs .dialog-input-shorten{margin-right:calc(var(--dialog-button-size) + var(--dialog-gap))}.dialog-container .dialog .dialog-inputs .dialog-details summary{cursor:pointer}.dialog-container .dialog .dialog-inputs .dialog-macros{display:grid;grid-template-columns:1fr var(--dialog-button-size);gap:var(--dialog-gap)}.dialog-container .dialog .dialog-inputs .dialog-macros .dialog-sortable{display:grid;gap:var(--dialog-gap);background-color:var(--color-white);border:1px solid var(--color-grey);box-sizing:border-box;padding:var(--dialog-gap);max-height:calc(var(--macro-entry-height)*5 + var(--dialog-gap)*6);overflow:auto}.dialog-container .dialog .dialog-inputs .dialog-macros .dialog-sortable .macro-entry-container{display:flex;gap:var(--dialog-gap);align-items:center;height:var(--macro-entry-height);padding:var(--dialog-gap);background-color:var(--color-green);border:1px solid var(--color-grey);border-radius:calc(var(--key-control-border-radius)/2);box-sizing:border-box}.dialog-container .dialog .dialog-inputs .dialog-macros .dialog-sortable .macro-entry-container .macro-entry-handle{cursor:grab}.dialog-container .dialog .dialog-inputs .dialog-macros .dialog-sortable .macro-entry-container .macro-entry-additionals{margin:0 0 0 auto;cursor:pointer}.dialog-container .dialog .dialog-reboot-buttons{grid-column:1/3;margin:var(--key-entries-gap)}.dialog-container .dialog.blank .dialog-inputs .dialog-label,.dialog-container .dialog.blank .dialog-inputs .dialog-color,.dialog-container .dialog.blank .dialog-inputs .dialog-content,.dialog-container .dialog.blank .dialog-inputs .dialog-encoder,.dialog-container .dialog.group .dialog-inputs .dialog-content,.dialog-container .dialog.macro .dialog-inputs .dialog-encoder{display:none}.dialog-container .dialog .dialog-button{border:1px solid var(--color-grey);border-right:none}.dialog-container .dialog .dialog-button.close{grid-row:1;grid-column:2;border:none;border-bottom:1px solid var(--color-grey);border-left:1px solid var(--color-grey)}.dialog-container .dialog .dialog-button.ok{grid-row:3;grid-column:2;margin-top:4px;border:none;border-top:1px solid var(--color-grey);border-left:1px solid var(--color-grey)}.notification-container{display:flex;flex-direction:column-reverse;position:absolute;right:0;bottom:0}.notification-container .notification{display:grid;grid-auto-columns:auto var(--dialog-button-size);align-items:center;position:relative;min-height:var(--dialog-button-size);background-color:var(--color-black);border:1px solid var(--color-grey);border-radius:4px;box-sizing:border-box;overflow:hidden}.notification-container .notification.info{background-color:var(--color-blue)}.notification-container .notification.success{background-color:var(--color-green)}.notification-container .notification.warning{background-color:var(--color-yellow)}.notification-container .notification.error{background-color:var(--color-red)}.notification-container .notification .notification-message{padding:0 calc(var(--dialog-button-size)/4)}.notification-container .notification .dialog-button.close{border-left:1px solid var(--color-grey)}.dialog-container .dialog-button,.notification-container .dialog-button{display:flex;justify-content:center;align-items:center;flex-shrink:0;flex-grow:0;position:relative;width:var(--dialog-button-size);height:var(--dialog-button-size);background-color:var(--color-white);box-sizing:border-box;overflow:hidden;cursor:pointer}.dialog-container .dialog-button.close,.notification-container .dialog-button.close{grid-row:1;grid-column:2;background-color:var(--color-red)}.dialog-container .dialog-button.ok,.notification-container .dialog-button.ok{grid-row:3;grid-column:2;background-color:var(--color-blue);margin-top:4px}.main-container .app-controls .button:hover:after,.main-container .device-controls .button:hover:after,.main-container .key-entries-controls .button:hover:after,.dialog-container .dialog-button:hover:after,.dialog-container .dialog-reboot-buttons .button:hover:after,.notification-container .dialog-button:hover:after{display:block;content:"";width:100%;height:100%;position:absolute;box-shadow:inset 0px 0px 5px 2px var(--shadow-color)} \ No newline at end of file + */:root,:host{--fa-style-family-classic: "Font Awesome 6 Free";--fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url("../webfonts/fa-solid-900.woff2") format("woff2"),url("../webfonts/fa-solid-900.ttf") format("truetype")}.fas,.fa-solid{font-weight:900}:root{font-family:monospace;user-select:none;--color-blue: #4fc1e9;--color-red: #fc6e51;--color-green: #add468;--color-yellow: #ffce54;--color-grey: #808080;--color-black: #404040;--color-white: #ffffff;--shadow-color: #808080bf;--key-entry-size: 100px;--key-entries-gap: 10px;--key-control-button-size: 22px;--key-control-shadow-inset: inset 1px 1px 2px 0px var(--shadow-color);--key-control-border-radius: 10px;--key-control-padding: 2px;--dialog-button-size: 40px;--dialog-gap: 4px;--macro-entry-height: 30px}body{margin:var(--key-entries-gap);background-color:var(--color-white);color:var(--color-black)}.hidden{display:none !important}.invisible{visibility:hidden !important}.button{cursor:pointer}.github-corner:active,.github-corner:visited,.github-corner svg{fill:var(--color-black);color:var(--color-white)}.main-container{display:flex;flex-direction:column;align-items:center}.main-container .key-entries{display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--key-entries-gap);margin-bottom:calc(var(--key-entries-gap)/2);padding:calc(var(--key-entries-gap)/2);max-height:calc(var(--key-entry-size)*3 + var(--key-entries-gap)*2);overflow:hidden}.main-container .key-entries .key-container{display:grid;grid-template-rows:max-content 1fr max-content;width:var(--key-entry-size);height:var(--key-entry-size);border-top:1px solid var(--shadow-color);border-left:1px solid var(--shadow-color);border-radius:var(--key-control-border-radius);box-sizing:border-box;box-shadow:3px 3px 2px 1px var(--shadow-color)}.main-container .key-entries .key-container.blank{background-color:rgba(0,0,0,0) !important}.main-container .key-entries .key-container .key-type-icon{grid-row:1;cursor:help;background-color:var(--color-white);border-radius:var(--key-control-border-radius) 0 var(--key-control-border-radius) 0;padding:0 var(--key-control-padding) 0 0;box-shadow:var(--key-control-shadow-inset)}.main-container .key-entries .key-container .key-handle{justify-self:end;grid-row:1;cursor:grab;background-color:var(--color-white);border-radius:0 var(--key-control-border-radius) 0 var(--key-control-border-radius);padding:0 0 0 var(--key-control-padding);box-shadow:var(--key-control-shadow-inset)}.main-container .key-entries .key-container.blank .key-label{display:none}.main-container .key-entries .key-container .key-label{grid-row:2;grid-column:1/3;justify-self:center;align-self:center;font-weight:bold;word-break:break-all;background-color:var(--color-white);border-radius:var(--key-control-border-radius);padding:var(--key-control-padding) calc(var(--key-control-padding)*3);box-shadow:var(--key-control-shadow-inset)}.main-container .key-entries .key-container .key-controls{display:flex;grid-row:3;grid-column:1/3;justify-self:end;background-color:var(--color-white);border-radius:var(--key-control-border-radius) 0 var(--key-control-border-radius) 0;padding:var(--key-control-padding) 0 0 var(--key-control-padding);box-shadow:var(--key-control-shadow-inset)}.main-container .key-entries .key-container .key-controls .button.edit:hover{color:var(--color-blue)}.main-container .key-entries .key-container .key-controls .button.open:hover{color:var(--color-green)}.main-container .key-entries .key-container .key-controls .button.delete:hover{color:var(--color-red)}.main-container .key-entries .key-container .key-type-icon,.main-container .key-entries .key-container .button{width:var(--key-control-button-size);height:var(--key-control-button-size);display:flex;justify-content:center;align-items:center}.main-container .key-entries .key-container.blank .button.delete{display:none}.main-container .key-entries .key-container.blank .button.open,.main-container .key-entries .key-container.macro .button.open{display:none}.main-container .key-entries .key-container:nth-child(9n){margin-bottom:calc(var(--key-entries-gap)*5)}.main-container .app-controls,.main-container .device-controls,.main-container .key-entries-controls,.dialog-container .dialog-reboot-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--key-entries-gap);margin-bottom:var(--key-entries-gap)}.main-container .app-controls .button,.main-container .app-controls .info,.main-container .device-controls .button,.main-container .device-controls .info,.main-container .key-entries-controls .button,.main-container .key-entries-controls .info,.dialog-container .dialog-reboot-buttons .button,.dialog-container .dialog-reboot-buttons .info{display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;width:var(--key-entry-size);height:calc(var(--key-entry-size)/2);box-sizing:border-box;align-self:flex-end;user-select:none;word-break:break-word}.main-container .app-controls .button,.main-container .device-controls .button,.main-container .key-entries-controls .button,.dialog-container .dialog-reboot-buttons .button{position:relative;background-color:var(--color-blue);border:1px solid var(--color-grey)}.main-container .app-controls .button *,.main-container .device-controls .button *,.main-container .key-entries-controls .button *,.dialog-container .dialog-reboot-buttons .button *{pointer-events:none}.dialog-container{position:absolute;top:0;left:0;height:100%;width:100%}.dialog-container::before{display:block;height:100%;width:100%;content:"";background-color:var(--color-white);opacity:.5}.dialog-container .dialog{display:grid;grid-auto-columns:auto var(--dialog-button-size);column-gap:var(--dialog-gap);position:absolute;width:fit-content;min-width:320px;background-color:var(--color-white);border:1px solid var(--shadow-color);border-radius:var(--dialog-gap);box-sizing:border-box;box-shadow:5px 5px 4px 2px var(--shadow-color);overflow:auto}.dialog-container .dialog .dialog-header{grid-row:1;grid-column:1/3;display:flex;gap:var(--dialog-gap);margin-right:var(--dialog-button-size);padding-right:var(--dialog-gap);height:var(--dialog-button-size);background-color:var(--color-black);color:var(--color-white)}.dialog-container .dialog .dialog-header .dialog-header-label{display:flex;align-items:center;justify-content:center;width:100%;font-weight:bold;font-size:large;cursor:move}.dialog-container .dialog .dialog-header .dialog-button{border-top:none;color:var(--color-black)}.dialog-container .dialog .dialog-header .dialog-button .dialog-button-label{position:absolute;transform:rotate(-45deg);opacity:0}.dialog-container .dialog .dialog-prompt{grid-row:2;grid-column:1;max-width:265px;margin:4px}.dialog-container .dialog .dialog-inputs{grid-row:2;grid-column:1/3;display:grid;align-items:start;row-gap:var(--dialog-gap);margin-left:var(--dialog-gap);margin-top:var(--dialog-gap)}.dialog-container .dialog .dialog-inputs .dialog-input-shorten{margin-right:calc(var(--dialog-button-size) + var(--dialog-gap))}.dialog-container .dialog .dialog-inputs .dialog-details summary{cursor:pointer}.dialog-container .dialog .dialog-inputs .dialog-macros{display:grid;grid-template-columns:1fr var(--dialog-button-size);gap:var(--dialog-gap)}.dialog-container .dialog .dialog-inputs .dialog-macros .dialog-sortable{display:grid;gap:var(--dialog-gap);background-color:var(--color-white);border:1px solid var(--color-grey);box-sizing:border-box;padding:var(--dialog-gap);max-height:calc(var(--macro-entry-height)*5 + var(--dialog-gap)*6);overflow:auto}.dialog-container .dialog .dialog-inputs .dialog-macros .dialog-sortable .macro-entry-container{display:flex;gap:var(--dialog-gap);align-items:center;height:var(--macro-entry-height);padding:var(--dialog-gap);background-color:var(--color-green);border:1px solid var(--color-grey);border-radius:calc(var(--key-control-border-radius)/2);box-sizing:border-box}.dialog-container .dialog .dialog-inputs .dialog-macros .dialog-sortable .macro-entry-container .macro-entry-handle{cursor:grab}.dialog-container .dialog .dialog-inputs .dialog-macros .dialog-sortable .macro-entry-container .macro-entry-additionals{margin:0 0 0 auto;cursor:pointer}.dialog-container .dialog .dialog-reboot-buttons{grid-column:1/3;margin:var(--key-entries-gap)}.dialog-container .dialog.blank .dialog-inputs .dialog-label,.dialog-container .dialog.blank .dialog-inputs .dialog-color,.dialog-container .dialog.blank .dialog-inputs .dialog-content,.dialog-container .dialog.blank .dialog-inputs .dialog-encoder,.dialog-container .dialog.group .dialog-inputs .dialog-content,.dialog-container .dialog.macro .dialog-inputs .dialog-encoder{display:none}.dialog-container .dialog .dialog-button{border:1px solid var(--color-grey);border-right:none}.dialog-container .dialog .dialog-button.close{grid-row:1;grid-column:2;border:none;border-bottom:1px solid var(--color-grey);border-left:1px solid var(--color-grey)}.dialog-container .dialog .dialog-button.ok{grid-row:3;grid-column:2;margin-top:4px;border:none;border-top:1px solid var(--color-grey);border-left:1px solid var(--color-grey)}.notification-container{display:flex;flex-direction:column-reverse;position:absolute;right:0;bottom:0}.notification-container .notification{display:grid;grid-auto-columns:auto var(--dialog-button-size);align-items:center;position:relative;min-height:var(--dialog-button-size);background-color:var(--color-black);border:1px solid var(--color-grey);border-radius:4px;box-sizing:border-box;overflow:hidden}.notification-container .notification.info{background-color:var(--color-blue)}.notification-container .notification.success{background-color:var(--color-green)}.notification-container .notification.warning{background-color:var(--color-yellow)}.notification-container .notification.error{background-color:var(--color-red)}.notification-container .notification .notification-message{padding:0 calc(var(--dialog-button-size)/4)}.notification-container .notification .dialog-button.close{border-left:1px solid var(--color-grey)}.dialog-container .dialog-button,.notification-container .dialog-button{display:flex;justify-content:center;align-items:center;flex-shrink:0;flex-grow:0;position:relative;width:var(--dialog-button-size);height:var(--dialog-button-size);background-color:var(--color-white);box-sizing:border-box;overflow:hidden;cursor:pointer}.dialog-container .dialog-button.close,.notification-container .dialog-button.close{grid-row:1;grid-column:2;background-color:var(--color-red)}.dialog-container .dialog-button.ok,.notification-container .dialog-button.ok{grid-row:3;grid-column:2;background-color:var(--color-blue);margin-top:4px}.main-container .app-controls .button:hover:after,.main-container .device-controls .button:hover:after,.main-container .key-entries-controls .button:hover:after,.dialog-container .dialog-button:hover:after,.dialog-container .dialog-reboot-buttons .button:hover:after,.notification-container .dialog-button:hover:after{display:block;content:"";width:100%;height:100%;position:absolute;box-shadow:inset 0px 0px 5px 2px var(--shadow-color)} \ No newline at end of file diff --git a/webui/js/main.js b/webui/js/main.js index ccf0164..008c1c5 100644 --- a/webui/js/main.js +++ b/webui/js/main.js @@ -692,6 +692,7 @@ class App { this.groupPageStack[this.groupPageStack.length - 1]--; this._removeLastEmptyKeyChunk(); + this._reReadKeyEntries(); this._updateKeyChunkPage(); } else if ( this.groupPageStack[this.groupPageStack.length - 1] === 0 && @@ -729,7 +730,8 @@ class App { animation: 150, onStart: (event) => {}, onEnd: (event) => { - this._reReadKeyEntries(); + const pageOfElement = Math.floor(event.newIndex / this.keyChunkSize); + this.groupPageStack[this.groupPageStack.length - 1] = pageOfElement; const pageCount = this.keyEntriesContainer.childNodes.length / this.keyChunkSize; const pagesToRemove = @@ -739,6 +741,7 @@ class App { this._removeLastEmptyKeyChunk(); } + this._reReadKeyEntries(); this._updateKeyChunkPage(); }, }); diff --git a/webui/js/modules/utils.js b/webui/js/modules/utils.js index c48f184..fd50163 100644 --- a/webui/js/modules/utils.js +++ b/webui/js/modules/utils.js @@ -126,7 +126,9 @@ export function downloadObjectAsJson(obj, filename = 'data.json') { a.download = filename; a.addEventListener('click', () => { - URL.revokeObjectURL(url); + setTimeout(() => { + URL.revokeObjectURL(url); + }, 40000); }); a.dispatchEvent( diff --git a/webui/scss/style.scss b/webui/scss/style.scss index 12df306..8c79f62 100644 --- a/webui/scss/style.scss +++ b/webui/scss/style.scss @@ -163,6 +163,10 @@ body { &.macro .button.open { display: none; } + + &:nth-child(9n) { + margin-bottom: calc(var(--key-entries-gap) * 5); + } } } } @@ -197,7 +201,7 @@ body { background-color: var(--color-blue); border: 1px solid var(--color-grey); - i { + * { pointer-events: none; } }