RCFilters: Use GroupWidget for grouping buttons and aggregating events

Bug: T168849
Change-Id: I3d68121aa4b281751f6ea6cce2c68147855d6c68

diff --git a/resources/Resources.php b/resources/Resources.php
index 4df8194..06012b8 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1786,6 +1786,7 @@ return [
        ],
        'mediawiki.rcfilters.filters.ui' => [
                'scripts' => [
+                       'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.GroupWidget.js',
                        'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CheckboxInputWidget.js',
                        'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js',
                        'resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ItemMenuOptionWidget.js',

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less
index 9dccc24..6a20f56 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less
@@ -22,6 +22,7 @@
                min-width: 16px;
                min-height: 16px;
                opacity: 0.5;
+               position: relative;
        }
 
        &-icon span {

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less
index a6ce4cd..1896103 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ViewSwitchWidget.less
@@ -6,9 +6,5 @@
 
        &-buttons {
                margin-top: 0.5em;
-
-               .oo-ui-buttonWidget:not( :first-child ) {
-                       margin-left: 0.5em;
-               }
        }
 }

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.GroupWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.GroupWidget.js
new file mode 100644 (file)
index 0000000..167df09
--- /dev/null
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.GroupWidget.js
@@ -0,0 +1,41 @@
+( function ( mw ) {
+       /**
+        * A group widget to allow for aggregation of events
+        *
+        * @extends OO.ui.Widget
+        *
+        * @constructor
+        * @param {Object} [config] Configuration object
+        * @param {Object} [events] Events to aggregate. The object represent the
+        *  event name to aggregate and the event value to emit on aggregate for items.
+        */
+       mw.rcfilters.ui.GroupWidget = function MwRcfiltersUiViewSwitchWidget( config ) {
+               var aggregate = {};
+
+               config = config || {};
+
+               // Parent constructor
+               mw.rcfilters.ui.GroupWidget.parent.call( this, config );
+
+               // Mixin constructors
+               OO.ui.mixin.GroupElement.call( this, $.extend( {}, config, { $group: this.$element } ) );
+
+               if ( config.events ) {
+                       // Aggregate events
+                       $.each( config.events, function ( eventName, eventEmit ) {
+                               aggregate[ eventName ] = eventEmit;
+                       } );
+
+                       this.aggregate( aggregate );
+               }
+
+               if ( Array.isArray( config.items ) ) {
+                       this.addItems( config.items );
+               }
+       };
+
+       /* Initialize */
+
+       OO.inheritClass( mw.rcfilters.ui.GroupWidget, OO.ui.Widget );
+       OO.mixinClass( mw.rcfilters.ui.GroupWidget, OO.ui.mixin.GroupWidget );
+}( mediaWiki ) );

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js
index 7eda90a..8287ef9 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js
@@ -36,10 +36,14 @@
                        label: $labelNoEntries,
                        icon: 'unClip'
                } );
-               // The only reason we're using "ButtonGroupWidget" here is that
-               // straight-out "GroupWidget" is a mixin and cannot be initialized
-               // on its own, so we need something to be its widget.
-               this.menu = new OO.ui.ButtonGroupWidget( {
+
+               this.menu = new mw.rcfilters.ui.GroupWidget( {
+                       events: {
+                               click: 'menuItemClick',
+                               'delete': 'menuItemDelete',
+                               'default': 'menuItemDefault',
+                               edit: 'menuItemEdit'
+                       },
                        classes: [ 'mw-rcfilters-ui-savedLinksListWidget-menu' ],
                        items: [ this.placeholderItem ]
                } );
@@ -58,13 +62,6 @@
                        }
                } );
 
-               this.menu.aggregate( {
-                       click: 'menuItemClick',
-                       'delete': 'menuItemDelete',
-                       'default': 'menuItemDefault',
-                       edit: 'menuItemEdit'
-               } );
-
                // Events
                this.model.connect( this, {
                        add: 'onModelAddItem',

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ViewSwitchWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ViewSwitchWidget.js
index fef8567..aadded1 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ViewSwitchWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ViewSwitchWidget.js
@@ -18,7 +18,10 @@
                this.controller = controller;
                this.model = model;
 
-               this.buttons = new OO.ui.ButtonGroupWidget( {
+               this.buttons = new mw.rcfilters.ui.GroupWidget( {
+                       events: {
+                               click: 'buttonClick'
+                       },
                        items: [
                                new OO.ui.ButtonWidget( {
                                        data: 'namespaces',
@@ -35,7 +38,6 @@
 
                // Events
                this.model.connect( this, { update: 'onModelUpdate' } );
-               this.buttons.aggregate( { click: 'buttonClick' } );
                this.buttons.connect( this, { buttonClick: 'onButtonClick' } );
 
                this.$element