From 4962ccf430d693278942bdc356a09ee3e2c39269 Mon Sep 17 00:00:00 2001 From: Moriel Schottlender Date: Wed, 21 Jun 2017 14:16:51 -0700 Subject: [PATCH] RCFilters: Invert the muted state of inverted namespace options Since the inversion happened, the background of selected items was overridden by "muted" background, so we had to change a few more details to get things to work properly: - Override selected color even if the item is muted (previously, 'selected' cannot be muted by definition, but this patch changes that and hence needs to make sure selected color overrides the muted color state) - Set correct muted state on the namespace items to be reversed. - The highlight/select/mute background issue exposed a secondary issue when switching views by clicking the 'tag' item, whereby the change of view itself causes the input to empty, and triggers the updateItemVisibility in MenuSelectWidget, which then selects the first item. This shouldn't happen when the user is actively selecting an item from the tags, so a method of recognizing that the user is actively selecting an item was added. Change-Id: Idf5c2232216ad6a38b29bbc103bbca66f56533b7 --- ...w.rcfilters.ui.FilterMenuOptionWidget.less | 8 ++++- .../mw.rcfilters.ui.FilterMenuOptionWidget.js | 35 ++++++++++++------- ...rcfilters.ui.FilterTagMultiselectWidget.js | 9 ++++- .../ui/mw.rcfilters.ui.MenuSelectWidget.js | 18 +++++++++- 4 files changed, 55 insertions(+), 15 deletions(-) diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less index 28aae6c713..ea93247ac0 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuOptionWidget.less @@ -2,7 +2,13 @@ .mw-rcfilters-ui-filterMenuOptionWidget { &.oo-ui-flaggedElement-muted { - background-color: #f8f9fa; // Base90 AAA + &:not( .oo-ui-optionWidget-selected ) { + // Namespaces are muted 'the other way around' when they + // are also inverted, so if they are also selected, we + // should make sure the selected background is shown rather + // than the muted one + background-color: #f8f9fa; // Base90 AAA + } .mw-rcfilters-ui-itemMenuOptionWidget-label-title, .mw-rcfilters-ui-itemMenuOptionWidget-label-desc { diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuOptionWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuOptionWidget.js index d235c3991a..5198c699b0 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuOptionWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuOptionWidget.js @@ -56,18 +56,29 @@ * Set the current muted view of the widget based on its state */ mw.rcfilters.ui.FilterMenuOptionWidget.prototype.setCurrentMuteState = function () { - this.setFlags( { - muted: ( - this.model.isConflicted() || - ( - // Item is also muted when any of the items in its group is active - this.model.getGroupModel().isActive() && - // But it isn't selected - !this.model.isSelected() && - // And also not included - !this.model.isIncluded() + if ( + this.model.getGroupModel().getView() === 'namespaces' && + this.model.isInverted() + ) { + // This is an inverted behavior than the other rules, specifically + // for inverted namespaces + this.setFlags( { + muted: this.model.isSelected() + } ); + } else { + this.setFlags( { + muted: ( + this.model.isConflicted() || + ( + // Item is also muted when any of the items in its group is active + this.model.getGroupModel().isActive() && + // But it isn't selected + !this.model.isSelected() && + // And also not included + !this.model.isIncluded() + ) ) - ) - } ); + } ); + } }; }( mediaWiki ) ); 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 5b00dfe831..70381f22eb 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js @@ -455,6 +455,8 @@ menuOption = this.menu.getItemFromModel( tagItem.getModel() ), oldInputValue = this.input.getValue(); + this.menu.setUserSelecting( true ); + // Reset input this.input.setValue( '' ); @@ -475,11 +477,16 @@ // user filtered the results this.getMenu().once( 'itemVisibilityChange', - function () { widget.scrollToTop( menuOption.$element ); } + function () { + widget.scrollToTop( menuOption.$element ); + widget.menu.setUserSelecting( false ); + } ); } else { this.scrollToTop( menuOption.$element ); + this.menu.setUserSelecting( false ); } + }; /** diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js index dda4ac5004..c70e00b471 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MenuSelectWidget.js @@ -30,6 +30,7 @@ this.model = model; this.currentView = ''; this.views = {}; + this.userSelecting = false; this.inputValue = ''; this.$overlay = config.$overlay || this.$element; @@ -231,7 +232,10 @@ // Since the method hides/shows items, we don't want to // call it unless the input actually changed - if ( this.inputValue !== inputVal ) { + if ( + !this.userSelecting && + this.inputValue !== inputVal + ) { // Parent method mw.rcfilters.ui.MenuSelectWidget.parent.prototype.updateItemVisibility.call( this ); @@ -324,4 +328,16 @@ mw.rcfilters.ui.MenuSelectWidget.prototype.scrollToTop = function () { this.$body.scrollTop( 0 ); }; + + /** + * Set whether the user is currently selecting an item. + * This is important when the user selects an item that is in between + * different views, and makes sure we do not re-select a different + * item (like the item on top) when this is happening. + * + * @param {boolean} isSelecting User is selecting + */ + mw.rcfilters.ui.MenuSelectWidget.prototype.setUserSelecting = function ( isSelecting ) { + this.userSelecting = !!isSelecting; + }; }( mediaWiki ) ); -- 2.20.1