From 68808a483321ac52d3cd227f2f8a4dfb2e6c1d3a Mon Sep 17 00:00:00 2001 From: petarpetkovic Date: Mon, 27 Nov 2017 18:26:04 +0100 Subject: [PATCH] Combine changes limit and time period selectors - 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 --- languages/i18n/en.json | 6 +- languages/i18n/qqq.json | 4 +- resources/Resources.php | 7 +- ....rcfilters.ui.ChangesLimitPopupWidget.less | 8 +- .../mw.rcfilters.ui.DatePopupWidget.less | 25 +++- .../mw.rcfilters.ui.FilterWrapperWidget.less | 14 +- ...w.rcfilters.ui.LiveUpdateButtonWidget.less | 2 +- ...ers.ui.ChangesLimitAndDateButtonWidget.js} | 75 ++++++++--- ...mw.rcfilters.ui.ChangesLimitPopupWidget.js | 19 +-- ...w.rcfilters.ui.ChangesListWrapperWidget.js | 43 +------ .../ui/mw.rcfilters.ui.DateButtonWidget.js | 120 ------------------ .../ui/mw.rcfilters.ui.DatePopupWidget.js | 5 + .../ui/mw.rcfilters.ui.FilterWrapperWidget.js | 45 +++++-- 13 files changed, 142 insertions(+), 231 deletions(-) rename resources/src/mediawiki.rcfilters/ui/{mw.rcfilters.ui.ChangesLimitButtonWidget.js => mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.js} (52%) delete mode 100644 resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.DateButtonWidget.js diff --git a/languages/i18n/en.json b/languages/i18n/en.json index 1fecca0e3a..eb078375ba 100644 --- a/languages/i18n/en.json +++ b/languages/i18n/en.json @@ -1361,11 +1361,11 @@ "rcfilters-legend-heading": "List of abbreviations:", "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}}", diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json index 83c8a93f08..afd7c2e583 100644 --- a/languages/i18n/qqq.json +++ b/languages/i18n/qqq.json @@ -1556,11 +1556,11 @@ "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}}", diff --git a/resources/Resources.php b/resources/Resources.php index a5bfbc512c..5b5f4a3792 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1783,8 +1783,7 @@ return [ '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', @@ -1840,9 +1839,9 @@ return [ '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', diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesLimitPopupWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesLimitPopupWidget.less index b79e54b0cc..1d6199b6b0 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesLimitPopupWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesLimitPopupWidget.less @@ -1,9 +1,3 @@ .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; } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.DatePopupWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.DatePopupWidget.less index 41557792d8..05c46574ee 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.DatePopupWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.DatePopupWidget.less @@ -1,5 +1,28 @@ +@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; } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less index bbd2c74024..e6003c1124 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterWrapperWidget.less @@ -1,3 +1,5 @@ +@import 'mediawiki.mixins'; + .mw-rcfilters-ui-filterWrapperWidget { width: 100%; // Make sure this uses the interface direction, not the content direction @@ -8,15 +10,9 @@ } &-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; } } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less index 3c8664cd5a..1db7c1de1a 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.LiveUpdateButtonWidget.less @@ -1,7 +1,7 @@ @import 'mediawiki.mixins'; .mw-rcfilters-ui-liveUpdateButtonWidget { - margin-left: 1em; + margin: 0; &.oo-ui-toggleWidget-on { position: relative; diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitButtonWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.js similarity index 52% rename from resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitButtonWidget.js rename to resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.js index c2f20b7155..cd22e89ae3 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitButtonWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.js @@ -11,11 +11,11 @@ * @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 ) { + mw.rcfilters.ui.ChangesLimitAndDateButtonWidget = function MwRcfiltersUiChangesLimitWidget( controller, model, config ) { config = config || {}; // Parent - mw.rcfilters.ui.ChangesLimitButtonWidget.parent.call( this, config ); + mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.parent.call( this, config ); this.controller = controller; this.model = model; @@ -24,6 +24,8 @@ this.button = null; this.limitGroupModel = null; + this.groupByPageItemModel = null; + this.daysGroupModel = null; this.model.connect( this, { initialize: 'onModelInitialize' @@ -35,53 +37,69 @@ /* Initialization */ - OO.inheritClass( mw.rcfilters.ui.ChangesLimitButtonWidget, OO.ui.Widget ); + OO.inheritClass( mw.rcfilters.ui.ChangesLimitAndDateButtonWidget, OO.ui.Widget ); /** * Respond to model initialize event */ - mw.rcfilters.ui.ChangesLimitButtonWidget.prototype.onModelInitialize = function () { - var changesLimitPopupWidget, selectedItem, currentValue, + 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 ) { + 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-shownum', currentValue ), + label: mw.msg( 'rcfilters-limit-and-date-label', currentValue ), $overlay: this.$overlay, popup: { width: 300, - padded: true, + padded: false, anchor: false, - align: 'forwards', + align: 'backwards', $autoCloseIgnore: this.$overlay, - $content: changesLimitPopupWidget.$element + $content: $( '
' ).append( + // TODO: Merge ChangesLimitPopupWidget with DatePopupWidget into one common widget + changesLimitPopupWidget.$element, + datePopupWidget.$element + ) } } ); + this.updateButtonLabel(); // Events - this.limitGroupModel.connect( this, { update: 'onLimitGroupModelUpdate' } ); + 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 ); } @@ -92,7 +110,7 @@ * * @param {string} filterName Chosen filter name */ - mw.rcfilters.ui.ChangesLimitButtonWidget.prototype.onPopupLimit = function ( filterName ) { + mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.prototype.onPopupLimit = function ( filterName ) { var item = this.limitGroupModel.getItemByName( filterName ); this.controller.toggleFilterSelect( filterName, true ); @@ -105,24 +123,45 @@ * * @param {boolean} isGrouped The result set is grouped by page */ - mw.rcfilters.ui.ChangesLimitButtonWidget.prototype.onPopupGroupByPage = function ( isGrouped ) { + 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.ChangesLimitButtonWidget.prototype.onLimitGroupModelUpdate = function () { - var item = this.limitGroupModel.getSelectedItems()[ 0 ], - label = item && item.getLabel(); + 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 ) { - this.button.setLabel( mw.msg( 'rcfilters-limit-shownum', label ) ); + if ( label && days ) { + message = mw.msg( 'rcfilters-limit-and-date-label', label, + mw.msg( daysParamName, days.getLabel() ) + ); + this.button.setLabel( message ); } }; diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitPopupWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitPopupWidget.js index 7248bd7760..9dd87d8339 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitPopupWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitPopupWidget.js @@ -39,18 +39,13 @@ .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 ); }; diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js index b6a0a4fff4..8716c68c4a 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js @@ -39,8 +39,7 @@ } ); this.changesListViewModel.connect( this, { invalidate: 'onModelInvalidate', - update: 'onModelUpdate', - newChangesExist: 'onNewChangesExist' + update: 'onModelUpdate' } ); this.$element @@ -49,8 +48,6 @@ // 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 */ @@ -240,44 +237,6 @@ .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( - $( '
' ) - .addClass( 'mw-rcfilters-ui-changesListWrapperWidget-newChanges' ) - .append( this.showNewChangesLink.$element ) - ); - }; - /** * Set up the highlight containers with all color circle indicators. * diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.DateButtonWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.DateButtonWidget.js deleted file mode 100644 index 82607f1b7f..0000000000 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.DateButtonWidget.js +++ /dev/null @@ -1,120 +0,0 @@ -( 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 ) ); diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.DatePopupWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.DatePopupWidget.js index 6971df520b..2014ef75a3 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.DatePopupWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.DatePopupWidget.js @@ -13,6 +13,8 @@ // Parent mw.rcfilters.ui.ChangesLimitPopupWidget.parent.call( this, config ); + // Mixin constructors + OO.ui.mixin.LabelElement.call( this, config ); this.model = model; @@ -41,6 +43,8 @@ this.$element .addClass( 'mw-rcfilters-ui-datePopupWidget' ) .append( + this.$label + .addClass( 'mw-rcfilters-ui-datePopupWidget-title' ), this.hoursValuePicker.$element, this.daysValuePicker.$element ); @@ -49,6 +53,7 @@ /* Initialization */ OO.inheritClass( mw.rcfilters.ui.DatePopupWidget, OO.ui.Widget ); + OO.mixinClass( mw.rcfilters.ui.DatePopupWidget, OO.ui.mixin.LabelElement ); /* Events */ diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js index db7acaa0de..a7d2c825e2 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js @@ -28,6 +28,7 @@ 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( @@ -39,10 +40,10 @@ 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, { @@ -50,13 +51,12 @@ } ); - 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 = $( '
' ) @@ -65,14 +65,19 @@ $bottom = $( '
' ) .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( @@ -97,4 +102,20 @@ 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 ) ); -- 2.20.1