Search > Distance between Search field and toolbar/keyboard

[uli-on]

Like already mentioned in #73 (comment), there's currently a gap between the search input field and Noto's toolbar/the keyboard, respectively. This is wasted space on smaller devices, regretfully, but also lets whole lines of text flicker through these elements while scrolling or editing the text, which is distracting from writing.

Additionally, the search field makes it hard to differentiate it from the background when the theme is set to dark or black, as there's no shadow possible like in the light theme nor is there a border to indicate the search box's dimensions.

In the writing/searching-situation depicted in the screenshot below you have four stripes of text elements that have to be interpreted and told apart:

• the main text
• the search term (ein)
• the -superfluous- line of text blinking through (Obgleich ihn […])
• the text proposals on the keyboard's top bar (einer | eine | einem)

Solutions: See below image

The changes that would save space and make it easier to keep track of what is what and not get distracted by flickering text would comprise of

• eliminating the gap between the search field and Noto's toolbar/the keyboard
• lighting up the search bar's background colour cautiously in order to make it distinguishable from the page's background
• making the search bar full width in order to style it more appealing, now the gap is closed.

[alialbaali]

Thank you for creating the issue!

I've been trying to find a good way to redesign the search by relying on the pain points you have mentioned. However, I couldn't find an elegant way to do so. Meaning, I tried to remove the elevation, keep the elevation, change the background, combine the bottom toolbar with the search, but none of them worked well, or looked great.

So, I decided to move the search bar to the top, specifically, below the toolbar. Now, the only issue I see is that, it might be harder to reach, opposed to having the search bar at the bottom. On the positive side, moving the search bar to the top would result in having all the filtering "criteria" to be at the top along with labels. Also, most Android apps have the search bar at the top, which might be a good decision to move in this direction.

Here's a screenshot on how it might look (feedback is appreciated):

[uli-on]

All good and valid points to move the search field up. Plus: The search button is still within thumb's reach and the keyboard opens without moving hands, the cursor sitting in the necessary position. And the page is looking tidy. Would be interesting to see how an opened note is looking now.

[alialbaali]

Great to hear that! I'll go ahead an implement it.

[alialbaali]

Here's how Find in Note is going to look like:

Hope it resolves all the concerns you have addressed.

[uli-on]

From the looks: Really nice! I would have to try scrolling and see whether the gap is opaque now or not. One grain of complaint though: there's still quite some non usable screen real estate between the search field and the label buttons, and it looks as if it's still around a line of text high.

[alialbaali]

The gap is actually necessary since the search bar remains visible when scrolling, and it needs to be elevated along with the top bar. If I remove the gap, it wouldn't look right.

[uli-on]

Ah, all right, I hadn't thought about the labels being taken to the top when scrolling, as I see now in your screenshot.

[alialbaali]

Any thoughts?

[uli-on]

Looks good and organic, and - best of all - no more distracting text flickering through. Thanks!

[alialbaali]

You're very welcome!