From a1ed7b2e7228df2e5f2f0ec221626154e0d38c64 Mon Sep 17 00:00:00 2001
From: Alberto <algonru@gmail.com>
Date: Sat, 19 Aug 2023 10:54:44 +0200
Subject: [PATCH] SearchBar grow/collapse behavior Improved tablet design Fixed
 some edge cases when the input was losing focus

---
 src/components/SearchBar.vue               | 57 +++++++++++++++-------
 src/components/layouts/AddressOverview.vue | 32 +++++++-----
 src/i18n/en.po                             | 34 ++++++-------
 3 files changed, 77 insertions(+), 46 deletions(-)

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 20114b544..b757249c1 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -1,16 +1,23 @@
 <template>
     <div
-        class="search-bar"
+        class="search-bar cover-all"
         @click="$refs.searchBarInput.focus()"
+        @pointerdown.prevent
         :style="{ 'max-width': `${maxWidth}` }"
     >
         <svg fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="2"/>
+            <circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="2" />
             <path d="M13.31 14.73a1 1 0 001.42-1.42l-1.42 1.42zM8.3 9.7l5.02 5.02 1.42-1.42L9.7 8.3 8.29 9.71z"
-                fill="currentColor"/>
+                fill="currentColor" />
         </svg>
-        <input ref="searchBarInput" type="text" :value="value" :placeholder="placeholderText"
-            @input="$emit('input', $event.target.value)" />
+        <input
+            ref="searchBarInput"
+            type="text" :value="value"
+            :placeholder="placeholderText"
+            @input="$emit('input', $event.target.value)"
+            @focus="handleFocus"
+            @blur="handleBlur"
+        />
         <CrossCloseButton
             class="cross-close-button"
             v-if="isInputActive"
@@ -20,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, onUnmounted, computed } from '@vue/composition-api';
+import { defineComponent, ref, onMounted, onUnmounted, computed, watch } from '@vue/composition-api';
 
 import CrossCloseButton from './CrossCloseButton.vue';
 
