mirror of
https://github.com/qbittorrent/qBittorrent
synced 2025-07-16 02:03:07 -07:00
Merge pull request #21179 from Chocobo1/webui_style
WebUI: use native property to set styles
This commit is contained in:
Chocobo1
GitHub
commit
d9667b5221
8 changed files with 50 additions and 80 deletions
|
|
@ -682,15 +682,11 @@ td.statusBarSeparator {
|
|||
}
|
||||
|
||||
#searchResultsTableContainer {
|
||||
-moz-height: calc(100% - 177px);
|
||||
-webkit-height: calc(100% - 177px);
|
||||
height: calc(100% - 177px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#searchResultsTableDiv {
|
||||
-moz-height: calc(100% - 26px) !important;
|
||||
-webkit-height: calc(100% - 26px) !important;
|
||||
height: calc(100% - 26px) !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -172,10 +172,8 @@ window.addEventListener("DOMContentLoaded", () => {
|
|||
});
|
||||
|
||||
/* MochaUI.Desktop = new MochaUI.Desktop();
|
||||
MochaUI.Desktop.desktop.setStyles({
|
||||
'background': '#fff',
|
||||
'visibility': 'visible'
|
||||
});*/
|
||||
MochaUI.Desktop.desktop.style.background = "#fff";
|
||||
MochaUI.Desktop.desktop.style.visibility = "visible"; */
|
||||
MochaUI.Desktop.initialize();
|
||||
|
||||
const buildTransfersTab = function() {
|
||||
|
|
|
|||
|
|
@ -78,23 +78,18 @@ window.qBittorrent.ContextMenu ??= (() => {
|
|||
this.fx = new Fx.Tween(this.menu, {
|
||||
property: "opacity",
|
||||
duration: this.options.fadeSpeed,
|
||||
onComplete: function() {
|
||||
if (this.getStyle("opacity"))
|
||||
this.setStyle("visibility", "visible");
|
||||
else
|
||||
this.setStyle("visibility", "hidden");
|
||||
}.bind(this.menu)
|
||||
onComplete: () => {
|
||||
this.menu.style.visibility = (getComputedStyle(this.menu).opacity > 0) ? "visible" : "hidden";
|
||||
}
|
||||
});
|
||||
|
||||
// hide and begin the listener
|
||||
this.hide().startListener();
|
||||
|
||||
// hide the menu
|
||||
this.menu.setStyles({
|
||||
"position": "absolute",
|
||||
"top": "-900000px",
|
||||
"display": "block"
|
||||
});
|
||||
this.menu.style.position = "absolute";
|
||||
this.menu.style.top = "-900000px";
|
||||
this.menu.style.display = "block";
|
||||
},
|
||||
|
||||
adjustMenuPosition: function(e) {
|
||||
|
|
@ -103,13 +98,11 @@ window.qBittorrent.ContextMenu ??= (() => {
|
|||
const scrollableMenuMaxHeight = document.documentElement.clientHeight * 0.75;
|
||||
|
||||
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
|
||||
this.menu.setStyles({
|
||||
left: "-999em",
|
||||
top: "-999em"
|
||||
});
|
||||
this.menu.style.left = "-999em";
|
||||
this.menu.style.top = "-999em";
|
||||
|
||||
// position the menu
|
||||
let xPosMenu = e.pageX + this.options.offsets.x;
|
||||
|
|
@ -122,19 +115,17 @@ window.qBittorrent.ContextMenu ??= (() => {
|
|||
xPosMenu = 0;
|
||||
if (yPosMenu < 0)
|
||||
yPosMenu = 0;
|
||||
this.menu.setStyles({
|
||||
left: xPosMenu,
|
||||
top: yPosMenu,
|
||||
position: "absolute",
|
||||
"z-index": "2000"
|
||||
});
|
||||
this.menu.style.left = `${xPosMenu}px`;
|
||||
this.menu.style.top = `${yPosMenu}px`;
|
||||
this.menu.style.position = "absolute";
|
||||
this.menu.style.zIndex = "2000";
|
||||
|
||||
// position the sub-menu
|
||||
const uls = this.menu.getElementsByTagName("ul");
|
||||
for (let i = 0; i < uls.length; ++i) {
|
||||
const ul = uls[i];
|
||||
if (ul.hasClass("scrollableMenu"))
|
||||
ul.setStyle("max-height", scrollableMenuMaxHeight);
|
||||
ul.style.maxHeight = `${scrollableMenuMaxHeight}px`;
|
||||
const rectParent = ul.parentNode.getBoundingClientRect();
|
||||
const xPosOrigin = rectParent.left;
|
||||
const yPosOrigin = rectParent.bottom;
|
||||
|
|
@ -148,10 +139,8 @@ window.qBittorrent.ContextMenu ??= (() => {
|
|||
xPos = 0;
|
||||
if (yPos < 0)
|
||||
yPos = 0;
|
||||
ul.setStyles({
|
||||
"margin-left": xPos - xPosOrigin,
|
||||
"margin-top": yPos - yPosOrigin
|
||||
});
|
||||
ul.style.marginLeft = `${xPos - xPosOrigin}px`;
|
||||
ul.style.marginTop = `${yPos - yPosOrigin}px`;
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -185,7 +174,6 @@ window.qBittorrent.ContextMenu ??= (() => {
|
|||
addTarget: function(t) {
|
||||
// prevent long press from selecting this text
|
||||
t.style.userSelect = "none";
|
||||
t.style["-webkit-user-select"] = "none";
|
||||
|
||||
this.targets[this.targets.length] = t;
|
||||
this.setupEventListeners(t);
|
||||
|
|
@ -686,10 +674,8 @@ window.qBittorrent.ContextMenu ??= (() => {
|
|||
this.updateMenuItems();
|
||||
|
||||
// draw the menu off-screen to know the menu dimensions
|
||||
this.menu.setStyles({
|
||||
left: "-999em",
|
||||
top: "-999em"
|
||||
});
|
||||
this.menu.style.left = "-999em";
|
||||
this.menu.style.top = "-999em";
|
||||
// position the menu
|
||||
let xPosMenu = e.pageX + this.options.offsets.x - $("rssdownloaderpage").offsetLeft;
|
||||
let yPosMenu = e.pageY + this.options.offsets.y - $("rssdownloaderpage").offsetTop;
|
||||
|
|
@ -700,12 +686,10 @@ window.qBittorrent.ContextMenu ??= (() => {
|
|||
xPosMenu = Math.max(xPosMenu, 0);
|
||||
yPosMenu = Math.max(yPosMenu, 0);
|
||||
|
||||
this.menu.setStyles({
|
||||
left: xPosMenu,
|
||||
top: yPosMenu,
|
||||
position: "absolute",
|
||||
"z-index": "2000"
|
||||
});
|
||||
this.menu.style.left = `${xPosMenu}px`;
|
||||
this.menu.style.top = `${yPosMenu}px`;
|
||||
this.menu.style.position = "absolute";
|
||||
this.menu.style.zIndex = "2000";
|
||||
},
|
||||
updateMenuItems: function() {
|
||||
const selectedRows = window.qBittorrent.RssDownloader.rssDownloaderRulesTable.selectedRowsIds();
|
||||
|
|
|
|||
|
|
@ -137,16 +137,10 @@ window.qBittorrent.DynamicTable ??= (() => {
|
|||
this.canResize = false;
|
||||
|
||||
const resetElementBorderStyle = function(el, side) {
|
||||
if ((side === "left") || (side !== "right")) {
|
||||
el.setStyle("border-left-style", "");
|
||||
el.setStyle("border-left-color", "");
|
||||
el.setStyle("border-left-width", "");
|
||||
}
|
||||
if ((side === "right") || (side !== "left")) {
|
||||
el.setStyle("border-right-style", "");
|
||||
el.setStyle("border-right-color", "");
|
||||
el.setStyle("border-right-width", "");
|
||||
}
|
||||
if ((side === "left") || (side !== "right"))
|
||||
el.style.borderLeft = "";
|
||||
if ((side === "right") || (side !== "left"))
|
||||
el.style.borderRight = "";
|
||||
};
|
||||
|
||||
const mouseMoveFn = function(e) {
|
||||
|
|
@ -190,11 +184,13 @@ window.qBittorrent.DynamicTable ??= (() => {
|
|||
changeBorderSide = "left";
|
||||
}
|
||||
|
||||
borderChangeElement.setStyle("border-" + changeBorderSide + "-style", "solid");
|
||||
borderChangeElement.setStyle("border-" + changeBorderSide + "-color", "#e60");
|
||||
borderChangeElement.setStyle("border-" + changeBorderSide + "-width", "initial");
|
||||
const borderStyle = "initial solid #e60";
|
||||
if (changeBorderSide === "left")
|
||||
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) => {
|
||||
resetElementBorderStyle(el);
|
||||
|
|
@ -218,11 +214,11 @@ window.qBittorrent.DynamicTable ??= (() => {
|
|||
const onStart = function(el, event) {
|
||||
if (this.canResize) {
|
||||
this.currentHeaderAction = "resize";
|
||||
this.startWidth = this.resizeTh.getStyle("width").toFloat();
|
||||
this.startWidth = parseInt(this.resizeTh.style.width, 10);
|
||||
}
|
||||
else {
|
||||
this.currentHeaderAction = "drag";
|
||||
el.setStyle("background-color", "#C1D5E7");
|
||||
el.style.backgroundColor = "#C1D5E7";
|
||||
}
|
||||
}.bind(this);
|
||||
|
||||
|
|
@ -238,7 +234,7 @@ window.qBittorrent.DynamicTable ??= (() => {
|
|||
|
||||
const onComplete = function(el, event) {
|
||||
resetElementBorderStyle(this.lastHoverTh);
|
||||
el.setStyle("background-color", "");
|
||||
el.style.backgroundColor = "";
|
||||
if (this.currentHeaderAction === "resize")
|
||||
LocalPreferences.set("column_" + this.resizeTh.columnName + "_width_" + this.dynamicTableDivId, this.columns[this.resizeTh.columnName].width);
|
||||
if ((this.currentHeaderAction === "drag") && (el !== this.lastHoverTh)) {
|
||||
|
|
@ -855,7 +851,7 @@ window.qBittorrent.DynamicTable ??= (() => {
|
|||
},
|
||||
|
||||
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();
|
||||
|
||||
let selectedIndex = -1;
|
||||
|
|
@ -877,7 +873,7 @@ window.qBittorrent.DynamicTable ??= (() => {
|
|||
},
|
||||
|
||||
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();
|
||||
|
||||
let selectedIndex = -1;
|
||||
|
|
|
|||
|
|
@ -125,16 +125,16 @@ window.qBittorrent.ProgressBar ??= (() => {
|
|||
this.vals.light.textContent = displayedValue;
|
||||
|
||||
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.light.setStyle("clip", `rect(0, ${this.vals.width}px, ${this.vals.height}px, ${r}px)`);
|
||||
this.vals.dark.style.clipPath = `inset(0 calc(100% - ${r}px) 0 0)`;
|
||||
this.vals.light.style.clipPath = `inset(0 0 0 ${r}px)`;
|
||||
}
|
||||
|
||||
function ProgressBar_setWidth(value) {
|
||||
if (this.vals.width !== value) {
|
||||
this.vals.width = value;
|
||||
this.setStyle("width", value);
|
||||
this.vals.dark.setStyle("width", value);
|
||||
this.vals.light.setStyle("width", value);
|
||||
this.style.width = `${value}px`;
|
||||
this.vals.dark.style.width = `${value}px`;
|
||||
this.vals.light.style.width = `${value}px`;
|
||||
this.setValue(this.vals.value);
|
||||
}
|
||||
}
|
||||
|
|
@ -145,10 +145,10 @@ window.qBittorrent.ProgressBar ??= (() => {
|
|||
return;
|
||||
if (!obj.parentNode)
|
||||
return setTimeout('ProgressBar_checkForParent("' + id + '")', 100);
|
||||
obj.setStyle("width", "100%");
|
||||
obj.style.width = "100%";
|
||||
const w = obj.offsetWidth;
|
||||
obj.vals.dark.setStyle("width", w);
|
||||
obj.vals.light.setStyle("width", w);
|
||||
obj.vals.dark.style.width = `${w}px`;
|
||||
obj.vals.light.style.width = `${w}px`;
|
||||
obj.vals.width = w;
|
||||
obj.setValue(obj.vals.value);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -228,8 +228,8 @@
|
|||
tableInfo["main"].instance.setup("logMessageTableDiv", "logMessageTableFixedHeaderDiv", logTableContextMenu);
|
||||
tableInfo["peer"].instance.setup("logPeerTableDiv", "logPeerTableFixedHeaderDiv", logTableContextMenu);
|
||||
|
||||
MUI.Panels.instances.LogPanel.contentEl.setStyle("height", "100%");
|
||||
$("logView").setStyle("height", "inherit");
|
||||
MUI.Panels.instances.LogPanel.contentEl.style.height = "100%";
|
||||
$("logView").style.height = "inherit";
|
||||
|
||||
load();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
#rightRssColumn {
|
||||
float: left;
|
||||
/* 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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,8 +17,6 @@
|
|||
#searchPluginsTable {
|
||||
width: 100%;
|
||||
height: calc(100% - 150px);
|
||||
-moz-height: calc(100% - 150px);
|
||||
-webkit-height: calc(100% - 150px);
|
||||
}
|
||||
|
||||
#searchPluginsTable .dynamicTable {
|
||||
|
|
@ -27,8 +25,6 @@
|
|||
|
||||
#searchPluginsTableDiv {
|
||||
height: calc(100% - 26px);
|
||||
-moz-height: calc(100% - 26px);
|
||||
-webkit-height: calc(100% - 26px);
|
||||
}
|
||||
|
||||
#dynamicTableFixedHeaderDiv {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue