From 39dd415d43eaa9a2552273c667152a5c7e3e5d13 Mon Sep 17 00:00:00 2001 From: skomerko <168652295+skomerko@users.noreply.github.com> Date: Sun, 25 Aug 2024 08:11:36 +0200 Subject: [PATCH] WebUI: Improve torrent deletion dialog This PR improves torrent deletion dialog. 1. Now shows different message depending on the number of selected torrents 2. Visually pretty much inline with the GUI 3. Adjusts to content on load 4. Now uses XHR load method. Panels / windows loaded using this method become part of the current document so there is no need to import styles or scripts (they should load marginally faster now). PR #21185. --------- Co-authored-by: Chocobo1 --- src/webui/www/private/confirmdeletion.html | 102 --------------- src/webui/www/private/css/style.css | 63 ++++++++++ src/webui/www/private/scripts/client.js | 8 ++ src/webui/www/private/scripts/dynamicTable.js | 4 + src/webui/www/private/scripts/mocha-init.js | 117 ++++++++++++------ .../www/private/views/confirmdeletion.html | 95 ++++++++++++++ src/webui/www/webui.qrc | 2 +- 7 files changed, 249 insertions(+), 142 deletions(-) delete mode 100644 src/webui/www/private/confirmdeletion.html create mode 100644 src/webui/www/private/views/confirmdeletion.html diff --git a/src/webui/www/private/confirmdeletion.html b/src/webui/www/private/confirmdeletion.html deleted file mode 100644 index c8085c020..000000000 --- a/src/webui/www/private/confirmdeletion.html +++ /dev/null @@ -1,102 +0,0 @@ - - - - - - QBT_TR(Remove torrent(s))QBT_TR[CONTEXT=confirmDeletionDlg] - - - - - - - -
- -

  QBT_TR(Are you sure you want to remove the selected torrents from the transfer list?)QBT_TR[CONTEXT=HttpServer]

-      -

