jenkins-bot has submitted this change and it was merged.
Change subject: OO.ui.CapsuleItemWidget: Let user tab through items, edit and
delete them
......................................................................
OO.ui.CapsuleItemWidget: Let user tab through items, edit and delete them
Bug: T119045
Change-Id: Ib2be6a1b762bc8d015afb2f8172231d2cf30b08a
---
M src/themes/apex/widgets.less
M src/themes/mediawiki/widgets.less
M src/widgets/CapsuleItemWidget.js
3 files changed, 35 insertions(+), 2 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index cd0fa6a..96b15c7 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -608,6 +608,11 @@
color: #555;
border-radius: 0.25em;
+ &:focus {
+ outline: none;
+ border-color: @progressive;
+ }
+
&.oo-ui-indicatorElement {
> .oo-ui-labelElement-label {
padding-right: @indicator-size + 0.4em;
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index b0e6d36..2f4c14a 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -794,6 +794,11 @@
color: @color-default;
border-radius: @border-radius-default;
+ &:focus {
+ outline: none;
+ border-color: @progressive;
+ }
+
&.oo-ui-indicatorElement {
> .oo-ui-labelElement-label {
padding-right: @size-indicator + 0.4em;
diff --git a/src/widgets/CapsuleItemWidget.js b/src/widgets/CapsuleItemWidget.js
index f7e809b..0d66865 100644
--- a/src/widgets/CapsuleItemWidget.js
+++ b/src/widgets/CapsuleItemWidget.js
@@ -7,6 +7,7 @@
* @mixins OO.ui.mixin.ItemWidget
* @mixins OO.ui.mixin.LabelElement
* @mixins OO.ui.mixin.FlaggedElement
+ * @mixins OO.ui.mixin.TabIndexedElement
*
* @constructor
* @param {Object} [config] Configuration options
@@ -22,11 +23,13 @@
OO.ui.mixin.ItemWidget.call( this );
OO.ui.mixin.LabelElement.call( this, config );
OO.ui.mixin.FlaggedElement.call( this, config );
+ OO.ui.mixin.TabIndexedElement.call( this, config );
// Events
this.closeButton = new OO.ui.ButtonWidget( {
framed: false,
- indicator: 'clear'
+ indicator: 'clear',
+ tabIndex: -1
} ).on( 'click', this.onCloseClick.bind( this ) );
this.on( 'disable', function ( disabled ) {
@@ -35,7 +38,10 @@
// Initialization
this.$element
- .on( 'click', this.onClick.bind( this ) )
+ .on( {
+ click: this.onClick.bind( this ),
+ keydown: this.onKeyDown.bind( this )
+ } )
.addClass( 'oo-ui-capsuleItemWidget' )
.append( this.$label, this.closeButton.$element );
};
@@ -46,6 +52,7 @@
OO.mixinClass( OO.ui.CapsuleItemWidget, OO.ui.mixin.ItemWidget );
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 */
@@ -71,3 +78,19 @@
element.editItem( this );
}
};
+
+/**
+ * Handle keyDown event for the entire capsule
+ */
+OO.ui.CapsuleItemWidget.prototype.onKeyDown = function ( e ) {
+ var element = this.getElementGroup();
+
+ if ( e.keyCode === OO.ui.Keys.BACKSPACE || e.keyCode ===
OO.ui.Keys.DELETE ) {
+ element.removeItems( [ this ] );
+ element.focus();
+ return false;
+ } else if ( e.keyCode === OO.ui.Keys.ENTER ) {
+ element.editItem( this );
+ return false;
+ }
+};
--
To view, visit https://gerrit.wikimedia.org/r/268077
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ib2be6a1b762bc8d015afb2f8172231d2cf30b08a
Gerrit-PatchSet: 6
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
Gerrit-Reviewer: Anomie <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
