wikimedia/mediawiki-extensions-Echo
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo synced 2024-11-23 23:44:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Conditionally rearrange date and button in notif list"

Browse source
This commit is contained in:
jenkins-bot 2018-04-13 18:25:38 +00:00 committed by Gerrit Code Review
parent 7c06f6cf0a 8b84ed2a3b
commit 4538925597
3 changed files with 60 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
modules/styles/mw.echo.ui.SubGroupListWidget.less
View file

@ -13,10 +13,14 @@
&-row {
display: table-row;
&-title {
&-cell {
display: table-cell;
}
&-title {
width: 100%;
vertical-align: bottom;
white-space: nowrap;
.oo-ui-labelElement-label {
white-space: normal;
@ -24,7 +28,6 @@
}
&-markAllReadButton {
display: table-cell;
text-align: right;
}
}

7
modules/ui/mw.echo.ui.DatedNotificationsWidget.js
View file

@ -94,7 +94,7 @@
* @param {Object} models List models, indexed by ID
*/
mw.echo.ui.DatedNotificationsWidget.prototype.populateFromModel = function ( models ) {
var modelId, model, subgroupWidget,
var modelId, model, subgroupWidget, widget,
groupWidgets = [];
// Detach all attached models
@ -120,6 +120,11 @@
groupWidgets.push( subgroupWidget );
}
this.getList().getItems().forEach( function ( widget ) {
// Destroy all available widgets
widget.destroy();
} );
// Reset the list and re-add the items
this.getList().clearItems();
this.getList().addItems( groupWidgets );

56
modules/ui/mw.echo.ui.SubGroupListWidget.js
View file

@ -14,9 +14,10 @@
* for popups.
*/
mw.echo.ui.SubGroupListWidget = function MwEchoUiSubGroupListWidget( controller, listModel, config ) {
var sourceURL,
$header = $( '<div>' )
.addClass( 'mw-echo-ui-subGroupListWidget-header' );
var sourceURL;
this.$header = $( '<div>' )
.addClass( 'mw-echo-ui-subGroupListWidget-header' );
config = config || {};
@ -56,12 +57,18 @@
if ( sourceURL ) {
this.title = new OO.ui.ButtonWidget( {
framed: false,
classes: [ 'mw-echo-ui-subGroupListWidget-header-row-title' ],
classes: [
'mw-echo-ui-subGroupListWidget-header-row-title',
'mw-echo-ui-subGroupListWidget-header-row-cell'
],
href: sourceURL
} );
} else {
this.title = new OO.ui.LabelWidget( {
classes: [ 'mw-echo-ui-subGroupListWidget-header-row-title' ]
classes: [
'mw-echo-ui-subGroupListWidget-header-row-title',
'mw-echo-ui-subGroupListWidget-header-row-cell'
]
} );
}
@ -75,7 +82,10 @@
framed: true,
icon: 'checkAll',
label: mw.msg( 'echo-specialpage-section-markread' ),
classes: [ 'mw-echo-ui-subGroupListWidget-header-row-markAllReadButton' ]
classes: [
'mw-echo-ui-subGroupListWidget-header-row-markAllReadButton',
'mw-echo-ui-subGroupListWidget-header-row-cell'
]
} );
// Events
@ -98,7 +108,7 @@
this.$element
.addClass( 'mw-echo-ui-subGroupListWidget' )
.append(
$header.append(
this.$header.append(
$( '<div>' )
.addClass( 'mw-echo-ui-subGroupListWidget-header-row' )
.append(
@ -108,6 +118,13 @@
),
this.listWidget.$element
);
this.$pageContentText = $( '#mw-content-text' );
$( window ).resize( this.resizeHeader.bind( this ) );
// Resize the header after the stack finishes loading
// so the widget is attached
setTimeout( this.resizeHeader.bind( this ), 0 );
};
/* Initialization */
@ -116,6 +133,31 @@
/* Methods */
/**
* Respond to window resize event
*/
mw.echo.ui.SubGroupListWidget.prototype.resizeHeader = function () {
var contentWidth = this.$pageContentText.width(),
screenTooNarrow = this.$header.width() > contentWidth;
// Screen too narrow, put the button under the date
this.title.$element.toggleClass(
'mw-echo-ui-subGroupListWidget-header-row-cell',
!screenTooNarrow
);
this.markAllReadButton.$element.toggleClass(
'mw-echo-ui-subGroupListWidget-header-row-cell',
!screenTooNarrow
);
};
/**
* Destroy the widget and disconnect events
*/
mw.echo.ui.SubGroupListWidget.prototype.destroy = function () {
$( window ).off( 'resize' );
};
/**
* Toggle the visibility of the mark all read button for this group
* based on whether there are unread notifications