[MediaWiki-commits] [Gerrit] oojs/ui[master]: MediaWiki theme: Make ToggleSwitchWidget's disabled state fo...

[jenkins-bot (Code Review)]

jenkins-bot has submitted this change and it was merged.

Change subject: MediaWiki theme: Make ToggleSwitchWidget's disabled state 
follow enabled
..


MediaWiki theme: Make ToggleSwitchWidget's disabled state follow enabled

After changes introduced in I25e387e33da672455a09252632d174d1dc067405
ToggleSwitchWidget's grip is still not following the same visual logic
in disabled state. This patch introduces outlined circle - supported
by `box-shadow` because of increasing contrast to `background-color` -
when widget is disabled.
Also cleaning up and unifying the different disabled variables. And
exchanging minor occurence of fixed value with variable.

Bug: T143376
Change-Id: I6f8b45303474a9ffce5f2acd1fc5db38ef211f29
---
M src/themes/mediawiki/common.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/widgets.less
3 files changed, 20 insertions(+), 13 deletions(-)

Approvals:
  Jforrester: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 04c5eae..f64468f 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -29,9 +29,9 @@
 
 // Disabled Widgets
 @background-color-disabled: #f3f3f3;
-@background-color-filled-disabled: #ddd;
+@background-color-disabled-filled: #ddd;
 @color-disabled: #ccc;
-@color-disabled-framed: #fff;
+@color-disabled-filled: #fff;
 @opacity-disabled: 0.2;
 
 // Invalid Widget (validation error feedback)
@@ -49,6 +49,7 @@
 
 @border-default: @border-width-default solid @border-color-default;
 @border-disabled: @border-width-default solid @border-color-disabled;
+@border-disabled-filled: @border-width-default solid 
@border-color-disabled-filled;
 @border-dialog: @border-width-default solid @border-color-dialog;
 @border-menu: @border-dialog;
 
@@ -56,7 +57,7 @@
 @border-color-default-hover: #aaa;
 @border-color-default-focus: @color-progressive-focus;
 @border-color-disabled: #ddd;
-@border-color-disabled-framed: @color-disabled-framed;
+@border-color-disabled-filled: @color-disabled-filled;
 @border-color-progressive-active: #859dcc; // equivalents `fade( 
