jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/350260 )
Change subject: WikimediaUI, Apex theme: Improve frameless button in size and
behaviour
......................................................................
WikimediaUI, Apex theme: Improve frameless button in size and behaviour
Improving frameless buttons to be same `height` as framed ones in order
to simplify design and implementation predictability.
WikimediaUI theme: Also aligning icon/indicator vertical position to label
if available and improve focus states for frameless buttons.
Apex theme: Increase button size to equivalent of `32px` together with text
inputs and ensure similar logic like WikimediaUI theme.
Also cleaning up selectors, comments and minor whitespace issues.
Bug: T163094
Change-Id: Id526add14e9fb06c2a93a055d9eeb3d59236c66c
---
M demos/pages/widgets.js
M src/themes/apex/common.less
M src/themes/apex/elements.less
M src/themes/apex/tools.less
M src/themes/apex/widgets.less
M src/themes/apex/windows.less
M src/themes/wikimediaui/common.less
M src/themes/wikimediaui/elements.less
M src/themes/wikimediaui/layouts.less
M src/themes/wikimediaui/windows.less
10 files changed, 155 insertions(+), 50 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, but someone else must approve
jenkins-bot: Verified
Jforrester: Looks good to me, approved
diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index b27084a..bce5872 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -2580,6 +2580,11 @@
framed: false,
icon: 'tag',
label: 'Random icon button'
+
} ),
+
new OO.ui.ButtonWidget( {
+
framed: false,
+
icon: 'help',
+
title: 'Icon only'
} )
]
} ) ]
diff --git a/src/themes/apex/common.less b/src/themes/apex/common.less
index ae50fef..4060ca5 100644
--- a/src/themes/apex/common.less
+++ b/src/themes/apex/common.less
@@ -36,9 +36,22 @@
@size-icon-numberinput: unit( 20 / 16 / 0.8, em );
@size-indicator: unit( 12 / 16 / 0.8, em );
+@start-frameless: -@padding-horizontal-frameless;
+
@border-radius-default: 0.25em;
+@border-radius-button: 0.3em;
@border-radius-taboption: 0.5em;
+@padding-default: @padding-vertical-default @padding-horizontal-default;
+@padding-frameless: @padding-vertical-frameless @padding-horizontal-frameless;
+@padding-vertical-default: unit( 3 / 16 / 0.8, em );
+@padding-horizontal-default: unit( 10 / 16 / 0.8, em );
+@padding-horizontal-frameless: unit( 4 / 16 / 0.8, em );
+@padding-vertical-frameless: unit( 4 / 16 / 0.8, em );
+@padding-top-textinput: unit( 7 / 16 / 0.8, em );
+@padding-start-frameless-icon-only: unit( 32 / 16 / 0.8, em );
+@padding-bottom-textinput: unit( 8 / 16 / 0.8, em );
+
@line-height-default: 1.4;
// Theme animation variables
diff --git a/src/themes/apex/elements.less b/src/themes/apex/elements.less
index 02a76e5..65f8e31 100644
--- a/src/themes/apex/elements.less
+++ b/src/themes/apex/elements.less
@@ -5,34 +5,49 @@
.theme-oo-ui-buttonElement () {
> .oo-ui-buttonElement-button {
color: @color-default;
+ border-radius: @border-radius-button;
+
+ &:focus {
+ outline: 0;
+ }
}
&.oo-ui-iconElement > .oo-ui-buttonElement-button >
.oo-ui-iconElement-icon {
margin-left: 0;
}
- &.oo-ui-indicatorElement > .oo-ui-buttonElement-button >
.oo-ui-indicatorElement-indicator {
- margin: @size-indicator / 2;
+ // Support `<input>` from ButtonInputWidget
+ > input.oo-ui-buttonElement-button,
+ &.oo-ui-labelElement .oo-ui-labelElement-label {
+ line-height: @size-icon;
}
- &.oo-ui-iconElement > .oo-ui-buttonElement-button >
.oo-ui-indicatorElement-indicator {
- margin-left: @size-indicator / 2;
+ &.oo-ui-iconElement {
+ .oo-ui-iconElement-icon {
+ margin-left: 0;
+ }
+
+ .oo-ui-indicatorElement-indicator {
+ margin-left: @size-indicator / 2;
+ }
+ }
+
+ &.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
+ margin: @size-indicator / 2;
}
&-frameless {
> .oo-ui-buttonElement-button {
- > .oo-ui-iconElement-icon {
- // Don't animate opacities for now, causes
wiggling in Chrome (bug 63020)
- // .oo-ui-transition( opacity @medium-ease );
- }
+ // Don't animate `.oo-ui-iconElement-icon` `opacity`
for now,
+ // causes wiggling in Chrome (bug 63020)
+ // `.oo-ui-transition( opacity @medium-ease );`
&:hover,
&:focus {
- outline: 0;
-
> .oo-ui-iconElement-icon {
opacity: 1;
}
+
> .oo-ui-labelElement-label {
color: #000;
}
@@ -43,15 +58,35 @@
}
}
- &.oo-ui-labelElement {
+ &.oo-ui-labelElement,
+ &.oo-ui-iconElement {
+ &:first-child {
+ margin-left: @start-frameless; // Address
`padding-left/-right` below
+ }
+
> .oo-ui-buttonElement-button {
+ padding: @padding-frameless;
+
> .oo-ui-labelElement-label {
+ color: @color-default;
margin-left: 0.25em;
+ }
+ }
+
+ &.oo-ui-indicatorElement { // Workaround for label/icon
& indicator combinations
+ > .oo-ui-buttonElement-button {
+ padding: @padding-frameless;
}
}
}
- // Support <input> from ButtonInputWidget
+ &.oo-ui-indicatorElement {
+ > .oo-ui-buttonElement-button {
+ padding: 0;
+ }
+ }
+
+ // Support `<input>` from ButtonInputWidget
> input.oo-ui-buttonElement-button {
padding-left: 0.25em;
color: @color-default;
@@ -80,6 +115,7 @@
> .oo-ui-iconElement-icon {
opacity: 0.2;
}
+
> .oo-ui-labelElement-label {
color: #ccc;
}
@@ -88,8 +124,7 @@
&-framed {
> .oo-ui-buttonElement-button {
- padding: 0.2em 0.8em;
- border-radius: 0.3em;
+ padding: @padding-default;
text-shadow: 0 1px 1px rgba( 255, 255, 255, 0.5 );
border: 1px #c9c9c9 solid;
.oo-ui-transition( border-color @quick-ease );
@@ -98,8 +133,6 @@
&:hover,
&:focus {
border-color: #aaa;
- outline: 0;
-
}
}
@@ -149,7 +182,7 @@
&-progressive {
> .oo-ui-buttonElement-button {
border: 1px solid @progressive-border;
-
.oo-ui-vertical-gradient(@progressive-gradient-start,
@progressive-gradient-end);
+ .oo-ui-vertical-gradient(
@progressive-gradient-start, @progressive-gradient-end );
&:hover,
&:focus {
diff --git a/src/themes/apex/tools.less b/src/themes/apex/tools.less
index 08700ef..aa34bc8 100644
--- a/src/themes/apex/tools.less
+++ b/src/themes/apex/tools.less
@@ -430,7 +430,7 @@
margin-left: 0;
> .oo-ui-popupToolGroup-handle {
- height: 2.3em;
+ height: 2.4em;
border-radius: 0;
margin-left: -2px;
}
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 4bf3ca5..93b598b 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -1127,7 +1127,7 @@
input,
textarea {
- padding: 0.5em;
+ padding: @padding-top-textinput 0.5em @padding-bottom-textinput
0.5em;
line-height: 1.275em;
font-size: inherit;
font-family: inherit;
diff --git a/src/themes/apex/windows.less b/src/themes/apex/windows.less
index 07ae0fd..9b0040d 100644
--- a/src/themes/apex/windows.less
+++ b/src/themes/apex/windows.less
@@ -65,13 +65,8 @@
}
.oo-ui-actionWidget {
- height: 3.4em;
+ min-height: 3.4em;
.oo-ui-inline-spacing(0);
-
- &.oo-ui-labelElement .oo-ui-labelElement-label {
- text-align: center;
- line-height: 3.4em;
- }
&:hover {
background-color: rgba( 0, 0, 0, 0.05 );
@@ -81,6 +76,15 @@
background-color: rgba( 0, 0, 0, 0.1 );
}
+ .oo-ui-buttonElement-button {
+ padding: 0; // reset frameless ButtonElement
+ }
+
+ &.oo-ui-labelElement .oo-ui-labelElement-label {
+ text-align: center;
+ line-height: 3.4em;
+ }
+
&.oo-ui-flaggedElement {
&-progressive {
&:hover {
diff --git a/src/themes/wikimediaui/common.less
b/src/themes/wikimediaui/common.less
index 6e700e7..d69bdc9 100644
--- a/src/themes/wikimediaui/common.less
+++ b/src/themes/wikimediaui/common.less
@@ -88,6 +88,8 @@
@start-framed-icon-only-numberinput: 6 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.46875em`≈`6px`
@start-framed-indicator-only: 13 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `1.09375em`≈`14px`; `@size-indicator + 2 *
@border-width-default`
@start-framed-square-indicator-only: 9 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.703125em`≈`9px`
+@start-frameless: -@start-frameless-icon;
+@start-frameless-icon: 3 / @oo-ui-font-size-browser / @oo-ui-font-size-default;
@start-tagmultiselect-input: 5 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.390625em`≈`5px`;
`@padding-horizontal-tagitem` + `@border-width-default`
@end-tagitem: 4 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `0.3125em`≈`4px`
@@ -132,7 +134,7 @@
@border-color-dialog-bar: #c8ccd1;
@border-radius-default: 2px;
-@border-radius-frameless: 1px; // Together with `@box-shadow-frameless` it
results in well rounded border
+@border-radius-frameless-indicator: 1px; // Together with
`@box-shadow-frameless-indicator-focus` it results in well rounded border
@border-style-default: solid;
@@ -140,13 +142,14 @@
@border-width-medium: 2px;
@padding-default: @padding-top-default @padding-horizontal-default
@padding-bottom-default;
-@padding-frameless: @padding-vertical-label 0;
+@padding-frameless: @padding-top-default @padding-horizontal-frameless
@padding-bottom-default @padding-horizontal-frameless;
@padding-input-text: @padding-top-default @padding-horizontal-input-text
@padding-bottom-default;
@padding-menu: @padding-top-menu @padding-horizontal-default
@padding-bottom-menu;
@padding-menu-large: ( @padding-top-menu * 1.5 ) @padding-horizontal-default (
@padding-bottom-menu * 1.5 );
@padding-search: 16 / @oo-ui-font-size-browser / @oo-ui-font-size-default; //
equals `0.625em`≈`16px`
@padding-taboption: @padding-top-default @padding-horizontal-taboption
@padding-bottom-default;
@padding-horizontal-default: 12 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.9375em`≈`12px`
+@padding-horizontal-frameless: 4 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.3125em`≈`4px`
@padding-horizontal-input-text: 8 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
@padding-horizontal-frameless: 4 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
@padding-horizontal-taboption: 13 / @oo-ui-font-size-browser /
@oo-ui-font-size-default; // equals `0.9375em`≈`13px`;
@padding-horizontal-default = @border-width-default
@@ -163,6 +166,7 @@
@padding-start-fieldset-header-iconized: 26 / @oo-ui-font-size-browser / (
@oo-ui-font-size-default * @font-size-fieldset-header );
@padding-start-indicator-only: @padding-start-icon-only;
@padding-start-indicator-plus: 32 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
+@padding-start-frameless-icon-only: 30 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
@padding-start-input-text-icon-label: 32 / @oo-ui-font-size-browser /
@oo-ui-font-size-default;
@box-shadow-dialog: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
@@ -172,7 +176,7 @@
@box-shadow-widget: inset 0 0 0 1px transparent;
@box-shadow-widget-focus: inset 0 0 0 1px @color-progressive;
@box-shadow-progressive-focus: inset 0 0 0 1px @color-progressive, inset 0 0 0
2px @color-default-light;
-@box-shadow-frameless-focus: 0 0 0 2px @color-progressive;
+@box-shadow-frameless-indicator-focus: 0 0 0 2px @color-progressive;
@box-shadow-action-focus: @box-shadow-widget-focus, 0 0 0 1px
@color-progressive;
@box-shadow-input-binary-active: inset 0 0 0 1px @color-progressive-active;
@box-shadow-erroneous-focus: inset 0 0 0 1px @color-erroneous;
diff --git a/src/themes/wikimediaui/elements.less
b/src/themes/wikimediaui/elements.less
index 404ec2b..d45056f 100644
--- a/src/themes/wikimediaui/elements.less
+++ b/src/themes/wikimediaui/elements.less
@@ -5,6 +5,7 @@
.theme-oo-ui-buttonElement () {
> .oo-ui-buttonElement-button {
position: relative;
+ border-radius: @border-radius-default;
font-weight: bold;
text-decoration: none;
@@ -40,12 +41,6 @@
> .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
line-height: @line-height-widget-singleline;
- }
-
- &.oo-ui-iconElement {
- > .oo-ui-buttonElement-button {
- padding-left: @padding-start-icon-only;
- }
}
&.oo-ui-indicatorElement {
@@ -116,25 +111,44 @@
}
&-frameless {
- > .oo-ui-buttonElement-button {
- border-radius: @border-radius-frameless;
- }
-
+ // Icon (-only) frameless
&.oo-ui-iconElement {
- // Icon (-only) framed
+ &:first-child {
+ margin-left: @start-frameless; // Address
`left` on `.oo-ui-iconElement-icon` below with negative value
+ }
+
> .oo-ui-buttonElement-button {
min-width: @size-icon;
min-height: @size-icon;
+ border-color: @border-color-frameless-fallback;
// Support IE 6: `transparent` is not rendered correctly
+ border-color: @border-color-frameless;
+ border-style: @border-style-default;
+ border-width: @border-width-default;
+ padding-top: @padding-top-icon-indicator; //
Support IE 7: Acts as `min-width`
+ padding-left:
@padding-start-frameless-icon-only;
> .oo-ui-iconElement-icon {
- left: 0;
+ left: @start-frameless-icon;
}
}
}
&.oo-ui-labelElement {
+ &:first-child {
+ margin-left: -@padding-horizontal-frameless; //
Address `padding-left/-right` below
+ }
+
+ &.oo-ui-iconElement {
+ &:first-child {
+ margin-left: @start-frameless;
+ }
+
+ > .oo-ui-buttonElement-button {
+ padding-left:
@padding-start-frameless-icon-only;
+ }
+ }
+
> .oo-ui-buttonElement-button {
- margin-left: -@border-width-default; // Address
`border` below
border-color: @border-color-frameless-fallback;
// Support IE 6: `transparent` is not rendered correctly
border-color: @border-color-frameless;
border-style: @border-style-default;
@@ -145,8 +159,8 @@
&.oo-ui-indicatorElement {
> .oo-ui-buttonElement-button {
- min-width: @size-indicator;
- min-height: @size-indicator;
+ min-width: @min-size-indicator;
+ min-height: @min-size-indicator;
}
}
@@ -157,14 +171,41 @@
&:hover {
color: @color-default-hover;
}
- &:focus {
- box-shadow: @box-shadow-frameless-focus;
+ }
+
+ &.oo-ui-iconElement,
+ &.oo-ui-labelElement {
+ > .oo-ui-buttonElement-button:focus {
+ border-color:
@border-color-default-focus;
+ box-shadow: @box-shadow-widget-focus;
+
+ &:active {
+ border-color:
@border-color-frameless-fallback;
+ border-color:
@border-color-frameless;
+ box-shadow: none;
+ }
+ }
+ }
+
+ &.oo-ui-indicatorElement:not( .oo-ui-iconElement ):not(
.oo-ui-labelElement ) { // IE 9+ only on non-critical design properties
+ > .oo-ui-buttonElement-button {
+ border-radius:
@border-radius-frameless-indicator;
+
+ &:focus {
+ box-shadow:
@box-shadow-frameless-indicator-focus;
+
+ &:active {
+ box-shadow: none;
+ }
+ }
}
}
&.oo-ui-buttonElement-pressed >
input.oo-ui-buttonElement-button,
- &.oo-ui-buttonElement-pressed >
.oo-ui-buttonElement-button:active {
+ & > .oo-ui-buttonElement-button:active {
color: @color-default-active;
+ border-color: @border-color-frameless-fallback;
// Support IE 6: `transparent` is not rendered correctly
+ border-color: @border-color-frameless;
box-shadow: none;
}
diff --git a/src/themes/wikimediaui/layouts.less
b/src/themes/wikimediaui/layouts.less
index 83b4f2f..d007030 100644
--- a/src/themes/wikimediaui/layouts.less
+++ b/src/themes/wikimediaui/layouts.less
@@ -155,6 +155,10 @@
&.oo-ui-fieldLayout-align-top {
max-width: @max-width-default;
}
+
+ .oo-ui-actionFieldLayout-button .oo-ui-buttonElement-frameless {
+ margin-left: @padding-horizontal-frameless; // Address
frameless negative margin focus hack
+ }
}
.theme-oo-ui-fieldsetLayout () {
diff --git a/src/themes/wikimediaui/windows.less
b/src/themes/wikimediaui/windows.less
index 86bd8ee..a2f98aa 100644
--- a/src/themes/wikimediaui/windows.less
+++ b/src/themes/wikimediaui/windows.less
@@ -62,9 +62,12 @@
min-height: @size-dialog-bar-top;
.oo-ui-inline-spacing( 0 );
- // Reset frameless ButtonWidget
- .oo-ui-buttonElement-button {
+ // Reset Frameless ButtonWidgets
+ &:first-child {
margin-left: 0;
+ }
+
+ .oo-ui-buttonElement-button {
border: 0;
border-radius: 0;
padding: 0;
@@ -76,8 +79,6 @@
}
&.oo-ui-widget-enabled {
- //.oo-ui-transition( background-color
@transition-ease-quick );
-
.oo-ui-buttonElement-button {
&:hover {
background-color:
@background-color-framed; // Invert button color logic without defining var
(yet)
--
To view, visit https://gerrit.wikimedia.org/r/350260
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Id526add14e9fb06c2a93a055d9eeb3d59236c66c
Gerrit-PatchSet: 8
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Esanders <[email protected]>
Gerrit-Reviewer: Jforrester <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: VolkerE <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
