'label-message' => 'tog-hideminor',
'section' => 'rc/advancedrc',
];
+ $defaultPreferences['rcfilters-rc-collapsed'] = [
+ 'type' => 'api',
+ ];
+ $defaultPreferences['rcfilters-wl-collapsed'] = [
+ 'type' => 'api',
+ ];
$defaultPreferences['rcfilters-saved-queries'] = [
'type' => 'api',
];
*/
protected static $limitPreferenceName;
+ /**
+ * Preference name for collapsing the active filter display. Subclasses should override this.
+ * @var string
+ */
+ protected static $collapsedPreferenceName;
+
/** @var string */
protected $rcSubpage;
foreach ( $jsData['messageKeys'] as $key ) {
$messages[$key] = $this->msg( $key )->plain();
}
-
$out->addBodyClasses( 'mw-rcfilters-enabled' );
+ $collapsed = $this->getUser()->getBoolOption( static::$collapsedPreferenceName );
+ if ( $collapsed ) {
+ $out->addBodyClasses( 'mw-rcfilters-collapsed' );
+ }
+
$out->addHTML(
ResourceLoader::makeInlineScript(
ResourceLoader::makeMessageSetScript( $messages ),
);
$out->addJsConfigVars( 'wgStructuredChangeFilters', $jsData['groups'] );
+ $out->addJsConfigVars( 'wgStructuredChangeFiltersCollapsedState', $collapsed );
$out->addJsConfigVars(
'wgRCFiltersChangeTags',
'wgStructuredChangeFiltersDaysPreferenceName',
static::$daysPreferenceName
);
+ $out->addJsConfigVars(
+ 'wgStructuredChangeFiltersCollapsedPreferenceName',
+ static::$collapsedPreferenceName
+ );
$out->addJsConfigVars(
'StructuredChangeFiltersLiveUpdatePollingRate',
protected static $savedQueriesPreferenceName = 'rcfilters-saved-queries';
protected static $daysPreferenceName = 'rcdays'; // Use general RecentChanges preference
protected static $limitPreferenceName = 'rcfilters-limit'; // Use RCFilters-specific preference
+ protected static $collapsedPreferenceName = 'rcfilters-rc-collapsed';
private $watchlistFilterGroupDefinition;
protected static $savedQueriesPreferenceName = 'rcfilters-wl-saved-queries';
protected static $daysPreferenceName = 'watchlistdays';
protected static $limitPreferenceName = 'wllimit';
+ protected static $collapsedPreferenceName = 'rcfilters-wl-collapsed';
private $maxDays;
"rcfilters-activefilters": "Active filters",
"rcfilters-activefilters-hide": "Hide",
"rcfilters-activefilters-show": "Show",
+ "rcfilters-activefilters-hide-tooltip": "Hide Active Filters area",
+ "rcfilters-activefilters-show-tooltip": "Show Active Filters area",
"rcfilters-advancedfilters": "Advanced filters",
"rcfilters-limit-title": "Results to show",
"rcfilters-limit-and-date-label": "$1 {{PLURAL:$1|change|changes}}, $2",
"rcfilters-activefilters": "{{doc-important|Translations of this message should not more than 3 cm long, otherwise it will make bad user experiences for potential mobile users.}}\nTitle for the filters selection showing the active filters.",
"rcfilters-activefilters-hide": "Label for the button that hides the active filters list and dropdown in [[Special:RecentChanges]].\n{{Identical|Hide}}",
"rcfilters-activefilters-show": "Label for the button that shows the active filters list and dropdown in [[Special:RecentChanges]].\n{{Identical|Show}}",
+ "rcfilters-activefilters-hide-tooltip": "Tooltip for the button that hides the active filters list and dropdown in [[Special:RecentChanges]].",
+ "rcfilters-activefilters-show-tooltip": "Tooltip for the button that shows the active filters list and dropdown in [[Special:RecentChanges]].",
"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-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\n{{Identical|Change}}",
'rcfilters-activefilters',
'rcfilters-activefilters-hide',
'rcfilters-activefilters-show',
+ 'rcfilters-activefilters-hide-tooltip',
+ 'rcfilters-activefilters-show-tooltip',
'rcfilters-advancedfilters',
'rcfilters-group-results-by-page',
'rcfilters-limit-title',
* @cfg {string} savedQueriesPreferenceName Where to save the saved queries
* @cfg {string} daysPreferenceName Preference name for the days filter
* @cfg {string} limitPreferenceName Preference name for the limit filter
+ * @cfg {string} collapsedPreferenceName Preference name for collapsing and showing
+ * the active filters area
* @cfg {boolean} [normalizeTarget] Dictates whether or not to go through the
* title normalization to separate title subpage/parts into the target= url
* parameter
this.savedQueriesPreferenceName = config.savedQueriesPreferenceName;
this.daysPreferenceName = config.daysPreferenceName;
this.limitPreferenceName = config.limitPreferenceName;
+ this.collapsedPreferenceName = config.collapsedPreferenceName;
this.normalizeTarget = !!config.normalizeTarget;
this.requestCounter = {};
this.updateNumericPreference( 'usenewrc', Number( newValue ) );
};
+ /**
+ * Update the collapsed state value
+ *
+ * @param {boolean} isCollapsed Filter area is collapsed
+ */
+ mw.rcfilters.Controller.prototype.updateCollapsedState = function ( isCollapsed ) {
+ this.updateNumericPreference( this.collapsedPreferenceName, Number( isCollapsed ) );
+ };
+
/**
* Update a numeric preference with a new value
*
savedQueriesPreferenceName = mw.config.get( 'wgStructuredChangeFiltersSavedQueriesPreferenceName' ),
daysPreferenceName = mw.config.get( 'wgStructuredChangeFiltersDaysPreferenceName' ),
limitPreferenceName = mw.config.get( 'wgStructuredChangeFiltersLimitPreferenceName' ),
+ activeFiltersCollapsedName = mw.config.get( 'wgStructuredChangeFiltersCollapsedPreferenceName' ),
+ initialCollapsedState = mw.config.get( 'wgStructuredChangeFiltersCollapsedState' ),
filtersModel = new mw.rcfilters.dm.FiltersViewModel(),
changesListModel = new mw.rcfilters.dm.ChangesListViewModel( $initialFieldset ),
savedQueriesModel = new mw.rcfilters.dm.SavedQueriesModel( filtersModel ),
savedQueriesPreferenceName: savedQueriesPreferenceName,
daysPreferenceName: daysPreferenceName,
limitPreferenceName: limitPreferenceName,
+ collapsedPreferenceName: activeFiltersCollapsedName,
normalizeTarget: specialPage === 'Recentchangeslinked'
}
);
savedQueriesModel,
changesListModel,
{
+ $wrapper: $( 'body' ),
$topSection: $topSection,
$filtersContainer: $( '.rcfilters-container' ),
$changesListContainer: $( '.mw-changeslist, .mw-changeslist-empty' ),
- $formContainer: $initialFieldset
+ $formContainer: $initialFieldset,
+ collapsed: initialCollapsedState
}
);
@rcfilters-head-min-height: 210px;
@rcfilters-head-margin-bottom: 20px;
@rcfilters-wl-head-min-height: 270px;
+@rcfilters-head-min-height-collapsed: 130px;
+@rcfilters-wl-head-min-height-collapsed: 200px;
// Corrections for the standard special page
.client-js {
min-height: @rcfilters-wl-head-min-height;
}
+ .mw-rcfilters-collapsed {
+ .rcfilters-head {
+ min-height: @rcfilters-head-min-height-collapsed;
+ }
+
+ // On the watchlist, reserve a bit more
+ &.mw-special-Watchlist .rcfilters-head {
+ min-height: @rcfilters-wl-head-min-height-collapsed;
+ }
+ }
+
.mw-recentchanges-toplinks {
padding-left: 0.5em;
line-height: normal;
}
- &-collapsed {
+ .mw-rcfilters-collapsed & {
// Taking from the handle, since border-bottom is set on the
// filters view which is hidden when collapsed
border-bottom: 1px solid @colorGray10;
* @param {mw.rcfilters.dm.SavedQueriesModel} savedQueriesModel Saved queries model
* @param {Object} config Configuration object
* @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
+ * @cfg {jQuery} [$wrapper] A jQuery object for the wrapper of the general
+ * system. If not given, falls back to this widget's $element
+ * @cfg {boolean} [collapsed] Filter area is collapsed
*/
mw.rcfilters.ui.FilterTagMultiselectWidget = function MwRcfiltersUiFilterTagMultiselectWidget( controller, model, savedQueriesModel, config ) {
var rcFiltersRow,
this.model = model;
this.queriesModel = savedQueriesModel;
this.$overlay = config.$overlay || this.$element;
+ this.$wrapper = config.$wrapper || this.$element;
this.matchingQuery = null;
this.currentView = this.model.getCurrentView();
+ this.collapsed = false;
// Parent
mw.rcfilters.ui.FilterTagMultiselectWidget.parent.call( this, $.extend( true, {
this.hideShowButton = new OO.ui.ButtonWidget( {
framed: false,
flags: [ 'progressive' ],
- label: mw.msg( 'rcfilters-activefilters-hide' ),
classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-hideshowButton' ]
} );
- this.collapsed = false;
+ this.toggleCollapsed( !!config.collapsed );
if ( !mw.user.isAnon() ) {
this.saveQueryButton = new mw.rcfilters.ui.SaveFiltersPopupButtonWidget(
mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.toggleCollapsed = function ( isCollapsed ) {
isCollapsed = isCollapsed === undefined ? !this.collapsed : !!isCollapsed;
- if ( this.collapsed !== isCollapsed ) {
- this.collapsed = isCollapsed;
-
- if ( isCollapsed ) {
- // If we are collapsing, close the menu, in case it was open
- // We should make sure the menu closes before the rest of the elements
- // are hidden, otherwise there is an unknown error in jQuery as ooui
- // sets and unsets properties on the input (which is hidden at that point)
- this.menu.toggle( false );
- }
- this.input.setDisabled( isCollapsed );
- this.hideShowButton.setLabel( mw.msg(
- isCollapsed ? 'rcfilters-activefilters-show' : 'rcfilters-activefilters-hide'
- ) );
+ this.collapsed = isCollapsed;
- this.$element.toggleClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-collapsed', isCollapsed );
+ if ( isCollapsed ) {
+ // If we are collapsing, close the menu, in case it was open
+ // We should make sure the menu closes before the rest of the elements
+ // are hidden, otherwise there is an unknown error in jQuery as ooui
+ // sets and unsets properties on the input (which is hidden at that point)
+ this.menu.toggle( false );
}
+ this.input.setDisabled( isCollapsed );
+ this.hideShowButton.setLabel( mw.msg(
+ isCollapsed ? 'rcfilters-activefilters-show' : 'rcfilters-activefilters-hide'
+ ) );
+ this.hideShowButton.setTitle( mw.msg(
+ isCollapsed ? 'rcfilters-activefilters-show-tooltip' : 'rcfilters-activefilters-hide-tooltip'
+ ) );
+
+ // Toggle the wrapper class, so we have min height values correctly throughout
+ this.$wrapper.toggleClass( 'mw-rcfilters-collapsed', isCollapsed );
+
+ // Save the state
+ this.controller.updateCollapsedState( isCollapsed );
};
/**
* @param {Object} [config] Configuration object
* @cfg {Object} [filters] A definition of the filter groups in this list
* @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
+ * @cfg {jQuery} [$wrapper] A jQuery object for the wrapper of the general
+ * system. If not given, falls back to this widget's $element
+ * @cfg {boolean} [collapsed] Filter area is collapsed
*/
mw.rcfilters.ui.FilterWrapperWidget = function MwRcfiltersUiFilterWrapperWidget(
controller, model, savedQueriesModel, changesListModel, config
this.queriesModel = savedQueriesModel;
this.changesListModel = changesListModel;
this.$overlay = config.$overlay || this.$element;
+ this.$wrapper = config.$wrapper || this.$element;
this.filterTagWidget = new mw.rcfilters.ui.FilterTagMultiselectWidget(
this.controller,
this.model,
this.queriesModel,
- { $overlay: this.$overlay }
+ {
+ $overlay: this.$overlay,
+ collapsed: config.collapsed,
+ $wrapper: this.$wrapper
+ }
);
this.liveUpdateButton = new mw.rcfilters.ui.LiveUpdateButtonWidget(
* @cfg {jQuery} $filtersContainer
* @cfg {jQuery} $changesListContainer
* @cfg {jQuery} $formContainer
+ * @cfg {boolean} [collapsed] Filter area is collapsed
+ * @cfg {jQuery} [$wrapper] A jQuery object for the wrapper of the general
+ * system. If not given, falls back to this widget's $element
*/
mw.rcfilters.ui.MainWrapperWidget = function MwRcfiltersUiMainWrapperWidget(
controller, model, savedQueriesModel, changesListModel, config
this.$changesListContainer = config.$changesListContainer;
this.$formContainer = config.$formContainer;
this.$overlay = $( '<div>' ).addClass( 'mw-rcfilters-ui-overlay' );
+ this.$wrapper = config.$wrapper || this.$element;
this.savedLinksListWidget = new mw.rcfilters.ui.SavedLinksListWidget(
controller, savedQueriesModel, { $overlay: this.$overlay }
savedQueriesModel,
changesListModel,
{
- $overlay: this.$overlay
+ $overlay: this.$overlay,
+ $wrapper: this.$wrapper,
+ collapsed: config.collapsed
}
);