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 @@ -
+