-
-      -
- - - diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index b599f5b58..6bddf7147 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -720,3 +720,66 @@ td.statusBarSeparator { background-color: var(--color-background-hover); color: var(--color-text-white); } + +/* Confirm deletion dialog */ + +#confirmDeletionPage * { + box-sizing: border-box; +} + +#confirmDeletionPage_content { + display: flex !important; /* override for default mocha inline style */ + flex-direction: column; + height: 100%; +} + +#confirmDeletionPage_content > :last-child { + align-self: flex-end; +} + +#confirmDeletionDialog { + margin: auto 0; +} + +#rememberBtn { + background: url("../images/object-locked.svg") center center / 24px + no-repeat var(--color-background-popup); + height: 38px; + padding: 4px 6px; + width: 38px; +} + +#rememberBtn.disabled { + filter: grayscale(100%); +} + +#deleteFromDiskCB { + margin: 0 2px 0 0; + vertical-align: -1px; +} + +#deleteTorrentMessage { + overflow-wrap: anywhere; +} + +.confirmDeletionGrid { + align-items: center; + display: grid; + gap: 3px 4px; + grid-template-columns: max-content 1fr; + margin-bottom: 10px; +} + +.deletionGridItem { + padding: 3px; +} + +.deletionGridItem:first-child { + justify-self: center; +} + +.confirmDialogWarning { + background: url("../images/dialog-warning.svg") center center no-repeat; + height: 38px; + width: 38px; +} diff --git a/src/webui/www/private/scripts/client.js b/src/webui/www/private/scripts/client.js index 9b7ee58f7..154109005 100644 --- a/src/webui/www/private/scripts/client.js +++ b/src/webui/www/private/scripts/client.js @@ -29,6 +29,7 @@ window.qBittorrent ??= {}; window.qBittorrent.Client ??= (() => { const exports = () => { return { + closeWindow: closeWindow, closeWindows: closeWindows, genHash: genHash, getSyncMainDataInterval: getSyncMainDataInterval, @@ -44,6 +45,13 @@ window.qBittorrent.Client ??= (() => { }; }; + const closeWindow = function(windowID) { + const window = document.getElementById(windowID); + if (!window) + return; + MochaUI.closeWindow(window); + }; + const closeWindows = function() { MochaUI.closeAll(); }; diff --git a/src/webui/www/private/scripts/dynamicTable.js b/src/webui/www/private/scripts/dynamicTable.js index d87272893..a6f6d77bf 100644 --- a/src/webui/www/private/scripts/dynamicTable.js +++ b/src/webui/www/private/scripts/dynamicTable.js @@ -657,6 +657,10 @@ window.qBittorrent.DynamicTable ??= (() => { } }, + getRow: function(rowId) { + return this.rows.get(rowId); + }, + getFilteredAndSortedRows: function() { const filteredRows = []; diff --git a/src/webui/www/private/scripts/mocha-init.js b/src/webui/www/private/scripts/mocha-init.js index 483837785..c08ceaded 100644 --- a/src/webui/www/private/scripts/mocha-init.js +++ b/src/webui/www/private/scripts/mocha-init.js @@ -393,23 +393,35 @@ const initializeWindows = function() { } }; - deleteFN = function(deleteFiles = false) { + deleteFN = function(forceDeleteFiles = false) { const hashes = torrentsTable.selectedRowsIds(); - if (hashes.length) { + if (hashes.length > 0) { + window.qBittorrent.Client.closeWindow("confirmDeletionPage"); + new MochaUI.Window({ id: "confirmDeletionPage", icon: "images/qbittorrent-tray.svg", title: "QBT_TR(Remove torrent(s))QBT_TR[CONTEXT=confirmDeletionDlg]", - loadMethod: "iframe", - contentURL: new URI("confirmdeletion.html").setData("hashes", hashes.join("|")).setData("deleteFiles", deleteFiles).toString(), - scrollbars: false, - resizable: true, + data: { + hashes: hashes, + forceDeleteFiles: forceDeleteFiles + }, + loadMethod: "xhr", + contentURL: "views/confirmdeletion.html", maximizable: false, - padding: 10, - width: 424, - height: 160 + collapsible: false, + padding: { + left: 5, + right: 10, + top: 15, + bottom: 15 + }, + width: 480, + onContentLoaded: function(w) { + MochaUI.resizeWindow(w, { centered: true }); + MochaUI.centerWindow(w); + } }); - updateMainData(); } }; @@ -732,21 +744,30 @@ const initializeWindows = function() { deleteTorrentsByCategoryFN = function(categoryHash) { const hashes = torrentsTable.getFilteredTorrentsHashes("all", categoryHash, TAGS_ALL, TRACKERS_ALL); - if (hashes.length) { + if (hashes.length > 0) { + window.qBittorrent.Client.closeWindow("confirmDeletionPage"); + new MochaUI.Window({ id: "confirmDeletionPage", icon: "images/qbittorrent-tray.svg", title: "QBT_TR(Remove torrent(s))QBT_TR[CONTEXT=confirmDeletionDlg]", - loadMethod: "iframe", - contentURL: new URI("confirmdeletion.html").setData("hashes", hashes.join("|")).toString(), - scrollbars: false, - resizable: true, + data: { hashes: hashes }, + loadMethod: "xhr", + contentURL: "views/confirmdeletion.html", maximizable: false, - padding: 10, - width: 424, - height: 160 + collapsible: false, + padding: { + left: 5, + right: 10, + top: 15, + bottom: 15 + }, + width: 480, + onContentLoaded: function(w) { + MochaUI.resizeWindow(w, { centered: true }); + MochaUI.centerWindow(w); + } }); - updateMainData(); } }; @@ -877,21 +898,30 @@ const initializeWindows = function() { deleteTorrentsByTagFN = function(tagHash) { const hashes = torrentsTable.getFilteredTorrentsHashes("all", CATEGORIES_ALL, tagHash, TRACKERS_ALL); - if (hashes.length) { + if (hashes.length > 0) { + window.qBittorrent.Client.closeWindow("confirmDeletionPage"); + new MochaUI.Window({ id: "confirmDeletionPage", icon: "images/qbittorrent-tray.svg", title: "QBT_TR(Remove torrent(s))QBT_TR[CONTEXT=confirmDeletionDlg]", - loadMethod: "iframe", - contentURL: new URI("confirmdeletion.html").setData("hashes", hashes.join("|")).toString(), - scrollbars: false, - resizable: true, + data: { hashes: hashes }, + loadMethod: "xhr", + contentURL: "views/confirmdeletion.html", maximizable: false, - padding: 10, - width: 424, - height: 160 + collapsible: false, + padding: { + left: 5, + right: 10, + top: 15, + bottom: 15 + }, + width: 480, + onContentLoaded: function(w) { + MochaUI.resizeWindow(w, { centered: true }); + MochaUI.centerWindow(w); + } }); - updateMainData(); } }; @@ -982,22 +1012,31 @@ const initializeWindows = function() { } } - if (hashes.length) { + if (hashes.length > 0) { + window.qBittorrent.Client.closeWindow("confirmDeletionPage"); + new MochaUI.Window({ id: "confirmDeletionPage", icon: "images/qbittorrent-tray.svg", title: "QBT_TR(Remove torrent(s))QBT_TR[CONTEXT=confirmDeletionDlg]", - loadMethod: "iframe", - contentURL: new URI("confirmdeletion.html").setData("hashes", hashes.join("|")).toString(), - scrollbars: false, - resizable: true, + data: { + hashes: hashes, + filterList: "tracker" + }, + loadMethod: "xhr", + contentURL: "views/confirmdeletion.html", maximizable: false, - padding: 10, - width: 424, - height: 160, - onCloseComplete: function() { - updateMainData(); - setTrackerFilter(TRACKERS_ALL); + collapsible: false, + padding: { + left: 5, + right: 10, + top: 15, + bottom: 15 + }, + width: 480, + onContentLoaded: function(w) { + MochaUI.resizeWindow(w, { centered: true }); + MochaUI.centerWindow(w); } }); } diff --git a/src/webui/www/private/views/confirmdeletion.html b/src/webui/www/private/views/confirmdeletion.html new file mode 100644 index 000000000..122709b3f --- /dev/null +++ b/src/webui/www/private/views/confirmdeletion.html @@ -0,0 +1,95 @@ +
+
+ + + + + + + + + +
+
+
+ + +
+ + diff --git a/src/webui/www/webui.qrc b/src/webui/www/webui.qrc index fa2723425..73ee034ea 100644 --- a/src/webui/www/webui.qrc +++ b/src/webui/www/webui.qrc @@ -2,7 +2,6 @@ private/addpeers.html private/addtrackers.html - private/confirmdeletion.html private/confirmfeeddeletion.html private/confirmruleclear.html private/confirmruledeletion.html @@ -418,6 +417,7 @@ private/uploadlimit.html private/views/about.html private/views/aboutToolbar.html + private/views/confirmdeletion.html private/views/filters.html private/views/installsearchplugin.html private/views/log.html