Clean up ft-input for top-nav (#2279)

* Clean up ft-input for top-nav

* Even out padding on ft-input

* Remove difference in in/out transitions for input

* Alternative solution to showing clear text button

* Keep clear text button visible if applicable

* Fix typo

src/renderer/components/ft-input/ft-input.css

@@ -2,6 +2,30 @@
   position: relative;
 }
 
+.ft-input-component.showClearTextButton {
+  padding-left: 30px;
+}
+
+.ft-input-component.clearTextButtonVisible,
+.ft-input-component.showClearTextButton:focus-within {
+  padding-left: 0;
+}
+
+.clearTextButtonVisible .ft-input,
+.ft-input-component.showClearTextButton:focus-within .ft-input {
+  padding-left: 46px;
+}
+
+.ft-input-component:focus-within .clearInputTextButton {
+  opacity: 0.5;
+}
+
+.clearTextButtonVisible .clearInputTextButton.visible,
+.ft-input-component:focus-within .clearInputTextButton.visible {
+  cursor: pointer;
+  opacity: 1;
+}
+
 .disabled label, .disabled .ft-input{
   opacity: 0.4;
   cursor: not-allowed;
@@ -9,33 +33,27 @@
 
 .clearInputTextButton {
   position: absolute;
-  /* horizontal intentionally reduced to keep "I-beam pointer" visible */
+  margin: 0 3px;
-  padding: 10px 8px;
+  padding: 10px;
   top: 5px;
   left: 0;
-  cursor: pointer;
+  border-radius: 100%;
-  border-radius: 200px 200px 200px 200px;
   color: var(--primary-text-color);
-
   opacity: 0;
-
+  -moz-transition: background 0.2s ease-in;
-  -moz-transition: background 0.2s ease-in, opacity 0.2s ease-in;
+  -o-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in, opacity 0.2s ease-in;
+  transition: background 0.2s ease-in;
-  transition: background 0.2s ease-in, opacity 0.2s ease-in;
 }
 
-.clearInputTextButton:hover {
+.clearInputTextButton.visible:hover {
   background-color: var(--side-nav-hover-color);
 }
-.clearInputTextButton.visible {
-  opacity: 1;
-}
 
 .forceTextColor .clearInputTextButton:hover {
   background-color: var(--primary-color-hover);
 }
 
-.clearInputTextButton:active {
+.clearInputTextButton.visible:active {
   background-color: var(--tertiary-text-color);
   -moz-transition: background 0.2s ease-in;
   -o-transition: background 0.2s ease-in;
@@ -55,20 +73,20 @@
 }
 
 .ft-input {
-    box-sizing: border-box;
+  box-sizing: border-box;
-    -webkit-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
+  -moz-box-sizing: border-box;
-    outline: none;
+  outline: none;
-    width: 100%;
+  width: 100%;
-    padding: 1rem;
+  padding: 1rem;
-    border: none;
+  border: none;
-    background: transparent;
+  background: transparent;
-    margin-bottom: 10px;
+  margin-bottom: 10px;
-    font-size: 16px;
+  font-size: 16px;
-    height: 45px;
+  height: 45px;
-    color: var(--secondary-text-color);
+  color: var(--secondary-text-color);
-    border-radius: 5px;
+  border-radius: 5px;
-    background-color: var(--search-bar-color);
+  background-color: var(--search-bar-color);
 }
 
 .ft-input-component ::-webkit-input-placeholder {
@@ -93,10 +111,11 @@
 
 .inputAction {
   position: absolute;
-  padding: 10px 8px;
+  margin: 0 3px;
+  padding: 10px;
   top: 5px;
   right: 0;
-  border-radius: 200px 200px 200px 200px;
+  border-radius: 100%;
   color: var(--primary-text-color);
   /* this should look disabled by default */
   opacity: 50%;
@@ -125,7 +144,7 @@
   With arrow present means
   the text might get under the arrow with normal padding
    */
-  padding-right: 2em;
+  padding-right: calc(36px + 6px);
 }
 
 .inputAction.enabled:hover {
@@ -173,7 +192,3 @@
   background-color: var(--scrollbar-color-hover);
 /*   color: white; */
 }
-
-.showClearTextButton .ft-input {
-  padding-left: 2em;
-}

src/renderer/components/ft-input/ft-input.js

@@ -87,28 +87,6 @@ export default Vue.extend({
       return this.inputData.length > 0
     }
   },
-  watch: {
-    inputDataPresent: function (newVal, oldVal) {
-      if (newVal) {
-        // The button needs to be visible **immediately**
-        // To allow user to see the transition
-        this.clearTextButtonExisting = true
-        // The transition is not rendered if this property is set right after
-        // It's visible
-        setTimeout(() => {
-          this.clearTextButtonVisible = true
-        }, 0)
-      } else {
-        // Hide the button with transition
-        this.clearTextButtonVisible = false
-        // Remove the button after the transition
-        // 0.2s in CSS = 200ms in JS
-        setTimeout(() => {
-          this.clearTextButtonExisting = false
-        }, 200)
-      }
-    }
-  },
   mounted: function () {
     this.id = this._uid
     this.inputData = this.value
@@ -136,6 +114,9 @@ export default Vue.extend({
     },
 
     handleClearTextClick: function () {
+      // No action if no input text
+      if (!this.inputDataPresent) { return }
+
       this.inputData = ''
       this.handleActionIconChange()
       this.updateVisibleDataList()

src/renderer/components/ft-input/ft-input.vue

@@ -6,6 +6,7 @@
       forceTextColor: forceTextColor,
       showActionButton: showActionButton,
       showClearTextButton: showClearTextButton,
+      clearTextButtonVisible: inputDataPresent,
       disabled: disabled
     }"
   >
@@ -22,11 +23,11 @@
       />
     </label>
     <font-awesome-icon
-      v-if="showClearTextButton && clearTextButtonExisting"
+      v-if="showClearTextButton"
       icon="times-circle"
       class="clearInputTextButton"
       :class="{
-        visible: clearTextButtonVisible
+        visible: inputDataPresent
       }"
       tabindex="0"
       role="button"