@@ -69,14 +76,18 @@ export default defineComponent({
             isInputFocused.value = false;
         };
 
+        const inputValue = computed(() => props.value);
+
         const isInputActive = computed(() => {
             // Only collapse if not focused and no text
-            if (!isInputFocused.value && searchBarInput.value?.value === '') return false;
+            if (!isInputFocused.value && inputValue.value === '') return false;
             return true;
         });
 
-        const handleClose = () => {
+        const handleClose = (e: Event) => {
             context.emit('input', '');
+            // Prevent the search bar from losing or gaining focus when not intended
+            e.stopImmediatePropagation();
         };
 
         onMounted(() => {
@@ -99,19 +110,12 @@ export default defineComponent({
                 });
                 observer.observe(searchBarInput.value);
             }
-
-            searchBarInput.value?.addEventListener('focus', handleFocus);
-
-            searchBarInput.value?.addEventListener('blur', handleBlur);
         });
 
         onUnmounted(() => {
             if (observer && searchBarInput.value) {
                 observer.unobserve(searchBarInput.value);
             }
-
-            searchBarInput.value?.removeEventListener('focus', handleFocus);
-            searchBarInput.value?.removeEventListener('blur', handleBlur);
         });
 
         return {
@@ -120,6 +124,8 @@ export default defineComponent({
             maxWidth,
             placeholderText,
             isInputActive,
+            handleFocus,
+            handleBlur,
             handleClose,
         };
     },
@@ -140,7 +146,8 @@ export default defineComponent({
     width: 100%;
     cursor: text;
     padding: 0.75rem 0;
-    min-width: 0;
+    margin-right: 1rem;
+    min-width: 5.5rem;
 
     transition: color var(--attr-duration) var(--nimiq-ease), max-width var(--attr-duration) var(--nimiq-ease);
 
@@ -213,7 +220,9 @@ input {
     }
 }
 
-@media (max-width: 700px) { // Full mobile breakpoint
+@media (max-width: 700px) {
+
+    // Full mobile breakpoint
     input {
         &::placeholder {
             font-weight: 600;
@@ -227,4 +236,18 @@ input {
     right: 1.75rem;
     cursor: pointer;
 }
+
+@media (min-width: 700px) and (max-width: 900px) {
+    .cover-all {
+        &:focus-within {
+            position: absolute;
+            z-index: 10;
+            background: var(--bg-primary);
+            box-shadow: 0 0 0 1rem var(--bg-primary);
+            border-radius: 6rem;
+
+            width: calc(100% - 5rem);
+        }
+    }
+}
 </style>
diff --git a/src/components/layouts/AddressOverview.vue b/src/components/layouts/AddressOverview.vue
index 904368cd4..92fc9a9f6 100644
--- a/src/components/layouts/AddressOverview.vue
+++ b/src/components/layouts/AddressOverview.vue
@@ -6,14 +6,16 @@
         >
             <div class="actions-mobile flex-row">
                 <button class="reset icon-button" @click="$router.back()"><ArrowLeftIcon/></button>
-                <SearchBar v-model="searchString"/>
+                <div class="flex-row justify-between w-full">
+                    <SearchBar v-model="searchString"/>
 
-                <CashlinkButton
-                    v-if="activeCurrency === 'nim' && unclaimedCashlinkCount"
-                    :showUnclaimedCashlinkList="showUnclaimedCashlinkList"
-                    :unclaimedCashlinkCount="unclaimedCashlinkCount"
-                    @toggle-unclaimed-cashlink-list="toggleUnclaimedCashlinkList"
-                />
+                    <CashlinkButton
+                        v-if="activeCurrency === 'nim' && unclaimedCashlinkCount"
+                        :showUnclaimedCashlinkList="showUnclaimedCashlinkList"
+                        :unclaimedCashlinkCount="unclaimedCashlinkCount"
+                        @toggle-unclaimed-cashlink-list="toggleUnclaimedCashlinkList"
+                    />
+                </div>
                 <button
                     class="reset icon-button"
                     @click="$event.currentTarget.focus() /* Required for MacOS Safari & Firefox */"
@@ -120,7 +122,7 @@
             <div class="actions flex-row">
                 <SearchBar v-model="searchString"/>
 
-                <div class="flex-row">
+                <div class="flex-row ml-auto">
                     <CashlinkButton
                         v-if="activeCurrency === 'nim' && unclaimedCashlinkCount"
                         :showUnclaimedCashlinkList="showUnclaimedCashlinkList"
@@ -602,6 +604,7 @@ export default defineComponent({
 
 .actions,
 .actions-mobile {
+    position: relative;
     justify-content: space-between;
     margin-bottom: 0.75rem;
     align-items: center;
@@ -718,10 +721,6 @@ export default defineComponent({
     }
 }
 
-.search-bar {
-    margin-right: 3rem;
-}
-
 .unclaimed-cashlinks {
     flex-shrink: 0;
     margin-right: 1rem;
@@ -980,4 +979,13 @@ export default defineComponent({
         }
     }
 }
+.justify-between {
+    justify-content: space-between;
+}
+.w-full {
+    width: 100%;
+}
+.ml-auto {
+    margin-left: auto;
+}
 </style>
diff --git a/src/i18n/en.po b/src/i18n/en.po
index 78d43a95c..7127ff2c4 100644
--- a/src/i18n/en.po
+++ b/src/i18n/en.po
@@ -274,7 +274,7 @@ msgstr ""
 msgid "All new features are exclusive to new accounts. Upgrade now, it only takes seconds."
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:178
+#: src/components/layouts/AddressOverview.vue:180
 msgid "All swaps are part of your transaction history and feature a small swap icon."
 msgstr ""
 
@@ -389,7 +389,7 @@ msgstr ""
 
 #: src/components/AddressList.vue:172
 #: src/components/layouts/AccountOverview.vue:105
-#: src/components/layouts/AddressOverview.vue:78
+#: src/components/layouts/AddressOverview.vue:80
 #: src/components/layouts/Settings.vue:119
 #: src/components/LegacyAccountNotice.vue:21
 #: src/components/modals/BtcTransactionModal.vue:116
@@ -596,7 +596,7 @@ msgstr ""
 msgid "Click on ‘Troubleshooting’ to learn more."
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:180
+#: src/components/layouts/AddressOverview.vue:182
 #: src/components/swap/SwapAnimation.vue:105
 msgid "Close"
 msgstr ""
@@ -925,8 +925,8 @@ msgstr ""
 msgid "Expired HTLC"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:39
-#: src/components/layouts/AddressOverview.vue:70
+#: src/components/layouts/AddressOverview.vue:41
+#: src/components/layouts/AddressOverview.vue:72
 #: src/components/modals/AccountMenuModal.vue:30
 msgid "Export History"
 msgstr ""
@@ -1250,7 +1250,7 @@ msgstr ""
 msgid "Learn more here"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:165
+#: src/components/layouts/AddressOverview.vue:167
 msgid "Let's get started! Create your Nimiq account:"
 msgstr ""
 
@@ -1594,7 +1594,7 @@ msgstr ""
 msgid "Read all about it in this {blog_post} or click below for the new wallet intro."
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:142
+#: src/components/layouts/AddressOverview.vue:144
 #: src/components/MobileActionBar.vue:4
 msgid "Receive"
 msgstr ""
@@ -1684,8 +1684,8 @@ msgstr ""
 msgid "Release Notes"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:27
-#: src/components/layouts/AddressOverview.vue:58
+#: src/components/layouts/AddressOverview.vue:29
+#: src/components/layouts/AddressOverview.vue:60
 #: src/components/modals/AccountMenuModal.vue:16
 msgid "Rename"
 msgstr ""
@@ -1699,8 +1699,8 @@ msgstr ""
 msgid "Required"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:33
-#: src/components/layouts/AddressOverview.vue:64
+#: src/components/layouts/AddressOverview.vue:35
+#: src/components/layouts/AddressOverview.vue:66
 msgid "Rescan"
 msgstr ""
 
@@ -1743,15 +1743,15 @@ msgid ""
 msgstr ""
 
 #: src/components/CountrySelector.vue:22
-#: src/components/SearchBar.vue:98
+#: src/components/SearchBar.vue:155
 msgid "Search"
 msgstr ""
 
-#: src/components/SearchBar.vue:97
+#: src/components/SearchBar.vue:154
 msgid "Search transactions"
 msgstr ""
 
-#: src/components/SearchBar.vue:95
+#: src/components/SearchBar.vue:152
 msgid "Search transactions by contact, address, etc."
 msgstr ""
 
@@ -1811,7 +1811,7 @@ msgstr ""
 msgid "Selling now available"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:137
+#: src/components/layouts/AddressOverview.vue:139
 #: src/components/MobileActionBar.vue:10
 msgid "Send"
 msgstr ""
@@ -1973,7 +1973,7 @@ msgstr ""
 msgid "Show values as {currency}"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:166
+#: src/components/layouts/AddressOverview.vue:168
 msgid "Signup"
 msgstr ""
 
@@ -2566,7 +2566,7 @@ msgstr ""
 msgid "Your payout is on its way"
 msgstr ""
 
-#: src/components/layouts/AddressOverview.vue:174
+#: src/components/layouts/AddressOverview.vue:176
 msgid "Your swap was successful!"
 msgstr ""