Add a help button to the Tagged Edits menu

Bug: T176661
Change-Id: Ia295633dcf96a5466650620ef6e5cef766d19988

diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index 6a95ec4..5a3f27b 100644 (file)
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -1468,6 +1468,7 @@
        "rcfilters-view-namespaces-tooltip": "Filter results by namespace",
        "rcfilters-view-tags-tooltip": "Filter results using edit tags",
        "rcfilters-view-return-to-default-tooltip": "Return to main filter menu",
+       "rcfilters-view-tags-help-icon-tooltip": "Learn more about Tagged Edits",
        "rcfilters-liveupdates-button": "Live updates",
        "rcfilters-liveupdates-button-title-on": "Turn off live updates",
        "rcfilters-liveupdates-button-title-off": "Display new changes as they happen",

diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json
index d4c150d..a199aa6 100644 (file)
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -1661,6 +1661,7 @@
        "rcfilters-view-namespaces-tooltip": "Tooltip for the button that loads the namespace view in [[Special:RecentChanges]]",
        "rcfilters-view-tags-tooltip": "Tooltip for the button that loads the tags view in [[Special:RecentChanges]]",
        "rcfilters-view-return-to-default-tooltip": "Tooltip for the button that returns to the default filter view in [[Special:RecentChanges]]",
+       "rcfilters-view-tags-help-icon-tooltip": "Tooltip for the help button that leads user to [[mw:Special:MyLanguage/Help:New_filters_for_edit_review/Advanced_filters#tags|Help page]] for Tagged Edits",
        "rcfilters-liveupdates-button": "Label for the button to enable or disable live updates on [[Special:RecentChanges]]",
        "rcfilters-liveupdates-button-title-on": "Title for the button to enable or disable live updates on [[Special:RecentChanges]] when the feature is ON.",
        "rcfilters-liveupdates-button-title-off": "Title for the button to enable or disable live updates on [[Special:RecentChanges]] when the feature is OFF.",

diff --git a/resources/Resources.php b/resources/Resources.php
index 235bb59..346bc50 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1904,6 +1904,7 @@ return [
                        'rcfilters-view-namespaces-tooltip',
                        'rcfilters-view-tags-tooltip',
                        'rcfilters-view-return-to-default-tooltip',
+                       'rcfilters-view-tags-help-icon-tooltip',
                        'rcfilters-liveupdates-button',
                        'rcfilters-liveupdates-button-title-on',
                        'rcfilters-liveupdates-button-title-off',

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less
index d9c42ba..83fe189 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterMenuHeaderWidget.less
@@ -2,12 +2,19 @@
 
 .mw-rcfilters-ui-filterMenuHeaderWidget {
        &-title {
+               display: inline-block;
                font-size: 1.2em;
-               padding: 0.75em 0.5em;
+               padding: 0.75em 0 0.75em 0.5em;
                // TODO: Unify colors with official design palette
                color: #54595d;
        }
 
+       &-helpIcon {
+               position: absolute;
+               top: 50%;
+               .transform( translateY( -50% ) );
+       }
+
        &-header {
                border-bottom: 1px solid #c8ccd1;
                background: #f8f9fa;
@@ -29,6 +36,7 @@
                }
 
                &-title {
+                       position: relative;
                        width: 100%;
                        vertical-align: middle;
                }

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuHeaderWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuHeaderWidget.js
index eeb5ddc..1a0c5ff 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuHeaderWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuHeaderWidget.js
@@ -35,6 +35,17 @@
                } );
                this.backButton.toggle( this.model.getCurrentView() !== 'default' );
 
+               // Help icon for Tagged edits
+               this.helpIcon = new OO.ui.ButtonWidget( {
+                       icon: 'help',
+                       framed: false,
+                       title: mw.msg( 'rcfilters-view-tags-help-icon-tooltip' ),
+                       classes: [ 'mw-rcfilters-ui-filterMenuHeaderWidget-helpIcon' ],
+                       href: 'https://www.mediawiki.org/wiki/Special:MyLanguage/Help:New_filters_for_edit_review/Advanced_filters#tags',
+                       target: '_blank'
+               } );
+               this.helpIcon.toggle( this.model.getCurrentView() === 'tags' );
+
                // Highlight button
                this.highlightButton = new OO.ui.ToggleButtonWidget( {
                        icon: 'highlight',
@@ -80,7 +91,7 @@
                                                                $( '<div>' )
                                                                        .addClass( 'mw-rcfilters-ui-cell' )
                                                                        .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-title' )
-                                                                       .append( this.$label ),
+                                                                       .append( this.$label, this.helpIcon.$element ),
                                                                $( '<div>' )
                                                                        .addClass( 'mw-rcfilters-ui-cell' )
                                                                        .addClass( 'mw-rcfilters-ui-filterMenuHeaderWidget-header-invert' )
@@ -111,6 +122,7 @@
 
                this.invertNamespacesButton.toggle( currentView === 'namespaces' );
                this.backButton.toggle( currentView !== 'default' );
+               this.helpIcon.toggle( currentView === 'tags' );
        };
 
        /**