alex/yomichan
1
Fork 0
Code Releases Activity

Update popup menu structure (#1301)

Browse Source 
* Wrap menu items in popup-menu-body

* Use bodyNode instead of node

* Update selector

* Update _setPosition to not use items
This commit is contained in:
toasted-nutbread 2021-01-23 21:07:45 -05:00 committed by GitHub
parent 85c039850c
commit 9fbdb9757b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 54 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ext/bg/js/settings/anki-controller.js
View File

@ -240,7 +240,7 @@ class AnkiController {
} }
markers = [...new Set(markers)]; markers = [...new Set(markers)];
const container = element.content.querySelector('.popup-menu'); const container = element.content.querySelector('.popup-menu-body');
if (container === null) { return; } if (container === null) { return; }
const fragment = document.createDocumentFragment(); const fragment = document.createDocumentFragment();

6
ext/bg/js/settings/dictionary-controller.js
View File

@ -117,9 +117,9 @@ class DictionaryEntry {
} }
_onMenuOpen(e) { _onMenuOpen(e) {
const node = e.detail.menu.node; const bodyNode = e.detail.menu.bodyNode;
const showDetails = node.querySelector('.popup-menu-item[data-menu-action="showDetails"]'); const showDetails = bodyNode.querySelector('.popup-menu-item[data-menu-action="showDetails"]');
const hideDetails = node.querySelector('.popup-menu-item[data-menu-action="hideDetails"]'); const hideDetails = bodyNode.querySelector('.popup-menu-item[data-menu-action="hideDetails"]');
const hasDetails = (this._detailsContainer !== null); const hasDetails = (this._detailsContainer !== null);
const detailsVisible = (hasDetails && !this._detailsContainer.hidden); const detailsVisible = (hasDetails && !this._detailsContainer.hidden);
if (showDetails !== null) { if (showDetails !== null) {

4
ext/bg/js/settings/profile-conditions-ui.js
View File

@ -546,8 +546,8 @@ class ProfileConditionUI {
} }
_onMenuOpen(e) { _onMenuOpen(e) {
const node = e.detail.menu.node; const bodyNode = e.detail.menu.bodyNode;
const deleteGroup = node.querySelector('.popup-menu-item[data-menu-action="deleteGroup"]'); const deleteGroup = bodyNode.querySelector('.popup-menu-item[data-menu-action="deleteGroup"]');
if (deleteGroup !== null) { if (deleteGroup !== null) {
deleteGroup.hidden = (this._parent.childCount <= 1); deleteGroup.hidden = (this._parent.childCount <= 1);
} }

10
ext/bg/js/settings/profile-controller.js
View File

@ -659,12 +659,12 @@ class ProfileEntry {
} }
_onMenuOpen(e) { _onMenuOpen(e) {
const node = e.detail.menu.node; const bodyNode = e.detail.menu.bodyNode;
const count = this._profileController.profileCount; const count = this._profileController.profileCount;
this._setMenuActionEnabled(node, 'moveUp', this._index > 0); this._setMenuActionEnabled(bodyNode, 'moveUp', this._index > 0);
this._setMenuActionEnabled(node, 'moveDown', this._index < count - 1); this._setMenuActionEnabled(bodyNode, 'moveDown', this._index < count - 1);
this._setMenuActionEnabled(node, 'copyFrom', count > 1); this._setMenuActionEnabled(bodyNode, 'copyFrom', count > 1);
this._setMenuActionEnabled(node, 'delete', count > 1); this._setMenuActionEnabled(bodyNode, 'delete', count > 1);
} }
_onMenuClose(e) { _onMenuClose(e) {

6
ext/bg/js/settings/scan-inputs-controller.js
View File

@ -246,9 +246,9 @@ class ScanInputField {
} }
_onMenuOpen(e) { _onMenuOpen(e) {
const node = e.detail.menu.node; const bodyNode = e.detail.menu.bodyNode;
const showAdvanced = node.querySelector('.popup-menu-item[data-menu-action="showAdvanced"]'); const showAdvanced = bodyNode.querySelector('.popup-menu-item[data-menu-action="showAdvanced"]');
const hideAdvanced = node.querySelector('.popup-menu-item[data-menu-action="hideAdvanced"]'); const hideAdvanced = bodyNode.querySelector('.popup-menu-item[data-menu-action="hideAdvanced"]');
const advancedVisible = (this._node.dataset.showAdvanced === 'true'); const advancedVisible = (this._node.dataset.showAdvanced === 'true');
if (showAdvanced !== null) { if (showAdvanced !== null) {
showAdvanced.hidden = advancedVisible; showAdvanced.hidden = advancedVisible;

6
ext/bg/js/settings2/translation-text-replacements-controller.js
View File

@ -176,10 +176,10 @@ class TranslationTextReplacementsEntry {
// Private // Private
_onMenuOpen(e) { _onMenuOpen(e) {
const node = e.detail.menu.node; const bodyNode = e.detail.menu.bodyNode;
const testVisible = this._isTestVisible(); const testVisible = this._isTestVisible();
node.querySelector('[data-menu-action=showTest]').hidden = testVisible; bodyNode.querySelector('[data-menu-action=showTest]').hidden = testVisible;
node.querySelector('[data-menu-action=hideTest]').hidden = !testVisible; bodyNode.querySelector('[data-menu-action=hideTest]').hidden = !testVisible;
} }
_onMenuClose(e) { _onMenuClose(e) {

38
ext/bg/settings2.html
View File

@ -1912,20 +1912,20 @@
</div> </div>
</div></template> </div></template>
<template id="profile-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"> <template id="profile-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
<button class="popup-menu-item" data-menu-action="moveUp">Move up</button> <button class="popup-menu-item" data-menu-action="moveUp">Move up</button>
<button class="popup-menu-item" data-menu-action="moveDown">Move down</button> <button class="popup-menu-item" data-menu-action="moveDown">Move down</button>
<button class="popup-menu-item" data-menu-action="copyFrom">Copy from...</button> <button class="popup-menu-item" data-menu-action="copyFrom">Copy from...</button>
<button class="popup-menu-item" data-menu-action="editConditions">Edit conditions...</button> <button class="popup-menu-item" data-menu-action="editConditions">Edit conditions...</button>
<button class="popup-menu-item" data-menu-action="duplicate">Duplicate</button> <button class="popup-menu-item" data-menu-action="duplicate">Duplicate</button>
<button class="popup-menu-item" data-menu-action="delete">Delete</button> <button class="popup-menu-item" data-menu-action="delete">Delete</button>
</div></div></template> </div></div></div></template>
<template id="profile-condition-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"> <template id="profile-condition-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
<button class="popup-menu-item" data-menu-action="resetValue">Reset value</button> <button class="popup-menu-item" data-menu-action="resetValue">Reset value</button>
<button class="popup-menu-item" data-menu-action="delete">Delete</button> <button class="popup-menu-item" data-menu-action="delete">Delete</button>
<button class="popup-menu-item" data-menu-action="deleteGroup">Delete group</button> <button class="popup-menu-item" data-menu-action="deleteGroup">Delete group</button>
</div></div></template> </div></div></div></template>
<!-- Dictionary modals --> <!-- Dictionary modals -->
@ -2119,11 +2119,11 @@
</div> </div>
</div></template> </div></template>
<template id="dictionary-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"> <template id="dictionary-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
<button class="popup-menu-item" data-menu-action="showDetails">Show details</button> <button class="popup-menu-item" data-menu-action="showDetails">Show details</button>
<button class="popup-menu-item" data-menu-action="hideDetails" hidden>Hide details</button> <button class="popup-menu-item" data-menu-action="hideDetails" hidden>Hide details</button>
<button class="popup-menu-item" data-menu-action="delete">Delete</button> <button class="popup-menu-item" data-menu-action="delete">Delete</button>
</div></div></template> </div></div></div></template>
<template id="secondary-search-dictionary-template"><div class="settings-item dictionary-item"><div class="settings-item-inner"> <template id="secondary-search-dictionary-template"><div class="settings-item dictionary-item"><div class="settings-item-inner">
<div class="settings-item-left"> <div class="settings-item-left">
@ -2271,9 +2271,9 @@
<button class="icon-button audio-source-menu-button" data-menu="audio-source-menu" data-menu-position="below left"><span class="icon-button-inner"><span class="icon" data-icon="kebab-menu"></span></span></button> <button class="icon-button audio-source-menu-button" data-menu="audio-source-menu" data-menu-position="below left"><span class="icon-button-inner"><span class="icon" data-icon="kebab-menu"></span></span></button>
</div></template> </div></template>
<template id="audio-source-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"> <template id="audio-source-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
<button class="popup-menu-item" data-menu-action="remove">Remove</button> <button class="popup-menu-item" data-menu-action="remove">Remove</button>
</div></div></template> </div></div></div></template>
<!-- Scanning inputs modal --> <!-- Scanning inputs modal -->
@ -2410,12 +2410,12 @@
</div> </div>
</div></template> </div></template>
<template id="scanning-inputs-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"> <template id="scanning-inputs-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
<button class="popup-menu-item" data-menu-action="showAdvanced">Show advanced options</button> <button class="popup-menu-item" data-menu-action="showAdvanced">Show advanced options</button>
<button class="popup-menu-item" data-menu-action="hideAdvanced">Hide advanced options</button> <button class="popup-menu-item" data-menu-action="hideAdvanced">Hide advanced options</button>
<button class="popup-menu-item" data-menu-action="clearInputs">Clear inputs</button> <button class="popup-menu-item" data-menu-action="clearInputs">Clear inputs</button>
<button class="popup-menu-item" data-menu-action="remove">Remove</button> <button class="popup-menu-item" data-menu-action="remove">Remove</button>
</div></div></template> </div></div></div></template>
<!-- Input action prevention modal --> <!-- Input action prevention modal -->
@ -2676,11 +2676,11 @@
<button class="anki-card-field-value-menu-button input-suffix-button input-suffix-icon-button" data-menu-position="below left"><span class="icon icon-button-icon-light" data-icon="material-down-arrow"></span></button> <button class="anki-card-field-value-menu-button input-suffix-button input-suffix-icon-button" data-menu-position="below left"><span class="icon icon-button-icon-light" data-icon="material-down-arrow"></span></button>
</div></template> </div></template>
<template id="anki-card-terms-field-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"></div></div></template> <template id="anki-card-terms-field-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body"></div></div></div></template>
<template id="anki-card-kanji-field-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"></div></div></template> <template id="anki-card-kanji-field-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body"></div></div></div></template>
<template id="anki-card-all-field-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"></div></div></template> <template id="anki-card-all-field-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body"></div></div></div></template>
<!-- Anki field template modals --> <!-- Anki field template modals -->
@ -2869,11 +2869,11 @@
</div> </div>
</div></template> </div></template>
<template id="translation-text-replacement-entry-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"> <template id="translation-text-replacement-entry-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
<button class="popup-menu-item" data-menu-action="showTest">Test</button> <button class="popup-menu-item" data-menu-action="showTest">Test</button>
<button class="popup-menu-item" data-menu-action="hideTest">Hide test</button> <button class="popup-menu-item" data-menu-action="hideTest">Hide test</button>
<button class="popup-menu-item" data-menu-action="remove">Remove</button> <button class="popup-menu-item" data-menu-action="remove">Remove</button>
</div></div></template> </div></div></div></template>
<!-- Sentence parsing modal --> <!-- Sentence parsing modal -->
@ -2951,9 +2951,9 @@
</td> </td>
</tr></template> </tr></template>
<template id="sentence-termination-character-entry-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"> <template id="sentence-termination-character-entry-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
<button class="popup-menu-item" data-menu-action="delete">Delete</button> <button class="popup-menu-item" data-menu-action="delete">Delete</button>
</div></div></template> </div></div></div></template>
<!-- Keyboard shortcuts modal --> <!-- Keyboard shortcuts modal -->
@ -3039,11 +3039,11 @@
</div> </div>
</div></div></template> </div></div></template>
<template id="hotkey-list-item-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"> <template id="hotkey-list-item-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
<button class="popup-menu-item" data-menu-action="clearInputs">Clear input</button> <button class="popup-menu-item" data-menu-action="clearInputs">Clear input</button>
<button class="popup-menu-item" data-menu-action="resetInput">Reset input</button> <button class="popup-menu-item" data-menu-action="resetInput">Reset input</button>
<button class="popup-menu-item" data-menu-action="delete">Delete</button> <button class="popup-menu-item" data-menu-action="delete">Delete</button>
</div></div></template> </div></div></div></template>
<!-- Scripts --> <!-- Scripts -->

4
ext/bg/welcome.html
View File

@ -327,9 +327,9 @@
</div> </div>
</div></template> </div></template>
<template id="dictionary-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"> <template id="dictionary-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body">
<button class="popup-menu-item" data-menu-action="delete">Delete</button> <button class="popup-menu-item" data-menu-action="delete">Delete</button>
</div></div></template> </div></div></div></template>
<!-- Scripts --> <!-- Scripts -->

6
ext/mixed/css/material.css
View File

@ -928,11 +928,13 @@ button.icon-button:active {
border-radius: var(--menu-border-radius); border-radius: var(--menu-border-radius);
background-color: var(--background-color-light); background-color: var(--background-color-light);
padding: 0.5em 0; padding: 0.5em 0;
min-width: 8em;
overflow: auto;
}
.popup-menu-body {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
align-items: stretch; align-items: stretch;
min-width: 8em;
overflow: auto;
white-space: nowrap; white-space: nowrap;
} }
button.popup-menu-item { button.popup-menu-item {

20
ext/mixed/js/popup-menu.js
View File

@ -21,6 +21,7 @@ class PopupMenu extends EventDispatcher {
this._sourceElement = sourceElement; this._sourceElement = sourceElement;
this._containerNode = containerNode; this._containerNode = containerNode;
this._node = containerNode.querySelector('.popup-menu'); this._node = containerNode.querySelector('.popup-menu');
this._bodyNode = containerNode.querySelector('.popup-menu-body');
this._isClosed = false; this._isClosed = false;
this._eventListeners = new EventListenerCollection(); this._eventListeners = new EventListenerCollection();
} }
@ -37,13 +38,17 @@ class PopupMenu extends EventDispatcher {
return this._node; return this._node;
} }
get bodyNode() {
return this._bodyNode;
}
get isClosed() { get isClosed() {
return this._isClosed; return this._isClosed;
} }
prepare() { prepare() {
const items = this._node.querySelectorAll('.popup-menu-item'); const items = this._bodyNode.querySelectorAll('.popup-menu-item');
this._setPosition(items); this._setPosition();
this._containerNode.focus(); this._containerNode.focus();
this._eventListeners.addEventListener(window, 'resize', this._onWindowResize.bind(this), false); this._eventListeners.addEventListener(window, 'resize', this._onWindowResize.bind(this), false);
@ -84,7 +89,7 @@ class PopupMenu extends EventDispatcher {
this._close(null, 'resize', true); this._close(null, 'resize', true);
} }
_setPosition(items) { _setPosition() {
// Get flags // Get flags
let horizontal = 1; let horizontal = 1;
let vertical = 1; let vertical = 1;
@ -138,11 +143,10 @@ class PopupMenu extends EventDispatcher {
const menuRect = menu.getBoundingClientRect(); const menuRect = menu.getBoundingClientRect();
let top = menuRect.top; let top = menuRect.top;
let bottom = menuRect.bottom; let bottom = menuRect.bottom;
if (verticalCover === 1 && items.length > 0) { if (verticalCover === 1) {
const rect1 = items[0].getBoundingClientRect(); const bodyRect = this._bodyNode.getBoundingClientRect();
const rect2 = items[items.length - 1].getBoundingClientRect(); top = bodyRect.top;
top = rect1.top; bottom = bodyRect.bottom;
bottom = rect2.bottom;
} }
let x = ( let x = (