[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:
parent
e030193ced
commit
93f930ce3e
|
@ -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
|
||||||
} );
|
} );
|
||||||
}() );
|
}() );
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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).
|
||||||
|
|
|
@ -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 );
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -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();
|
||||||
|
|
Loading…
Reference in New Issue