From be58077025389e8f9650f9190a0724fd0e2f6915 Mon Sep 17 00:00:00 2001
From: PikachuEXE <pikachuexe@gmail.com>
Date: Mon, 6 Sep 2021 18:09:11 +0800
Subject: [PATCH] * Improve style of top nav search input (#1392)

* * Improve style of top nav search input

* Implement clear input text on input

* ! Fix to only have top nav input to add new clear text box button

* * Update button design & fix accessibility flaw

* * Update spacing of new button

* * Update input box padding-left to use the same value as padding-right

* * Updating button padding
---
 src/renderer/components/ft-input/ft-input.css | 53 +++++++++++++++++++
 src/renderer/components/ft-input/ft-input.js  |  9 ++++
 src/renderer/components/ft-input/ft-input.vue | 15 +++++-
 src/renderer/components/top-nav/top-nav.vue   |  1 +
 static/locales/en-US.yaml                     |  4 +-
 5 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ft-input/ft-input.css b/src/renderer/components/ft-input/ft-input.css
index 293178fa..82b34c07 100644
--- a/src/renderer/components/ft-input/ft-input.css
+++ b/src/renderer/components/ft-input/ft-input.css
@@ -2,6 +2,47 @@
   position: relative;
 }
 
+.clearInputTextButton {
+  position: absolute;
+  /* horizontal intentionally reduced to keep "I-beam pointer" visible */
+  padding: 10px 8px;
+  top: 5px;
+  left: 0;
+  cursor: pointer;
+  border-radius: 200px 200px 200px 200px;
+  color: var(--primary-text-color);
+}
+
+.clearInputTextButton:hover {
+  background-color: var(--side-nav-hover-color);
+  -moz-transition: background 0.2s ease-in;
+  -o-transition: background 0.2s ease-in;
+  transition: background 0.2s ease-in;
+}
+
+.forceTextColor .clearInputTextButton:hover {
+  background-color: var(--primary-color-hover);
+}
+
+.clearInputTextButton:active {
+  background-color: var(--tertiary-text-color);
+  -moz-transition: background 0.2s ease-in;
+  -o-transition: background 0.2s ease-in;
+  transition: background 0.2s ease-in;
+}
+
+.search .clearInputTextButton {
+  top: 12px;
+}
+
+.forceTextColor .clearInputTextButton {
+  color: #EEEEEE;
+}
+
+.forceTextColor .clearInputTextButton:active {
+  background-color: var(--primary-color-active);
+}
+
 .ft-input {
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -61,6 +102,14 @@
   color: #EEEEEE;
 }
 
+.ft-input-component.showArrow .ft-input {
+  /*
+  With arrow present means
+  the text might get under the arrow with normal padding
+   */
+  padding-right: 2em;
+}
+
 .inputAction:hover {
   background-color: var(--side-nav-hover-color);
   -moz-transition: background 0.2s ease-in;
@@ -106,3 +155,7 @@
   background-color: #ccc;
 /*   color: white; */
 }
+
+.showClearTextButton .ft-input {
+  padding-left: 2em;
+}
diff --git a/src/renderer/components/ft-input/ft-input.js b/src/renderer/components/ft-input/ft-input.js
index e7e9608f..913abcd9 100644
--- a/src/renderer/components/ft-input/ft-input.js
+++ b/src/renderer/components/ft-input/ft-input.js
@@ -19,6 +19,10 @@ export default Vue.extend({
       type: Boolean,
       default: true
     },
+    showClearTextButton: {
+      type: Boolean,
+      default: false
+    },
     showLabel: {
       type: Boolean,
       default: false
@@ -97,6 +101,11 @@ export default Vue.extend({
       this.$emit('input', this.inputData)
     },
 
+    handleClearTextClick: function () {
+      this.inputData = ''
+      this.$emit('input', this.inputData)
+    },
+
     addListener: function () {
       const inputElement = document.getElementById(this.id)
 
diff --git a/src/renderer/components/ft-input/ft-input.vue b/src/renderer/components/ft-input/ft-input.vue
index 19471a07..2bbf9834 100644
--- a/src/renderer/components/ft-input/ft-input.vue
+++ b/src/renderer/components/ft-input/ft-input.vue
@@ -3,7 +3,9 @@
     class="ft-input-component"
     :class="{
       search: isSearch,
-      forceTextColor: forceTextColor
+      forceTextColor: forceTextColor,
+      showArrow: showArrow,
+      showClearTextButton: showClearTextButton
     }"
   >
     <label
@@ -18,6 +20,17 @@
         :tooltip="tooltip"
       />
     </label>
+    <font-awesome-icon
+      v-if="showClearTextButton"
+      icon="times-circle"
+      class="clearInputTextButton"
+      tabindex="0"
+      role="button"
+      title="$t('Search Bar.Clear Input')"
+      @click="handleClearTextClick"
+      @keydown.space.prevent="handleClearTextClick"
+      @keydown.enter.prevent="handleClearTextClick"
+    />
     <input
       :id="id"
       v-model="inputData"
diff --git a/src/renderer/components/top-nav/top-nav.vue b/src/renderer/components/top-nav/top-nav.vue
index d4a09ee3..a714ad77 100644
--- a/src/renderer/components/top-nav/top-nav.vue
+++ b/src/renderer/components/top-nav/top-nav.vue
@@ -70,6 +70,7 @@
           :select-on-focus="true"
           :data-list="searchSuggestionsDataList"
           :spellcheck="false"
+          :show-clear-text-button="true"
           @input="getSearchSuggestionsDebounce"
           @click="goToSearch"
         />
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 98093316..df8d415e 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -38,6 +38,8 @@ A new blog is now available, $. Click to view more: A new blog is now available,
 
 # Search Bar
 Search / Go to URL: Search / Go to URL
+Search Bar:
+  Clear Input: Clear Input
   # In Filter Button
 Search Filters:
   Search Filters: Search Filters
@@ -84,7 +86,7 @@ Subscriptions:
   Refresh Subscriptions: Refresh Subscriptions
   Load More Videos: Load More Videos
 More: More
-Trending: 
+Trending:
   Trending: Trending
   Default: Default
   Music: Music