jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/318485 )
Change subject: Align mw.widgets.DateInputWidget to OOjs UI's MediaWiki theme
widgets
......................................................................
Align mw.widgets.DateInputWidget to OOjs UI's MediaWiki theme widgets
Aligning mw.widgets.DateInputWidget to improved color palette and to
similar MediaWiki theme widgets. Removing distinction of theme specific
styles for now. Introducing transitions in several places to improve
user experience and changing CalendarWidget to `box-sizing: border-box`
to enable border on IE 8.
Bug: T149270
Change-Id: I6b5b99f444a02f68933c85ccd2b8898d3a8758bf
---
M resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
M resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
2 files changed, 103 insertions(+), 103 deletions(-)
Approvals:
Bartosz Dziewoński: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
index 4d90496..2fe5d3d 100644
--- a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
+++ b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less
@@ -5,6 +5,8 @@
* @license The MIT License (MIT); see LICENSE.txt
*/
+@import 'mediawiki.mixins';
+
@calendarWidth: 21em;
@calendarHeight: 14em;
@@ -14,7 +16,7 @@
.mw-widget-calendarWidget-header {
position: relative;
- line-height: 2.5em;
+ line-height: 2.5;
}
.mw-widget-calendarWidget-header .oo-ui-buttonWidget {
@@ -64,16 +66,12 @@
height: @calendarHeight;
}
- .mw-widget-calendarWidget-old-body {
- // background: #fdd;
- }
-
-
.mw-widget-calendarWidget-body:not(.mw-widget-calendarWidget-old-body):first-child
{
+ .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body
):first-child {
margin-top: -@calendarHeight;
margin-left: -@calendarWidth;
}
-
.mw-widget-calendarWidget-body:not(.mw-widget-calendarWidget-old-body):last-child
{
+ .mw-widget-calendarWidget-body:not( .mw-widget-calendarWidget-old-body
):last-child {
margin-top: 0;
margin-left: 0;
}
@@ -86,7 +84,7 @@
.mw-widget-calendarWidget-body:first-child {
margin-top: 0 !important;
margin-left: 0 !important;
- transition: 0.5s margin-left;
+ .transition( margin-left 500ms );
}
}
@@ -97,7 +95,7 @@
.mw-widget-calendarWidget-body:first-child {
margin-left: -@calendarWidth !important;
margin-top: 0 !important;
- transition: 0.5s margin-left;
+ .transition( margin-left 500ms );
}
}
@@ -112,7 +110,7 @@
.mw-widget-calendarWidget-body:first-child {
margin-left: 0 !important;
margin-top: 0 !important;
- transition: 0.5s margin-top;
+ .transition( margin-top 500ms );
}
}
@@ -127,7 +125,7 @@
.mw-widget-calendarWidget-body:first-child {
margin-left: 0 !important;
margin-top: -@calendarHeight !important;
- transition: 0.5s margin-top;
+ .transition( margin-top 500ms );
}
}
@@ -149,15 +147,15 @@
width: @calendarWidth / 7;
line-height: @calendarHeight / 7;
// Don't overlap the hacked-up fake box-shadow border we get when
focussed
- &:nth-child(7n) {
+ &:nth-child( 7n ) {
width: @calendarWidth / 7 - 0.2em;
margin-right: 0.2em;
}
- &:nth-child(7n+1) {
+ &:nth-child( 7n+1 ) {
width: @calendarWidth / 7 - 0.2em;
margin-left: 0.2em;
}
- &:nth-child(42) ~ & {
+ &:nth-child( 42 ) ~ & {
line-height: @calendarHeight / 7 - 0.2em;
margin-bottom: 0.2em;
}
@@ -168,15 +166,15 @@
width: @calendarWidth / 2;
line-height: @calendarHeight / 6;
// Don't overlap the hacked-up fake box-shadow border we get when
focussed
- &:nth-child(2n) {
+ &:nth-child( 2n ) {
width: @calendarWidth / 2 - 0.2em;
margin-right: 0.2em;
}
- &:nth-child(2n+1) {
+ &:nth-child( 2n+1 ) {
width: @calendarWidth / 2 - 0.2em;
margin-left: 0.2em;
}
- &:nth-child(10) ~ & {
+ &:nth-child( 10 ) ~ & {
line-height: @calendarHeight / 6 - 0.2em;
margin-bottom: 0.2em;
}
@@ -187,15 +185,15 @@
width: @calendarWidth / 5;
line-height: @calendarHeight / 4;
// Don't overlap the hacked-up fake box-shadow border we get when
focussed
- &:nth-child(5n) {
+ &:nth-child( 5n ) {
width: @calendarWidth / 5 - 0.2em;
margin-right: 0.2em;
}
- &:nth-child(5n+1) {
+ &:nth-child( 5n+1 ) {
width: @calendarWidth / 5 - 0.2em;
margin-left: 0.2em;
}
- &:nth-child(15) ~ & {
+ &:nth-child( 15 ) ~ & {
line-height: @calendarHeight / 4 - 0.2em;
margin-bottom: 0.2em;
}
@@ -207,37 +205,49 @@
/* Theme-specific */
.mw-widget-calendarWidget {
- box-shadow: inset 0 0 0 1px #ccc;
-}
+ .box-sizing( border-box );
+ border: 1px solid #a2a9b1;
+ .transition( ~'border-color 100ms, box-shadow 100ms' );
-.mw-widget-calendarWidget:focus {
- outline: none;
- box-shadow: inset 0 0 0 2px #36c;
-}
+ &:focus {
+ border-color: #36c;
+ box-shadow: inset 0 0 0 1px #36c;
+ outline: 0;
+ }
-.mw-widget-calendarWidget-day {
- color: #444;
- border-radius: 0.1em;
-}
+ &-day {
+ color: #222;
+ border-radius: 2px;
+ }
-.mw-widget-calendarWidget-day-heading {
- font-weight: bold;
- color: #555;
-}
+ &-day-heading {
+ color: #54595d;
+ font-weight: bold;
+ }
-.mw-widget-calendarWidget-day-additional {
- color: #aaa;
-}
+ &-day-additional {
+ color: #a2a9b1;
-.mw-widget-calendarWidget-day-today {
- box-shadow: inset 0 0 0 1px #3787fb;
-}
+ &:hover {
+ color: #222;
+ }
+ }
-.mw-widget-calendarWidget-item-selected {
- background-color: #d8e6fe;
- color: #3787fb;
-}
+ &-day-today {
+ box-shadow: inset 0 0 0 1px #36c;
+ }
-.mw-widget-calendarWidget-item:hover {
- background-color: #eee;
+ &-item {
+ .transition( ~'background-color 250ms, color 250ms' );
+
+ &:hover {
+ background-color: #36c;
+ color: #fff;
+ }
+
+ &-selected {
+ background-color: #2a4b8d;
+ color: #fff;
+ }
+ }
}
diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
index 46e6b62..8ba9a99 100644
--- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
+++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
@@ -21,6 +21,7 @@
.oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) {
margin-right: @spacing;
+
&:last-child {
margin-right: @cancelled-spacing;
}
@@ -31,15 +32,29 @@
.mw-widget-dateInputWidget {
display: inline-block;
position: relative;
+ width: 21em;
+ margin-top: 0.25em;
+ .oo-ui-inline-spacing( 0.5em );
+ margin-bottom: 0.25em;
+ margin-left: 0;
&-handle {
- width: 100%;
+ background-color: #fff;
display: inline-block;
- cursor: pointer;
position: relative;
-
+ .oo-ui-box-sizing( border-box );
+ width: 100%;
.oo-ui-unselectable();
- .oo-ui-box-sizing(border-box);
+ cursor: pointer;
+ padding: 0.5em 1em;
+ border: 1px solid #a2a9b1;
+ border-radius: 2px;
+ outline: 0;
+ line-height: 1.275;
+
+ > .oo-ui-labelElement-label {
+ padding: 0;
+ }
> .oo-ui-indicatorElement-indicator {
display: none;
@@ -51,76 +66,37 @@
position: absolute;
top: 0;
right: 0;
- height: 100%;
- }
-
- &.oo-ui-widget-disabled .mw-widget-dateInputWidget-handle {
- cursor: default;
- }
-
- &-calendar {
- position: absolute;
- z-index: 1;
- }
-
- // Theme-specific styles
- width: 21em;
- margin: 0.25em 0;
-
- .oo-ui-inline-spacing(0.5em);
-
- &-handle {
- padding: 0.5em 1em;
- border: 1px solid #ccc;
- border-radius: 0.1em;
- line-height: 1.275em;
- background-color: #fff;
-
- > .oo-ui-labelElement-label {
- padding: 0;
- }
- }
-
- &.oo-ui-indicatorElement .mw-widget-dateInputWidget-handle >
.oo-ui-indicatorElement-indicator {
width: @indicator-size;
+ height: 100%;
margin: 0 0.775em;
- }
-
- > .oo-ui-textInputWidget input {
- padding-left: 1em;
}
> .oo-ui-textInputWidget {
z-index: 2;
+
+ & input {
+ padding-left: 1em;
+ }
}
&-calendar {
background-color: #fff;
+ position: absolute;
margin-top: -2px;
+ box-shadow: 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 );
+ z-index: 1;
&:focus {
+ box-shadow: inset 0 0 0 1px #36c, 0 0.15em 0 0 rgba( 0,
0, 0, 0.15 );
z-index: 3;
}
}
- &.oo-ui-widget-enabled {
- .mw-widget-dateInputWidget-handle:hover {
- border-color: #36c;
- }
- }
-
- &.oo-ui-widget-disabled {
+ &-empty {
.mw-widget-dateInputWidget-handle {
- color: #ccc;
- text-shadow: 0 1px 1px #fff;
- border-color: #ddd;
- background-color: #f3f3f3;
-
- > .oo-ui-indicatorElement-indicator {
- opacity: 0.2;
- }
+ color: #54595d;
+ outline: 0;
}
-
}
&.oo-ui-flaggedElement-invalid {
@@ -130,9 +106,23 @@
}
}
- &-empty {
+ &.oo-ui-widget-enabled {
+ .mw-widget-dateInputWidget-handle:hover {
+ border-color: #72777d;
+ }
+ }
+
+ &.oo-ui-widget-disabled {
.mw-widget-dateInputWidget-handle {
- color: #ccc;
+ background-color: #eaecf0;
+ color: #72777d;
+ border-color: #c8ccd1;
+ text-shadow: 0 1px 1px #fff;
+ cursor: default;
+
+ > .oo-ui-indicatorElement-indicator {
+ opacity: 0.51;
+ }
}
}
}
--
To view, visit https://gerrit.wikimedia.org/r/318485
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I6b5b99f444a02f68933c85ccd2b8898d3a8758bf
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Jack Phoenix <[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
