* 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

@@ -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;
+}

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)
 

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"

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"
         />

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