Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebUI improvements #21916

Merged
merged 9 commits into from
Nov 29, 2024
Merged

WebUI improvements #21916

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
72e033d
WebUI: remove child elements directly
Chocobo1 Nov 20, 2024
f34787e
WebUI: use correct property for selecting child elements
Chocobo1 Nov 20, 2024
5eec0c0
WebUI: use idiomatic string methods
Chocobo1 Nov 22, 2024
2109e13
WebUI: use proper event for handling text changes
Chocobo1 Nov 25, 2024
24d349f
WebUI: fix wrong event property
Chocobo1 Nov 25, 2024
ef55063
WebUI: fix invalid style
Chocobo1 Nov 25, 2024
83b0dd3
WebUI: fix checkbox initialization
Chocobo1 Nov 25, 2024
b84a51c
WebUI: revise Edit Category dialog button text
Chocobo1 Nov 26, 2024
f8aaea3
WebUI: locate element faster
Chocobo1 Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/webui/www/private/newcategory.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
40 changes: 20 additions & 20 deletions src/webui/www/private/scripts/client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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();
Expand All @@ -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();
Expand Down Expand Up @@ -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");
}
Expand All @@ -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();
});

Expand All @@ -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();
Expand Down Expand Up @@ -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));
Expand Down
9 changes: 4 additions & 5 deletions src/webui/www/private/scripts/contextmenu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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");
Expand Down
26 changes: 13 additions & 13 deletions src/webui/www/private/scripts/dynamicTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"));

Expand Down Expand Up @@ -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") {
Expand Down Expand Up @@ -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;
Expand All @@ -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({
Expand Down
6 changes: 3 additions & 3 deletions src/webui/www/private/scripts/misc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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;
});
};
Expand Down
4 changes: 2 additions & 2 deletions src/webui/www/private/scripts/prop-trackers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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)) {
Expand Down
2 changes: 1 addition & 1 deletion src/webui/www/private/scripts/prop-webseeds.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
2 changes: 1 addition & 1 deletion src/webui/www/private/views/cookies.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@
addCookie();
});

document.querySelector("#saveButton").addEventListener("click", (event) => {
document.getElementById("saveButton").addEventListener("click", (event) => {
save();
});
};
Expand Down
14 changes: 7 additions & 7 deletions src/webui/www/private/views/log.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/webui/www/private/views/preferences.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2138,7 +2138,7 @@
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;
Expand Down
2 changes: 1 addition & 1 deletion src/webui/www/private/views/rssDownloader.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -388,7 +388,7 @@
$("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 {
Expand Down
Loading