From 7626edeedbb50a8de28caebe73df3da7a7bff0eb Mon Sep 17 00:00:00 2001 From: Volker E Date: Fri, 18 Aug 2017 18:02:02 -0700 Subject: [PATCH] Align to WikimediaUI themed widgets Aligning to WikimediaUI themed widgets. As of now, Calendar- & DateTimeInputWidget have been user-interface wise in limbo between WikimediaUI style and non-themed style. Let's align it to former and ensure theme-dependency in a future step. Also - massively cleaning up LESS, - removing duplicated, already inherited properties and - fixing little annoyances like `line-height` in fields being wrong or - `:focus` states being disconnected from the rest. Bug: T189352 Change-Id: Ia39254aec3535aed9e3d3e01b3fc01c25cd72c2e --- .../CalendarWidget.less | 52 +++-- .../DateTimeInputWidget.less | 187 +++++++++--------- ...ediawiki.widgets.datetime.definitions.less | 62 +++++- 3 files changed, 196 insertions(+), 105 deletions(-) diff --git a/resources/src/mediawiki.widgets.datetime/CalendarWidget.less b/resources/src/mediawiki.widgets.datetime/CalendarWidget.less index 093c58b28a..e7afff8a5b 100644 --- a/resources/src/mediawiki.widgets.datetime/CalendarWidget.less +++ b/resources/src/mediawiki.widgets.datetime/CalendarWidget.less @@ -2,10 +2,20 @@ @import 'mediawiki.widgets.datetime.definitions'; .mw-widgets-datetime-calendarWidget { + background-color: @background-color-base; display: inline-block; position: relative; - vertical-align: middle; + border: @border-base; + border-radius: @border-radius-base; padding: 0.5em; + box-shadow: @box-shadow-dialog; + vertical-align: middle; + + &:focus { + border-color: @color-progressive; + outline: 0; + box-shadow: @box-shadow-base--focus, @box-shadow-dialog; + } &.mw-widgets-datetime-calendarWidget-dependent { display: block; @@ -22,22 +32,23 @@ } } - background-color: #fff; - border: 1px solid #ccc; - &.mw-widgets-datetime-calendarWidget-dependent { margin-top: -1px; - border-top: 1px solid #fff; } &-heading { + font-weight: bold; text-align: center; vertical-align: middle; - font-weight: bold; white-space: nowrap; .mw-widgets-datetime-calendarWidget-previous { float: left; + + // Overwrite OOUI's `.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child` + &:first-child { + margin-left: 0; + } } .mw-widgets-datetime-calendarWidget-next { float: right; @@ -52,20 +63,37 @@ .oo-ui-buttonElement-button { width: 100%; - border: 1px dotted rgba( 255, 255, 255, 0 ); - .oo-ui-box-sizing( border-box ); + border: 1px solid rgba( 255, 255, 255, 0 ); + .oo-ui-transition( + background-color @transition-base, + color @transition-base, + border-color @transition-base + ); } - &.mw-widgets-datetime-calendarWidget-extra .oo-ui-buttonElement-button .oo-ui-labelElement-label { - color: #bbb; + &.mw-widgets-datetime-calendarWidget-extra .oo-ui-buttonElement-button { + .oo-ui-labelElement-label { + color: @color-base--subtle; + } + + &:hover .oo-ui-labelElement-label { + color: @color-base--inverted; + } } &.mw-widgets-datetime-calendarWidget-selected .oo-ui-buttonElement-button { - background-color: #def; + background-color: #2a4b8d; + .oo-ui-labelElement-label { - color: #38f; + color: @color-base--inverted; } } + + &.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover { + background-color: @color-progressive; + color: @color-base--inverted; + border-color: @color-progressive; + } } } diff --git a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less index f205da3bc0..510eb21533 100644 --- a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less +++ b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less @@ -4,6 +4,9 @@ .mw-widgets-datetime-dateTimeInputWidget { display: inline-block; position: relative; + width: 100%; + max-width: @max-width-input; + .oo-ui-inline-spacing( 0.5em ); vertical-align: middle; &-fields { @@ -13,143 +16,151 @@ .oo-ui-unselectable(); > .mw-widgets-datetime-dateTimeInputWidget-field { - .oo-ui-box-sizing(border-box); - + .oo-ui-box-sizing( border-box ); display: table-cell; white-space: pre; } } &-handle { - width: 100%; + background-color: @background-color-base; + color: @color-base; display: inline-block; - overflow: hidden; - - // Needed for proper behavior with overflow: hidden. + .oo-ui-box-sizing( border-box ); + width: 100%; + height: @size-base; + border: @border-base; + border-radius: @border-radius-base; + padding: 0 @padding-horizontal-input-text; + box-shadow: inset 0 0 0 0 @color-progressive; + // Needed for proper behavior with `overflow: hidden`. vertical-align: bottom; - + overflow: hidden; .oo-ui-unselectable(); - .oo-ui-box-sizing(border-box); + .oo-ui-transition( box-shadow @transition-base ); - > .oo-ui-indicatorElement-indicator, - > .oo-ui-iconElement-icon { - position: absolute; + > .oo-ui-iconElement-icon, + > .oo-ui-indicatorElement-indicator { background-position: center center; background-repeat: no-repeat; + position: absolute; + top: 0; z-index: 1; } - } - - margin: 0.25em 0; - width: 100%; - max-width: 50em; - - .oo-ui-inline-spacing(0.5em); - - &-handle { - height: 2.5em; - border: 1px solid #ccc; - padding: 0 1em; - margin: 0; - background-color: #fff; - color: #000; - box-shadow: inset 0 0 0 0 @progressive; - border-radius: 0.1em; - .oo-ui-transition(box-shadow @quick-ease); - .oo-ui-box-sizing(border-box); - - > .oo-ui-indicatorElement-indicator { - right: 0; - } > .oo-ui-iconElement-icon { - left: 0.25em; + left: @padding-start-input-text-icon; + width: @size-icon; + height: @size-icon; } > .oo-ui-indicatorElement-indicator { - top: 0; - width: @indicator-size; - height: @indicator-size; - margin: 0.775em; - } - - > .oo-ui-iconElement-icon { - top: 0; - width: @icon-size; - height: @icon-size; - margin: 0.3em; + right: @padding-horizontal-base; + min-width: @min-size-indicator; + width: @size-indicator; + min-height: @min-size-indicator; + height: @size-indicator; + max-height: @size-base; } } &-empty &-handle { - color: #777; + color: @color-base--subtle; + } + + &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle { + padding-left: @padding-start-input-text-icon-label; + } + + &.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle { + padding-right: @size-indicator + 2 * @padding-horizontal-input-text; } &-field { - padding: 0; - margin: 0; - font-size: inherit; - font-family: inherit; background-color: transparent; color: inherit; + .oo-ui-box-sizing( border-box ); border: 0; + border-radius: @border-radius-base; + // Provide more top padding due to border not being part of the calculation + padding-top: 10 / @oo-ui-font-size-browser / @oo-ui-font-size-base; + padding-bottom: @padding-bottom-base; box-shadow: none; + font-size: inherit; + font-family: inherit; + line-height: @line-height-widget-singleline; text-align: center; - vertical-align: middle; - .oo-ui-box-sizing(border-box); + vertical-align: top; } - &.oo-ui-widget-disabled { - .mw-widgets-datetime-dateTimeInputWidget-handle { - color: #ccc; - text-shadow: 0 1px 1px #fff; - border-color: #ddd; - background-color: #f3f3f3; - - > .oo-ui-iconElement-icon, - > .oo-ui-indicatorElement-indicator { - opacity: 0.2; + &-editField { + .mw-widgets-datetime-dateTimeInputWidget-invalid { + border: 1px solid @border-color-erroneous; + box-shadow: @box-shadow-widget; + + &:focus { + border: 1px solid @border-color-erroneous; + box-shadow: @box-shadow-erroneous--focus; } } } + &-clearButton { + padding-top: 0; + } + &.oo-ui-widget-enabled { - .mw-widgets-datetime-dateTimeInputWidget-editField:hover { - background-color: #eee; - } + .mw-widgets-datetime-dateTimeInputWidget-handle { + .oo-ui-transition( border-color @transition-medium ); - &.oo-ui-flaggedElement-invalid { - .mw-widgets-datetime-dateTimeInputWidget-handle { - border-color: #f00; - box-shadow: inset 0 0 0 0 #f00; + &:hover { + border-color: @border-color-input--hover; } + } - .mw-widgets-datetime-dateTimeInputWidget-handle:focus { - border-color: #f00; - box-shadow: inset 0 0 0 0.1em #f00; + // Set on widget parent to also enable `:hover` on child elmeents + &:hover { + input, + textarea { + border-color: @border-color-input--hover; } } - } - input.mw-widgets-datetime-dateTimeInputWidget-field { - padding: 0.5em 0; - } + .mw-widgets-datetime-dateTimeInputWidget-editField:hover { + background-color: @background-color-base--hover; + } + + .mw-widgets-datetime-dateTimeInputWidget-editField:focus { + outline: 0; + box-shadow: inset 0 0 0 1px @color-progressive, 0 0 0 1px @color-progressive; + } - &-editField.mw-widgets-datetime-dateTimeInputWidget-invalid { - border: 1px solid #f00; - box-shadow: inset 0 0 0 0 #f00; + &.oo-ui-flaggedElement-invalid { + .mw-widgets-datetime-dateTimeInputWidget-handle { + border-color: @border-color-erroneous; + box-shadow: @box-shadow-widget; - &:focus { - border: 1px solid #f00; - box-shadow: inset 0 0 0 0.1em #f00; + &:focus { + border-color: @border-color-erroneous; + box-shadow: @box-shadow-erroneous--focus; + } + } } } - &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle { - padding-left: 3em; - } + &.oo-ui-widget-disabled { + .mw-widgets-datetime-dateTimeInputWidget-handle { + background-color: @background-color-base--disabled; + // Support: Safari + -webkit-text-fill-color: @color-base--disabled; + color: @color-base--disabled; + border-color: @border-color-base--disabled; + text-shadow: @text-shadow-base--disabled; + } - &.oo-ui-indicatorElement .mw-widgets-datetime-dateTimeInputWidget-handle { - padding-right: 2em; + > .oo-ui-iconElement-icon, + > .oo-ui-indicatorElement-indicator { + opacity: @opacity-base--disabled; + } } } diff --git a/resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.definitions.less b/resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.definitions.less index a9c2dd2f7b..ff0630f6bb 100644 --- a/resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.definitions.less +++ b/resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.definitions.less @@ -1,5 +1,5 @@ /*! - * OOUI defines used by the existing CSS (will make it easier to put this + * OOUI definitions used by the existing CSS (will make it easier to put this * widget in OOUI once OOUI is capable of handling it) */ @@ -19,6 +19,7 @@ .oo-ui-inline-spacing( @spacing, @cancelled-spacing: 0 ) { margin-right: @spacing; + &:last-child { margin-right: @cancelled-spacing; } @@ -31,7 +32,58 @@ transition: @value; } -@indicator-size: unit( 12 / 16 / 0.8, em ); -@icon-size: unit( 24 / 16 / 0.8, em ); -@quick-ease: 100ms ease; -@progressive: #36c; +// Variables taken from OOUI's WikimediaUI theme, see its common.less for further explanations +@oo-ui-font-size-browser: 16; // assumed browser default of `16px` +@oo-ui-font-size-base: 0.875em; // equals `14px` at browser default of `16px` + +@background-color-base: #fff; +@background-color-base--hover: #eaecf0; +@background-color-base--disabled: #eaecf0; + +@color-base: #222; +@color-base--inverted: #fff; +@color-base--subtle: #72777d; +@color-base--disabled: #72777d; +@color-progressive: #36c; +@color-erroneous: #d33; + +@min-size-indicator: 12px; +@size-base: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-base; +@size-icon: 24 / @oo-ui-font-size-browser / @oo-ui-font-size-base; +@size-indicator: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-base; +@max-width-base: 50em; +@max-width-input: @max-width-base; + +@padding-input-text: @padding-top-base @padding-horizontal-input-text @padding-bottom-base; +@padding-horizontal-base: 12 / @oo-ui-font-size-browser / @oo-ui-font-size-base; +@padding-horizontal-input-text: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-base; +@padding-top-base: 8 / @oo-ui-font-size-browser / @oo-ui-font-size-base; +@padding-bottom-base: 7 / @oo-ui-font-size-browser / @oo-ui-font-size-base; +@padding-start-input-text-icon: 6 / @oo-ui-font-size-browser / @oo-ui-font-size-base; +@padding-start-input-text-icon-label: 32 / @oo-ui-font-size-browser / @oo-ui-font-size-base; + +@border-base: 1px solid #a2a9b1; +@border-color-base--disabled: @color-base--disabled; +@border-color-base--active: #72777d; +@border-color-input--hover: @border-color-base--active; +@border-color-erroneous: @color-erroneous; + +@border-radius-base: 2px; + +@box-shadow-base--focus: inset 0 0 0 1px @color-progressive; +@box-shadow-dialog: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); +@box-shadow-widget: inset 0 0 0 1px transparent; +@box-shadow-erroneous--focus: inset 0 0 0 1px @color-erroneous; + +@line-height-widget-singleline: 15 / @oo-ui-font-size-browser / @oo-ui-font-size-base; + +@text-shadow-base: 0 1px 1px @color-base--inverted; // 'coined' effect +@text-shadow-base--disabled: @text-shadow-base; + +@opacity-base--disabled: 0.51; + +@transition-base: @transition-duration-base; +@transition-medium: @transition-duration-medium; +// Transitions > Durations +@transition-duration-base: 100ms; +@transition-duration-medium: 250ms; -- 2.20.1