From 36e0d44570a98d7cd732be4e0ec4e029a06301b6 Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Sat, 15 Dec 2018 12:08:39 -0800
Subject: [PATCH] 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
---
 .../DateTimeInputWidget.less                  | 36 +++++++++++++++----
 ...ediawiki.widgets.datetime.definitions.less |  2 ++
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less b/resources/src/mediawiki.widgets.datetime/DateTimeInputWidget.less
index 2b61b65a52..a6b6de4de4 100644
--- 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 58a5bc360d..a0d6f4acc4 100644
--- 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;
-- 
2.20.1