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 {
.oo-ui-indicatorElement-indicator,
.oo-ui-iconElement-icon {
@@ -142,12 +158,6 @@
.oo-ui-iconElement-icon {
left: 0.25em;
}
-
- .oo-ui-labelElement-label {
- line-height: 2.6em;
- font-size: 0.8em;
- margin: 0 1em;
- }
}
&-header {
@@ -163,14 +173,6 @@
box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
.oo-ui-vertical-gradient(#F1F7FB, #fff);
- }
-
- &.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;
}
.oo-ui-toolGroup-tools {
diff --git a/src/themes/apex/windows.less b/src/themes/apex/windows.less
index 4dab86f..24bb88e 100644
--- a/src/themes/apex/windows.less
+++ b/src/themes/apex/windows.less
@@ -70,7 +70,7 @@
}
.oo-ui-actionWidget {
- .oo-ui-labelElement-label {
+ &.oo-ui-labelElement .oo-ui-labelElement-label {
text-align: center;
line-height: 3.4em;
padding: 0 2em;
@@ -169,7 +169,7 @@
min-height: 1.9em;
}
- .oo-ui-labelElement-label {
+ &.oo-ui-labelElement .oo-ui-labelElement-label {
line-height: 1.9em;
padding: 0 1em;
}
@@ -252,7 +252,7 @@
left: 0.5em;
}
- .oo-ui-labelElement-label {
+ &.oo-ui-labelElement .oo-ui-labelElement-label {
padding-left: 2.25em;
}
}
@@ -264,7 +264,7 @@
right: 0.5em;
}
- .oo-ui-labelElement-label {
+ &.oo-ui-labelElement .oo-ui-labelElement-label {
padding-right: 2.25em;
}
}
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index dda9078..bfff86b 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -42,9 +42,13 @@
&:focus {
outline: none;
}
+ }
- > .oo-ui-labelElement-label {
- margin-left: 0.25em;
+ &.oo-ui-labelElement {
+ > .oo-ui-buttonElement-button {
+ > .oo-ui-labelElement-label {
+ margin-left: 0.25em;
+ }
}
}
diff --git a/src/themes/mediawiki/tools.less b/src/themes/mediawiki/tools.less
index ef21e56..c79ae8b 100644
--- a/src/themes/mediawiki/tools.less
+++ b/src/themes/mediawiki/tools.less
@@ -94,6 +94,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 {
.oo-ui-indicatorElement-indicator,
.oo-ui-iconElement-icon {
@@ -110,12 +126,6 @@
.oo-ui-iconElement-icon {
left: 0.25em;
}
-
- .oo-ui-labelElement-label {
- line-height: 2.6em;
- font-size: 0.8em;
- margin: 0 1em;
- }
}
&-header {
@@ -123,14 +133,6 @@
font-size: 0.8em;
margin: 0 0.6em;
font-weight: bold;
- }
-
- &.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;
}
.oo-ui-toolGroup-tools {
diff --git a/src/themes/mediawiki/windows.less
b/src/themes/mediawiki/windows.less
index f45216e..2e9c280 100644
--- a/src/themes/mediawiki/windows.less
+++ b/src/themes/mediawiki/windows.less
@@ -63,7 +63,7 @@
}
.oo-ui-actionWidget {
- .oo-ui-labelElement-label {
+ &.oo-ui-labelElement .oo-ui-labelElement-label {
text-align: center;
line-height: 3.4em;
padding: 0 2em;
@@ -162,7 +162,7 @@
min-height: 1.9em;
}
- .oo-ui-labelElement-label {
+ &.oo-ui-labelElement .oo-ui-labelElement-label {
line-height: 1.9em;
padding: 0 1em;
}
@@ -245,7 +245,7 @@
left: 0.5em;
}
- .oo-ui-labelElement-label {
+ &.oo-ui-labelElement .oo-ui-labelElement-label {
padding-left: 2.25em;
}
}
@@ -257,7 +257,7 @@
right: 0.5em;
}
- .oo-ui-labelElement-label {
+ &.oo-ui-labelElement .oo-ui-labelElement-label {
padding-right: 2.25em;
}
}
--
To view, visit https://gerrit.wikimedia.org/r/174844
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I3a8fed4ebe4c0d56cb4cda25d42e30777ac035b7
Gerrit-PatchSet: 4
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Legoktm <legoktm.wikipe...@gmail.com>
Gerrit-Reviewer: Trevor Parscal <tpars...@wikimedia.org>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
