aboutsummaryrefslogtreecommitdiff
path: root/ext/mixed
diff options
context:
space:
mode:
Diffstat (limited to 'ext/mixed')
-rw-r--r--ext/mixed/css/material.css6
-rw-r--r--ext/mixed/js/popup-menu.js20
2 files changed, 16 insertions, 10 deletions
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 = (