wikimedia/mediawiki-extensions-DiscussionTools
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/DiscussionTools synced 2024-11-27 17:51:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Put mobile ellipsis button menu in an overlay

Browse source 
This avoids unexpected interactions where choosing an option in the
menu behaves like tapping the heading.

Bug: T348217
Change-Id: I7c38bb51fa99606e708d3ff5a2f3d6101dec2fae
This commit is contained in:
Bartosz Dziewoński 2023-10-05 19:51:29 +02:00
parent eef701da1e
commit edc28d3d7c
2 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
modules/dt.init.less
View file

@ -171,6 +171,8 @@ h1, h2, h3, h4, h5, h6 {
min-width: 20em;
.skin-minerva& {
// Prevent the ellipsis button's focus ring from being clipped.
// We have no floated links/buttons on mobile, so this is okay.
overflow: visible;
}
}
@ -560,6 +562,14 @@ h1, h2, h3, h4, h5, h6 {
}
}
&.skin-minerva .ext-discussiontools-init-section-overflowMenu {
// Not sure if this should have custom styles like this…
// They were once accidentally inherited from the heading,
// before the menu was moved to an overlay.
font-weight: bold;
font-size: 0.875em;
}
&.skin-minerva .mf-section-0 + .ext-discussiontools-init-section {
border-top: 0;
margin-top: 0;

15
modules/mobile.js
View file

@ -49,9 +49,13 @@ function init( $container, pageThreads ) {
}
var threadItem = pageThreads.findCommentById( $threadMarker.data( 'mw-thread-id' ) );
var buttonMenu = OO.ui.infuse( this, { menu: {
horizontalPosition: threadItem.type === 'heading' ? 'end' : 'start'
} } );
var buttonMenu = OO.ui.infuse( this, {
$overlay: true,
menu: {
classes: [ 'ext-discussiontools-init-section-overflowMenu' ],
horizontalPosition: threadItem.type === 'heading' ? 'end' : 'start'
}
} );
mw.loader.using( buttonMenu.getData().resourceLoaderModules || [] ).then( function () {
var itemConfigs = buttonMenu.getData().itemConfigs;
@ -186,10 +190,11 @@ function init( $container, pageThreads ) {
}
// Handler for "edit" link in overflow menu, only setup once as the hook is global
mw.hook( 'discussionToolsOverflowMenuOnChoose' ).add( function ( id, menuItem ) {
mw.hook( 'discussionToolsOverflowMenuOnChoose' ).add( function ( id, menuItem, threadItem ) {
if ( id === 'edit' ) {
// Click the hidden section-edit link
menuItem.$element.closest( '.ext-discussiontools-init-section' ).find( '.mw-editsection > a' ).trigger( 'click' );
$( threadItem.getNativeRange().commonAncestorContainer )
.closest( '.ext-discussiontools-init-section' ).find( '.mw-editsection > a' ).trigger( 'click' );
}
} );