[UI] [menu] remove menu height resizing

Remove the page action overflow and user menu height sizing. Previously,
a maximum menu height was set so that the menu itself would scroll. A
minimum height was also used so that the menu couldn't be shrunk down to
a silly size. Both the minimum height LESS and maximum height JS are now
removed.

Bug: T225959
Change-Id: I201374ab8b249272ee5dbb1401b844ffe034ea66
This commit is contained in:
Stephen Niedzielski 2019-07-31 11:36:19 -06:00 committed by Jdlrobson
parent e030193ced
commit 93f930ce3e
5 changed files with 8 additions and 53 deletions

View File

@ -5,25 +5,21 @@
/** The visible label icon associated with the checkbox. */ /** The visible label icon associated with the checkbox. */
toggleSelector = '.toggle-list__toggle', toggleSelector = '.toggle-list__toggle',
/** The underlying hidden checkbox that controls list visibility. */ /** The underlying hidden checkbox that controls list visibility. */
checkboxSelector = '.toggle-list__checkbox', checkboxSelector = '.toggle-list__checkbox';
listSelector = '.toggle-list__list';
/** /**
* Automatically dismiss the list when clicking or focusing elsewhere and update the * Automatically dismiss the list when clicking or focusing elsewhere and update the
* aria-expanded attribute based on list visibility. * aria-expanded attribute based on list visibility.
* @param {Window} window * @param {Window} window
* @param {HTMLElement} component * @param {HTMLElement} component
* @param {OO.EventEmitter} eventBus
* @param {boolean} [resize] If true, resize the menu on scroll and window resize.
* @return {void} * @return {void}
*/ */
function bind( window, component, eventBus, resize ) { function bind( window, component ) {
var var
toggle = component.querySelector( toggleSelector ), toggle = component.querySelector( toggleSelector ),
checkbox = /** @type {HTMLInputElement} */ ( checkbox = /** @type {HTMLInputElement} */ (
component.querySelector( checkboxSelector ) component.querySelector( checkboxSelector )
), );
list = component.querySelector( listSelector );
window.addEventListener( 'click', function ( event ) { window.addEventListener( 'click', function ( event ) {
if ( event.target !== toggle && event.target !== checkbox ) { if ( event.target !== toggle && event.target !== checkbox ) {
@ -42,23 +38,6 @@
}, true ); }, true );
checkbox.addEventListener( 'change', _updateAriaExpanded.bind( undefined, checkbox ) ); checkbox.addEventListener( 'change', _updateAriaExpanded.bind( undefined, checkbox ) );
if ( resize ) {
eventBus.on( 'scroll:throttled', _resize.bind( undefined, list ) );
eventBus.on( 'resize:throttled', _resize.bind( undefined, list ) );
}
}
/**
* @param {HTMLElement} component
* @param {boolean} [resize] If true, resize the menu to fit within the window.
* @return {void}
*/
function render( component, resize ) {
var list = /** @type {HTMLElement} */ ( component.querySelector( listSelector ) );
if ( resize ) {
_resize( list );
}
} }
/** /**
@ -71,17 +50,6 @@
_updateAriaExpanded( checkbox ); _updateAriaExpanded( checkbox );
} }
/**
* @param {HTMLElement} list
* @return {void}
*/
function _resize( list ) {
var rect = list.getClientRects()[ 0 ];
if ( rect ) {
list.style.maxHeight = window.document.documentElement.clientHeight - rect.top + 'px';
}
}
/** /**
* Revise the aria-expanded state to match the checked state. * Revise the aria-expanded state to match the checked state.
* @param {HTMLInputElement} checkbox * @param {HTMLInputElement} checkbox
@ -93,7 +61,6 @@
module.exports = Object.freeze( { module.exports = Object.freeze( {
selector: selector, selector: selector,
render: render,
bind: bind bind: bind
} ); } );
}() ); }() );

View File

@ -6,6 +6,4 @@
right: 0; right: 0;
margin-right: @contentMargin / 2; margin-right: @contentMargin / 2;
min-width: 200px; min-width: 200px;
// A variable max-height is set in JavaScript so a minimum height is needed.
min-height: 200px;
} }

View File

@ -93,9 +93,6 @@
// The top of the menu is flush with the bottom of the page actions toolbar. // The top of the menu is flush with the bottom of the page actions toolbar.
top: 100%; top: 100%;
right: 0; right: 0;
//
// A variable max-height is set in JavaScript so a minimum height is needed.
min-height: 200px;
} }
// overriding common.less `display:inherit` (which causes `display: flex;` in this instance). // overriding common.less `display:inherit` (which causes `display: flex;` in this instance).

View File

@ -14,13 +14,12 @@
/** /**
* @param {Window} window * @param {Window} window
* @param {Element} toolbar * @param {Element} toolbar
* @param {OO.EventEmitter} eventBus
* @return {void} * @return {void}
*/ */
function bind( window, toolbar, eventBus ) { function bind( window, toolbar ) {
var overflowSubmenu = toolbar.querySelector( overflowSubmenuSelector ); var overflowSubmenu = toolbar.querySelector( overflowSubmenuSelector );
if ( overflowSubmenu ) { if ( overflowSubmenu ) {
ToggleList.bind( window, overflowSubmenu, eventBus, true ); ToggleList.bind( window, overflowSubmenu );
} }
} }
@ -30,14 +29,9 @@
* @return {void} * @return {void}
*/ */
function render( window, toolbar ) { function render( window, toolbar ) {
var var overflowList = toolbar.querySelector( overflowListSelector );
overflowSubmenu = toolbar.querySelector( overflowSubmenuSelector ),
overflowList = toolbar.querySelector( overflowListSelector );
renderEditButton(); renderEditButton();
renderDownloadButton( window, overflowList ); renderDownloadButton( window, overflowList );
if ( overflowSubmenu ) {
ToggleList.render( overflowSubmenu, true );
}
} }
/** /**

View File

@ -326,12 +326,11 @@
// eslint-disable-next-line no-jquery/no-global-selector // eslint-disable-next-line no-jquery/no-global-selector
initHistoryLink( $( '.last-modifier-tagline a' ) ); initHistoryLink( $( '.last-modifier-tagline a' ) );
if ( toolbarElement ) { if ( toolbarElement ) {
Toolbar.bind( window, toolbarElement, eventBus ); Toolbar.bind( window, toolbarElement );
Toolbar.render( window, toolbarElement ); Toolbar.render( window, toolbarElement );
} }
if ( userMenu ) { if ( userMenu ) {
ToggleList.bind( window, userMenu, eventBus, true ); ToggleList.bind( window, userMenu );
ToggleList.render( userMenu, true );
} }
initRedlinksCta(); initRedlinksCta();
initUserRedLinks(); initUserRedLinks();