Skip to content

Commit

Permalink
SearchBar grow/collapse behavior
Browse files Browse the repository at this point in the history 
Improved tablet design
Fixed some edge cases when the input was losing focus
  • Loading branch information
@sisou
Alberto authored and sisou committed Oct 31, 2023
1 parent b02d60c commit a1ed7b2
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 46 deletions.
57 changes: 40 additions & 17 deletions src/components/SearchBar.vue
View file
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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';
Expand Down Expand Up @@ -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(() => {
Expand All @@ -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 {
Expand All @@ -120,6 +124,8 @@ export default defineComponent({
maxWidth,
placeholderText,
isInputActive,
handleFocus,
handleBlur,
handleClose,
};
},
Expand All @@ -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);
Expand Down Expand Up @@ -213,7 +220,9 @@ input {
}
}
@media (max-width: 700px) { // Full mobile breakpoint
@media (max-width: 700px) {
// Full mobile breakpoint
input {
&::placeholder {
font-weight: 600;
Expand All @@ -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>
32 changes: 20 additions & 12 deletions src/components/layouts/AddressOverview.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -602,6 +604,7 @@ export default defineComponent({
.actions,
.actions-mobile {
position: relative;
justify-content: space-between;
margin-bottom: 0.75rem;
align-items: center;
Expand Down Expand Up @@ -718,10 +721,6 @@ export default defineComponent({
}
}
.search-bar {
margin-right: 3rem;
}
.unclaimed-cashlinks {
flex-shrink: 0;
margin-right: 1rem;
Expand Down Expand Up @@ -980,4 +979,13 @@ export default defineComponent({
}
}
}
.justify-between {
justify-content: space-between;
}
.w-full {
width: 100%;
}
.ml-auto {
margin-left: auto;
}
</style>
34 changes: 17 additions & 17 deletions src/i18n/en.po
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ""

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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 ""
Expand Down Expand Up @@ -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 ""
Expand Down Expand Up @@ -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 ""

Expand Down Expand Up @@ -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 ""
Expand Down Expand Up @@ -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 ""
Expand All @@ -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 ""

Expand Down Expand Up @@ -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 ""

Expand Down Expand Up @@ -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 ""
Expand Down Expand Up @@ -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 ""

Expand Down Expand Up @@ -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 ""

Expand Down

0 comments on commit a1ed7b2

Please sign in to comment.