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

Merge "Redesign "new comments" warning"

Browse source
This commit is contained in:
jenkins-bot 2022-05-12 17:21:23 +00:00 committed by Gerrit Code Review
parent 1e326c5bc2 cf3e7c49d8
commit 521760ecdc
6 changed files with 83 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
extension.json
View file

@ -182,7 +182,7 @@
"discussiontools-replywidget-mention-tool-title",
"discussiontools-replywidget-mode-source",
"discussiontools-replywidget-mode-visual",
"discussiontools-replywidget-newcomments-warning",
"discussiontools-replywidget-newcomments-button",
"discussiontools-replywidget-newtopic",
"discussiontools-replywidget-placeholder-newtopic",
"discussiontools-replywidget-placeholder-reply",
@ -191,6 +191,7 @@
"discussiontools-replywidget-reply",
"discussiontools-replywidget-summary",
"discussiontools-replywidget-transcluded",
"ooui-popup-widget-close-button-aria-label",
"visualeditor-key-ctrl",
"visualeditor-key-enter",
"visualeditor-key-escape",

2
i18n/en.json
View file

@ -83,7 +83,7 @@
"discussiontools-replywidget-mention-tool-title": "Mention a user",
"discussiontools-replywidget-mode-source": "Source",
"discussiontools-replywidget-mode-visual": "Visual",
"discussiontools-replywidget-newcomments-warning": "$1 new {{PLURAL:$1|comment has|comments have}} been added in this section. Click to reload.",
"discussiontools-replywidget-newcomments-button": "Show $1 new {{PLURAL:$1|comment|comments}}",
"discussiontools-replywidget-newtopic": "Add topic",
"discussiontools-replywidget-newtopic-link": "https://www.mediawiki.org/wiki/Special:MyLanguage/Talk_pages_project/New_discussion",
"discussiontools-replywidget-placeholder-newtopic": "Description",

2
i18n/qqq.json
View file

@ -94,7 +94,7 @@
"discussiontools-replywidget-mention-tool-title": "Title text for the user mention tool.",
"discussiontools-replywidget-mode-source": "Label for the widget's source mode.\n\nThis should not include the word 'edit' or 'editor', and where possible should avoid 'wikitext' which is MediaWiki-specific terminology.",
"discussiontools-replywidget-mode-visual": "Label for the widget's visual mode.\n\nThis should not include the word 'edit' or 'editor', and should not use the product name VisualEditor.",
"discussiontools-replywidget-newcomments-warning": "Warning message to be displayed when new comments have been posted in the section the user is drafting a reply in.",
"discussiontools-replywidget-newcomments-button": "Button shown when new comments have been posted in the section the user is drafting a reply in.",
"discussiontools-replywidget-newtopic": "Label for button to post a new topic",
"discussiontools-replywidget-newtopic-link": "{{notranslate}}\nUsed by {{msg-mw|Tag-discussiontools-newtopic}} as a link to a page where users learn about the feature. Defaults to a page on MediaWiki.org.",
"discussiontools-replywidget-placeholder-newtopic": "Placeholder summarizing the discussion.\n{{identical|Description}}",

4
modules/dt-ve/CommentTargetWidget.less
View file

@ -14,6 +14,8 @@
> .ve-ce-surface .ve-ce-attachedRootNode,
> .ve-ui-surface-placeholder {
padding: 6px 8px;
// Leave space for newComments button
padding-bottom: 22px;
}
}
@ -22,6 +24,8 @@
> .ve-ui-surface-placeholder {
/* Use an non-zero padding to disable margin collapse */
padding: 0.05px 8px;
// Leave space for newComments button
padding-bottom: 16px;
}
}

60
modules/dt.ui.ReplyWidget.js
View file

