From fda797cb76526114941f595114ca3404246886cb Mon Sep 17 00:00:00 2001 From: skomerko <168652295+skomerko@users.noreply.github.com> Date: Sat, 24 Aug 2024 08:09:10 +0200 Subject: [PATCH] WebUI: Improve properties panel It is now possible to expand & collapse it by clicking directly on tabs, just like in GUI. In addition, collapse state is saved and applied on page load. Fixed one minor bug and now files search input is properly hidden even when panel is collapsed. PR #21209. --- src/webui/www/private/css/style.css | 6 +- src/webui/www/private/scripts/client.js | 124 ++++++++---------- src/webui/www/private/scripts/prop-files.js | 2 +- src/webui/www/private/scripts/prop-general.js | 2 +- src/webui/www/private/scripts/prop-peers.js | 2 +- .../www/private/scripts/prop-trackers.js | 2 +- .../www/private/scripts/prop-webseeds.js | 2 +- src/webui/www/private/views/properties.html | 20 +-- .../www/private/views/propertiesToolbar.html | 10 +- 9 files changed, 73 insertions(+), 97 deletions(-) diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index 7b20f8439..b599f5b58 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -455,7 +455,7 @@ a.propButton img { #torrentFilesFilterToolbar { float: right; - margin-right: 30px; + margin-right: 5px; } #torrentFilesFilterInput { @@ -464,7 +464,7 @@ a.propButton img { background-repeat: no-repeat; background-size: 1.5em; padding-left: 2em; - width: 160px; + width: 250px; } /* Tri-state checkbox */ @@ -591,7 +591,7 @@ td.generalLabel { user-select: none; } -#prop_general { +#propGeneral { padding: 2px; } diff --git a/src/webui/www/private/scripts/client.js b/src/webui/www/private/scripts/client.js index 90ec1ff96..9b7ee58f7 100644 --- a/src/webui/www/private/scripts/client.js +++ b/src/webui/www/private/scripts/client.js @@ -1464,7 +1464,6 @@ window.addEventListener("DOMContentLoaded", () => { new MochaUI.Panel({ id: "propertiesPanel", title: "Panel", - header: true, padding: { top: 0, right: 0, @@ -1473,92 +1472,79 @@ window.addEventListener("DOMContentLoaded", () => { }, contentURL: "views/properties.html", require: { - css: ["css/Tabs.css", "css/dynamicTable.css"], js: ["scripts/prop-general.js", "scripts/prop-trackers.js", "scripts/prop-peers.js", "scripts/prop-webseeds.js", "scripts/prop-files.js"], + onload: function() { + updatePropertiesPanel = function() { + switch (LocalPreferences.get("selected_properties_tab")) { + case "propGeneralLink": + window.qBittorrent.PropGeneral.updateData(); + break; + case "propTrackersLink": + window.qBittorrent.PropTrackers.updateData(); + break; + case "propPeersLink": + window.qBittorrent.PropPeers.updateData(); + break; + case "propWebSeedsLink": + window.qBittorrent.PropWebseeds.updateData(); + break; + case "propFilesLink": + window.qBittorrent.PropFiles.updateData(); + break; + } + }; + } }, tabsURL: "views/propertiesToolbar.html", - tabsOnload: function() { - MochaUI.initializeTabs("propertiesTabs"); + tabsOnload: function() {}, // must be included, otherwise panel won't load properly + onContentLoaded: function() { + this.panelHeaderCollapseBoxEl.classList.add("invisible"); - updatePropertiesPanel = function() { - if (!$("prop_general").hasClass("invisible")) { - if (window.qBittorrent.PropGeneral !== undefined) - window.qBittorrent.PropGeneral.updateData(); - } - else if (!$("prop_trackers").hasClass("invisible")) { - if (window.qBittorrent.PropTrackers !== undefined) - window.qBittorrent.PropTrackers.updateData(); - } - else if (!$("prop_peers").hasClass("invisible")) { - if (window.qBittorrent.PropPeers !== undefined) - window.qBittorrent.PropPeers.updateData(); - } - else if (!$("prop_webseeds").hasClass("invisible")) { - if (window.qBittorrent.PropWebseeds !== undefined) - window.qBittorrent.PropWebseeds.updateData(); - } - else if (!$("prop_files").hasClass("invisible")) { - if (window.qBittorrent.PropFiles !== undefined) - window.qBittorrent.PropFiles.updateData(); - } + const togglePropertiesPanel = () => { + this.collapseToggleEl.click(); + LocalPreferences.set("properties_panel_collapsed", this.isCollapsed.toString()); }; - $("PropGeneralLink").addEventListener("click", function(e) { - $$(".propertiesTabContent").addClass("invisible"); - $("prop_general").removeClass("invisible"); - hideFilesFilter(); - updatePropertiesPanel(); - LocalPreferences.set("selected_tab", this.id); - }); + const selectTab = (tabID) => { + const isAlreadySelected = this.panelHeaderEl.getElementById(tabID).classList.contains("selected"); + if (!isAlreadySelected) { + for (const tab of this.panelHeaderEl.getElementById("propertiesTabs").children) + tab.classList.toggle("selected", tab.id === tabID); - $("PropTrackersLink").addEventListener("click", function(e) { - $$(".propertiesTabContent").addClass("invisible"); - $("prop_trackers").removeClass("invisible"); - hideFilesFilter(); - updatePropertiesPanel(); - LocalPreferences.set("selected_tab", this.id); - }); + const tabContentID = tabID.replace("Link", ""); + for (const tabContent of this.contentEl.children) + tabContent.classList.toggle("invisible", tabContent.id !== tabContentID); - $("PropPeersLink").addEventListener("click", function(e) { - $$(".propertiesTabContent").addClass("invisible"); - $("prop_peers").removeClass("invisible"); - hideFilesFilter(); - updatePropertiesPanel(); - LocalPreferences.set("selected_tab", this.id); - }); + LocalPreferences.set("selected_properties_tab", tabID); + } - $("PropWebSeedsLink").addEventListener("click", function(e) { - $$(".propertiesTabContent").addClass("invisible"); - $("prop_webseeds").removeClass("invisible"); - hideFilesFilter(); - updatePropertiesPanel(); - LocalPreferences.set("selected_tab", this.id); - }); + if (isAlreadySelected || this.isCollapsed) + togglePropertiesPanel(); + }; - $("PropFilesLink").addEventListener("click", function(e) { - $$(".propertiesTabContent").addClass("invisible"); - $("prop_files").removeClass("invisible"); - showFilesFilter(); - updatePropertiesPanel(); - LocalPreferences.set("selected_tab", this.id); - }); + const lastUsedTab = LocalPreferences.get("selected_properties_tab", "propGeneralLink"); + selectTab(lastUsedTab); - $("propertiesPanel_collapseToggle").addEventListener("click", (e) => { + const startCollapsed = LocalPreferences.get("properties_panel_collapsed", "false") === "true"; + if (startCollapsed) + togglePropertiesPanel(); + + this.panelHeaderContentEl.addEventListener("click", (e) => { + const selectedTab = e.target.closest("li"); + if (!selectedTab) + return; + + selectTab(selectedTab.id); updatePropertiesPanel(); + + const showFilesFilter = (selectedTab.id === "propFilesLink") && !this.isCollapsed; + document.getElementById("torrentFilesFilterToolbar").classList.toggle("invisible", !showFilesFilter); }); }, column: "mainColumn", height: prop_h }); - const showFilesFilter = function() { - $("torrentFilesFilterToolbar").removeClass("invisible"); - }; - - const hideFilesFilter = function() { - $("torrentFilesFilterToolbar").addClass("invisible"); - }; - // listen for changes to torrentsFilterInput let torrentsFilterInputTimer = -1; $("torrentsFilterInput").addEventListener("input", () => { diff --git a/src/webui/www/private/scripts/prop-files.js b/src/webui/www/private/scripts/prop-files.js index c7d4e524a..6ae12fc8a 100644 --- a/src/webui/www/private/scripts/prop-files.js +++ b/src/webui/www/private/scripts/prop-files.js @@ -334,7 +334,7 @@ window.qBittorrent.PropFiles ??= (() => { let loadTorrentFilesDataTimer = -1; const loadTorrentFilesData = function() { - if ($("prop_files").hasClass("invisible") + if ($("propFiles").hasClass("invisible") || $("propertiesPanel_collapseToggle").hasClass("panel-expand")) { // Tab changed, don't do anything return; diff --git a/src/webui/www/private/scripts/prop-general.js b/src/webui/www/private/scripts/prop-general.js index 1b7148547..1c1dde576 100644 --- a/src/webui/www/private/scripts/prop-general.js +++ b/src/webui/www/private/scripts/prop-general.js @@ -74,7 +74,7 @@ window.qBittorrent.PropGeneral ??= (() => { let loadTorrentDataTimer = -1; const loadTorrentData = function() { - if ($("prop_general").hasClass("invisible") + if ($("propGeneral").hasClass("invisible") || $("propertiesPanel_collapseToggle").hasClass("panel-expand")) { // Tab changed, don't do anything return; diff --git a/src/webui/www/private/scripts/prop-peers.js b/src/webui/www/private/scripts/prop-peers.js index 6ba3699e6..71426b912 100644 --- a/src/webui/www/private/scripts/prop-peers.js +++ b/src/webui/www/private/scripts/prop-peers.js @@ -42,7 +42,7 @@ window.qBittorrent.PropPeers ??= (() => { let show_flags = true; const loadTorrentPeersData = function() { - if ($("prop_peers").hasClass("invisible") + if ($("propPeers").hasClass("invisible") || $("propertiesPanel_collapseToggle").hasClass("panel-expand")) { syncTorrentPeersLastResponseId = 0; torrentPeersTable.clear(); diff --git a/src/webui/www/private/scripts/prop-trackers.js b/src/webui/www/private/scripts/prop-trackers.js index 69ca6a387..5aa9ae7b7 100644 --- a/src/webui/www/private/scripts/prop-trackers.js +++ b/src/webui/www/private/scripts/prop-trackers.js @@ -42,7 +42,7 @@ window.qBittorrent.PropTrackers ??= (() => { let loadTrackersDataTimer = -1; const loadTrackersData = function() { - if ($("prop_trackers").hasClass("invisible") + if ($("propTrackers").hasClass("invisible") || $("propertiesPanel_collapseToggle").hasClass("panel-expand")) { // Tab changed, don't do anything return; diff --git a/src/webui/www/private/scripts/prop-webseeds.js b/src/webui/www/private/scripts/prop-webseeds.js index 1feb430dc..5ccb47abf 100644 --- a/src/webui/www/private/scripts/prop-webseeds.js +++ b/src/webui/www/private/scripts/prop-webseeds.js @@ -90,7 +90,7 @@ window.qBittorrent.PropWebseeds ??= (() => { let loadWebSeedsDataTimer = -1; const loadWebSeedsData = function() { - if ($("prop_webseeds").hasClass("invisible") + if ($("propWebSeeds").hasClass("invisible") || $("propertiesPanel_collapseToggle").hasClass("panel-expand")) { // Tab changed, don't do anything return; diff --git a/src/webui/www/private/views/properties.html b/src/webui/www/private/views/properties.html index 58c303735..63b602039 100644 --- a/src/webui/www/private/views/properties.html +++ b/src/webui/www/private/views/properties.html @@ -1,4 +1,4 @@ -
+