DateTimeInputWidget: Fix UI/UX glitches

- Limiting focus state of inputs to datetime handle boundaries
- Showing clear button only when there's value to be cleared
- Distance clear button from input
- Removing focus outline from day and timezone values

Bug: T212047
Change-Id: I9b815f38abeacacf921873529117c51c187d7fb9

diff --git a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
index 2b61b65..a6b6de4 100644 (file)
--- a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
+++ b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
@@ -59,10 +59,6 @@
                }
        }
 
-       &-empty &-handle {
-               color: @color-base--subtle;
-       }
-
        &.oo-ui-iconElement .mw-widgets-datetime-dateTimeInputWidget-handle {
                padding-left: @padding-start-input-text-icon-label;
        }
@@ -77,8 +73,7 @@
                .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 / @ooui-font-size-browser / @ooui-font-size-base;
+               padding-top: @padding-top-base;
                padding-bottom: @padding-bottom-base;
                box-shadow: none;
                font-size: inherit;
@@ -86,6 +81,17 @@
                line-height: @line-height-widget-singleline;
                text-align: center;
                vertical-align: top;
+
+               // Day field, f.e. “Sat”
+               &:first-child {
+                       cursor: pointer;
+               }
+
+               // Day field & time zome field, f.e. “Sat” & “Z”
+               &[ tabindex='-1' ] {
+                       // Support: Firefox, Chrome
+                       outline: 0;
+               }
        }
 
        &-editField {
@@ -101,13 +107,31 @@
        }
 
        &-clearButton {
+               // Override `&-field` from above
                padding-top: 0;
+               padding-bottom: 0;
+               padding-left: @padding-start-button-clear;
+
+               // `&.oo-ui-iconElement` needed for specificity
+               &.oo-ui-iconElement > .oo-ui-buttonElement-button {
+                       padding-top: @padding-top-button-clear;
+               }
 
                .oo-ui-iconElement-icon {
                        background-size: @size-indicator @size-indicator;
                }
        }
 
+       &-empty {
+               .mw-widgets-datetime-dateTimeInputWidget-handle {
+                       color: @color-base--subtle;
+               }
+
+               .mw-widgets-datetime-dateTimeInputWidget-clearButton {
+                       display: none;
+               }
+       }
+
        &.oo-ui-widget-enabled {
                .mw-widgets-datetime-dateTimeInputWidget-handle {
                        .oo-ui-transition( border-color @transition-ease-medium );

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 58a5bc3..a0d6f4a 100644 (file)
--- a/resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.definitions.less
+++ b/resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.definitions.less
@@ -58,9 +58,11 @@
 @padding-horizontal-base: 12 / @ooui-font-size-browser / @ooui-font-size-base;
 @padding-horizontal-input-text: 8 / @ooui-font-size-browser / @ooui-font-size-base;
 @padding-top-base: 8 / @ooui-font-size-browser / @ooui-font-size-base;
+@padding-top-button-clear: 28 / @ooui-font-size-browser / @ooui-font-size-base; // As it's inside an input, we need to reduce from borders surrounding
 @padding-bottom-base: 7 / @ooui-font-size-browser / @ooui-font-size-base;
 @padding-start-input-text-icon: 6 / @ooui-font-size-browser / @ooui-font-size-base;
 @padding-start-input-text-icon-label: 32 / @ooui-font-size-browser / @ooui-font-size-base;
+@padding-start-button-clear: 4 / @ooui-font-size-browser / @ooui-font-size-base;
 
 @border-base: 1px solid #a2a9b1;
 @border-color-base--disabled: #c8ccd1;