From fc585000a0c603f75f275a5da153781d1b60a1ac Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Tue, 1 Mar 2022 01:23:23 +0800
Subject: [PATCH] Datetime interface improvements (#11783)

* Datetime interface improvements

* tweak click event
---
 app/src/interfaces/datetime/datetime.vue | 26 ++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/app/src/interfaces/datetime/datetime.vue b/app/src/interfaces/datetime/datetime.vue
index bef0444955..3ace5b99f8 100644
--- a/app/src/interfaces/datetime/datetime.vue
+++ b/app/src/interfaces/datetime/datetime.vue
@@ -3,7 +3,11 @@
 		<template #activator="{ toggle, active }">
 			<v-input :active="active" clickable readonly :model-value="displayValue" :disabled="disabled" @click="toggle">
 				<template v-if="!disabled" #append>
-					<v-icon :name="value ? 'close' : 'today'" :class="{ active }" @click.stop="unsetValue" />
+					<v-icon
+						:name="value ? 'clear' : 'today'"
+						:class="{ active, 'clear-icon': value, 'today-icon': !value }"
+						v-on="{ click: value ? unsetValue : null }"
+					/>
 				</template>
 			</v-input>
 		</template>
@@ -93,7 +97,9 @@ export default defineComponent({
 			}
 		}
 
-		function unsetValue() {
+		function unsetValue(e: any) {
+			e.preventDefault();
+			e.stopPropagation();
 			emit('input', null);
 		}
 
@@ -103,7 +109,19 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.v-icon.active {
-	--v-icon-color: var(--primary);
+.v-icon {
+	&.today-icon {
+		&:hover,
+		&.active {
+			--v-icon-color: var(--primary);
+		}
+	}
+
+	&.clear-icon {
+		&:hover,
+		&.active {
+			--v-icon-color: var(--danger);
+		}
+	}
 }
 </style>