Prtksxna has uploaded a new change for review.
https://gerrit.wikimedia.org/r/268077
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, 33 insertions(+), 1 deletion(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/77/268077/1
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index e257476..e118d73 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -607,6 +607,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 12d7ab6..3a081c0 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -790,6 +790,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 9cab5ef..6479ff5 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,6 +23,7 @@
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( {
@@ -35,7 +37,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 +51,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 +77,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 ) {
+ 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: newchange
Gerrit-Change-Id: Ib2be6a1b762bc8d015afb2f8172231d2cf30b08a
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
