Query Field: Separates query field from the pagination part

[SaptakS]

Separates the query search field from the pagination part and adds filters
and sorting options in UI

Before submitting pull request, please ensure that:

• Every commit has a message which describes it
• Every commit is needed on its own, if you have just minor fixes to previous commits, you can squash them
• Any code changes come with test case
• Any new functionality is covered by user documentation

[codecov]

Codecov Report

Merging #3766 into master will increase coverage by 0.03%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master    #3766      +/-   ##
==========================================
+ Coverage   91.64%   91.68%   +0.03%     
==========================================
  Files         633      636       +3     
  Lines       37802    37970     +168     
  Branches     3985     3994       +9     
==========================================
+ Hits        34644    34812     +168     
- Misses       2124     2125       +1     
+ Partials     1034     1033       -1     

Impacted Files	Coverage Δ
weblate/trans/filter.py	82.60% <100.00%> (ø)
weblate/trans/forms.py	91.07% <100.00%> (+0.02%)	⬆️
weblate/trans/models/unit.py	91.27% <100.00%> (+0.16%)	⬆️
weblate/trans/tests/test_selenium.py	96.43% <100.00%> (+0.09%)	⬆️
weblate/trans/views/edit.py	80.05% <100.00%> (+0.10%)	⬆️
weblate/trans/views/search.py	81.95% <100.00%> (+0.55%)	⬆️
weblate/utils/forms.py	100.00% <100.00%> (ø)
weblate/utils/views.py	88.81% <100.00%> (+0.49%)	⬆️
weblate/trans/util.py	82.70% <0.00%> (-0.82%)	⬇️
weblate/trans/models/change.py	90.41% <0.00%> (-0.76%)	⬇️
... and 27 more

[accesslint]

There are accessibility issues in these changes.

[SaptakS]

Ah nice. AccessLint is a good addition. I will add the fixes for them.

[nijel]

Looks good! I've made some minor comments on the Python code.

I have also some remarks on the UI side:

• The current ordering should be shown on the page.
• Do we need the submit button?

I'd prefer if the search looked like this:

[SaptakS]

@nijel My reason for submit button is showing a button makes it clear that it needs some user action (click or enter) for the search results to come up. Without a button, users might expect the search results to show up as they type which is not what happens. So I think a submit button makes the intent clear that you need to submit the form by either pressing enter or clicking the button. Though I am open to removing it if you feel that makes more sense.

[nijel]

The reason I ask is that I'd never use it - when typing the query on keyboard, it is more natural to just press enter. It also seems to be common pattern these days:

GitHub:

GitLab:

Sentry:

Looking at it, I like way GitLab does sorting - the ordering is shown in the text and next to it there is an icon indicating and toggling direction - the icon also makes it clear that the dropdown controls ordering. Try it at https://gitlab.com/mailman/mailman/-/issues?sort=created_date

[SaptakS]

the ordering is shown in the text and next to it there is an icon indicating and toggling direction - the icon also makes it clear that the dropdown controls ordering.

@nijel we do have an icon, though it's not the best sorting icon given that it kind of indicates ordering by alphabet. I will try and replace it for something better and also add the display of the current ordering.

The reason I ask is that I'd never use it - when typing the query on keyboard, it is more natural to just press enter.

Agreed. Cool, I will remove it for now. Can always add it back if users find it unintuitive.

[nijel]

Did some more testing:

• Please separate the sort widget and add support for changing sort direction, something like on GitLab:

• Using col-sm3 for navigation doesn't work well on small screens, the navigvation overflows window (around width of 1000px)

• Overall it doesn't scale well to mobile screen size, but it should be better once sorting is separate widget

[SaptakS]

@nijel on it.

[nijel]

Looks good now. Some minor issues I see:

• The sorting selection doesn't have rounded corners as other ones.
• "Sort By" is shown when going to translate page instead of actual sorting order.
• Ordering by priority and position (current default) is missing from the selection.
• Sometimes empty search is shown as "Custom search", sometimes as "All strings".
• It probably doesn't make sense to autosubmit on search entry pages, only on the ones with results.

[SaptakS]

The sorting selection doesn't have rounded corners as other ones.

Will get this fixed

"Sort By" is shown when going to translate page instead of actual sorting order.

