VolkerE has uploaded a new change for review.
https://gerrit.wikimedia.org/r/306293
Change subject: MediaWiki theme: Unify different widgets' selected menu state
......................................................................
MediaWiki theme: Unify different widgets' selected menu state
Unifying selected states of menus in ToolGroups, Dropdown and
OutlineOptionWidget. Also further improving variable naming and
removing unnecessary properties where applicable.
Bug: T143634
Change-Id: Id1312fee5bb8ba4064ec0f2e6b6c6cd7521a260c
---
M src/styles/widgets/MenuOptionWidget.less
M src/themes/mediawiki/common.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/widgets.less
4 files changed, 27 insertions(+), 22 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/93/306293/1
diff --git a/src/styles/widgets/MenuOptionWidget.less
b/src/styles/widgets/MenuOptionWidget.less
index f7f9f7a..068c7f6 100644
--- a/src/styles/widgets/MenuOptionWidget.less
+++ b/src/styles/widgets/MenuOptionWidget.less
@@ -9,8 +9,6 @@
&.oo-ui-optionWidget {
&-selected {
- background-color: transparent;
-
.oo-ui-iconElement-icon {
display: block;
}
diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 88d0a33..194066c 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -4,7 +4,6 @@
@background-color-default: #fff;
@background-color-active: #999;
-@background-color-selected: #d8e6fe;
@background-color-pressed: #d0d0d0;
@color-default: #555;
@@ -14,18 +13,18 @@
@color-placeholder: #595959; // aligns to WCAG 2.0 level AAA 7:1 contrast ratio
// Primary 'Progressive' and 'Destructive' Colors
+@background-color-progressive: #ebf2ff; // equals rgba output in `fade(
@color-progressive, 10% )`
+@background-color-progressive-hover: rgba( 41, 98, 204, 0.1 );
@color-progressive: #347bff;
@color-progressive-hover: #2962cc;
@color-progressive-active: #1f4999;
@color-progressive-focus: @color-progressive;
-@color-progressive-fade: #ebf2ff; // equals rgba output in `fade(
@color-progressive, 10% )`
-@color-progressive-fade-hover: rgba( 41, 98, 204, 0.1 );
+@background-color-destructive: #fbe8e7; // equals `fade( @color-destructive,
10% )`
@color-destructive: #d11d13;
@color-destructive-hover: #8c130d;
@color-destructive-active: #73100a;
@color-destructive-focus: @color-destructive;
-@color-destructive-fade: #fbe8e7; // equals `fade( @color-destructive, 10% )`
// Disabled Widgets
@background-color-disabled: #f3f3f3;
@@ -40,8 +39,8 @@
// Toolbar & Tools
@background-color-toolbar: @background-color-default;
@background-color-tool-hover: #eee;
-@background-color-tool-active: @color-progressive-fade;
-@background-color-tool-active-hover: @color-progressive-fade-hover;
+@background-color-tool-active: @background-color-progressive;
+@background-color-tool-active-hover: @background-color-progressive-hover;
@color-tool-active: @color-progressive;
// Box Sizes
diff --git a/src/themes/mediawiki/elements.less
b/src/themes/mediawiki/elements.less
index 7de6231..8008946 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -194,16 +194,16 @@
&.oo-ui-flaggedElement {
&-progressive {
- .mw-framed-button-colored(
@color-progressive, @color-progressive-fade, @color-progressive-active,
@border-color-progressive-active, @color-progressive-focus );
+ .mw-framed-button-colored(
@color-progressive, @background-color-progressive, @color-progressive-active,
@border-color-progressive-active, @color-progressive-focus );
}
// Deprecated in 0.16.1
&-constructive {
- .mw-framed-button-colored(
@color-progressive, @color-progressive-fade, @color-progressive-active,
@border-color-progressive-active, @color-progressive-focus );
+ .mw-framed-button-colored(
@color-progressive, @background-color-progressive, @color-progressive-active,
@border-color-progressive-active, @color-progressive-focus );
}
&-destructive {
- .mw-framed-button-colored(
@color-destructive, @color-destructive-fade, @color-destructive-active,
@border-color-destructive-active, @color-destructive-focus );
+ .mw-framed-button-colored(
@color-destructive, @background-color-destructive, @color-destructive-active,
@border-color-destructive-active, @color-destructive-focus );
}
}
&.oo-ui-flaggedElement-primary.oo-ui-flaggedElement {
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index d90f91a..4acb93a 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -277,7 +277,7 @@
&-supported.oo-ui-widget-enabled {
&.oo-ui-selectFileWidget-canDrop.oo-ui-selectFileWidget-dropTarget {
- background-color: @color-progressive-fade;
+ background-color: @background-color-progressive;
}
}
@@ -908,10 +908,16 @@
.theme-oo-ui-labelWidget () {}
.theme-oo-ui-optionWidget () {
- padding: 0.25em 0.5em;
border: 0;
+ padding: 0.25em 0.5em;
+ .oo-ui-transition(
+ background-color @transition-ease-quick,
+ color @transition-ease-quick
+ );
- &-highlighted {
+
+ &-highlighted,
+ .oo-ui-selectWidget-depressed &:hover {
background-color: #eee;
}
@@ -920,10 +926,11 @@
}
.oo-ui-selectWidget-depressed &-selected,
+ .oo-ui-selectWidget-depressed &-selected:hover, // for
`.oo-ui-outlineSelectWidget`
.oo-ui-selectWidget-pressed &-pressed,
- .oo-ui-selectWidget-pressed &-pressed&-highlighted,
- .oo-ui-selectWidget-pressed &-pressed&-highlighted&-selected {
- background-color: @background-color-pressed;
+ .oo-ui-selectWidget-pressed &-pressed&-highlighted {
+ background-color: @background-color-progressive-hover;
+ color: @color-progressive;
}
&.oo-ui-widget-disabled {
@@ -990,8 +997,8 @@
&.oo-ui-optionWidget {
&-selected {
- background-color: @background-color-selected;
- color: rgba( 0, 0, 0, 0.8 );
+ background-color: @background-color-progressive;
+ color: @color-progressive;
.oo-ui-iconElement-icon {
display: none;
@@ -1002,7 +1009,8 @@
color: @color-emphasized;
}
&-selected&-highlighted {
- background-color: @background-color-selected;
+ background-color: @background-color-progressive-hover;
+ color: @color-progressive;
}
}
}
@@ -1053,10 +1061,10 @@
}
}
- .oo-ui-selectWidget-depressed &.oo-ui-optionWidget-selected {
+ /*.oo-ui-selectWidget-depressed &.oo-ui-optionWidget-selected {
background-color: @background-color-pressed;
text-shadow: @text-shadow-default;
- }
+ }*/
&.oo-ui-flaggedElement-important {
font-weight: bold;
--
To view, visit https://gerrit.wikimedia.org/r/306293
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id1312fee5bb8ba4064ec0f2e6b6c6cd7521a260c
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
