jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/334440 )
Change subject: CapsuleMultiselectWidget: Styling tweaks related to popups
......................................................................
CapsuleMultiselectWidget: Styling tweaks related to popups
* When 'popup' is given, set its width correctly to be the same as
width of the capsules, rather than smaller by border + padding.
* Set a new class 'oo-ui-capsuleMultiselectWidget-popup' on the
popup, and use that to style it rather than a generic selector.
This lets us style popups in overlays, and avoid incorrectly applying
the styles to random other popups inside the widget (e.g. if the
individual capsules have popups in them).
* Minor popup styling tweaks, mostly remove its border. The widget
inside of it probably already has a nice border. In MediaWiki theme,
remove lots of styles that do nothing in practice.
* Set immediate children of the popup to 'display: block'. For widgets
that default to 'inline-block', this removes ugly space inside the
popup (below the widged) caused by high line-height we use everywhere.
* Remove random unnecessary inline CSS in the demo.
Change-Id: Ic3fb01f263b274a3508e5669096de1d19ad4be95
---
M demos/pages/widgets.js
M src/styles/widgets/CapsuleMultiselectWidget.less
M src/themes/apex/widgets.less
M src/themes/mediawiki/widgets.less
M src/widgets/CapsuleMultiselectWidget.js
5 files changed, 16 insertions(+), 11 deletions(-)
Approvals:
jenkins-bot: Verified
Mooeypoo: Looks good to me, approved
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index cb65cb7..b1e6ffc 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -182,7 +182,6 @@
return false;
}
} );
- capsulePopupWidget.$element.css( 'vertical-align', 'middle' );
capsuleWithPopup = new OO.ui.CapsuleMultiselectWidget( {
allowArbitrary: true,
popup: { $content: capsulePopupWidget.$element }
diff --git a/src/styles/widgets/CapsuleMultiselectWidget.less
b/src/styles/widgets/CapsuleMultiselectWidget.less
index df19664..e9b18e0 100644
--- a/src/styles/widgets/CapsuleMultiselectWidget.less
+++ b/src/styles/widgets/CapsuleMultiselectWidget.less
@@ -22,5 +22,9 @@
display: inline;
}
+ &-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body > * {
+ display: block;
+ }
+
.theme-oo-ui-capsuleMultiselectWidget();
}
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 9498355..d8db3b6 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -575,6 +575,12 @@
opacity: 0.2;
}
}
+
+ &-popup {
+ > .oo-ui-popupWidget-popup {
+ border: 0;
+ }
+ }
}
.theme-oo-ui-capsuleItemWidget () {
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index 6cfb94d..861a2a8 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -950,17 +950,12 @@
}
}
- // CapsuleMultiselectWidget with child widget
- .oo-ui-popupWidget {
- width: 100%;
+ &-popup {
margin-top: -1px;
- }
- .oo-ui-popupWidget-popup {
- min-width: 100%;
- .oo-ui-box-sizing( border-box );
- border-width: 0 1px;
- border-radius: 0 0 2px 2px;
+ > .oo-ui-popupWidget-popup {
+ border: 0;
+ }
}
&.oo-ui-widget-enabled &-handle {
diff --git a/src/widgets/CapsuleMultiselectWidget.js
b/src/widgets/CapsuleMultiselectWidget.js
index 31428b7..dfc3d88 100644
--- a/src/widgets/CapsuleMultiselectWidget.js
+++ b/src/widgets/CapsuleMultiselectWidget.js
@@ -176,6 +176,7 @@
this.$element.addClass( 'oo-ui-capsuleMultiselectWidget' )
.append( this.$handle );
if ( this.popup ) {
+ this.popup.$element.addClass(
'oo-ui-capsuleMultiselectWidget-popup' );
this.$content.append( $tabFocus );
this.$overlay.append( this.popup.$element );
} else {
@@ -786,7 +787,7 @@
OO.ui.CapsuleMultiselectWidget.prototype.focus = function () {
if ( !this.isDisabled() ) {
if ( this.popup ) {
- this.popup.setSize( this.$handle.width() );
+ this.popup.setSize( this.$handle.outerWidth() );
this.popup.toggle( true );
OO.ui.findFocusable( this.popup.$element ).focus();
} else {
--
To view, visit https://gerrit.wikimedia.org/r/334440
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ic3fb01f263b274a3508e5669096de1d19ad4be95
Gerrit-PatchSet: 2
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Mooeypoo <mor...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
