diff --git a/web/assets/css/transmission-app.scss b/web/assets/css/transmission-app.scss index 13e9f0768..8d9ca644c 100644 --- a/web/assets/css/transmission-app.scss +++ b/web/assets/css/transmission-app.scss @@ -342,7 +342,6 @@ $popup-top: 61px; // TODO: ugly that this is hardcoded left: 0; margin: 0; overflow: auto; - -webkit-overflow-scrolling: touch; padding: 0; right: 0; } @@ -1273,13 +1272,12 @@ $video-image: '../img/film.svg'; box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d; color: var(--color-fg-on-popup); - min-width: 220px; + margin: 6px; overflow: auto; - -webkit-overflow-scrolling: touch; padding: 10px; position: absolute; - right: 20px; + right: 0; top: 50px; z-index: $z-index-popup; diff --git a/web/src/transmission.js b/web/src/transmission.js index b85346322..863b0a2c4 100644 --- a/web/src/transmission.js +++ b/web/src/transmission.js @@ -23,13 +23,7 @@ import { TorrentRendererCompact, TorrentRendererFull, } from './torrent-row.js'; -import { - debounce, - deepEqual, - setEnabled, - setTextContent, - movePopup, -} from './utils.js'; +import { debounce, deepEqual, setEnabled, setTextContent } from './utils.js'; export class Transmission extends EventTarget { constructor(action_manager, notifications, prefs) { @@ -148,15 +142,6 @@ export class Transmission extends EventTarget { this.action_manager ) ); - const btnbox = document - .querySelector('#toolbar-overflow') - .getBoundingClientRect(); - movePopup( - this.popup.root, - btnbox.left + btnbox.width, - btnbox.top + btnbox.height, - document.body - ); } break; case 'show-preferences-dialog': @@ -236,12 +221,19 @@ export class Transmission extends EventTarget { const popup = new ContextMenu(this.action_manager); this.setCurrentPopup(popup); - movePopup( - popup.root, + + const boundingElement = document.querySelector('#torrent-container'); + const bounds = boundingElement.getBoundingClientRect(); + const x = Math.min( event_.x, - event_.y, - document.querySelector('#torrent-container') + bounds.x + bounds.width - popup.root.clientWidth ); + const y = Math.min( + event_.y, + bounds.y + bounds.height - popup.root.clientHeight + ); + popup.root.style.left = `${x > 0 ? x : 0}px`; + popup.root.style.top = `${y > 0 ? y : 0}px`; event_.preventDefault(); }); diff --git a/web/src/utils.js b/web/src/utils.js index 247133351..144a9bef2 100644 --- a/web/src/utils.js +++ b/web/src/utils.js @@ -268,35 +268,6 @@ export function addCheckedClass(element, b) { element.classList.toggle('checked', b); } -function getBestMenuPos(r, bounds) { - let { x, y } = r; - const { width, height } = r; - - if (x > bounds.x + bounds.width - width && x - width >= bounds.x) { - x -= width; - } else { - x = Math.min(x, bounds.x + bounds.width - width); - } - - if (y > bounds.y + bounds.height - height && y - height >= bounds.y) { - y -= height; - } else { - y = Math.min(y, bounds.y + bounds.height - height); - } - - return new DOMRect(x, y, width, height); -} - -export function movePopup(popup, x, y, boundingElement) { - const initial_pos = new DOMRect(x, y, popup.clientWidth, popup.clientHeight); - const clamped_pos = getBestMenuPos( - initial_pos, - boundingElement.getBoundingClientRect() - ); - popup.style.left = `${clamped_pos.left}px`; - popup.style.top = `${clamped_pos.top}px`; -} - export class OutsideClickListener extends EventTarget { constructor(element) { super();