"rcfilters-other-review-tools": "Other review tools",
"rcfilters-group-results-by-page": "Group results by page",
"rcfilters-activefilters": "Active filters",
+ "rcfilters-activefilters-hide": "Hide",
+ "rcfilters-activefilters-show": "Show",
"rcfilters-advancedfilters": "Advanced filters",
"rcfilters-limit-title": "Results to show",
"rcfilters-limit-and-date-label": "$1 {{PLURAL:$1|change|changes}}, $2",
"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-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]].",
+ "rcfilters-activefilters-show": "Label 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}}",
border-bottom: 0;
background-color: @colorGray15;
border-radius: 2px 2px 0 0;
- padding: 0.6em;
+ padding: 0 0.6em 0.6em 0.6em;
margin-top: 1em;
line-height: normal;
}
+ &-collapsed {
+ // Taking from the handle, since border-bottom is set on the
+ // filters view which is hidden when collapsed
+ border-bottom: 1px solid @colorGray10;
+
+ &.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
+ padding-bottom: 0;
+ padding-top: 0;
+ }
+
+ .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-hideshow {
+ border-left: 1px solid @colorGray10;
+ }
+
+ &.oo-ui-tagMultiselectWidget-outlined {
+ width: unset;
+ max-width: 100%;
+ }
+
+ // Hide inner elements
+ .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-filters,
+ .mw-rcfilters-ui-filterTagMultiselectWidget-views {
+ display: none;
+ }
+ }
+
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-animate.oo-ui-tagMultiselectWidget-handle {
.transition( background-color 500ms ease-out );
}
background-color: @background-color-primary;
}
+ &-hideshowButton.oo-ui-buttonElement > .oo-ui-buttonElement-button {
+ // Override the OOUI default for buttons
+ font-weight: normal;
+ }
+
&-wrapper {
- .mw-rcfilters-ui-table {
- margin-top: 0.3em;
+ &-top {
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ }
+
+ &-title {
+ padding: 0.6em 0; // Same top padding as the handle
+ white-space: nowrap;
+ min-width: 0; // This has to be here to enable the text truncation
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &-hideshow {
+ margin-left: 0.5em;
+ padding-left: 0.5em;
}
&-content {
&-title {
font-weight: bold;
color: @colorGray5;
+ white-space: nowrap;
}
&-savedQueryTitle {
color: @colorGray2;
+ padding-left: 1em;
font-weight: bold;
vertical-align: top;
- margin-left: 1em;
- width: ~'calc( 100% - 10em )';
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-resetButton' ]
} );
+ 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;
+
if ( !mw.user.isAnon() ) {
this.saveQueryButton = new mw.rcfilters.ui.SaveFiltersPopupButtonWidget(
this.controller,
// Events
this.resetButton.connect( this, { click: 'onResetButtonClick' } );
+ this.hideShowButton.connect( this, { click: 'onHideShowButtonClick' } );
// Stop propagation for mousedown, so that the widget doesn't
// trigger the focus on the input and scrolls up when we click the reset button
this.resetButton.$element.on( 'mousedown', function ( e ) { e.stopPropagation(); } );
+ this.hideShowButton.$element.on( 'mousedown', function ( e ) { e.stopPropagation(); } );
this.model.connect( this, {
initialize: 'onModelInitialize',
update: 'onModelUpdate',
.append(
$( '<div>' )
.addClass( 'mw-rcfilters-ui-row' )
+ .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views' )
.append(
$( '<div>' )
.addClass( 'mw-rcfilters-ui-cell' )
// Build the content
$contentWrapper.append(
- title.$element,
- this.savedQueryTitle.$element,
$( '<div>' )
- .addClass( 'mw-rcfilters-ui-table' )
+ .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-top' )
.append(
- rcFiltersRow
- )
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-title' )
+ .append(
+ title.$element,
+ this.savedQueryTitle.$element
+ ),
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-hideshow' )
+ .append(
+ this.hideShowButton.$element
+ )
+ ),
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-table' )
+ .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-filters' )
+ .append( rcFiltersRow )
);
// Initialize
* @inheritdoc
*/
mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onMouseDown = function ( e ) {
- if ( !this.isDisabled() && e.which === OO.ui.MouseButtons.LEFT ) {
+ if ( !this.collapsed && !this.isDisabled() && e.which === OO.ui.MouseButtons.LEFT ) {
this.menu.toggle();
return false;
}
};
+ /**
+ * Respond to hide/show button click
+ */
+ mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onHideShowButtonClick = function () {
+ this.toggleCollapsed();
+ };
+
+ /**
+ * Toggle the collapsed state of the filters widget
+ *
+ * @param {boolean} isCollapsed Widget is collapsed
+ */
+ 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.$element.toggleClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-collapsed', isCollapsed );
+ }
+ };
+
/**
* Reevaluate the restore state for the widget between setting to defaults and clearing all filters
*/
dépôts / lhc / web / wiklou.git / commitdiff