From 9fbdb9757b22c2bb9afe5061137bfe4b3b755e91 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 23 Jan 2021 21:07:45 -0500 Subject: Update popup menu structure (#1301) * Wrap menu items in popup-menu-body * Use bodyNode instead of node * Update selector * Update _setPosition to not use items --- ext/bg/js/settings/anki-controller.js | 2 +- ext/bg/js/settings/dictionary-controller.js | 6 ++-- ext/bg/js/settings/profile-conditions-ui.js | 4 +-- ext/bg/js/settings/profile-controller.js | 10 +++--- ext/bg/js/settings/scan-inputs-controller.js | 6 ++-- .../translation-text-replacements-controller.js | 6 ++-- ext/bg/settings2.html | 38 +++++++++++----------- ext/bg/welcome.html | 4 +-- ext/mixed/css/material.css | 6 ++-- ext/mixed/js/popup-menu.js | 20 +++++++----- 10 files changed, 54 insertions(+), 48 deletions(-) (limited to 'ext') diff --git a/ext/bg/js/settings/anki-controller.js b/ext/bg/js/settings/anki-controller.js index b816a47b..c2292bc9 100644 --- a/ext/bg/js/settings/anki-controller.js +++ b/ext/bg/js/settings/anki-controller.js @@ -240,7 +240,7 @@ class AnkiController { } markers = [...new Set(markers)]; - const container = element.content.querySelector('.popup-menu'); + const container = element.content.querySelector('.popup-menu-body'); if (container === null) { return; } const fragment = document.createDocumentFragment(); diff --git a/ext/bg/js/settings/dictionary-controller.js b/ext/bg/js/settings/dictionary-controller.js index 941b2039..a25268d1 100644 --- a/ext/bg/js/settings/dictionary-controller.js +++ b/ext/bg/js/settings/dictionary-controller.js @@ -117,9 +117,9 @@ class DictionaryEntry { } _onMenuOpen(e) { - const node = e.detail.menu.node; - const showDetails = node.querySelector('.popup-menu-item[data-menu-action="showDetails"]'); - const hideDetails = node.querySelector('.popup-menu-item[data-menu-action="hideDetails"]'); + const bodyNode = e.detail.menu.bodyNode; + const showDetails = bodyNode.querySelector('.popup-menu-item[data-menu-action="showDetails"]'); + const hideDetails = bodyNode.querySelector('.popup-menu-item[data-menu-action="hideDetails"]'); const hasDetails = (this._detailsContainer !== null); const detailsVisible = (hasDetails && !this._detailsContainer.hidden); if (showDetails !== null) { diff --git a/ext/bg/js/settings/profile-conditions-ui.js b/ext/bg/js/settings/profile-conditions-ui.js index 1ab46b04..5fda1dc0 100644 --- a/ext/bg/js/settings/profile-conditions-ui.js +++ b/ext/bg/js/settings/profile-conditions-ui.js @@ -546,8 +546,8 @@ class ProfileConditionUI { } _onMenuOpen(e) { - const node = e.detail.menu.node; - const deleteGroup = node.querySelector('.popup-menu-item[data-menu-action="deleteGroup"]'); + const bodyNode = e.detail.menu.bodyNode; + const deleteGroup = bodyNode.querySelector('.popup-menu-item[data-menu-action="deleteGroup"]'); if (deleteGroup !== null) { deleteGroup.hidden = (this._parent.childCount <= 1); } diff --git a/ext/bg/js/settings/profile-controller.js b/ext/bg/js/settings/profile-controller.js index 924e965e..914fc679 100644 --- a/ext/bg/js/settings/profile-controller.js +++ b/ext/bg/js/settings/profile-controller.js @@ -659,12 +659,12 @@ class ProfileEntry { } _onMenuOpen(e) { - const node = e.detail.menu.node; + const bodyNode = e.detail.menu.bodyNode; const count = this._profileController.profileCount; - this._setMenuActionEnabled(node, 'moveUp', this._index > 0); - this._setMenuActionEnabled(node, 'moveDown', this._index < count - 1); - this._setMenuActionEnabled(node, 'copyFrom', count > 1); - this._setMenuActionEnabled(node, 'delete', count > 1); + this._setMenuActionEnabled(bodyNode, 'moveUp', this._index > 0); + this._setMenuActionEnabled(bodyNode, 'moveDown', this._index < count - 1); + this._setMenuActionEnabled(bodyNode, 'copyFrom', count > 1); + this._setMenuActionEnabled(bodyNode, 'delete', count > 1); } _onMenuClose(e) { diff --git a/ext/bg/js/settings/scan-inputs-controller.js b/ext/bg/js/settings/scan-inputs-controller.js index a810a2fb..eb179c6a 100644 --- a/ext/bg/js/settings/scan-inputs-controller.js +++ b/ext/bg/js/settings/scan-inputs-controller.js @@ -246,9 +246,9 @@ class ScanInputField { } _onMenuOpen(e) { - const node = e.detail.menu.node; - const showAdvanced = node.querySelector('.popup-menu-item[data-menu-action="showAdvanced"]'); - const hideAdvanced = node.querySelector('.popup-menu-item[data-menu-action="hideAdvanced"]'); + const bodyNode = e.detail.menu.bodyNode; + const showAdvanced = bodyNode.querySelector('.popup-menu-item[data-menu-action="showAdvanced"]'); + const hideAdvanced = bodyNode.querySelector('.popup-menu-item[data-menu-action="hideAdvanced"]'); const advancedVisible = (this._node.dataset.showAdvanced === 'true'); if (showAdvanced !== null) { showAdvanced.hidden = advancedVisible; diff --git a/ext/bg/js/settings2/translation-text-replacements-controller.js b/ext/bg/js/settings2/translation-text-replacements-controller.js index 864b279e..8d13f7e9 100644 --- a/ext/bg/js/settings2/translation-text-replacements-controller.js +++ b/ext/bg/js/settings2/translation-text-replacements-controller.js @@ -176,10 +176,10 @@ class TranslationTextReplacementsEntry { // Private _onMenuOpen(e) { - const node = e.detail.menu.node; + const bodyNode = e.detail.menu.bodyNode; const testVisible = this._isTestVisible(); - node.querySelector('[data-menu-action=showTest]').hidden = testVisible; - node.querySelector('[data-menu-action=hideTest]').hidden = !testVisible; + bodyNode.querySelector('[data-menu-action=showTest]').hidden = testVisible; + bodyNode.querySelector('[data-menu-action=hideTest]').hidden = !testVisible; } _onMenuClose(e) { diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html index 6f2f85fd..62598352 100644 --- a/ext/bg/settings2.html +++ b/ext/bg/settings2.html @@ -1912,20 +1912,20 @@ - - @@ -2119,11 +2119,11 @@ - - @@ -2410,12 +2410,12 @@ - @@ -2676,11 +2676,11 @@ - + - + - + @@ -2869,11 +2869,11 @@ - @@ -2951,9 +2951,9 @@ - @@ -3039,11 +3039,11 @@ - diff --git a/ext/bg/welcome.html b/ext/bg/welcome.html index cdc0c22c..f705dfce 100644 --- a/ext/bg/welcome.html +++ b/ext/bg/welcome.html @@ -327,9 +327,9 @@ - diff --git a/ext/mixed/css/material.css b/ext/mixed/css/material.css index c9277088..ec55120b 100644 --- a/ext/mixed/css/material.css +++ b/ext/mixed/css/material.css @@ -928,11 +928,13 @@ button.icon-button:active { border-radius: var(--menu-border-radius); background-color: var(--background-color-light); padding: 0.5em 0; + min-width: 8em; + overflow: auto; +} +.popup-menu-body { display: flex; flex-flow: column nowrap; align-items: stretch; - min-width: 8em; - overflow: auto; white-space: nowrap; } button.popup-menu-item { diff --git a/ext/mixed/js/popup-menu.js b/ext/mixed/js/popup-menu.js index 2e3f395d..124c1984 100644 --- a/ext/mixed/js/popup-menu.js +++ b/ext/mixed/js/popup-menu.js @@ -21,6 +21,7 @@ class PopupMenu extends EventDispatcher { this._sourceElement = sourceElement; this._containerNode = containerNode; this._node = containerNode.querySelector('.popup-menu'); + this._bodyNode = containerNode.querySelector('.popup-menu-body'); this._isClosed = false; this._eventListeners = new EventListenerCollection(); } @@ -37,13 +38,17 @@ class PopupMenu extends EventDispatcher { return this._node; } + get bodyNode() { + return this._bodyNode; + } + get isClosed() { return this._isClosed; } prepare() { - const items = this._node.querySelectorAll('.popup-menu-item'); - this._setPosition(items); + const items = this._bodyNode.querySelectorAll('.popup-menu-item'); + this._setPosition(); this._containerNode.focus(); this._eventListeners.addEventListener(window, 'resize', this._onWindowResize.bind(this), false); @@ -84,7 +89,7 @@ class PopupMenu extends EventDispatcher { this._close(null, 'resize', true); } - _setPosition(items) { + _setPosition() { // Get flags let horizontal = 1; let vertical = 1; @@ -138,11 +143,10 @@ class PopupMenu extends EventDispatcher { const menuRect = menu.getBoundingClientRect(); let top = menuRect.top; let bottom = menuRect.bottom; - if (verticalCover === 1 && items.length > 0) { - const rect1 = items[0].getBoundingClientRect(); - const rect2 = items[items.length - 1].getBoundingClientRect(); - top = rect1.top; - bottom = rect2.bottom; + if (verticalCover === 1) { + const bodyRect = this._bodyNode.getBoundingClientRect(); + top = bodyRect.top; + bottom = bodyRect.bottom; } let x = ( -- cgit v1.2.3