From: Volker E Date: Fri, 28 Oct 2016 02:23:49 +0000 (-0700) Subject: Align mw.widgets.DateInputWidget to OOjs UI's MediaWiki theme widgets X-Git-Tag: 1.31.0-rc.0~4482^2 X-Git-Url: http://git.cyclocoop.org/%24image?a=commitdiff_plain;h=53913c9961cd88124bc0eb81706caa940b5bac36;p=lhc%2Fweb%2Fwiklou.git 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 --- diff --git a/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less b/resources/src/mediawiki.widgets/mw.widgets.CalendarWidget.less index 4d904964ec..2fe5d3d2db 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; + } + + &-item { + .transition( ~'background-color 250ms, color 250ms' ); -.mw-widget-calendarWidget-item:hover { - background-color: #eee; + &: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 46e6b62ac7..8ba9a99162 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; + } } } }