github/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent synced 2025-07-16 02:03:07 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge pull request #21179 from Chocobo1/webui_style

Browse source 
WebUI: use native property to set styles
This commit is contained in:
Chocobo1 2024-08-12 15:08:26 +08:00 • committed by GitHub
commit d9667b5221
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 50 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/webui/www/private/css/style.css
View file

@ -682,15 +682,11 @@ td.statusBarSeparator {
} }
#searchResultsTableContainer { #searchResultsTableContainer {
-moz-height: calc(100% - 177px);
-webkit-height: calc(100% - 177px);
height: calc(100% - 177px); height: calc(100% - 177px);
overflow: auto; overflow: auto;
} }
#searchResultsTableDiv { #searchResultsTableDiv {
-moz-height: calc(100% - 26px) !important;
-webkit-height: calc(100% - 26px) !important;
height: calc(100% - 26px) !important; height: calc(100% - 26px) !important;
} }

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

@ -172,10 +172,8 @@ window.addEventListener("DOMContentLoaded", () => {
}); });
/* MochaUI.Desktop = new MochaUI.Desktop(); /* MochaUI.Desktop = new MochaUI.Desktop();
MochaUI.Desktop.desktop.setStyles({ MochaUI.Desktop.desktop.style.background = "#fff";
'background': '#fff', MochaUI.Desktop.desktop.style.visibility = "visible"; */
'visibility': 'visible'
});*/
MochaUI.Desktop.initialize(); MochaUI.Desktop.initialize();
const buildTransfersTab = function() { const buildTransfersTab = function() {

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

@ -78,23 +78,18 @@ window.qBittorrent.ContextMenu ??= (() => {
this.fx = new Fx.Tween(this.menu, { this.fx = new Fx.Tween(this.menu, {
property: "opacity", property: "opacity",
duration: this.options.fadeSpeed, duration: this.options.fadeSpeed,
onComplete: function() { onComplete: () => {
if (this.getStyle("opacity")) this.menu.style.visibility = (getComputedStyle(this.menu).opacity > 0) ? "visible" : "hidden";
this.setStyle("visibility", "visible"); }
else
this.setStyle("visibility", "hidden");
}.bind(this.menu)
}); });
// hide and begin the listener // hide and begin the listener
this.hide().startListener(); this.hide().startListener();
// hide the menu // hide the menu
this.menu.setStyles({ this.menu.style.position = "absolute";
"position": "absolute", this.menu.style.top = "-900000px";
"top": "-900000px", this.menu.style.display = "block";
"display": "block"
});
}, },
adjustMenuPosition: function(e) { adjustMenuPosition: function(e) {
@ -103,13 +98,11 @@ window.qBittorrent.ContextMenu ??= (() => {
const scrollableMenuMaxHeight = document.documentElement.clientHeight * 0.75; const scrollableMenuMaxHeight = document.documentElement.clientHeight * 0.75;
if (this.menu.hasClass("scrollableMenu")) if (this.menu.hasClass("scrollableMenu"))
this.menu.setStyle("max-height", scrollableMenuMaxHeight); this.menu.style.maxHeight = `${scrollableMenuMaxHeight}px`;
// draw the menu off-screen to know the menu dimensions // draw the menu off-screen to know the menu dimensions
this.menu.setStyles({ this.menu.style.left = "-999em";
left: "-999em", this.menu.style.top = "-999em";
top: "-999em"
});
// position the menu // position the menu
let xPosMenu = e.pageX + this.options.offsets.x; let xPosMenu = e.pageX + this.options.offsets.x;
@ -122,19 +115,17 @@ window.qBittorrent.ContextMenu ??= (() => {
xPosMenu = 0; xPosMenu = 0;
if (yPosMenu < 0) if (yPosMenu < 0)
yPosMenu = 0; yPosMenu = 0;
this.menu.setStyles({ this.menu.style.left = `${xPosMenu}px`;
left: xPosMenu, this.menu.style.top = `${yPosMenu}px`;
top: yPosMenu, this.menu.style.position = "absolute";
position: "absolute", this.menu.style.zIndex = "2000";
"z-index": "2000"
});
// position the sub-menu // position the sub-menu
const uls = this.menu.getElementsByTagName("ul"); const uls = this.menu.getElementsByTagName("ul");
for (let i = 0; i < uls.length; ++i) { for (let i = 0; i < uls.length; ++i) {
const ul = uls[i]; const ul = uls[i];
if (ul.hasClass("scrollableMenu")) if (ul.hasClass("scrollableMenu"))
ul.setStyle("max-height", scrollableMenuMaxHeight); ul.style.maxHeight = `${scrollableMenuMaxHeight}px`;
const rectParent = ul.parentNode.getBoundingClientRect(); const rectParent = ul.parentNode.getBoundingClientRect();
const xPosOrigin = rectParent.left; const xPosOrigin = rectParent.left;
const yPosOrigin = rectParent.bottom; const yPosOrigin = rectParent.bottom;
@ -148,10 +139,8 @@ window.qBittorrent.ContextMenu ??= (() => {
xPos = 0; xPos = 0;
if (yPos < 0) if (yPos < 0)
yPos = 0; yPos = 0;
ul.setStyles({ ul.style.marginLeft = `${xPos - xPosOrigin}px`;
"margin-left": xPos - xPosOrigin, ul.style.marginTop = `${yPos - yPosOrigin}px`;
"margin-top": yPos - yPosOrigin
});
} }
}, },
@ -185,7 +174,6 @@ window.qBittorrent.ContextMenu ??= (() => {
addTarget: function(t) { addTarget: function(t) {
// prevent long press from selecting this text // prevent long press from selecting this text
t.style.userSelect = "none"; t.style.userSelect = "none";
t.style["-webkit-user-select"] = "none";
this.targets[this.targets.length] = t; this.targets[this.targets.length] = t;
this.setupEventListeners(t); this.setupEventListeners(t);
@ -686,10 +674,8 @@ window.qBittorrent.ContextMenu ??= (() => {
this.updateMenuItems(); this.updateMenuItems();
// draw the menu off-screen to know the menu dimensions // draw the menu off-screen to know the menu dimensions
this.menu.setStyles({ this.menu.style.left = "-999em";
left: "-999em", this.menu.style.top = "-999em";
top: "-999em"
});
// position the menu // position the menu
let xPosMenu = e.pageX + this.options.offsets.x - $("rssdownloaderpage").offsetLeft; let xPosMenu = e.pageX + this.options.offsets.x - $("rssdownloaderpage").offsetLeft;
let yPosMenu = e.pageY + this.options.offsets.y - $("rssdownloaderpage").offsetTop; let yPosMenu = e.pageY + this.options.offsets.y - $("rssdownloaderpage").offsetTop;
@ -700,12 +686,10 @@ window.qBittorrent.ContextMenu ??= (() => {
xPosMenu = Math.max(xPosMenu, 0); xPosMenu = Math.max(xPosMenu, 0);
yPosMenu = Math.max(yPosMenu, 0); yPosMenu = Math.max(yPosMenu, 0);
this.menu.setStyles({ this.menu.style.left = `${xPosMenu}px`;
left: xPosMenu, this.menu.style.top = `${yPosMenu}px`;
top: yPosMenu, this.menu.style.position = "absolute";
position: "absolute", this.menu.style.zIndex = "2000";
"z-index": "2000"
});
}, },
updateMenuItems: function() { updateMenuItems: function() {
const selectedRows = window.qBittorrent.RssDownloader.rssDownloaderRulesTable.selectedRowsIds(); const selectedRows = window.qBittorrent.RssDownloader.rssDownloaderRulesTable.selectedRowsIds();

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

@ -137,16 +137,10 @@ window.qBittorrent.DynamicTable ??= (() => {
this.canResize = false; this.canResize = false;
const resetElementBorderStyle = function(el, side) { const resetElementBorderStyle = function(el, side) {
if ((side === "left") || (side !== "right")) { if ((side === "left") || (side !== "right"))
el.setStyle("border-left-style", ""); el.style.borderLeft = "";
el.setStyle("border-left-color", ""); if ((side === "right") || (side !== "left"))
el.setStyle("border-left-width", ""); el.style.borderRight = "";
}
if ((side === "right") || (side !== "left")) {
el.setStyle("border-right-style", "");
el.setStyle("border-right-color", "");
el.setStyle("border-right-width", "");
}
}; };
const mouseMoveFn = function(e) { const mouseMoveFn = function(e) {
@ -190,11 +184,13 @@ window.qBittorrent.DynamicTable ??= (() => {
changeBorderSide = "left"; changeBorderSide = "left";
} }
borderChangeElement.setStyle("border-" + changeBorderSide + "-style", "solid"); const borderStyle = "initial solid #e60";
borderChangeElement.setStyle("border-" + changeBorderSide + "-color", "#e60"); if (changeBorderSide === "left")
borderChangeElement.setStyle("border-" + changeBorderSide + "-width", "initial"); borderChangeElement.style.borderLeft = borderStyle;
else
borderChangeElement.style.borderRight = borderStyle;
resetElementBorderStyle(borderChangeElement, changeBorderSide === "right" ? "left" : "right"); resetElementBorderStyle(borderChangeElement, ((changeBorderSide === "right") ? "left" : "right"));
borderChangeElement.getSiblings('[class=""]').each((el) => { borderChangeElement.getSiblings('[class=""]').each((el) => {
resetElementBorderStyle(el); resetElementBorderStyle(el);
@ -218,11 +214,11 @@ window.qBittorrent.DynamicTable ??= (() => {
const onStart = function(el, event) { const onStart = function(el, event) {
if (this.canResize) { if (this.canResize) {
this.currentHeaderAction = "resize"; this.currentHeaderAction = "resize";
this.startWidth = this.resizeTh.getStyle("width").toFloat(); this.startWidth = parseInt(this.resizeTh.style.width, 10);
} }
else { else {
this.currentHeaderAction = "drag"; this.currentHeaderAction = "drag";
el.setStyle("background-color", "#C1D5E7"); el.style.backgroundColor = "#C1D5E7";
} }
}.bind(this); }.bind(this);
@ -238,7 +234,7 @@ window.qBittorrent.DynamicTable ??= (() => {
const onComplete = function(el, event) { const onComplete = function(el, event) {
resetElementBorderStyle(this.lastHoverTh); resetElementBorderStyle(this.lastHoverTh);
el.setStyle("background-color", ""); el.style.backgroundColor = "";
if (this.currentHeaderAction === "resize") if (this.currentHeaderAction === "resize")
LocalPreferences.set("column_" + this.resizeTh.columnName + "_width_" + this.dynamicTableDivId, this.columns[this.resizeTh.columnName].width); LocalPreferences.set("column_" + this.resizeTh.columnName + "_width_" + this.dynamicTableDivId, this.columns[this.resizeTh.columnName].width);
if ((this.currentHeaderAction === "drag") && (el !== this.lastHoverTh)) { if ((this.currentHeaderAction === "drag") && (el !== this.lastHoverTh)) {
@ -855,7 +851,7 @@ window.qBittorrent.DynamicTable ??= (() => {
}, },
selectNextRow: function() { selectNextRow: function() {
const visibleRows = $(this.dynamicTableDivId).getElements("tbody tr").filter(e => e.getStyle("display") !== "none"); const visibleRows = $(this.dynamicTableDivId).getElements("tbody tr").filter(e => e.style.display !== "none");
const selectedRowId = this.getSelectedRowId(); const selectedRowId = this.getSelectedRowId();
let selectedIndex = -1; let selectedIndex = -1;
@ -877,7 +873,7 @@ window.qBittorrent.DynamicTable ??= (() => {
}, },
selectPreviousRow: function() { selectPreviousRow: function() {
const visibleRows = $(this.dynamicTableDivId).getElements("tbody tr").filter(e => e.getStyle("display") !== "none"); const visibleRows = $(this.dynamicTableDivId).getElements("tbody tr").filter(e => e.style.display !== "none");
const selectedRowId = this.getSelectedRowId(); const selectedRowId = this.getSelectedRowId();
let selectedIndex = -1; let selectedIndex = -1;

16
src/webui/www/private/scripts/progressbar.js
View file

@ -125,16 +125,16 @@ window.qBittorrent.ProgressBar ??= (() => {
this.vals.light.textContent = displayedValue; this.vals.light.textContent = displayedValue;
const r = parseInt((this.vals.width * (value / 100)), 10); const r = parseInt((this.vals.width * (value / 100)), 10);
this.vals.dark.setStyle("clip", `rect(0, ${r}px, ${this.vals.height}px, 0)`); this.vals.dark.style.clipPath = `inset(0 calc(100% - ${r}px) 0 0)`;
this.vals.light.setStyle("clip", `rect(0, ${this.vals.width}px, ${this.vals.height}px, ${r}px)`); this.vals.light.style.clipPath = `inset(0 0 0 ${r}px)`;
} }
function ProgressBar_setWidth(value) { function ProgressBar_setWidth(value) {
if (this.vals.width !== value) { if (this.vals.width !== value) {
this.vals.width = value; this.vals.width = value;
this.setStyle("width", value); this.style.width = `${value}px`;
this.vals.dark.setStyle("width", value); this.vals.dark.style.width = `${value}px`;
this.vals.light.setStyle("width", value); this.vals.light.style.width = `${value}px`;
this.setValue(this.vals.value); this.setValue(this.vals.value);
} }
} }
@ -145,10 +145,10 @@ window.qBittorrent.ProgressBar ??= (() => {
return; return;
if (!obj.parentNode) if (!obj.parentNode)
return setTimeout('ProgressBar_checkForParent("' + id + '")', 100); return setTimeout('ProgressBar_checkForParent("' + id + '")', 100);
obj.setStyle("width", "100%"); obj.style.width = "100%";
const w = obj.offsetWidth; const w = obj.offsetWidth;
obj.vals.dark.setStyle("width", w); obj.vals.dark.style.width = `${w}px`;
obj.vals.light.setStyle("width", w); obj.vals.light.style.width = `${w}px`;
obj.vals.width = w; obj.vals.width = w;
obj.setValue(obj.vals.value); obj.setValue(obj.vals.value);
} }

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

@ -228,8 +228,8 @@
tableInfo["main"].instance.setup("logMessageTableDiv", "logMessageTableFixedHeaderDiv", logTableContextMenu); tableInfo["main"].instance.setup("logMessageTableDiv", "logMessageTableFixedHeaderDiv", logTableContextMenu);
tableInfo["peer"].instance.setup("logPeerTableDiv", "logPeerTableFixedHeaderDiv", logTableContextMenu); tableInfo["peer"].instance.setup("logPeerTableDiv", "logPeerTableFixedHeaderDiv", logTableContextMenu);
MUI.Panels.instances.LogPanel.contentEl.setStyle("height", "100%"); MUI.Panels.instances.LogPanel.contentEl.style.height = "100%";
$("logView").setStyle("height", "inherit"); $("logView").style.height = "inherit";
load(); load();
}; };

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

@ -39,7 +39,7 @@
#rightRssColumn { #rightRssColumn {
float: left; float: left;
/* should be 20 px but due to rounding differences some browsers don't render that properly */ /* should be 20 px but due to rounding differences some browsers don't render that properly */
width: calc(calc(100% - 21px) / 3); width: calc((100% - 21px) / 3);
border: none; border: none;
} }

4
src/webui/www/private/views/searchplugins.html
View file

@ -17,8 +17,6 @@
#searchPluginsTable { #searchPluginsTable {
width: 100%; width: 100%;
height: calc(100% - 150px); height: calc(100% - 150px);
-moz-height: calc(100% - 150px);
-webkit-height: calc(100% - 150px);
} }
#searchPluginsTable .dynamicTable { #searchPluginsTable .dynamicTable {
@ -27,8 +25,6 @@
#searchPluginsTableDiv { #searchPluginsTableDiv {
height: calc(100% - 26px); height: calc(100% - 26px);
-moz-height: calc(100% - 26px);
-webkit-height: calc(100% - 26px);
} }
#dynamicTableFixedHeaderDiv { #dynamicTableFixedHeaderDiv {