Add users and apps inner search and add HeaderMenu cancel

[skjnldsv]

• Add back search with the following UX flow:
  • Searching within the Unified Search also filters inner content
  • Pressing escape just closes the header menu and does NOT reset the search
  • Clicking outside just closes the header menu and does NOT reset the search
  • Pressing the reset search button clears everything AND reset the unified search state

This was requested by @jancborchardt and should be the default behaviour for other apps.

---

Alongside I added a cancel event to the HeaderMenu component that could be use by other apps once I moved it to https://github.com/nextcloud/nextcloud-vue

[skjnldsv]

/compile amend /

[raimund-schluessler]

@skjnldsv I guess this fixes the issue discussed in #22526 (comment), right?

[raimund-schluessler]

• Pressing the reset search button clears everything AND reset the unified search state

I can not see any reset search button. Where is it supposed to be?

[raimund-schluessler]

It would be nice if it could be somehow indicated when a search is still "active", i.e. the search string is not empty. Maybe with a red dot or at least the opacity of the search icon could be set to 1.

[skjnldsv]

It would be nice if it could be somehow indicated when a search is still "active", i.e. the search string is not empty. Maybe with a red dot or at least the opacity of the search icon could be set to 1.

why?

I can not see any reset search button. Where is it supposed to be?

What browser?

[raimund-schluessler]

What browser?

This is with latest Firefox 80.0.1. In Chrome is indeed visible.

[skjnldsv]

I'll add a dedicated reset button for firefox.
Thanks Mozilla...

[raimund-schluessler]

It would be nice if it could be somehow indicated when a search is still "active", i.e. the search string is not empty. Maybe with a red dot or at least the opacity of the search icon could be set to 1.

why?

Because it is currently not obvious when a search/filter is active and users might be confused why certain content is not shown.

No search:

With filter/search:

[jancborchardt]

Because it is currently not obvious when a search/filter is active and users might be confused why certain content is not shown.

Good point … this is unfortunately where the drawback of showing the search field only in the dropdown comes in. The way we did it before with the search field being directly in the header, this was obvious.

• So ideally, we could move again to that, showing the search field part of the search in the header. The results popover can be directly below. This is also how it’s commonly done in other apps like Google products, as well as on Android for example.
• Or as a step inbetween, when the app does inline filtering and you click somewhere else and the popover closes, the popover doesn’t fully close but the search field still shows?
• Or we really do clear the search when the popover closes, although that is unexpected and would be quite frustrating.

[skjnldsv]

• So ideally, we could move again to that, showing the search field part of the search in the header. The results popover can be directly below. This is also how it’s commonly done in other apps like Google products, as well as on Android for example.

The issue we had was on small screens. But I'm fine if you prefer than. Though I would be also fine just adding an indicator like the white triangle under? or a red dot like notifications? 🤔 😀

• Or as a step inbetween, when the app does inline filtering and you click somewhere else and the popover closes, the popover doesn’t fully close but the search field still shows?

I'm afraid it could conflict with other elements on page, especially mobile

• Or we really do clear the search when the popover closes, although that is unexpected and would be quite frustrating.

You asked not to, so we're good there, no clearing on close :)

[jancborchardt]

The issue we had was on small screens. But I'm fine if you prefer than. Though I would be also fine just adding an indicator like the white triangle under? or a red dot like notifications?

So the search would initially be an icon, but as soon as you click or focus, it would expand (like before).

On mobile, it’s fine to do it like on Android: Search can take the full heading width (at least on smartphone sizes) and go back to icon-only when you clear the search. (On tablet or intermediate sizes, it’s fine if search takes as much space as it needs away from the list of app icons.)

An indicator on the search icon is something that can easily be missed and also something I haven’t seen elsewhere before.

[skjnldsv]

@raimund-schluessler this will wait for21, Jan have a bit more in-depth requests for this that will create too much changes for 20 :)

[raimund-schluessler]

@raimund-schluessler this will wait for21, Jan have a bit more in-depth requests for this that will create too much changes for 20 :)

@skjnldsv What exactly will have to wait? The whole PR or indicating that a search is active?
Maybe as a compromise before not doing anything we could at least increase the opacity of the search icon to 1 when the search is active.

[raimund-schluessler]

And adding a reset button for Firefox is not controversial as well, right?

[skjnldsv]

Maybe as a compromise before not doing anything we could at least increase the opacity of the search icon to 1 when the search is active.

• Or as a step inbetween, when the app does inline filtering and you click somewhere else and the popover closes, the popover doesn’t fully close but the search field still shows?

This will be implemented in a followup for 20

[MorrisJobke]

Tested and works 👍