Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New SearchBar Behavior #130

Merged
merged 6 commits into from
Oct 31, 2023

Conversation

Albermonte
Copy link
Member

@Albermonte Albermonte commented Aug 20, 2023

The previous SearchBar showed some strange behavior when the viewport was small but not small enough to trigger the mobile view, resulting in the SearchBar being too small.

image

A few changes have been made to improve this:

  • Changed the Cashlink Button design
  • Min width for SearchBar + new extended behavior

Cashlink Button

The new cashlink button consist in a circle with a dot notification for the amount of pending cashlinks.

image
image

New SearchBar Behavior

The search bar is collapsed and displays Search transactions when it's not being used (i.e., not focused or no text entered).

image

When is being used, it will take all the remaining space and the placeholder will change to Search transactions by contact, address, etc. if there's enough space.

image

An X button has been added for clearing the input and collapsing the bar. Its behavior is as follows:

  • The bar won't be auto-collapses if active, only if cleared/closed.
  • Clearing while focussed will not close it, clearing while not focussed will close/collapse it.

You can also watch a video preview here

If there's not enough space for the bar to be clearly visible, it will extend, taking up the send and receive button space
image
image

Lastly, before the search bar didn't have a minimun width (can be seen in the first screenshot). Now it will look like a button and take the full width when clicked on it
image
image

@Albermonte Albermonte marked this pull request as ready for review August 21, 2023 09:04
@Albermonte Albermonte marked this pull request as draft August 21, 2023 16:58
@sisou sisou force-pushed the albermonte/searchbar-new-behaviour branch from de78aaa to a86d64f Compare September 4, 2023 07:29
@Albermonte Albermonte marked this pull request as ready for review September 4, 2023 15:53
@sisou sisou assigned sisou and unassigned sisou Oct 12, 2023
@sisou sisou force-pushed the albermonte/searchbar-new-behaviour branch from a86d64f to 9b1bcc4 Compare October 31, 2023 10:36
@sisou sisou merged commit 9b1bcc4 into nimiq:master Oct 31, 2023
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants