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

Tweaks for new heading HTML structure

Browse source 
Bug: T327328
Bug: T327469
Change-Id: I8c7593e98dc677b28925129dda592dbc24106220
This commit is contained in:
Bartosz Dziewoński 2023-01-20 05:49:47 +01:00
parent cfd76f5eb0
commit 6d8f92a6b2
3 changed files with 28 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
modules/dt.init.less
View file

@ -189,6 +189,15 @@ h1, h2, h3, h4, h5, h6 {
}
}
// Topic subscriptions (both kinds)
.ext-discussiontools-visualenhancements-enabled .ext-discussiontools-init-section {
// Introduce a block formatting context so that floated "subscribe" links/buttons
// aren't affected by other floats (T327469). Most skins already include this rule
// for headings, but we add the floating stuff outside of headings (since T314714).
// https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
overflow: hidden;
}
// Topic subscriptions (link)
.ext-discussiontools-init-section-subscribe {
display: none;

18
modules/highlighter.js
View file

@ -1,5 +1,6 @@
var
lastHighlightedPublishedComment = null,
featuresEnabled = mw.config.get( 'wgDiscussionToolsFeaturesEnabled' ) || {},
CommentItem = require( './CommentItem.js' ),
utils = require( './utils.js' );
@ -42,7 +43,10 @@ function Highlight( comments ) {
// If the item is a heading, highlight the full extent of it (not only the text)
if ( comment.type === 'heading' && !comment.placeholderHeading ) {
range.selectNode( $highlight.closest( 'h1, h2, h3, h4, h5, h6' )[ 0 ] );
range.selectNode(
$highlight.closest( '.mw-heading' )[ 0 ] ||
$highlight.closest( 'h1, h2, h3, h4, h5, h6' )[ 0 ]
);
}
ranges.push( range );
@ -93,6 +97,16 @@ Highlight.prototype.update = function () {
// very short or very deeply indented, and this seems to work well enough in practice.
var useFullWidth = rect.width > rootRect.width / 3;
var headingTopAdj = 0;
if (
featuresEnabled.visualenhancements &&
$element.closest( '.ext-discussiontools-init-section' ).length
) {
// Shift the highlight a little to avoid drawing over the separator border at the top,
// and to cover the gap to the first comment at the bottom.
headingTopAdj = 10;
}
var top = rect.top - baseRect.top;
var width = rect.width;
var height = rect.height;
@ -110,7 +124,7 @@ Highlight.prototype.update = function () {
}
var padding = 5;
$element.css( {
'margin-top': top - padding,
'margin-top': top - padding + headingTopAdj,
'margin-left': left !== undefined ? left - padding : '',
'margin-right': right !== undefined ? right - padding : '',
width: width + ( padding * 2 ),

3
modules/topicsubscriptions.js
View file

@ -250,6 +250,9 @@ function maybeShowFirstTimeAutoTopicSubPopup() {
if ( popup.$element.closest( 'h1, h2, h3, h4, h5, h6' ).length ) {
popup.$element.closest( 'h1, h2, h3, h4, h5, h6' ).after( popup.$element );
}
if ( popup.$element.closest( '.mw-heading' ).length ) {
popup.$element.closest( '.mw-heading' ).after( popup.$element );
}
// Disable positioning, the popup is positioned in CSS, above the highlight
popup.toggle( true ).toggleClipping( false ).togglePositioning( false );