@ -46,6 +46,7 @@ function ReplyWidget( commentController, commentDetails, config ) {
this.storage = controller.storage;
// eslint-disable-next-line no-jquery/no-global-selector
this.contentDir = $( '#mw-content-text' ).css( 'direction' );
this.hideNewCommentsWarning = false;
var inputConfig = $.extend(
{
@ -116,6 +117,10 @@ function ReplyWidget( commentController, commentDetails, config ) {
);
}
this.$bodyWrapper = $( '<div>' ).addClass( 'ext-discussiontools-ui-replyWidget-bodyWrapper' ).append(
this.replyBodyWidget.$element
);
this.$preview = $( '<div>' )
.addClass( 'ext-discussiontools-ui-replyWidget-preview' )
.attr( 'data-label', mw.msg( 'discussiontools-replywidget-preview' ) )
@ -214,7 +219,7 @@ function ReplyWidget( commentController, commentDetails, config ) {
// Initialization
this.$element.addClass( 'ext-discussiontools-ui-replyWidget' ).append(
this.$headerWrapper,
this.replyBodyWidget.$element,
this.$bodyWrapper,
this.$preview,
this.advancedToggle.$element,
this.advanced.$element,
@ -844,32 +849,45 @@ ReplyWidget.prototype.updateNewCommentsWarning = function ( comments ) {
return;
}
if ( !this.newCommentsWarning ) {
this.newCommentsWarning = new OO.ui.MessageWidget( {
type: 'warning',
classes: [ 'ext-discussiontools-ui-replyWidget-newComments' ]
this.newCommentsShow = new OO.ui.ButtonWidget( {
flags: [ 'progressive' ]
} );
this.newCommentsWarning.$element.attr( {
tabIndex: 0,
role: 'button'
this.newCommentsClose = new OO.ui.ButtonWidget( {
icon: 'close',
label: mw.msg( 'ooui-popup-widget-close-button-aria-label' ),
invisibleLabel: true
} );
this.newCommentsWarning.$element.on( 'click keypress', function ( e ) {
if ( e.type === 'keypress' && e.which !== OO.ui.Keys.ENTER && e.which !== OO.ui.Keys.SPACE ) {
// Only handle keypresses on the "Enter" or "Space" keys
return;
}
if ( e.type === 'click' && !utils.isUnmodifiedLeftClick( e ) ) {
// Only handle unmodified left clicks
return;
}
widget.emit( 'reloadPage' );
this.newCommentsWarning = new OO.ui.ButtonGroupWidget( {
classes: [ 'ext-discussiontools-ui-replyWidget-newComments' ],
items: [
this.newCommentsShow,
this.newCommentsClose
]
} );
this.newCommentsWarning.$element.insertAfter( this.advanced.$element );
this.newCommentsShow.connect( this, { click: [ 'emit', 'reloadPage' ] } );
this.newCommentsClose.connect( this, { click: 'onNewCommentsCloseClick' } );
this.$bodyWrapper.append( this.newCommentsWarning.$element );
}
this.newCommentsWarning.setLabel(
mw.msg( 'discussiontools-replywidget-newcomments-warning', comments.length )
this.newCommentsShow.setLabel(
mw.msg( 'discussiontools-replywidget-newcomments-button', comments.length )
);
this.newCommentsWarning.toggle( true );
if ( !this.hideNewCommentsWarning ) {
this.newCommentsWarning.toggle( true );
setTimeout( function () {
widget.newCommentsWarning.$element.addClass( 'ext-discussiontools-ui-replyWidget-newComments-open' );
} );
}
};
/**
* Handle click events on the new comments close button
*/
ReplyWidget.prototype.onNewCommentsCloseClick = function () {
this.newCommentsWarning.toggle( false );
// Hide the warning for the rest of the lifetime of the widget
this.hideNewCommentsWarning = true;
this.focus();
};
/**

38
modules/dt.ui.ReplyWidget.less
View file

@ -33,12 +33,14 @@
}
.ext-discussiontools-ui-replyWidget { /* stylelint-disable-line no-duplicate-selectors */
> .oo-ui-textInputWidget {
&-bodyWrapper > .oo-ui-textInputWidget {
max-width: none;
.oo-ui-inputWidget-input {
line-height: 1.5em;
overflow-y: hidden;
// Leave space for newComments button
padding-bottom: 22px;
}
}
@ -210,8 +212,40 @@
}
}
&-bodyWrapper {
position: relative;
}
&-newComments {
cursor: pointer;
position: absolute;
bottom: -1em;
left: 50%;
transition: transform 250ms ease-in, opacity 250ms ease-in;
transform: translate( -50%, 30px );
opacity: 0;
&-open {
transform: translate( -50%, 0 );
opacity: 1;
}
// Same border-radius is applied to all these elements to ensure that the trimmed-off corner
// areas don't capture clicks
&,
.oo-ui-buttonElement-framed:first-child,
.oo-ui-buttonElement-framed:first-child .oo-ui-buttonElement-button {
border-bottom-left-radius: 1.1em;
border-top-left-radius: 1.1em;
}
// Same border-radius is applied to all these elements to ensure that the trimmed-off corner
// areas don't capture clicks
&,
.oo-ui-buttonElement-framed:last-child,
.oo-ui-buttonElement-framed:last-child .oo-ui-buttonElement-button {
border-bottom-right-radius: 1.1em;
border-top-right-radius: 1.1em;
}
}
&-anonWarning,