From 4b593a9000b3efc7174ffbca03c03f54a0d19f87 Mon Sep 17 00:00:00 2001 From: Moriel Schottlender Date: Tue, 12 Jun 2018 18:57:48 -0700 Subject: [PATCH] RCFilters: Make active filters area collapsible Bug: T177206 Change-Id: I32547b71fe1b9d91fe42ea924f28fb1036781438 --- languages/i18n/en.json | 2 + languages/i18n/qqq.json | 2 + resources/Resources.php | 2 + ...filters.ui.FilterTagMultiselectWidget.less | 56 +++++++++++++-- ...rcfilters.ui.FilterTagMultiselectWidget.js | 69 +++++++++++++++++-- 5 files changed, 120 insertions(+), 11 deletions(-) diff --git a/languages/i18n/en.json b/languages/i18n/en.json index fcf2e25721..bdb08dc67d 100644 --- a/languages/i18n/en.json +++ b/languages/i18n/en.json @@ -1384,6 +1384,8 @@ "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", diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json index f7038628d9..bfa90bf774 100644 --- a/languages/i18n/qqq.json +++ b/languages/i18n/qqq.json @@ -1584,6 +1584,8 @@ "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}}", diff --git a/resources/Resources.php b/resources/Resources.php index 93ef4b1cc4..3e1644bca3 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1894,6 +1894,8 @@ return [ 'messages' => [ 'rcfilters-tag-remove', 'rcfilters-activefilters', + 'rcfilters-activefilters-hide', + 'rcfilters-activefilters-show', 'rcfilters-advancedfilters', 'rcfilters-group-results-by-page', 'rcfilters-limit-title', diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less index 148e37b2d8..83ca2bdeba 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less @@ -17,11 +17,37 @@ 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 ); } @@ -30,23 +56,43 @@ 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; diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js index 953df5b802..5df70323cc 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js @@ -87,6 +87,14 @@ 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, @@ -117,9 +125,11 @@ // 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', @@ -178,6 +188,7 @@ .append( $( '
' ) .addClass( 'mw-rcfilters-ui-row' ) + .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views' ) .append( $( '
' ) .addClass( 'mw-rcfilters-ui-cell' ) @@ -203,13 +214,25 @@ // Build the content $contentWrapper.append( - title.$element, - this.savedQueryTitle.$element, $( '
' ) - .addClass( 'mw-rcfilters-ui-table' ) + .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-top' ) .append( - rcFiltersRow - ) + $( '
' ) + .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-title' ) + .append( + title.$element, + this.savedQueryTitle.$element + ), + $( '
' ) + .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-hideshow' ) + .append( + this.hideShowButton.$element + ) + ), + $( '
' ) + .addClass( 'mw-rcfilters-ui-table' ) + .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-filters' ) + .append( rcFiltersRow ) ); // Initialize @@ -350,7 +373,7 @@ * @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; @@ -567,6 +590,40 @@ } }; + /** + * 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 */ -- 2.20.1