[MediaWiki-commits] [Gerrit] mediawiki...AdvancedSearch[master]: ui.ExpandablePane: Just use a real button

[Code Review]

Bartosz Dziewoński has uploaded a new change for review. ( 
https://gerrit.wikimedia.org/r/393954 )

Change subject: ui.ExpandablePane: Just use a real button
......................................................................

ui.ExpandablePane: Just use a real button

This seems very fragile (relying on internal CSS classes) and is much
more complicated than it needs to be.

Change-Id: I30abfe64eeb5e6e36ef500c5cf36180cc29ae87a
---
M modules/ext.advancedSearch.css
M modules/ui/ext.advancedSearch.ExpandablePane.js
2 files changed, 20 insertions(+), 43 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/AdvancedSearch 
refs/changes/54/393954/1

diff --git a/modules/ext.advancedSearch.css b/modules/ext.advancedSearch.css
index 75312ac..c08fc48 100644
--- a/modules/ext.advancedSearch.css
+++ b/modules/ext.advancedSearch.css
@@ -70,14 +70,15 @@
        padding-top: 0.3em;
 }
 
-.mw-advancedSearch-expandablePane-button {
-       background-color: #f8f9fa;
-       color: #222;
-       border: solid 1px #a2a9b1;
-       padding: 0.625em 2.5em 0.625em 0.9375em;
-       line-height: 1;
-       position: relative;
+.mw-advancedSearch-expandablePane-button,
+.mw-advancedSearch-expandablePane-button > .oo-ui-buttonElement-button {
+       width: 100%;
+}
+
+.mw-advancedSearch-expandablePane-button > .oo-ui-buttonElement-button {
        text-align: left;
+       font-weight: normal;
+       white-space: normal;
 }
 
 .mw-advancedSearch-expandablePane-pane {
diff --git a/modules/ui/ext.advancedSearch.ExpandablePane.js 
b/modules/ui/ext.advancedSearch.ExpandablePane.js
index e086254..86ed9d7 100644
--- a/modules/ui/ext.advancedSearch.ExpandablePane.js
+++ b/modules/ui/ext.advancedSearch.ExpandablePane.js
@@ -29,50 +29,26 @@
                config = $.extend( { data: this.STATE_CLOSED }, config );
 
                mw.libs.advancedSearch.ui.ExpandablePane.parent.call( this, 
config );
-               OO.ui.mixin.IndicatorElement.call( this, { indicator: 
getIndicatorNameForState( config.data ) } );
 
-               var self = this;
-               this.$btn = $( '<div>' )
-                       .addClass( 'oo-ui-buttonElement-button' )
-                       .addClass( 'mw-advancedSearch-expandablePane-button' )
-                       .on( 'click keypress', function ( e ) {
-                               var code = e.keyCode || e.which;
-                               if (
-                                       code === OO.ui.Keys.ENTER ||
-                                       code === 108 || // numpad enter
-                                       code === OO.ui.Keys.SPACE ||
-                                       code === OO.ui.Keys.PAGEUP ||
-                                       code === OO.ui.Keys.PAGEDOWN ||
-                                       code === OO.ui.Keys.UP ||
-                                       code === OO.ui.Keys.DOWN ||
-                                       code === OO.ui.MouseButtons.LEFT
-                               ) {
-                                       // will avoid scrolling with space, 
arrows and page keys
-                                       e.preventDefault();
-                                       self.onButtonClick();
-                               }
-                       } );
+               this.button = new OO.ui.ButtonWidget( {
+                       classes: [ 'mw-advancedSearch-expandablePane-button' ],
+                       framed: true,
+                       tabIndex: config.tabIndex,
+                       label: config.$buttonLabel,
+                       indicator: getIndicatorNameForState( config.data )
+               } )
+               this.button.connect( this, {
+                       click: 'onButtonClick'
+               } );
 
                this.$dependentPane = $( '<div>' )
                        .addClass( 'mw-advancedSearch-expandablePane-pane' );
-
-               if ( config.tabIndex !== undefined ) {
-                       this.$btn.prop( 'tabindex', Number( config.tabIndex ) );
-               }
-
-               if ( config.$buttonLabel ) {
-                       this.$btn.append( config.$buttonLabel );
-               }
-
-               this.$btn.append( this.$indicator );
-
                if ( config.$paneContent ) {
                        this.$dependentPane.append( config.$paneContent );
                }
 
-               this.$btn.addClass( 'oo-ui-buttonElement-framed' );
                this.$element.addClass( 'mw-advancedSearch-expandablePane' );
-               this.$element.append( this.$btn, this.$dependentPane );
+               this.$element.append( this.button.$element, this.$dependentPane 
);
 
                this.notifyChildInputVisibility( config.data === 
this.STATE_OPEN );
        };
@@ -93,7 +69,7 @@
                        this.$dependentPane.show();
                        this.notifyChildInputVisibility( true );
                }
-               this.setIndicator( getIndicatorNameForState( this.data ) );
+               this.button.setIndicator( getIndicatorNameForState( this.data ) 
);
                this.emit( 'change', this.data );
        };
 

-- 
To view, visit https://gerrit.wikimedia.org/r/393954
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I30abfe64eeb5e6e36ef500c5cf36180cc29ae87a
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/AdvancedSearch
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits