mirrors/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent.git synced 2025-01-05 14:47:25 +03:00
Code Issues Projects Releases Packages Wiki Activity

WebUI improvements

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/webui/www/private/newcategory.html
View file

@ -159,7 +159,7 @@
<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%;">
<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>
</body>

40
src/webui/www/private/scripts/client.js
View file

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

9
src/webui/www/private/scripts/contextmenu.js
View file

@ -160,7 +160,7 @@ window.qBittorrent.ContextMenu ??= (() => {
this.touchStartAt = 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)
this.triggerMenu(touchStartEvent, elem);
}, { passive: true });
@ -246,13 +246,13 @@ window.qBittorrent.ContextMenu ??= (() => {
}
setItemChecked(item, checked) {
this.menu.getElement("a[href$=" + item + "]").firstChild.style.opacity =
this.menu.getElement("a[href$=" + item + "]").firstElementChild.style.opacity =
checked ? "1" : "0";
return this;
}
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
@ -535,8 +535,7 @@ window.qBittorrent.ContextMenu ??= (() => {
updateTagsSubMenu(tagList) {
const contextTagList = $("contextTagList");
while (contextTagList.firstChild !== null)
contextTagList.removeChild(contextTagList.firstChild);
contextTagList.replaceChildren();
const createMenuItem = (text, imgURL, clickFn) => {
const anchor = document.createElement("a");

26
src/webui/www/private/scripts/dynamicTable.js
View file

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

6
src/webui/www/private/scripts/misc.js
View file

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

4
src/webui/www/private/scripts/prop-trackers.js
View file

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

2
src/webui/www/private/scripts/prop-webseeds.js
View file

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

2
src/webui/www/private/views/cookies.html
View file

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

14
src/webui/www/private/views/log.html
View file

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

2
src/webui/www/private/views/preferences.html
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);
if (!languages.includes(selected)) {
const lang = selected.slice(0, selected.indexOf("_"));
const lang = selected.split("_", 1)[0];
selected = languages.includes(lang) ? lang : "en";
}
$("locale_select").value = selected;

2
src/webui/www/private/views/rssDownloader.html
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)";
// 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%";
}
else {