Inline editing of position and query

[nijel]

Is your feature request related to a problem? Please describe.
With improved search based on query string instead of big forms, it seems better to allow editing the query string and position inline instead of poping up a dialog.

Describe the solution you'd like
Click on search term or position and input box appears in the position, enter submits it, escape cancels the edit.

Describe alternatives you've considered
At least proper popup placement would be great.

Additional context

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[nijel]

@SaptakS wrote on #3645:

For making it inline editing, I think we need to make some design decisions. For example after clicking on the query field, do we show the applied filter (such as all queries) also or just replace that part by an input field? If we show the filter, I guess it needs to expand horizontally. Similarly for position, do we show an input field for the page number while still showing the total (I would prefer this)? or just an input box, with a max and min limit.

I also think it will advantageous to move to bootstrap 4 because that gives us the scope to use flexbox directly. Flexbox really helps in designing grid-based UI.

[nijel]

Switching to Bootstrap 4 is certainly an option, there were some issues with RTL support last time I looked, see #2916.

For the search field, I'd really like to make it more flexible to allow building more complex queries easily. I've mentioned some examples (GitLab and Sentry) in #3063 (comment) and #3063 (comment)

[SaptakS]

@nijel Great! In that case, won't it make more sense to separate the search field from the pagination group of buttons on the right sounds? And we can just keep the tab in pagination to switch between different filters of All queries and Queries needing attention, etc. I think UX wise that makes more sense since that tab doesn't really hint on opening an input query box. And I did look into #3063 and I feel a separate search field would be more flexible and give more options.

[nijel]

Yes that makes sense. UX wise still many of parts are results of myself not being comfortable in CSS and JS to do it way it would look best, so it ended up using default components present in bootstrap.

[nijel]

See also #3742

[SaptakS]

I was proposing something similar.

[nijel]

I think we could use something GitLab like as described in #3063 (comment). Example:

https://gitlab.com/fdroid/fdroid-website/-/issues?scope=all&utf8=%E2%9C%93&state=opened&author_username=uniqx

1. Dropdown of recent/bookmarked/frequent queries.
2. Editable query box with autocomplete.
3. Sorting selection.

[SaptakS]

1. Dropdown of recent/bookmarked/frequent queries.

2. Editable query box with autocomplete.

3. Sorting selection.

Agree with this. I feel first we should go with separting this 3 parts like in gitlab and then iteratively focus on adding multiple elements (or query terms) in the query box like gitlab allows.

[nijel]

Thinking more about this, the final state should be following (I'm not saying we should reach it in single step, but just to define the direction we're heading):

• Sorting selection, which would autosubmit and keep current search term
• Dropdown with predefined queries, if current query will match one, it will show it's name, otherwise "Custom Search" (this logic already exists and is used to display query name right now)
• Text input with current search query
  • On focus dropdown would popup showing some help and recent queries
  • On typing it would offer autocompletion
  • This is heavily inspired by Sentry, so check out how it works here
• Action buttons in side of search query
  • Clear the query
  • Pin the query (make it default for current translation/component)
  • Add to saved searches (see Saved search #3060)
  • Open more detailed query builder (see Extend advanced query builder #3063)
• Navigation

The basic look should be following (it lacks the navigation):

Screenshots from Sentry to show how it behaves:

Recent queries shown on focus to text edit:

Autocompletion on tag:

Autocompletion on value:

[SaptakS]

@nijel sounds great to me. I am gonna proceed with it iteratively building first the UI and then improving on the different features.

[nijel]

Query editing landed in #3766, the position needs to be done.

[github-actions]

Thank you for your report, the issue you have reported has just been fixed.

• In case you see a problem with the fix, please comment on this issue.
• In case you see similar problem, please open separate issue.
• If you are happy with the outcome, consider supporting Weblate by donating.