@color-progressive-active, 50% )`
 @border-color-destructive-active: #b77c79; // equivalents `fade( 
@color-destructive-active, 50% )`
 @border-color-focus-inset: @color-default-light;
@@ -71,6 +72,7 @@
 @box-shadow-menu: @box-shadow-dialog;
 @box-shadow-focus-default: inset 0 0 0 1px @color-progressive;
 @box-shadow-focus-inset: inset 0 0 0 1px @color-progressive, inset 0 0 0 2px 
@color-default-light;
+@box-shadow-disabled-filled: inset 0 0 0 1px @color-disabled-filled;
 
 @line-height-default: 1.4;
 
diff --git a/src/themes/mediawiki/elements.less 
b/src/themes/mediawiki/elements.less
index 7bba06c..7de6231 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -147,14 +147,14 @@
 
&.oo-ui-widget-disabled {
& > .oo-ui-buttonElement-button {
-   background-color: 
@background-color-filled-disabled;
-   color: @color-disabled-framed;
+   background-color: 
@background-color-disabled-filled;
+   color: @color-disabled-filled;
border: @border-disabled;
}
 
& + .oo-ui-widget-disabled {
& > .oo-ui-buttonElement-button {
-   border-left-color: 
@border-color-disabled-framed;
+   border-left-color: 
@border-color-disabled-filled;
}
}
}
diff --git a/src/themes/mediawiki/widgets.less 
b/src/themes/mediawiki/widgets.less
index e5e074c..f31185f 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -403,7 +403,7 @@
}
 
&:disabled + span {
-   background-color: @background-color-filled-disabled;
+   background-color: @background-color-disabled-filled;
border-color: @border-color-disabled;
}
 
@@ -540,7 +540,7 @@
}
 
&:disabled + span {
-   background-color: @background-color-filled-disabled;
+   background-color: @background-color-disabled-filled;
border-color: @border-color-disabled;
}
 
@@ -1110,7 +1110,7 @@
.oo-ui-popupWidget-anchor:after {
bottom: -@anchor-size - 1px;
left: -@anchor-size + 1px;
-   border-bottom-color: @border-color-disabled-framed;
+   border-bottom-color: @border-color-disabled-filled;
border-width: 

[MediaWiki-commits] [Gerrit] oojs/ui[master]: MediaWiki theme: Make ToggleSwitchWidget's disabled state fo...

[VolkerE (Code Review)]

VolkerE has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/305605

Change subject: MediaWiki theme: Make ToggleSwitchWidget's disabled state 
follow enabled
..

MediaWiki theme: Make ToggleSwitchWidget's disabled state follow enabled

After changes introduced in I25e387e33da672455a09252632d174d1dc067405
ToggleSwitchWidget's grip is still not following the same visual logic
in disabled state. This patch introduces outlined circle - supported
by `box-shadow` because of increasing contrast to `background-color` -
when widget is disabled.
Also cleaning up and unifying the different disabled variables. And
exchanging minor occurence of fixed value with variable.

Change-Id: I6f8b45303474a9ffce5f2acd1fc5db38ef211f29
---
M src/themes/mediawiki/common.less
M src/themes/mediawiki/elements.less
M src/themes/mediawiki/widgets.less
3 files changed, 20 insertions(+), 13 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/05/305605/1

diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less
index 04c5eae..f64468f 100644
--- a/src/themes/mediawiki/common.less
+++ b/src/themes/mediawiki/common.less
@@ -29,9 +29,9 @@
 
 // Disabled Widgets
 @background-color-disabled: #f3f3f3;
-@background-color-filled-disabled: #ddd;
+@background-color-disabled-filled: #ddd;
 @color-disabled: #ccc;
-@color-disabled-framed: #fff;
+@color-disabled-filled: #fff;
 @opacity-disabled: 0.2;
 
 // Invalid Widget (validation error feedback)
@@ -49,6 +49,7 @@
 
 @border-default: @border-width-default solid @border-color-default;
 @border-disabled: @border-width-default solid @border-color-disabled;
+@border-disabled-filled: @border-width-default solid 
@border-color-disabled-filled;
 @border-dialog: @border-width-default solid @border-color-dialog;
 @border-menu: @border-dialog;
 
@@ -56,7 +57,7 @@
 @border-color-default-hover: #aaa;
 @border-color-default-focus: @color-progressive-focus;
 @border-color-disabled: #ddd;
-@border-color-disabled-framed: @color-disabled-framed;
+@border-color-disabled-filled: @color-disabled-filled;
 @border-color-progressive-active: #859dcc; // equivalents `fade( 
@color-progressive-active, 50% )`
 @border-color-destructive-active: #b77c79; // equivalents `fade( 
@color-destructive-active, 50% )`
 @border-color-focus-inset: @color-default-light;
@@ -71,6 +72,7 @@
 @box-shadow-menu: @box-shadow-dialog;
 @box-shadow-focus-default: inset 0 0 0 1px @color-progressive;
 @box-shadow-focus-inset: inset 0 0 0 1px @color-progressive, inset 0 0 0 2px 
@color-default-light;
+@box-shadow-disabled-filled: inset 0 0 0 1px @color-disabled-filled;
 
 @line-height-default: 1.4;
 
diff --git a/src/themes/mediawiki/elements.less 
b/src/themes/mediawiki/elements.less
index 7bba06c..7de6231 100644
--- a/src/themes/mediawiki/elements.less
+++ b/src/themes/mediawiki/elements.less
@@ -147,14 +147,14 @@
 
&.oo-ui-widget-disabled {
& > .oo-ui-buttonElement-button {
-   background-color: 
@background-color-filled-disabled;
-   color: @color-disabled-framed;
+   background-color: 
@background-color-disabled-filled;
+   color: @color-disabled-filled;
border: @border-disabled;
}
 
& + .oo-ui-widget-disabled {
& > .oo-ui-buttonElement-button {
-   border-left-color: 
@border-color-disabled-framed;
+   border-left-color: 
@border-color-disabled-filled;
}
}
}
diff --git a/src/themes/mediawiki/widgets.less 
b/src/themes/mediawiki/widgets.less
index e5e074c..f31185f 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -403,7 +403,7 @@
}
 
&:disabled + span {
-   background-color: @background-color-filled-disabled;
+   background-color: @background-color-disabled-filled;
border-color: @border-color-disabled;
}
 
@@ -540,7 +540,7 @@
}
 
&:disabled + span {
-   background-color: @background-color-filled-disabled;
+   background-color: @background-color-disabled-filled;
border-color: @border-color-disabled;
}
 
@@ -1110,7 +1110,7 @@
.oo-ui-popupWidget-anchor:after {
bottom: -@anchor-size - 1px;
left: -@anchor-size + 1px;
-   border-bottom-color: @border-color-disabled-framed;
+   border-bottom-color: @border-color-disabled-filled;