From: petarpetkovic Date: Mon, 27 Nov 2017 17:26:04 +0000 (+0100) Subject: Combine changes limit and time period selectors X-Git-Tag: 1.31.0-rc.0~1345^2 X-Git-Url: http://git.cyclocoop.org/%22%20.%20generer_url_ecrire%28%22suivi_revisions%22%2C%22id_auteur=%24connecte%22%29%20.%20%22?a=commitdiff_plain;h=68808a483321ac52d3cd227f2f8a4dfb2e6c1d3a;p=lhc%2Fweb%2Fwiklou.git 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 --- 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.ChangesLimitAndDateButtonWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.js new file mode 100644 index 0000000000..cd22e89ae3 --- /dev/null +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.js @@ -0,0 +1,168 @@ +( 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: $( '
' ).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 ) ); diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitButtonWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitButtonWidget.js deleted file mode 100644 index c2f20b7155..0000000000 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitButtonWidget.js +++ /dev/null @@ -1,129 +0,0 @@ -( 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 ) ); 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 ) );