- Combine number of results and the time period panels.
- Add gear/settings icon.
- Make the "View newest changes" link more prominent, by moving
the indicator into the same row as "Live updates" button and
the combined number of results and time period selector.
- Add reload icon to "View newest changes" link.
Bug: T177926
Change-Id: I793bfaa91a7823bdec7af5816d9398d2a993262a
"rcfilters-legend-heading": "<strong>List of abbreviations:</strong>",
"rcfilters-other-review-tools": "Other review tools",
"rcfilters-group-results-by-page": "Group results by page",
- "rcfilters-grouping-title": "Grouping",
"rcfilters-activefilters": "Active filters",
"rcfilters-advancedfilters": "Advanced filters",
- "rcfilters-limit-title": "Changes to show",
- "rcfilters-limit-shownum": "Show last {{PLURAL:$1|change|$1 changes}}",
+ "rcfilters-limit-title": "Results to show",
+ "rcfilters-limit-and-date-label": "{{PLURAL:$1|change|$1 changes}}, $2",
+ "rcfilters-date-popup-title": "Time period to search",
"rcfilters-days-title": "Recent days",
"rcfilters-hours-title": "Recent hours",
"rcfilters-days-show-days": "$1 {{PLURAL:$1|day|days}}",
"rcfilters-legend-heading": "Used as a heading for legend box on [[Special:RecentChanges]] and [[Special:Watchlist]] when RCFilters are enabled.",
"rcfilters-other-review-tools": "Used as a heading for the community collection of other links on [[Special:RecentChanges]] when RCFilters are enabled.",
"rcfilters-group-results-by-page": "A label for the checkbox describing whether the results in [[Special:RecentChanges]] are grouped by page when RCFilters are enabled.",
- "rcfilters-grouping-title": "Title for the section showing display options for grouping results in [[Special:RecentChanges]] when RCFilters are enabled.",
"rcfilters-activefilters": "Title for the filters selection showing the active filters.",
"rcfilters-advancedfilters": "Title for the buttons allowing the user to switch to the various advanced filters views.",
"rcfilters-limit-title": "Title for the options to change the number of results shown.",
- "rcfilters-limit-shownum": "Title for the button that opens the operation to control how many results are shown. \n\nParameters: $1 - Number of results shown",
+ "rcfilters-limit-and-date-label": "Title for the button that opens the operation to control how many results to show and in which time period to search. \n\nParameters: $1 - Number of results shown\n\n$2 - Time period to search. One of {{msg-mw|rcfilters-days-title}} or {{msg-mw|rcfilters-hours-title}} is used as $2",
+ "rcfilters-date-popup-title": "Section title of date options on recent changes results",
"rcfilters-days-title": "Title for the options to change the number of days for the results shown.",
"rcfilters-hours-title": "Title for the options to change the number of hours for the results shown.",
"rcfilters-days-show-days": "Title for the button that opens the operation to control the day range for the results. \n\nParameters: $1 - Number of days shown\n{{Identical|Day}}",
'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ViewSwitchWidget.js',
'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ValuePickerWidget.js',
'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitPopupWidget.js',
- 'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitButtonWidget.js',
- 'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.DateButtonWidget.js',
+ 'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.js',
'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.DatePopupWidget.js',
'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js',
'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js',
'rcfilters-activefilters',
'rcfilters-advancedfilters',
'rcfilters-group-results-by-page',
- 'rcfilters-grouping-title',
'rcfilters-limit-title',
- 'rcfilters-limit-shownum',
+ 'rcfilters-limit-and-date-label',
+ 'rcfilters-date-popup-title',
'rcfilters-days-title',
'rcfilters-hours-title',
'rcfilters-days-show-days',
.mw-rcfilters-ui-changesLimitPopupWidget {
- .oo-ui-fieldsetLayout {
- margin-top: 1em;
-
- .oo-ui-fieldsetLayout-header .oo-ui-labelElement-label {
- font-size: 1em;
- }
- }
+ margin: 0.7em 0.9375em 0;
}
+@import 'mediawiki.ui/variables';
+
.mw-rcfilters-ui-datePopupWidget {
+ margin-top: 1em;
+ border-top: 1px solid @colorGray10;
+ padding-top: 1em;
+
+ &-title,
+ &-days,
+ &-hours {
+ margin: 0 0.9375em;
+ }
+
&-days {
- margin-top: 1em;
+ margin-top: 0.7em;
+ margin-bottom: 0.625em;
+ }
+
+ &-title {
+ display: block;
+ font-weight: bold;
+ margin-bottom: 0.5em;
+ }
+
+ .mw-rcfilters-ui-valuePickerWidget-title {
+ color: @colorGray7;
}
}
+@import 'mediawiki.mixins';
+
.mw-rcfilters-ui-filterWrapperWidget {
width: 100%;
// Make sure this uses the interface direction, not the content direction
}
&-bottom {
- margin-top: 1em;
+ .flex-display;
+ .flex;
- .mw-rcfilters-ui-changesLimitButtonWidget,
- .mw-rcfilters-ui-dateButtonWidget {
- display: inline-block;
-
- &:not( :first-child ) {
- margin-left: 0.5em;
- }
- }
+ margin-top: 1em;
}
}
@import 'mediawiki.mixins';
.mw-rcfilters-ui-liveUpdateButtonWidget {
- margin-left: 1em;
+ margin: 0;
&.oo-ui-toggleWidget-on {
position: relative;
--- /dev/null
+( function ( mw ) {
+ /**
+ * Widget defining the button controlling the popup for the number of results
+ *
+ * @class
+ * @extends OO.ui.Widget
+ *
+ * @constructor
+ * @param {mw.rcfilters.Controller} controller Controller
+ * @param {mw.rcfilters.dm.FiltersViewModel} model View model
+ * @param {Object} [config] Configuration object
+ * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
+ */
+ mw.rcfilters.ui.ChangesLimitAndDateButtonWidget = function MwRcfiltersUiChangesLimitWidget( controller, model, config ) {
+ config = config || {};
+
+ // Parent
+ mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.parent.call( this, config );
+
+ this.controller = controller;
+ this.model = model;
+
+ this.$overlay = config.$overlay || this.$element;
+
+ this.button = null;
+ this.limitGroupModel = null;
+ this.groupByPageItemModel = null;
+ this.daysGroupModel = null;
+
+ this.model.connect( this, {
+ initialize: 'onModelInitialize'
+ } );
+
+ this.$element
+ .addClass( 'mw-rcfilters-ui-changesLimitButtonWidget' );
+ };
+
+ /* Initialization */
+
+ OO.inheritClass( mw.rcfilters.ui.ChangesLimitAndDateButtonWidget, OO.ui.Widget );
+
+ /**
+ * Respond to model initialize event
+ */
+ mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.prototype.onModelInitialize = function () {
+ var changesLimitPopupWidget, selectedItem, currentValue, datePopupWidget,
+ displayGroupModel = this.model.getGroup( 'display' );
+
+ this.limitGroupModel = this.model.getGroup( 'limit' );
+ this.groupByPageItemModel = displayGroupModel.getItemByParamName( 'enhanced' );
+ this.daysGroupModel = this.model.getGroup( 'days' );
+
+ // HACK: We need the model to be ready before we populate the button
+ // and the widget, because we require the filter items for the
+ // limit and their events. This addition is only done after the
+ // model is initialized.
+ // Note: This will be fixed soon!
+ if ( this.limitGroupModel && this.daysGroupModel ) {
+ changesLimitPopupWidget = new mw.rcfilters.ui.ChangesLimitPopupWidget(
+ this.limitGroupModel,
+ this.groupByPageItemModel
+ );
+
+ datePopupWidget = new mw.rcfilters.ui.DatePopupWidget(
+ this.daysGroupModel,
+ {
+ label: mw.msg( 'rcfilters-date-popup-title' )
+ }
+ );
+
+ selectedItem = this.limitGroupModel.getSelectedItems()[ 0 ];
+ currentValue = ( selectedItem && selectedItem.getLabel() ) ||
+ mw.language.convertNumber( this.limitGroupModel.getDefaultParamValue() );
+
+ this.button = new OO.ui.PopupButtonWidget( {
+ icon: 'advanced',
+ indicator: 'down',
+ label: mw.msg( 'rcfilters-limit-and-date-label', currentValue ),
+ $overlay: this.$overlay,
+ popup: {
+ width: 300,
+ padded: false,
+ anchor: false,
+ align: 'backwards',
+ $autoCloseIgnore: this.$overlay,
+ $content: $( '<div>' ).append(
+ // TODO: Merge ChangesLimitPopupWidget with DatePopupWidget into one common widget
+ changesLimitPopupWidget.$element,
+ datePopupWidget.$element
+ )
+ }
+ } );
+ this.updateButtonLabel();
+
+ // Events
+ this.limitGroupModel.connect( this, { update: 'updateButtonLabel' } );
+ this.daysGroupModel.connect( this, { update: 'updateButtonLabel' } );
+ changesLimitPopupWidget.connect( this, {
+ limit: 'onPopupLimit',
+ groupByPage: 'onPopupGroupByPage'
+ } );
+ datePopupWidget.connect( this, { days: 'onPopupDays' } );
+
+ this.$element.append( this.button.$element );
+ }
+ };
+
+ /**
+ * Respond to popup limit change event
+ *
+ * @param {string} filterName Chosen filter name
+ */
+ mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.prototype.onPopupLimit = function ( filterName ) {
+ var item = this.limitGroupModel.getItemByName( filterName );
+
+ this.controller.toggleFilterSelect( filterName, true );
+ this.controller.updateLimitDefault( item.getParamName() );
+ this.button.popup.toggle( false );
+ };
+
+ /**
+ * Respond to popup limit change event
+ *
+ * @param {boolean} isGrouped The result set is grouped by page
+ */
+ mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.prototype.onPopupGroupByPage = function ( isGrouped ) {
+ this.controller.toggleFilterSelect( this.groupByPageItemModel.getName(), isGrouped );
+ this.controller.updateGroupByPageDefault( Number( isGrouped ) );
+ this.button.popup.toggle( false );
+ };
+
+ /**
+ * Respond to popup limit change event
+ *
+ * @param {string} filterName Chosen filter name
+ */
+ mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.prototype.onPopupDays = function ( filterName ) {
+ var item = this.daysGroupModel.getItemByName( filterName );
+
+ this.controller.toggleFilterSelect( filterName, true );
+ this.controller.updateDaysDefault( item.getParamName() );
+ this.button.popup.toggle( false );
+ };
+
+ /**
+ * Respond to limit choose event
+ *
+ * @param {string} filterName Filter name
+ */
+ mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.prototype.updateButtonLabel = function () {
+ var message,
+ limit = this.limitGroupModel.getSelectedItems()[ 0 ],
+ label = limit && limit.getLabel(),
+ days = this.daysGroupModel.getSelectedItems()[ 0 ],
+ daysParamName = Number( days.getParamName() ) < 1 ?
+ 'rcfilters-days-show-hours' :
+ 'rcfilters-days-show-days';
+
+ // Update the label
+ if ( label && days ) {
+ message = mw.msg( 'rcfilters-limit-and-date-label', label,
+ mw.msg( daysParamName, days.getLabel() )
+ );
+ this.button.setLabel( message );
+ }
+ };
+
+}( mediaWiki ) );
+++ /dev/null
-( function ( mw ) {
- /**
- * Widget defining the button controlling the popup for the number of results
- *
- * @class
- * @extends OO.ui.Widget
- *
- * @constructor
- * @param {mw.rcfilters.Controller} controller Controller
- * @param {mw.rcfilters.dm.FiltersViewModel} model View model
- * @param {Object} [config] Configuration object
- * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
- */
- mw.rcfilters.ui.ChangesLimitButtonWidget = function MwRcfiltersUiChangesLimitWidget( controller, model, config ) {
- config = config || {};
-
- // Parent
- mw.rcfilters.ui.ChangesLimitButtonWidget.parent.call( this, config );
-
- this.controller = controller;
- this.model = model;
-
- this.$overlay = config.$overlay || this.$element;
-
- this.button = null;
- this.limitGroupModel = null;
-
- this.model.connect( this, {
- initialize: 'onModelInitialize'
- } );
-
- this.$element
- .addClass( 'mw-rcfilters-ui-changesLimitButtonWidget' );
- };
-
- /* Initialization */
-
- OO.inheritClass( mw.rcfilters.ui.ChangesLimitButtonWidget, OO.ui.Widget );
-
- /**
- * Respond to model initialize event
- */
- mw.rcfilters.ui.ChangesLimitButtonWidget.prototype.onModelInitialize = function () {
- var changesLimitPopupWidget, selectedItem, currentValue,
- displayGroupModel = this.model.getGroup( 'display' );
-
- this.limitGroupModel = this.model.getGroup( 'limit' );
- this.groupByPageItemModel = displayGroupModel.getItemByParamName( 'enhanced' );
-
- // HACK: We need the model to be ready before we populate the button
- // and the widget, because we require the filter items for the
- // limit and their events. This addition is only done after the
- // model is initialized.
- // Note: This will be fixed soon!
- if ( this.limitGroupModel ) {
- changesLimitPopupWidget = new mw.rcfilters.ui.ChangesLimitPopupWidget(
- this.limitGroupModel,
- this.groupByPageItemModel
- );
-
- selectedItem = this.limitGroupModel.getSelectedItems()[ 0 ];
- currentValue = ( selectedItem && selectedItem.getLabel() ) ||
- mw.language.convertNumber( this.limitGroupModel.getDefaultParamValue() );
-
- this.button = new OO.ui.PopupButtonWidget( {
- indicator: 'down',
- label: mw.msg( 'rcfilters-limit-shownum', currentValue ),
- $overlay: this.$overlay,
- popup: {
- width: 300,
- padded: true,
- anchor: false,
- align: 'forwards',
- $autoCloseIgnore: this.$overlay,
- $content: changesLimitPopupWidget.$element
- }
- } );
-
- // Events
- this.limitGroupModel.connect( this, { update: 'onLimitGroupModelUpdate' } );
- changesLimitPopupWidget.connect( this, {
- limit: 'onPopupLimit',
- groupByPage: 'onPopupGroupByPage'
- } );
-
- this.$element.append( this.button.$element );
- }
- };
-
- /**
- * Respond to popup limit change event
- *
- * @param {string} filterName Chosen filter name
- */
- mw.rcfilters.ui.ChangesLimitButtonWidget.prototype.onPopupLimit = function ( filterName ) {
- var item = this.limitGroupModel.getItemByName( filterName );
-
- this.controller.toggleFilterSelect( filterName, true );
- this.controller.updateLimitDefault( item.getParamName() );
- this.button.popup.toggle( false );
- };
-
- /**
- * Respond to popup limit change event
- *
- * @param {boolean} isGrouped The result set is grouped by page
- */
- mw.rcfilters.ui.ChangesLimitButtonWidget.prototype.onPopupGroupByPage = function ( isGrouped ) {
- this.controller.toggleFilterSelect( this.groupByPageItemModel.getName(), isGrouped );
- this.controller.updateGroupByPageDefault( Number( isGrouped ) );
- this.button.popup.toggle( false );
- };
-
- /**
- * Respond to limit choose event
- *
- * @param {string} filterName Filter name
- */
- mw.rcfilters.ui.ChangesLimitButtonWidget.prototype.onLimitGroupModelUpdate = function () {
- var item = this.limitGroupModel.getSelectedItems()[ 0 ],
- label = item && item.getLabel();
-
- // Update the label
- if ( label ) {
- this.button.setLabel( mw.msg( 'rcfilters-limit-shownum', label ) );
- }
- };
-
-}( mediaWiki ) );
.addClass( 'mw-rcfilters-ui-changesLimitPopupWidget' )
.append(
this.valuePicker.$element,
- new OO.ui.FieldsetLayout( {
- label: mw.msg( 'rcfilters-grouping-title' ),
- items: [
- new OO.ui.FieldLayout(
- this.groupByPageCheckbox,
- {
- align: 'inline',
- label: mw.msg( 'rcfilters-group-results-by-page' )
- }
- )
- ]
- } ).$element
+ new OO.ui.FieldLayout(
+ this.groupByPageCheckbox,
+ {
+ align: 'inline',
+ label: mw.msg( 'rcfilters-group-results-by-page' )
+ }
+ ).$element
);
};
} );
this.changesListViewModel.connect( this, {
invalidate: 'onModelInvalidate',
- update: 'onModelUpdate',
- newChangesExist: 'onNewChangesExist'
+ update: 'onModelUpdate'
} );
this.$element
// We keep the timeout class here and remove it later, since at this
// stage it is still needed to identify that the timeout occurred.
.removeClass( 'mw-changeslist-empty' );
-
- this.setupNewChangesButtonContainer();
};
/* Initialization */
.fadeIn( 1000 );
};
- /**
- * Respond to changes list model newChangesExist
- *
- * @param {boolean} newChangesExist Whether new changes exist
- */
- mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onNewChangesExist = function ( newChangesExist ) {
- this.showNewChangesLink.toggle( newChangesExist );
- };
-
- /**
- * Respond to the user clicking the 'show new changes' button
- */
- mw.rcfilters.ui.ChangesListWrapperWidget.prototype.onShowNewChangesClick = function () {
- this.controller.showNewChanges();
- };
-
- /**
- * Setup the container for the 'new changes' button.
- */
- mw.rcfilters.ui.ChangesListWrapperWidget.prototype.setupNewChangesButtonContainer = function () {
- this.showNewChangesLink = new OO.ui.ButtonWidget( {
- framed: false,
- label: mw.message( 'rcfilters-show-new-changes' ).text(),
- flags: [ 'progressive' ]
- } );
- this.showNewChangesLink.connect( this, { click: 'onShowNewChangesClick' } );
- this.showNewChangesLink.toggle( false );
-
- // HACK: Add the -newChanges div inside rcfilters-head, rather than right above us
- // Visually it's the same place, but by putting it inside rcfilters-head we are
- // able to use the min-height rule to prevent the page from jumping when this is added.
- this.$element.parent().find( '.rcfilters-head' ).append(
- $( '<div>' )
- .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-newChanges' )
- .append( this.showNewChangesLink.$element )
- );
- };
-
/**
* Set up the highlight containers with all color circle indicators.
*
+++ /dev/null
-( function ( mw ) {
- /**
- * Widget defining the button controlling the popup for the date range for the results
- *
- * @class
- * @extends OO.ui.Widget
- *
- * @constructor
- * @param {mw.rcfilters.Controller} controller Controller
- * @param {mw.rcfilters.dm.FiltersViewModel} model View model
- * @param {Object} [config] Configuration object
- * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
- */
- mw.rcfilters.ui.DateButtonWidget = function MwRcfiltersUiDateButtonWidget( controller, model, config ) {
- config = config || {};
-
- // Parent
- mw.rcfilters.ui.ChangesLimitButtonWidget.parent.call( this, config );
-
- this.controller = controller;
- this.model = model;
-
- this.$overlay = config.$overlay || this.$element;
-
- this.button = null;
- this.daysGroupModel = null;
-
- this.model.connect( this, {
- initialize: 'onModelInitialize'
- } );
-
- this.$element
- .addClass( 'mw-rcfilters-ui-dateButtonWidget' );
- };
-
- /* Initialization */
-
- OO.inheritClass( mw.rcfilters.ui.DateButtonWidget, OO.ui.Widget );
-
- /**
- * Respond to model initialize event
- */
- mw.rcfilters.ui.DateButtonWidget.prototype.onModelInitialize = function () {
- var datePopupWidget;
-
- this.daysGroupModel = this.model.getGroup( 'days' );
-
- // HACK: We need the model to be ready before we populate the button
- // and the widget, because we require the filter items for the
- // limit and their events. This addition is only done after the
- // model is initialized.
- // Note: This will be fixed soon!
- if ( this.daysGroupModel ) {
- datePopupWidget = new mw.rcfilters.ui.DatePopupWidget(
- this.daysGroupModel
- );
-
- this.button = new OO.ui.PopupButtonWidget( {
- indicator: 'down',
- icon: 'calendar',
- $overlay: this.$overlay,
- popup: {
- width: 300,
- padded: true,
- anchor: false,
- align: 'forwards',
- $autoCloseIgnore: this.$overlay,
- $content: datePopupWidget.$element
- }
- } );
- this.updateButtonLabel();
-
- // Events
- this.daysGroupModel.connect( this, { update: 'onDaysGroupModelUpdate' } );
- datePopupWidget.connect( this, { days: 'onPopupDays' } );
-
- this.$element.append( this.button.$element );
- }
- };
-
- /**
- * Respond to popup limit change event
- *
- * @param {string} filterName Chosen filter name
- */
- mw.rcfilters.ui.DateButtonWidget.prototype.onPopupDays = function ( filterName ) {
- var item = this.daysGroupModel.getItemByName( filterName );
-
- this.controller.toggleFilterSelect( filterName, true );
- this.controller.updateDaysDefault( item.getParamName() );
- this.button.popup.toggle( false );
- };
-
- /**
- * Respond to limit choose event
- *
- * @param {string} filterName Filter name
- */
- mw.rcfilters.ui.DateButtonWidget.prototype.onDaysGroupModelUpdate = function () {
- this.updateButtonLabel();
- };
-
- /**
- * Update the button label
- */
- mw.rcfilters.ui.DateButtonWidget.prototype.updateButtonLabel = function () {
- var item = this.daysGroupModel.getSelectedItems()[ 0 ];
-
- // Update the label
- if ( item ) {
- this.button.setLabel(
- mw.msg(
- Number( item.getParamName() ) < 1 ?
- 'rcfilters-days-show-hours' : 'rcfilters-days-show-days',
- item.getLabel()
- )
- );
- }
- };
-}( mediaWiki ) );
// Parent
mw.rcfilters.ui.ChangesLimitPopupWidget.parent.call( this, config );
+ // Mixin constructors
+ OO.ui.mixin.LabelElement.call( this, config );
this.model = model;
this.$element
.addClass( 'mw-rcfilters-ui-datePopupWidget' )
.append(
+ this.$label
+ .addClass( 'mw-rcfilters-ui-datePopupWidget-title' ),
this.hoursValuePicker.$element,
this.daysValuePicker.$element
);
/* Initialization */
OO.inheritClass( mw.rcfilters.ui.DatePopupWidget, OO.ui.Widget );
+ OO.mixinClass( mw.rcfilters.ui.DatePopupWidget, OO.ui.mixin.LabelElement );
/* Events */
this.controller = controller;
this.model = model;
this.queriesModel = savedQueriesModel;
+ this.changesListModel = changesListModel;
this.$overlay = config.$overlay || this.$element;
this.filterTagWidget = new mw.rcfilters.ui.FilterTagMultiselectWidget(
this.liveUpdateButton = new mw.rcfilters.ui.LiveUpdateButtonWidget(
this.controller,
- changesListModel
+ this.changesListModel
);
- this.numChangesWidget = new mw.rcfilters.ui.ChangesLimitButtonWidget(
+ this.numChangesWidget = new mw.rcfilters.ui.ChangesLimitAndDateButtonWidget(
this.controller,
this.model,
{
}
);
- this.dateWidget = new mw.rcfilters.ui.DateButtonWidget(
- this.controller,
- this.model,
- {
- $overlay: this.$overlay
- }
- );
+ this.showNewChangesLink = new OO.ui.ButtonWidget( {
+ icon: 'reload',
+ framed: false,
+ label: mw.msg( 'rcfilters-show-new-changes' ),
+ flags: [ 'progressive' ]
+ } );
// Initialize
this.$top = $( '<div>' )
$bottom = $( '<div>' )
.addClass( 'mw-rcfilters-ui-filterWrapperWidget-bottom' )
.append(
- this.numChangesWidget.$element,
- this.dateWidget.$element
+ this.showNewChangesLink.$element,
+ this.numChangesWidget.$element
);
if ( mw.rcfilters.featureFlags.liveUpdate ) {
- $bottom.append( this.liveUpdateButton.$element );
+ $bottom.prepend( this.liveUpdateButton.$element );
}
+ // Events
+ this.changesListModel.connect( this, { newChangesExist: 'onNewChangesExist' } );
+ this.showNewChangesLink.connect( this, { click: 'onShowNewChangesClick' } );
+ this.showNewChangesLink.toggle( false );
+
this.$element
.addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
.append(
mw.rcfilters.ui.FilterWrapperWidget.prototype.setTopSection = function ( $topSectionElement ) {
this.$top.append( $topSectionElement );
};
+
+ /**
+ * Respond to the user clicking the 'show new changes' button
+ */
+ mw.rcfilters.ui.FilterWrapperWidget.prototype.onShowNewChangesClick = function () {
+ this.controller.showNewChanges();
+ };
+
+ /**
+ * Respond to changes list model newChangesExist
+ *
+ * @param {boolean} newChangesExist Whether new changes exist
+ */
+ mw.rcfilters.ui.FilterWrapperWidget.prototype.onNewChangesExist = function ( newChangesExist ) {
+ this.showNewChangesLink.toggle( newChangesExist );
+ };
}( mediaWiki ) );
dépôts / lhc / web / wiklou.git / commitdiff