wikimedia/mediawiki-extensions-DiscussionTools
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/DiscussionTools synced 2024-11-13 18:37:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Put mobile ellipsis button menu in an overlay"

Browse source
This commit is contained in:
jenkins-bot 2023-10-09 17:27:22 +00:00 committed by Gerrit Code Review
parent f8b757bcae edc28d3d7c
commit db961ecd24
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' );
}
} );