Prtksxna has uploaded a new change for review.
https://gerrit.wikimedia.org/r/268074
Change subject: OO.ui.CapsuleItemWidget: Use Button instead of an Indicator
......................................................................
OO.ui.CapsuleItemWidget: Use Button instead of an Indicator
According to documentation, an indicator isn't supposed to be used
like this. By using a button we can also get rid of the tab mixin.
Change-Id: I29e8a9beae4465135774e32951885af81952a6e0
---
M demos/pages/widgets.js
M src/styles/widgets/CapsuleItemWidget.less
M src/widgets/CapsuleItemWidget.js
3 files changed, 32 insertions(+), 42 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/74/268074/1
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index f446f54..ec7f9a7 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -1241,6 +1241,22 @@
),
new OO.ui.FieldLayout(
new OO.ui.CapsuleMultiSelectWidget( {
+ disabled: true,
+ menu: {
+ items: [
+ new
OO.ui.MenuOptionWidget( { data: 'abc', label: 'Label for abc' } ),
+ new
OO.ui.MenuOptionWidget( { data: 'asd', label: 'Label for asd' } ),
+ new
OO.ui.MenuOptionWidget( { data: 'jkl', label: 'Label for jkl' } )
+ ]
+ }
+ } ).addItemsFromData( [ 'abc', 'asd' ]
),
+ {
+ label:
'CapsuleMultiSelectWidget (disabled, initially selected)\u200E',
+ align: 'top'
+ }
+ ),
+ new OO.ui.FieldLayout(
+ new OO.ui.CapsuleMultiSelectWidget( {
menu: {
items: [
new
OO.ui.MenuOptionWidget( { data: 'abc', label: 'Label for abc' } ),
diff --git a/src/styles/widgets/CapsuleItemWidget.less
b/src/styles/widgets/CapsuleItemWidget.less
index 7206a58..ee4c550 100644
--- a/src/styles/widgets/CapsuleItemWidget.less
+++ b/src/styles/widgets/CapsuleItemWidget.less
@@ -6,19 +6,15 @@
cursor: default;
white-space: nowrap;
- & > .oo-ui-iconElement-icon {
- cursor: pointer;
- }
-
- &.oo-ui-widget-disabled > .oo-ui-iconElement-icon {
- cursor: default;
- }
-
- &.oo-ui-labelElement .oo-ui-labelElement-label {
- display: block;
+ .oo-ui-labelElement .oo-ui-labelElement-label {
+ display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
}
+ .oo-ui-buttonElement {
+ margin-top: -0.5em;
+ }
+
.theme-oo-ui-capsuleItemWidget();
}
diff --git a/src/widgets/CapsuleItemWidget.js b/src/widgets/CapsuleItemWidget.js
index cf71f72..628bed2 100644
--- a/src/widgets/CapsuleItemWidget.js
+++ b/src/widgets/CapsuleItemWidget.js
@@ -5,10 +5,8 @@
* @class
* @extends OO.ui.Widget
* @mixins OO.ui.mixin.ItemWidget
- * @mixins OO.ui.mixin.IndicatorElement
* @mixins OO.ui.mixin.LabelElement
* @mixins OO.ui.mixin.FlaggedElement
- * @mixins OO.ui.mixin.TabIndexedElement
*
* @constructor
* @param {Object} [config] Configuration options
@@ -20,64 +18,44 @@
// Parent constructor
OO.ui.CapsuleItemWidget.parent.call( this, config );
- // Properties (must be set before mixin constructor calls)
- this.$indicator = $( '<span>' );
-
// Mixin constructors
OO.ui.mixin.ItemWidget.call( this );
- OO.ui.mixin.IndicatorElement.call( this, $.extend( {}, config, {
$indicator: this.$indicator, indicator: 'clear' } ) );
OO.ui.mixin.LabelElement.call( this, config );
OO.ui.mixin.FlaggedElement.call( this, config );
- OO.ui.mixin.TabIndexedElement.call( this, $.extend( {}, config, {
$tabIndexed: this.$indicator } ) );
// Events
- this.$indicator.on( {
- keydown: this.onCloseKeyDown.bind( this ),
- click: this.onCloseClick.bind( this )
- } );
+ this.closeButton = new OO.ui.ButtonWidget( {
+ framed: false,
+ icon: 'clear'
+ } ).on( 'click', this.onCloseClick.bind( this ) );
+
+ this.on( 'disable', function ( disabled ) {
+ this.closeButton.setDisabled( disabled );
+ }.bind( this ) );
// Initialization
this.$element
.addClass( 'oo-ui-capsuleItemWidget' )
- .append( this.$indicator, this.$label );
+ .append( this.$label, this.closeButton.$element );
};
/* Setup */
OO.inheritClass( OO.ui.CapsuleItemWidget, OO.ui.Widget );
OO.mixinClass( OO.ui.CapsuleItemWidget, OO.ui.mixin.ItemWidget );
-OO.mixinClass( OO.ui.CapsuleItemWidget, OO.ui.mixin.IndicatorElement );
OO.mixinClass( OO.ui.CapsuleItemWidget, OO.ui.mixin.LabelElement );
OO.mixinClass( OO.ui.CapsuleItemWidget, OO.ui.mixin.FlaggedElement );
-OO.mixinClass( OO.ui.CapsuleItemWidget, OO.ui.mixin.TabIndexedElement );
/* Methods */
/**
* Handle close icon clicks
- * @param {jQuery.Event} event
*/
OO.ui.CapsuleItemWidget.prototype.onCloseClick = function () {
var element = this.getElementGroup();
- if ( !this.isDisabled() && element && $.isFunction( element.removeItems
) ) {
+ if ( element && $.isFunction( element.removeItems ) ) {
element.removeItems( [ this ] );
element.focus();
- }
-};
-
-/**
- * Handle close keyboard events
- * @param {jQuery.Event} event Key down event
- */
-OO.ui.CapsuleItemWidget.prototype.onCloseKeyDown = function ( e ) {
- if ( !this.isDisabled() && $.isFunction(
this.getElementGroup().removeItems ) ) {
- switch ( e.which ) {
- case OO.ui.Keys.ENTER:
- case OO.ui.Keys.BACKSPACE:
- case OO.ui.Keys.SPACE:
- this.getElementGroup().removeItems( [ this ] );
- return false;
- }
}
};
--
To view, visit https://gerrit.wikimedia.org/r/268074
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I29e8a9beae4465135774e32951885af81952a6e0
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
