WebUI improvements

WebUI improvements
This commit is contained in:
Chocobo1 2024-11-29 23:52:55 +08:00 committed by GitHub
commit 90aecfea02
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 54 additions and 55 deletions

View file

@ -159,7 +159,7 @@
<label for="savePath" style="font-weight: bold;">QBT_TR(Save path:)QBT_TR[CONTEXT=TransferListWidget]</label> <label for="savePath" style="font-weight: bold;">QBT_TR(Save path:)QBT_TR[CONTEXT=TransferListWidget]</label>
<input type="text" id="savePath" class="pathDirectory" style="width: 99%;"> <input type="text" id="savePath" class="pathDirectory" style="width: 99%;">
<div style="text-align: center; padding-top: 10px;"> <div style="text-align: center; padding-top: 10px;">
<input type="button" value="QBT_TR(Add)QBT_TR[CONTEXT=HttpServer]" id="categoryNameButton"> <input type="button" value="QBT_TR(OK)QBT_TR[CONTEXT=Category]" id="categoryNameButton">
</div> </div>
</div> </div>
</body> </body>

View file

@ -339,28 +339,28 @@ window.addEventListener("DOMContentLoaded", () => {
// Show Top Toolbar is enabled by default // Show Top Toolbar is enabled by default
let showTopToolbar = LocalPreferences.get("show_top_toolbar", "true") === "true"; let showTopToolbar = LocalPreferences.get("show_top_toolbar", "true") === "true";
if (!showTopToolbar) { if (!showTopToolbar) {
$("showTopToolbarLink").firstChild.style.opacity = "0"; $("showTopToolbarLink").firstElementChild.style.opacity = "0";
$("mochaToolbar").addClass("invisible"); $("mochaToolbar").addClass("invisible");
} }
// Show Status Bar is enabled by default // Show Status Bar is enabled by default
let showStatusBar = LocalPreferences.get("show_status_bar", "true") === "true"; let showStatusBar = LocalPreferences.get("show_status_bar", "true") === "true";
if (!showStatusBar) { if (!showStatusBar) {
$("showStatusBarLink").firstChild.style.opacity = "0"; $("showStatusBarLink").firstElementChild.style.opacity = "0";
$("desktopFooterWrapper").addClass("invisible"); $("desktopFooterWrapper").addClass("invisible");
} }
// Show Filters Sidebar is enabled by default // Show Filters Sidebar is enabled by default
let showFiltersSidebar = LocalPreferences.get("show_filters_sidebar", "true") === "true"; let showFiltersSidebar = LocalPreferences.get("show_filters_sidebar", "true") === "true";
if (!showFiltersSidebar) { if (!showFiltersSidebar) {
$("showFiltersSidebarLink").firstChild.style.opacity = "0"; $("showFiltersSidebarLink").firstElementChild.style.opacity = "0";
$("filtersColumn").addClass("invisible"); $("filtersColumn").addClass("invisible");
$("filtersColumn_handle").addClass("invisible"); $("filtersColumn_handle").addClass("invisible");
} }
let speedInTitle = LocalPreferences.get("speed_in_browser_title_bar") === "true"; let speedInTitle = LocalPreferences.get("speed_in_browser_title_bar") === "true";
if (!speedInTitle) if (!speedInTitle)
$("speedInBrowserTitleBarLink").firstChild.style.opacity = "0"; $("speedInBrowserTitleBarLink").firstElementChild.style.opacity = "0";
// After showing/hiding the toolbar + status bar // After showing/hiding the toolbar + status bar
window.qBittorrent.Client.showSearchEngine(LocalPreferences.get("show_search_engine") !== "false"); window.qBittorrent.Client.showSearchEngine(LocalPreferences.get("show_search_engine") !== "false");
@ -465,7 +465,7 @@ window.addEventListener("DOMContentLoaded", () => {
if (filterEl.classList.toggle("invisible", hideFilter)) if (filterEl.classList.toggle("invisible", hideFilter))
return; return;
} }
filterEl.firstElementChild.lastChild.nodeValue = filterTitle.replace("%1", filterTorrentCount); filterEl.firstElementChild.lastChild.textContent = filterTitle.replace("%1", filterTorrentCount);
}; };
const updateFiltersList = () => { const updateFiltersList = () => {
@ -1122,11 +1122,11 @@ window.addEventListener("DOMContentLoaded", () => {
showTopToolbar = !showTopToolbar; showTopToolbar = !showTopToolbar;
LocalPreferences.set("show_top_toolbar", showTopToolbar.toString()); LocalPreferences.set("show_top_toolbar", showTopToolbar.toString());
if (showTopToolbar) { if (showTopToolbar) {
$("showTopToolbarLink").firstChild.style.opacity = "1"; $("showTopToolbarLink").firstElementChild.style.opacity = "1";
$("mochaToolbar").removeClass("invisible"); $("mochaToolbar").removeClass("invisible");
} }
else { else {
$("showTopToolbarLink").firstChild.style.opacity = "0"; $("showTopToolbarLink").firstElementChild.style.opacity = "0";
$("mochaToolbar").addClass("invisible"); $("mochaToolbar").addClass("invisible");
} }
MochaUI.Desktop.setDesktopSize(); MochaUI.Desktop.setDesktopSize();
@ -1136,11 +1136,11 @@ window.addEventListener("DOMContentLoaded", () => {
showStatusBar = !showStatusBar; showStatusBar = !showStatusBar;
LocalPreferences.set("show_status_bar", showStatusBar.toString()); LocalPreferences.set("show_status_bar", showStatusBar.toString());
if (showStatusBar) { if (showStatusBar) {
$("showStatusBarLink").firstChild.style.opacity = "1"; $("showStatusBarLink").firstElementChild.style.opacity = "1";
$("desktopFooterWrapper").removeClass("invisible"); $("desktopFooterWrapper").removeClass("invisible");
} }
else { else {
$("showStatusBarLink").firstChild.style.opacity = "0"; $("showStatusBarLink").firstElementChild.style.opacity = "0";
$("desktopFooterWrapper").addClass("invisible"); $("desktopFooterWrapper").addClass("invisible");
} }
MochaUI.Desktop.setDesktopSize(); MochaUI.Desktop.setDesktopSize();
@ -1174,12 +1174,12 @@ window.addEventListener("DOMContentLoaded", () => {
showFiltersSidebar = !showFiltersSidebar; showFiltersSidebar = !showFiltersSidebar;
LocalPreferences.set("show_filters_sidebar", showFiltersSidebar.toString()); LocalPreferences.set("show_filters_sidebar", showFiltersSidebar.toString());
if (showFiltersSidebar) { if (showFiltersSidebar) {
$("showFiltersSidebarLink").firstChild.style.opacity = "1"; $("showFiltersSidebarLink").firstElementChild.style.opacity = "1";
$("filtersColumn").removeClass("invisible"); $("filtersColumn").removeClass("invisible");
$("filtersColumn_handle").removeClass("invisible"); $("filtersColumn_handle").removeClass("invisible");
} }
else { else {
$("showFiltersSidebarLink").firstChild.style.opacity = "0"; $("showFiltersSidebarLink").firstElementChild.style.opacity = "0";
$("filtersColumn").addClass("invisible"); $("filtersColumn").addClass("invisible");
$("filtersColumn_handle").addClass("invisible"); $("filtersColumn_handle").addClass("invisible");
} }
@ -1190,9 +1190,9 @@ window.addEventListener("DOMContentLoaded", () => {
speedInTitle = !speedInTitle; speedInTitle = !speedInTitle;
LocalPreferences.set("speed_in_browser_title_bar", speedInTitle.toString()); LocalPreferences.set("speed_in_browser_title_bar", speedInTitle.toString());
if (speedInTitle) if (speedInTitle)
$("speedInBrowserTitleBarLink").firstChild.style.opacity = "1"; $("speedInBrowserTitleBarLink").firstElementChild.style.opacity = "1";
else else
$("speedInBrowserTitleBarLink").firstChild.style.opacity = "0"; $("speedInBrowserTitleBarLink").firstElementChild.style.opacity = "0";
processServerState(); processServerState();
}); });
@ -1216,42 +1216,42 @@ window.addEventListener("DOMContentLoaded", () => {
const updateTabDisplay = () => { const updateTabDisplay = () => {
if (window.qBittorrent.Client.isShowRssReader()) { if (window.qBittorrent.Client.isShowRssReader()) {
$("showRssReaderLink").firstChild.style.opacity = "1"; $("showRssReaderLink").firstElementChild.style.opacity = "1";
$("mainWindowTabs").removeClass("invisible"); $("mainWindowTabs").removeClass("invisible");
$("rssTabLink").removeClass("invisible"); $("rssTabLink").removeClass("invisible");
if (!MochaUI.Panels.instances.RssPanel) if (!MochaUI.Panels.instances.RssPanel)
addRssPanel(); addRssPanel();
} }
else { else {
$("showRssReaderLink").firstChild.style.opacity = "0"; $("showRssReaderLink").firstElementChild.style.opacity = "0";
$("rssTabLink").addClass("invisible"); $("rssTabLink").addClass("invisible");
if ($("rssTabLink").hasClass("selected")) if ($("rssTabLink").hasClass("selected"))
$("transfersTabLink").click(); $("transfersTabLink").click();
} }
if (window.qBittorrent.Client.isShowSearchEngine()) { if (window.qBittorrent.Client.isShowSearchEngine()) {
$("showSearchEngineLink").firstChild.style.opacity = "1"; $("showSearchEngineLink").firstElementChild.style.opacity = "1";
$("mainWindowTabs").removeClass("invisible"); $("mainWindowTabs").removeClass("invisible");
$("searchTabLink").removeClass("invisible"); $("searchTabLink").removeClass("invisible");
if (!MochaUI.Panels.instances.SearchPanel) if (!MochaUI.Panels.instances.SearchPanel)
addSearchPanel(); addSearchPanel();
} }
else { else {
$("showSearchEngineLink").firstChild.style.opacity = "0"; $("showSearchEngineLink").firstElementChild.style.opacity = "0";
$("searchTabLink").addClass("invisible"); $("searchTabLink").addClass("invisible");
if ($("searchTabLink").hasClass("selected")) if ($("searchTabLink").hasClass("selected"))
$("transfersTabLink").click(); $("transfersTabLink").click();
} }
if (window.qBittorrent.Client.isShowLogViewer()) { if (window.qBittorrent.Client.isShowLogViewer()) {
$("showLogViewerLink").firstChild.style.opacity = "1"; $("showLogViewerLink").firstElementChild.style.opacity = "1";
$("mainWindowTabs").removeClass("invisible"); $("mainWindowTabs").removeClass("invisible");
$("logTabLink").removeClass("invisible"); $("logTabLink").removeClass("invisible");
if (!MochaUI.Panels.instances.LogPanel) if (!MochaUI.Panels.instances.LogPanel)
addLogPanel(); addLogPanel();
} }
else { else {
$("showLogViewerLink").firstChild.style.opacity = "0"; $("showLogViewerLink").firstElementChild.style.opacity = "0";
$("logTabLink").addClass("invisible"); $("logTabLink").addClass("invisible");
if ($("logTabLink").hasClass("selected")) if ($("logTabLink").hasClass("selected"))
$("transfersTabLink").click(); $("transfersTabLink").click();
@ -1492,7 +1492,7 @@ window.addEventListener("DOMContentLoaded", () => {
const handleDownloadParam = () => { const handleDownloadParam = () => {
// Extract torrent URL from download param in WebUI URL hash // Extract torrent URL from download param in WebUI URL hash
const downloadHash = "#download="; const downloadHash = "#download=";
if (location.hash.indexOf(downloadHash) !== 0) if (!location.hash.startsWith(downloadHash))
return; return;
const url = decodeURIComponent(location.hash.substring(downloadHash.length)); const url = decodeURIComponent(location.hash.substring(downloadHash.length));

View file

@ -160,7 +160,7 @@ window.qBittorrent.ContextMenu ??= (() => {
this.touchStartAt = null; this.touchStartAt = null;
this.touchStartEvent = null; this.touchStartEvent = null;
const isTargetUnchanged = (Math.abs(e.event.pageX - touchStartEvent.event.pageX) <= 10) && (Math.abs(e.event.pageY - touchStartEvent.event.pageY) <= 10); const isTargetUnchanged = (Math.abs(e.changedTouches[0].pageX - touchStartEvent.changedTouches[0].pageX) <= 10) && (Math.abs(e.changedTouches[0].pageY - touchStartEvent.changedTouches[0].pageY) <= 10);
if (((now - touchStartAt) >= this.options.touchTimer) && isTargetUnchanged) if (((now - touchStartAt) >= this.options.touchTimer) && isTargetUnchanged)
this.triggerMenu(touchStartEvent, elem); this.triggerMenu(touchStartEvent, elem);
}, { passive: true }); }, { passive: true });
@ -246,13 +246,13 @@ window.qBittorrent.ContextMenu ??= (() => {
} }
setItemChecked(item, checked) { setItemChecked(item, checked) {
this.menu.getElement("a[href$=" + item + "]").firstChild.style.opacity = this.menu.getElement("a[href$=" + item + "]").firstElementChild.style.opacity =
checked ? "1" : "0"; checked ? "1" : "0";
return this; return this;
} }
getItemChecked(item) { getItemChecked(item) {
return this.menu.getElement("a[href$=" + item + "]").firstChild.style.opacity !== "0"; return this.menu.getElement("a[href$=" + item + "]").firstElementChild.style.opacity !== "0";
} }
// hide an item // hide an item
@ -535,8 +535,7 @@ window.qBittorrent.ContextMenu ??= (() => {
updateTagsSubMenu(tagList) { updateTagsSubMenu(tagList) {
const contextTagList = $("contextTagList"); const contextTagList = $("contextTagList");
while (contextTagList.firstChild !== null) contextTagList.replaceChildren();
contextTagList.removeChild(contextTagList.firstChild);
const createMenuItem = (text, imgURL, clickFn) => { const createMenuItem = (text, imgURL, clickFn) => {
const anchor = document.createElement("a"); const anchor = document.createElement("a");

View file

@ -224,11 +224,15 @@ window.qBittorrent.DynamicTable ??= (() => {
changeBorderSide = "left"; changeBorderSide = "left";
} }
const borderStyle = "initial solid #e60"; const borderStyle = "solid #e60";
if (changeBorderSide === "left") if (changeBorderSide === "left") {
borderChangeElement.style.borderLeft = borderStyle; borderChangeElement.style.borderLeft = borderStyle;
else borderChangeElement.style.borderLeftWidth = "initial";
}
else {
borderChangeElement.style.borderRight = borderStyle; borderChangeElement.style.borderRight = borderStyle;
borderChangeElement.style.borderRightWidth = "initial";
}
resetElementBorderStyle(borderChangeElement, ((changeBorderSide === "right") ? "left" : "right")); resetElementBorderStyle(borderChangeElement, ((changeBorderSide === "right") ? "left" : "right"));
@ -288,8 +292,7 @@ window.qBittorrent.DynamicTable ??= (() => {
LocalPreferences.set("columns_order_" + this.dynamicTableDivId, val.join(",")); LocalPreferences.set("columns_order_" + this.dynamicTableDivId, val.join(","));
this.loadColumnsOrder(); this.loadColumnsOrder();
this.updateTableHeaders(); this.updateTableHeaders();
while (this.tableBody.firstChild) this.tableBody.replaceChildren();
this.tableBody.removeChild(this.tableBody.firstChild);
this.updateTable(true); this.updateTable(true);
} }
if (this.currentHeaderAction === "drag") { if (this.currentHeaderAction === "drag") {
@ -465,11 +468,8 @@ window.qBittorrent.DynamicTable ??= (() => {
this.showColumn(action, this.columns[action].visible === "0"); this.showColumn(action, this.columns[action].visible === "0");
}.bind(this); }.bind(this);
// recreate child nodes when reusing (enables the context menu to work correctly) // recreate child elements when reusing (enables the context menu to work correctly)
if (ul.hasChildNodes()) { ul.replaceChildren();
while (ul.firstChild)
ul.removeChild(ul.lastChild);
}
for (let i = 0; i < this.columns.length; ++i) { for (let i = 0; i < this.columns.length; ++i) {
const text = this.columns[i].caption; const text = this.columns[i].caption;
@ -496,9 +496,9 @@ window.qBittorrent.DynamicTable ??= (() => {
const autoResizeAllElement = createResizeElement("Resize All", "#autoResizeAllAction"); const autoResizeAllElement = createResizeElement("Resize All", "#autoResizeAllAction");
const autoResizeElement = createResizeElement("Resize", "#autoResizeAction"); const autoResizeElement = createResizeElement("Resize", "#autoResizeAction");
ul.firstChild.classList.add("separator"); ul.firstElementChild.classList.add("separator");
ul.insertBefore(autoResizeAllElement, ul.firstChild); ul.insertBefore(autoResizeAllElement, ul.firstElementChild);
ul.insertBefore(autoResizeElement, ul.firstChild); ul.insertBefore(autoResizeElement, ul.firstElementChild);
ul.inject(document.body); ul.inject(document.body);
this.headerContextMenu = new DynamicTableHeaderContextMenuClass({ this.headerContextMenu = new DynamicTableHeaderContextMenuClass({

View file

@ -255,8 +255,8 @@ window.qBittorrent.Misc ??= (() => {
const containsAllTerms = (text, terms) => { const containsAllTerms = (text, terms) => {
const textToSearch = text.toLowerCase(); const textToSearch = text.toLowerCase();
return terms.every((term) => { return terms.every((term) => {
const isTermRequired = (term[0] === "+"); const isTermRequired = term.startsWith("+");
const isTermExcluded = (term[0] === "-"); const isTermExcluded = term.startsWith("-");
if (isTermRequired || isTermExcluded) { if (isTermRequired || isTermExcluded) {
// ignore lonely +/- // ignore lonely +/-
if (term.length === 1) if (term.length === 1)
@ -265,7 +265,7 @@ window.qBittorrent.Misc ??= (() => {
term = term.substring(1); term = term.substring(1);
} }
const textContainsTerm = (textToSearch.indexOf(term) !== -1); const textContainsTerm = textToSearch.includes(term);
return isTermExcluded ? !textContainsTerm : textContainsTerm; return isTermExcluded ? !textContainsTerm : textContainsTerm;
}); });
}; };

View file

@ -132,7 +132,7 @@ window.qBittorrent.PropTrackers ??= (() => {
}, },
EditTracker: (element, ref) => { EditTracker: (element, ref) => {
// only allow editing of one row // only allow editing of one row
element.firstChild.click(); element.firstElementChild.click();
editTrackerFN(element); editTrackerFN(element);
}, },
RemoveTracker: (element, ref) => { RemoveTracker: (element, ref) => {
@ -146,7 +146,7 @@ window.qBittorrent.PropTrackers ??= (() => {
onShow: function() { onShow: function() {
const selectedTrackers = torrentTrackersTable.selectedRowsIds(); const selectedTrackers = torrentTrackersTable.selectedRowsIds();
const containsStaticTracker = selectedTrackers.some((tracker) => { const containsStaticTracker = selectedTrackers.some((tracker) => {
return (tracker.indexOf("** [") === 0); return tracker.startsWith("** [");
}); });
if (containsStaticTracker || (selectedTrackers.length === 0)) { if (containsStaticTracker || (selectedTrackers.length === 0)) {

View file

@ -103,7 +103,7 @@ window.qBittorrent.PropWebseeds ??= (() => {
}, },
EditWebSeed: (element, ref) => { EditWebSeed: (element, ref) => {
// only allow editing of one row // only allow editing of one row
element.firstChild.click(); element.firstElementChild.click();
editWebSeedFN(element); editWebSeedFN(element);
}, },
RemoveWebSeed: (element, ref) => { RemoveWebSeed: (element, ref) => {

View file

@ -178,7 +178,7 @@
addCookie(); addCookie();
}); });
document.querySelector("#saveButton").addEventListener("click", (event) => { document.getElementById("saveButton").addEventListener("click", (event) => {
save(); save();
}); });
}; };

View file

@ -96,8 +96,8 @@
<option value="8">QBT_TR(Critical Messages)QBT_TR[CONTEXT=ExecutionLogWidget]</option> <option value="8">QBT_TR(Critical Messages)QBT_TR[CONTEXT=ExecutionLogWidget]</option>
</select> </select>
<input type="text" id="filterTextInput" onkeyup="window.qBittorrent.Log.filterTextChanged()" placeholder="QBT_TR(Filter logs)QBT_TR[CONTEXT=ExecutionLogWidget]" aria-label="QBT_TR(Filter logs)QBT_TR[CONTEXT=ExecutionLogWidget]" autocomplete="off" autocorrect="off" autocapitalize="none"> <input type="text" id="filterTextInput" oninput="window.qBittorrent.Log.filterTextChanged()" placeholder="QBT_TR(Filter logs)QBT_TR[CONTEXT=ExecutionLogWidget]" aria-label="QBT_TR(Filter logs)QBT_TR[CONTEXT=ExecutionLogWidget]" autocomplete="off" autocorrect="off" autocapitalize="none">
<button type="button" title="Clear input" onclick="javascript:document.querySelector('#filterTextInput').value='';window.qBittorrent.Log.filterTextChanged();">QBT_TR(Clear)QBT_TR[CONTEXT=ExecutionLogWidget]</button> <button type="button" title="Clear input" onclick="javascript:document.getElementById('filterTextInput').value='';window.qBittorrent.Log.filterTextChanged();">QBT_TR(Clear)QBT_TR[CONTEXT=ExecutionLogWidget]</button>
</div> </div>
<div id="logFilterSummary"> <div id="logFilterSummary">
@ -189,7 +189,7 @@
const init = () => { const init = () => {
for (const option of $("logLevelSelect").options) for (const option of $("logLevelSelect").options)
option.setAttribute("selected", selectedLogLevels.includes(option.value)); option.toggleAttribute("selected", selectedLogLevels.includes(option.value));
selectBox = new vanillaSelectBox("#logLevelSelect", { selectBox = new vanillaSelectBox("#logLevelSelect", {
maxHeight: 200, maxHeight: 200,
@ -343,10 +343,10 @@
if (curTab === "main") { if (curTab === "main") {
url = new URI("api/v2/log/main"); url = new URI("api/v2/log/main");
url.setData({ url.setData({
normal: selectedLogLevels.indexOf("1") !== -1, normal: selectedLogLevels.includes("1"),
info: selectedLogLevels.indexOf("2") !== -1, info: selectedLogLevels.includes("2"),
warning: selectedLogLevels.indexOf("4") !== -1, warning: selectedLogLevels.includes("4"),
critical: selectedLogLevels.indexOf("8") !== -1 critical: selectedLogLevels.includes("8")
}); });
} }
else { else {

View file

@ -2138,7 +2138,7 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
languages.push($("locale_select").options[i].value); languages.push($("locale_select").options[i].value);
if (!languages.includes(selected)) { if (!languages.includes(selected)) {
const lang = selected.slice(0, selected.indexOf("_")); const lang = selected.split("_", 1)[0];
selected = languages.includes(lang) ? lang : "en"; selected = languages.includes(lang) ? lang : "en";
} }
$("locale_select").value = selected; $("locale_select").value = selected;

View file

@ -388,7 +388,7 @@ Supports the formats: S01E01, 1x1, 2017.12.31 and 31.12.2017 (Date formats also
$("rssDownloaderFeeds").style.height = "calc(100% - " + centerRowNotTableHeight + "px)"; $("rssDownloaderFeeds").style.height = "calc(100% - " + centerRowNotTableHeight + "px)";
// firefox calculates the height of the table inside fieldset differently and thus doesn't need the offset // firefox calculates the height of the table inside fieldset differently and thus doesn't need the offset
if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) { if (navigator.userAgent.toLowerCase().includes("firefox")) {
$("rssDownloaderFeedsTable").style.height = "100%"; $("rssDownloaderFeedsTable").style.height = "100%";
} }
else { else {