diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index 86fbf79bf..91b18f50e 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -323,7 +323,17 @@ a.propButton img { background-color: var(--color-background-default); border: 1px solid var(--color-border-default); display: none; + opacity: 0; padding: 0; + transition: + opacity 0.2s ease-in-out, + visibility 0.2s ease-in-out; + visibility: hidden; +} + +.contextMenu.visible { + opacity: 1; + visibility: visible; } .contextMenu .separator { diff --git a/src/webui/www/private/scripts/contextmenu.js b/src/webui/www/private/scripts/contextmenu.js index f3c7a693c..9c5347a72 100644 --- a/src/webui/www/private/scripts/contextmenu.js +++ b/src/webui/www/private/scripts/contextmenu.js @@ -60,7 +60,6 @@ window.qBittorrent.ContextMenu ??= (() => { onShow: () => {}, onHide: () => {}, onClick: () => {}, - fadeSpeed: 200, touchTimer: 600, ...options }; @@ -68,15 +67,6 @@ window.qBittorrent.ContextMenu ??= (() => { // option diffs menu this.menu = document.getElementById(this.options.menu); - // fx - this.fx = new Fx.Tween(this.menu, { - property: "opacity", - duration: this.options.fadeSpeed, - onComplete: () => { - this.menu.style.visibility = (getComputedStyle(this.menu).opacity > 0) ? "visible" : "hidden"; - } - }); - // hide and begin the listener this.hide().startListener(); @@ -231,7 +221,7 @@ window.qBittorrent.ContextMenu ??= (() => { show(trigger) { if (lastShownContextMenu && (lastShownContextMenu !== this)) lastShownContextMenu.hide(); - this.fx.start(1); + this.menu.classList.add("visible"); this.options.onShow.call(this); lastShownContextMenu = this; return this; @@ -240,7 +230,7 @@ window.qBittorrent.ContextMenu ??= (() => { // hide the menu hide(trigger) { if (lastShownContextMenu && (lastShownContextMenu.menu.style.visibility !== "hidden")) { - this.fx.start(0); + this.menu.classList.remove("visible"); this.options.onHide.call(this); } return this;