From 2b4666ed2ea00b52c76f373c84fffb6d4442b4d7 Mon Sep 17 00:00:00 2001 From: Moriel Schottlender Date: Thu, 16 Mar 2017 17:21:36 -0700 Subject: [PATCH] RCFilters UI: Add a 'what's this?' link to filter groups Bug: T159186 Change-Id: I347c23fdabab2a1e1c52f5b10995bcbb2a316875 --- languages/i18n/en.json | 1 + languages/i18n/qqq.json | 1 + resources/Resources.php | 1 + .../dm/mw.rcfilters.dm.FilterGroup.js | 25 +++++++ .../dm/mw.rcfilters.dm.FiltersViewModel.js | 8 ++- .../mw.rcfilters.ui.FilterGroupWidget.less | 45 +++++++++++-- .../ui/mw.rcfilters.ui.FilterGroupWidget.js | 67 ++++++++++++++++++- 7 files changed, 139 insertions(+), 9 deletions(-) diff --git a/languages/i18n/en.json b/languages/i18n/en.json index 2ef4f3ae8c..c6fae8cdd3 100644 --- a/languages/i18n/en.json +++ b/languages/i18n/en.json @@ -1370,6 +1370,7 @@ "rcfilters-invalid-filter": "Invalid filter", "rcfilters-empty-filter": "No active filters. All contributions are shown.", "rcfilters-filterlist-title": "Filters", + "rcfilters-filterlist-whatsthis": "What's this?", "rcfilters-filterlist-feedbacklink": "Provide feedback on the new (beta) filters", "rcfilters-highlightbutton-title": "Highlight results", "rcfilters-highlightmenu-title": "Select a color", diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json index c3a871f881..ea7474d9e9 100644 --- a/languages/i18n/qqq.json +++ b/languages/i18n/qqq.json @@ -1558,6 +1558,7 @@ "rcfilters-empty-filter": "Placeholder for the filter list when no filters were chosen.", "rcfilters-filterlist-title": "Title for the filters list.\n{{Identical|Filter}}", "rcfilters-filterlist-feedbacklink": "Caption for the link to the feedback page about the filters beta feature.", + "rcfilters-filterlist-whatsthis": "Caption for the link that opens a popup with explanations about this filter group.", "rcfilters-highlightbutton-title": "Title for the highlight button used to toggle the highlight feature on and off.", "rcfilters-highlightmenu-title": "Title for the highlight menu used to select the highlight color for an individual filter.", "rcfilters-highlightmenu-help": "Tooltip for the highlight menu for individual filters.", diff --git a/resources/Resources.php b/resources/Resources.php index 6d08c44e55..97808cde53 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1806,6 +1806,7 @@ return [ 'rcfilters-filterlist-title', 'rcfilters-filterlist-feedbacklink', 'rcfilters-filterlist-noresults', + 'rcfilters-filterlist-whatsthis', 'rcfilters-highlightbutton-title', 'rcfilters-highlightmenu-title', 'rcfilters-highlightmenu-help', diff --git a/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FilterGroup.js b/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FilterGroup.js index 22323e8498..f14c9c338e 100644 --- a/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FilterGroup.js +++ b/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FilterGroup.js @@ -14,6 +14,11 @@ * @cfg {boolean} [active] Group is active * @cfg {boolean} [fullCoverage] This filters in this group collectively cover all results * @cfg {Object} [conflicts] Defines the conflicts for this filter group + * @cfg {Object} [whatsThis] Defines the messages that should appear for the 'what's this' popup + * @cfg {string} [whatsThis.header] The header of the whatsThis popup message + * @cfg {string} [whatsThis.body] The body of the whatsThis popup message + * @cfg {string} [whatsThis.url] The url for the link in the whatsThis popup message + * @cfg {string} [whatsThis.linkMessage] The text for the link in the whatsThis popup message */ mw.rcfilters.dm.FilterGroup = function MwRcfiltersDmFilterGroup( name, config ) { config = config || {}; @@ -30,6 +35,8 @@ this.active = !!config.active; this.fullCoverage = !!config.fullCoverage; + this.whatsThis = config.whatsThis || {}; + this.conflicts = config.conflicts || {}; this.aggregate( { update: 'filterItemUpdate' } ); @@ -84,6 +91,24 @@ return this.name; }; + /** + * Get the messags defining the 'whats this' popup for this group + * + * @return {Object} What's this messages + */ + mw.rcfilters.dm.FilterGroup.prototype.getWhatsThis = function () { + return this.whatsThis; + }; + + /** + * Check whether this group has a 'what's this' message + * + * @return {boolean} This group has a what's this message + */ + mw.rcfilters.dm.FilterGroup.prototype.hasWhatsThis = function () { + return !!this.whatsThis.body; + }; + /** * Get the conflicts associated with the entire group. * Conflict object is set up by filter name keys and conflict diff --git a/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js b/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js index 36fc4a71be..3ce8c9e9a6 100644 --- a/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js +++ b/resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js @@ -217,7 +217,13 @@ type: data.type, title: mw.msg( data.title ), separator: data.separator, - fullCoverage: !!data.fullCoverage + fullCoverage: !!data.fullCoverage, + whatsThis: { + body: data.whatsThisBody, + header: data.whatsThisHeader, + linkText: data.whatsThisLinkText, + url: data.whatsThisUrl + } } ); } diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterGroupWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterGroupWidget.less index 83491ac82e..d774ad2215 100644 --- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterGroupWidget.less +++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterGroupWidget.less @@ -3,16 +3,51 @@ .mw-rcfilters-ui-filterGroupWidget { padding-bottom: 0.5em; - &-title { - // TODO: Unify colors with official design palette + &-header { background: #eaecf0; padding: 0.5em 0.75em; - color: #555a5d; - .box-sizing( border-box ); + + &-title { + // TODO: Unify colors with official design palette + color: #555a5d; + .box-sizing( border-box ); + display: inline-block; + } + } + + &-whatsThisButton { + display: inline-block; + margin-left: 1.5em; + + &.oo-ui-buttonElement { + vertical-align: text-bottom; + + & > .oo-ui-buttonElement-button { + font-weight: normal; + } + } + + &-popup-content { + padding: 1em; + + &-header { + font-weight: bold; + margin-bottom: 1em; + } + + &-link { + margin: 1em 0; + + } + + .oo-ui-buttonElement-frameless.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { + margin-left: 0; + } + } } &-active { - .mw-rcfilters-ui-filterGroupWidget-title { + .mw-rcfilters-ui-filterGroupWidget-header-title { font-weight: bold; } } diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterGroupWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterGroupWidget.js index a750c44f8c..e19208aa30 100644 --- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterGroupWidget.js +++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterGroupWidget.js @@ -10,8 +10,15 @@ * @param {mw.rcfilters.Controller} controller Controller * @param {mw.rcfilters.dm.FilterGroup} model Filter group model * @param {Object} config Configuration object + * @cfg {jQuery} [$overlay] Overlay */ mw.rcfilters.ui.FilterGroupWidget = function MwRcfiltersUiFilterGroupWidget( controller, model, config ) { + var whatsThisMessages, + $header = $( '
' ) + .addClass( 'mw-rcfilters-ui-filterGroupWidget-header' ), + $popupContent = $( '
' ) + .addClass( 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton-popup-content' ); + config = config || {}; // Parent @@ -20,15 +27,69 @@ this.controller = controller; this.model = model; this.filters = {}; + this.$overlay = config.$overlay || this.$element; // Mixin constructors OO.ui.mixin.GroupWidget.call( this, config ); OO.ui.mixin.LabelElement.call( this, $.extend( {}, config, { label: this.model.getTitle(), $label: $( '
' ) - .addClass( 'mw-rcfilters-ui-filterGroupWidget-title' ) + .addClass( 'mw-rcfilters-ui-filterGroupWidget-header-title' ) } ) ); - this.$overlay = config.$overlay || this.$element; + + $header.append( this.$label ); + + if ( this.model.hasWhatsThis() ) { + whatsThisMessages = this.model.getWhatsThis(); + + // Create popup + if ( whatsThisMessages.header ) { + $popupContent.append( + ( new OO.ui.LabelWidget( { + label: mw.msg( whatsThisMessages.header ), + classes: [ 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton-popup-content-header' ] + } ) ).$element + ); + } + if ( whatsThisMessages.body ) { + $popupContent.append( + ( new OO.ui.LabelWidget( { + label: mw.msg( whatsThisMessages.body ), + classes: [ 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton-popup-content-body' ] + } ) ).$element + ); + } + if ( whatsThisMessages.linkText && whatsThisMessages.url ) { + $popupContent.append( + ( new OO.ui.ButtonWidget( { + framed: false, + flags: [ 'progressive' ], + href: whatsThisMessages.url, + label: mw.msg( whatsThisMessages.linkText ), + classes: [ 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton-popup-content-link' ] + } ) ).$element + ); + } + + // Add button + this.whatsThisButton = new OO.ui.PopupButtonWidget( { + framed: false, + label: mw.msg( 'rcfilters-filterlist-whatsthis' ), + $overlay: this.$overlay, + classes: [ 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton' ], + flags: [ 'progressive' ], + popup: { + padded: false, + align: 'center', + position: 'above', + $content: $popupContent, + classes: [ 'mw-rcfilters-ui-filterGroupWidget-whatsThisButton-popup' ] + } + } ); + + $header + .append( this.whatsThisButton.$element ); + } // Populate this.populateFromModel(); @@ -39,7 +100,7 @@ .addClass( 'mw-rcfilters-ui-filterGroupWidget' ) .addClass( 'mw-rcfilters-ui-filterGroupWidget-name-' + this.model.getName() ) .append( - this.$label, + $header, this.$group .addClass( 'mw-rcfilters-ui-filterGroupWidget-group' ) ); -- 2.20.1