jenkins-bot has submitted this change and it was merged.
Change subject: LabelElement: Kill inline styles
..
LabelElement: Kill inline styles
We already toggle the .oo-ui-labelElement class on the parent element,
which makes it possible to apply different styles if the label is
visible or hidden.
Replicated the effect with CSS for code that depended on it.
Bug: 73156
Bug: 73677
Change-Id: I3a8fed4ebe4c0d56cb4cda25d42e30777ac035b7
---
M php/elements/LabelElement.php
M src/elements/LabelElement.js
M src/styles/elements/ButtonElement.less
M src/styles/widgets/OptionWidget.less
M src/themes/apex/elements.less
M src/themes/apex/tools.less
M src/themes/apex/windows.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/tools.less
M src/themes/mediawiki/windows.less
10 files changed, 60 insertions(+), 47 deletions(-)
Approvals:
Trevor Parscal: Looks good to me, approved
jenkins-bot: Verified
diff --git a/php/elements/LabelElement.php b/php/elements/LabelElement.php
index b9b75d1..4976206 100644
--- a/php/elements/LabelElement.php
+++ b/php/elements/LabelElement.php
@@ -52,7 +52,6 @@
}
}
- $this-target-setAttributes( !$label ? array( 'style' =
'display: none;' ) : array() );
$this-element-toggleClasses( array( 'oo-ui-labelElement' ),
!!$this-label );
return $this;
diff --git a/src/elements/LabelElement.js b/src/elements/LabelElement.js
index 1d270ab..4595e44 100644
--- a/src/elements/LabelElement.js
+++ b/src/elements/LabelElement.js
@@ -129,5 +129,4 @@
} else {
this.$label.empty();
}
- this.$label.css( 'display', !label ? 'none' : '' );
};
diff --git a/src/styles/elements/ButtonElement.less
b/src/styles/elements/ButtonElement.less
index a64cc73..50b736f 100644
--- a/src/styles/elements/ButtonElement.less
+++ b/src/styles/elements/ButtonElement.less
@@ -33,7 +33,7 @@
display: inline-block;
position: relative;
-.oo-ui-buttonElement-button .oo-ui-labelElement-label {
+ .oo-ui-labelElement .oo-ui-buttonElement-button
.oo-ui-labelElement-label {
display: inline-block;
vertical-align: middle;
}
@@ -44,11 +44,11 @@
display: inline-block;
vertical-align: top;
text-align: center;
+ }
-.oo-ui-labelElement-label {
- display: inline-block;
- vertical-align: middle;
- }
+ .oo-ui-labelElement .oo-ui-buttonElement-button
.oo-ui-labelElement-label {
+ display: inline-block;
+ vertical-align: middle;
}
.oo-ui-widget-disabled {
diff --git a/src/styles/widgets/OptionWidget.less
b/src/styles/widgets/OptionWidget.less
index d2b569a..8543fc7 100644
--- a/src/styles/widgets/OptionWidget.less
+++ b/src/styles/widgets/OptionWidget.less
@@ -9,7 +9,7 @@
cursor: default;
}
- .oo-ui-labelElement-label {
+ .oo-ui-labelElement .oo-ui-labelElement-label {
display: block;
white-space: nowrap;
text-overflow: ellipsis;
diff --git a/src/themes/apex/elements.less b/src/themes/apex/elements.less
index d21438a..8e7f6db 100644
--- a/src/themes/apex/elements.less
+++ b/src/themes/apex/elements.less
@@ -47,7 +47,14 @@
.oo-ui-labelElement-label {
color: #333;
- margin-left: 0.25em;
+ }
+ }
+
+ .oo-ui-labelElement {
+.oo-ui-buttonElement-button {
+.oo-ui-labelElement-label {
+ margin-left: 0.25em;
+ }
}
}
diff --git a/src/themes/apex/tools.less b/src/themes/apex/tools.less
index 5d48906..5e48929 100644
--- a/src/themes/apex/tools.less
+++ b/src/themes/apex/tools.less
@@ -126,6 +126,22 @@
min-width: 3.5em;
}
+ .oo-ui-labelElement {
+ .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
+ line-height: 2.6em;
+ font-size: 0.8em;
+ margin: 0 1em;
+ }
+
+ .oo-ui-iconElement .oo-ui-popupToolGroup-handle
.oo-ui-labelElement-label {
+ margin-left: 3em;
+ }
+
+ .oo-ui-indicatorElement .oo-ui-popupToolGroup-handle
.oo-ui-labelElement-label {
+ margin-right: 2.25em;
+ }
+ }
+
-handle {
