VolkerE has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/348621 )
Change subject: MediaWiki theme: TagMultiselectWidget outlined UI improvements
......................................................................
MediaWiki theme: TagMultiselectWidget outlined UI improvements
Making elements of the TagMultiselectWidget with `inputPosition:outline`
clearer for the user. Also changing CSS class to be aligned with
widget naming scheme.
Bug: T163126
Depends-on: I8eed225d4370012ff27ed29d0e6326232b1c7e19
Change-Id: I524a0df97de0f8f2b2004d0737c3c95e834d48f4
---
M demos/pages/widgets.js
M src/styles/widgets/TagMultiselectWidget.less
M src/themes/mediawiki/widgets.less
M src/widgets/TagMultiselectWidget.js
M tests/widgets/TagMultiselectWidget.test.js
5 files changed, 24 insertions(+), 9 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/21/348621/1
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index 02006b4..8cc47c8 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -1380,7 +1380,7 @@
inputPosition: 'outline'
} ),
{
- label: 'TagMultiselectWidget
(allowArbitrary, outline input, placeholder)',
+ label: 'TagMultiselectWidget
(allowArbitrary, inputPosition:outline, placeholder)',
align: 'top'
}
),
@@ -1391,7 +1391,7 @@
inputWidget: new
OO.ui.SearchInputWidget()
} ),
{
- label: 'TagMultiselectWidget
(inputwidget: OO.ui.SearchInputWidget, outline input)',
+ label: 'TagMultiselectWidget
(inputwidget: OO.ui.SearchInputWidget, inputPosition:outline)',
align: 'top'
}
),
diff --git a/src/styles/widgets/TagMultiselectWidget.less
b/src/styles/widgets/TagMultiselectWidget.less
index df1ce58..30a50cb 100644
--- a/src/styles/widgets/TagMultiselectWidget.less
+++ b/src/styles/widgets/TagMultiselectWidget.less
@@ -29,10 +29,8 @@
display: inline;
}
- &-inputPosition {
- &-outline {
- width: 100%;
- }
+ &-outlined {
+ width: 100%;
}
// Support: Chromium
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 97220ec..207de22 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -1688,6 +1688,23 @@
outline: 0;
box-shadow: @box-shadow-widget-focus;
}
+
+ &.oo-ui-tagMultiselectWidget-outlined
+ .oo-ui-tagMultiselectWidget-handle {
+ background-color: @background-color-readonly;
+ border-bottom: 0;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+
+ .oo-ui-tagItemWidget.oo-ui-widget-enabled {
+ background-color:
@background-color-default;
+ }
+ }
+
+ .oo-ui-inputWidget-input {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
}
&.oo-ui-widget-disabled &-handle {
diff --git a/src/widgets/TagMultiselectWidget.js
b/src/widgets/TagMultiselectWidget.js
index 1d3230c..a26c4a3 100644
--- a/src/widgets/TagMultiselectWidget.js
+++ b/src/widgets/TagMultiselectWidget.js
@@ -123,7 +123,7 @@
// Initialize
this.$element
.addClass( 'oo-ui-tagMultiselectWidget' )
- .addClass( 'oo-ui-tagMultiselectWidget-inputPosition-' +
this.inputPosition )
+ .addClass( 'oo-ui-tagMultiselectWidget-' + this.inputPosition +
'd' )
.append( this.$handle );
if ( this.hasInput ) {
diff --git a/tests/widgets/TagMultiselectWidget.test.js
b/tests/widgets/TagMultiselectWidget.test.js
index a2557cd..ad92b68 100644
--- a/tests/widgets/TagMultiselectWidget.test.js
+++ b/tests/widgets/TagMultiselectWidget.test.js
@@ -10,7 +10,7 @@
'Basic widget (inputPosition:inline) has an input'
);
assert.ok(
- widget.$element.hasClass(
'oo-ui-tagMultiselectWidget-inputPosition-inline' ),
+ widget.$element.hasClass(
'oo-ui-tagMultiselectWidget-inlined' ),
'Basic widget (inputPosition:inline) has an inline
input class'
);
assert.ok(
@@ -24,7 +24,7 @@
'Widget with inputPosition:outline has an input'
);
assert.ok(
- widget.$element.hasClass(
'oo-ui-tagMultiselectWidget-inputPosition-outline' ),
+ widget.$element.hasClass(
'oo-ui-tagMultiselectWidget-outlined' ),
'Widget with inputPosition:outline has the correct
class'
);
assert.ok(
--
To view, visit https://gerrit.wikimedia.org/r/348621
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I524a0df97de0f8f2b2004d0737c3c95e834d48f4
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <volke...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