Since when we go to the translate page in the beginning, there is no sorting selected (only the default sort is applied). So it just shows Sort By (as default) for users to select a sorting order.

Ordering by priority and position (current default) is missing from the selection.

Should add this. Should I just name this as Default in the dropdown? or what should be the name?

Sometimes empty search is shown as "Custom search", sometimes as "All strings".

I have noticed this as well. The reason why this happens is, if the url has a GET parameter like q= the filter_name returned is All Strings. But if there is no q parameter or if no filter_name is returned from backend, then Custom Search is shown. Thinking about it, I can totally check if filter_name received in template exists in the dropdown. If yes, then show. That would solve this problem.

It probably doesn't make sense to autosubmit on search entry pages, only on the ones with results.

So you mean not to autosubmit in site wide search but only on the translate pages?

[nijel]

Since when we go to the translate page in the beginning, there is no sorting selected (only the default sort is applied). So it just shows Sort By (as default) for users to select a sorting order.

It should always show the current ordering to be consistent. Even if it is the default one.

Should add this. Should I just name this as Default in the dropdown? or what should be the name?

Maybe "Priority and position"

I have noticed this as well. The reason why this happens is, if the url has a GET parameter like q= the filter_name returned is All Strings. But if there is no q parameter or if no filter_name is returned from backend, then Custom Search is shown. Thinking about it, I can totally check if filter_name received in template exists in the dropdown. If yes, then show. That would solve this problem.

This should be addressed by abe6e59d6f881814c8d4220ec2da8ec0dd72800b (I didn't yet test it together with your changes).

So you mean not to autosubmit in site wide search but only on the translate pages?

I think it makes sense whenever showing the search results (for example here: https://hosted.weblate.org/search/?q=+has%3Asuggestion+&checksum=&offset=), but not when creating the query for the first time (for example here: https://hosted.weblate.org/#search).

[nijel]

It seems to render wrongly now for me:

Also, I think that it should be "Position and priority" (lowercase priority).

[nijel]

Hard-coding width will probably go wrong in some translation. Can this be dynamic?

[SaptakS]

It can be dynamic, but it will constantly resize based on the width of the test in the button. I checks in all different device widths and seems to work fine. I am okay with just keeping it dynamically change to fit the width of the text.

[SaptakS]

@nijel Just pushed some bootstrap changes. Please check if things look better. Also made the copy change.

[nijel]

Getting closer, but still not ready ;-).

• In RTL, the rounded corners are gone, not sure why:
  
• When creating search, the sort by correctly doesn't submit, but it also doesn't update the dropdown text to indicate current selection. It works file for the predefined searches.

[SaptakS]

In RTL, the rounded corners are gone, not sure why

Not sure because I am not adding any custom CSS. Need to test and check. Might need to add some custom CSS by adding another class rtl to the HTML

doesn't update the dropdown text to indicate current selection.

Will take a look.

[nijel]

We're getting closer :-).

[nijel]

Thanks, now it seems to work fine. I'd like to address some additional issues:

• There is way too much of blank space on search page now, compare new and old look:

  

  

  Ideally all would be on single line on large enough screens - search, sort, navigation and settings with zen toggle. Right now the PR adds blank in top (there is separate row for settings and zen toggle) and bottom (it seems just blank).

• The zen mode doesn't seem to use the new search field.

[nijel]

I'm now getting js errors on search entry page:

jQuery.Deferred exception: sort_dropdown_value is undefined @http://127.0.0.1:8000/static/loader-bootstrap.js?v=weblate-4.0.3-102-gfa1bfe639b:1521:20
mightThrow@http://127.0.0.1:8000/static/js/jquery.js?v=weblate-4.0.3-102-gfa1bfe639b:3762:29
resolve/</process<@http://127.0.0.1:8000/static/js/jquery.js?v=weblate-4.0.3-102-gfa1bfe639b:3830:12
 undefined jquery.js:4046:18
TypeError: sort_dropdown_value is undefined loader-bootstrap.js:1521:20
    <anonymous> http://127.0.0.1:8000/static/loader-bootstrap.js?v=weblate-4.0.3-102-gfa1bfe639b:1521
    jQuery 2

[nijel]

Merged, thanks for your contribution!