Query Field: Separates query field from the pagination part

weblate/static/loader-bootstrap.js

@@ -1525,16 +1525,47 @@ $(function () {
     $('.search-group li a').click(function () {
         var $this = $(this);
         var $button = $this.closest('.input-group-btn').find('button');
-        $button.data('field', $this.data('field'));
-        $button.find('span.search-label').text($this.text());
+        $button.attr('data-field', $this.data('field'));
+        $button.find('span.search-label').not('#query-sort-toggle span').text($this.text());
+        if ($this.data('sort')) {
+            $('#id_sort_by').val($this.data('sort'));
+            if ($('.pagination').length) {
+                $this.closest('form').submit();
+            }
+        }
+        if ($this.closest('.query-field').length) {
+            $('#id_q').val($this.data('field'));
+            if ($('.pagination').length) {
+                $this.closest('form').submit();
+            }
+        }
+    });
+    $('#query-sort-toggle').click(function () {
+        var $this = $(this);
+        var $label = $this.find('span.search-label');
+        $label.toggle();
+        if (!$('#id_sort_direction').val()) {
+            $('#id_sort_direction').val("-");
+        } else {
+            $('#id_sort_direction').val("");
+        }
+        if ($('.pagination').length) {
+            $this.closest('form').submit();
+        }
     });
-    $('.search-group input').on('keydown', function (event) {
+    $('.search-group input').not('#id_q').on('keydown', function (event) {
         if (event.key === "Enter") {
             $(this).closest('.input-group').find('.search-add').click();
             event.preventDefault();
             return false;
         }
     });
+    $('#id_q').on('keydown', function (event) {
+        console.log("hello")
+        if (event.key === "Enter") {
+            $(this).closest('form').submit();
+        }
+    });
     $('.search-add').click(function () {
         var group = $(this).closest('.input-group');
         var button = group.find('button');

weblate/static/style-bootstrap.css

@@ -418,7 +418,7 @@ kbd {
     text-align: center;
 }
 .unit-navi {
-    min-width: 25em;
+    min-width: 17em;
 }
 .unit-navi li {
     float: left;
@@ -429,6 +429,10 @@ kbd {
 .unit-navi .dropdown-menu {
     margin-top: 0;
 }
+.unit-navi.pagination {
+    margin-top: 0;
+    padding-left: 15px;
+}
 .fullmodal .modal-dialog {
     width: auto;
 }
@@ -447,6 +451,44 @@ legend {
 .search-group {
     margin: 0 15px 15px 0;
 }
+.query-field {
+    margin-right: 0;
+}
+.search-group input{
+    height: auto;
+}
+.search-group li a {
+    cursor: pointer;
+}
+.search-label svg {
+    height: 16px;
+}
+.query-field .btn.btn-primary{
+    font-size: initial;
+}
+.sort-field {
+    margin-right: 0;
+}
+@media (min-width: 768px) {
+    .sort-field {
+        margin-left: -15px;
+    }
+}
+#query-sort-toggle {
+    width: 35px;
+    padding-left: 0;
+    padding-right: 0;
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+#query-sort-toggle span:not(.active) {
+    display: none;
+}
+#query-sort-dropdown {
+    width: 160px;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
 #is-exact span {
     margin: 4px 4px 0 4px;
 }

weblate/templates/snippets/query-builder.html

@@ -1,4 +1,6 @@
 {% load i18n %}
+
+{% if show_builder %}
 <div class="form-group">
     <label class="control-label">{% trans "Advanced query builder" %}</label>
 
@@ -104,3 +106,4 @@
     </tr>
     </table>
 </div>
+{% endif %}

weblate/templates/snippets/query-field.html

@@ -0,0 +1,63 @@
+{% load i18n %}
+{% load translations %}
+{% load icons %}
+{% load crispy_forms_field %}
+<div class="row">
+  <div class="col-sm-9">
+    <div class="form-group">
+      <div class="search-group query-field" role="group" >
+        <div class="input-group">
+          <div class="input-group-btn">
+            <button type="button" id="query-dropdown" class="btn btn-default dropdown-toggle search-field" data-field="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              {% if filter_name and filter_name != search_query.strip %}
+              <span class="search-label">{{ filter_name }}</span>
+              {% else %}
+              <span class="search-label">{% trans "Custom Search" %}</span>
+              {% endif %}
+              <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu">
+              {% for _, name, query in custom_filter_list %}
+              <li><a data-field="{{ query }}">{{ name }}</a></li>
+              {% endfor %}
+            </ul>
+          </div><!-- /btn-group -->
+          {% crispy_field field 'class' 'form-control' 'aria-label' _('Query') %}
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-3">
+    <div class="form-group">
+      <div class="search-group sort-field" role="group">
+        <div class="input-group">
+          <div class="input-group-btn">
+            <button type="button" id="query-sort-dropdown" class="btn btn-default dropdown-toggle search-field" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              {% if sort_name %}
+              <span class="search-label">{{ sort_name }}</span>
+              {% else %}
+              <span class="search-label">{% trans "Sort By" %}</span>
+              {% endif %}
+              <span class="caret"></span>
+            </button>
+            <input type="hidden" id="id_sort_by" name="sort_by" value="{{ sort_query|default:'position,-priority' }}" aria-label="{% trans "Sort By" %}" />
+            <input type="hidden" id="id_sort_direction" name="sort_by_direction" value="{{ sort_direction|default:'' }}" aria-label="{% trans "Sort By" %}" />
+            <ul class="dropdown-menu">
+              <li><a data-sort="position,-priority">{% trans "Position & Priority" %}</a></li>
+              <li><a data-sort="position">{% trans "Position" %}</a></li>
+              <li><a data-sort="priority">{% trans "Priority" %}</a></li>
+              <li><a data-sort="num_words">{% trans "Word count" %}</a></li>
+              <li><a data-sort="context">{% trans "Context" %}</a></li>
+            </ul>
+            <button type="button" id="query-sort-toggle" class="btn btn-default search-field">
+              <span class="search-label asc {% if not sort_direction %}active{% endif %}">
+                {% icon "sort-ascending.svg" %}
+              </span>
+              <span class="search-label desc {% if sort_direction %}active{% endif %}">{% icon "sort-descending.svg" %}</span>
+            </button>
+          </div>
+        </div><!-- /input-group -->
+      </div>
+    </div>
+  </div>
+</div>

weblate/templates/snippets/search-form.html

@@ -10,7 +10,4 @@
   <div class="panel-body">
 {% crispy search_form %}
 </div>
-<div class="panel-footer">
-<input type="submit" value="{% trans "Search" %}" class="btn btn-primary" />
-</div>
 </div>

weblate/templates/translate.html

@@ -35,65 +35,66 @@
 {% perm 'comment.add' project as user_can_add_comment %}
 {% perm 'glossary.add' project as user_can_add_dictionary %}
 
+<div class="row">
 <div class="btn-group pull-right flip btn-group-settings" role="group">
 {% if user_can_translate %}
 <a href="{% url 'zen' project=unit.translation.component.project.slug component=unit.translation.component.slug lang=unit.translation.language.code %}?{{ search_url }}" data-params="{{ search_url }}" title="{% trans "Edit in Zen mode" %}" class="btn btn-link">{% icon "flash.svg" %} {% trans "Zen" %}</a>
 {% endif %}
 
 <a href="{% url 'profile' %}#preferences" class="btn btn-link" title="{% trans "Configure editor" %}">{% icon "settings.svg" %}</a>
 </div>
-
-{% with comments=unit.get_comments nearby=unit.nearby nearby_keys=unit.nearby_keys shapings=unit.shapings%}
-
-<div class="btn-group">
-<ul class="pagination unit-navi">
-<li><a id="button-first" class="green" href="{{ first_unit_url }}" title="{% trans "First" %}">{% if LANGUAGE_BIDI %}{% icon "page-last.svg" %}{% else %}{% icon "page-first.svg" %}{% endif %}</a></li>
-<li><a id="button-prev" class="green" href="{{ prev_unit_url }}" title="{% trans "Previous" %}">{% if LANGUAGE_BIDI %}{% icon "page-next.svg" %}{% else %}{% icon "page-previous.svg" %}{% endif %}</a></li>
-<li class="dropdown">
-<a class="dropdown-toggle green" data-toggle="dropdown" href="#" title="{% trans "Edit search parameters" %}" id="search-dropdown">
-{% icon "magnify.svg" %}
-{{ filter_name }}
-<span class="caret"></span>
-</a>
-  <div class="dropdown-menu">
-
-<div class="panel-group">
-<form action="{{ unit.translation.get_translate_url }}" method="GET">
-{{ search_form|crispy }}
-<input type="submit" value="{% trans "Search" %}" class="btn btn-primary" />
-</form>
 </div>
 
-</div>
-</li>
-<li class="dropdown">
-<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="{% trans "Go to position" %}" id="goto-dropdown">
-{% blocktrans %}{{ filter_pos }} / {{ filter_count }}{% endblocktrans %}
-<span class="caret"></span>
-</a>
-  <div class="dropdown-menu">
-
-<div class="panel-group">
-
-<form action="{{ unit.translation.get_translate_url }}" method="GET">
-{% for key, value in search_items %}
-<input type="hidden" name="{{ key }}" value="{{ value }}" />
-{% endfor %}
-<div class="form-group">
-<label class="control-label" for="id-goto-number">{% trans "Jump to position" %}</label>
-<div class="controls">
-<input type="number" min="1" max="{{ filter_count }}" value="{{ filter_pos }}" name="offset" id="id-goto-number">
-</div>
-</div>
-<input type="submit" value="{% trans "Jump" %}" class="btn btn-primary" />
-</form>
-</div>
+{% with comments=unit.get_comments nearby=unit.nearby nearby_keys=unit.nearby_keys shapings=unit.shapings%}
 
-</div>
-</li>
-<li><a id="button-next" class="green" href="{{ next_unit_url }}" title="{% trans "Next" %}">{% if not LANGUAGE_BIDI %}{% icon "page-next.svg" %}{% else %}{% icon "page-previous.svg" %}{% endif %}</a></li>
-<li><a id="button-end" class="green" href="{{ last_unit_url }}" title="{% trans "Last" %}">{% if not LANGUAGE_BIDI %}{% icon "page-last.svg" %}{% else %}{% icon "page-first.svg" %}{% endif %}</a></li>
-</ul>
+<div class="row">
+  <div class="col-sm-9">
+    <div class="panel-group">
+      <form action="{{ unit.translation.get_translate_url }}" method="GET">
+        {% crispy search_form  %}
+      </form>
+    </div>
+  </div>
+  <div class="col">
+    <div class="btn-group">
+      <ul class="pagination unit-navi">
+        <li>
+          <a id="button-first" class="green" href="{{ first_unit_url }}" title="{% trans "First" %}">{% if LANGUAGE_BIDI %}{% icon "page-last.svg" %}{% else %}{% icon "page-first.svg" %}{% endif %}</a>
+        </li>
+        <li>
+          <a id="button-prev" class="green" href="{{ prev_unit_url }}" title="{% trans "Previous" %}">{% if LANGUAGE_BIDI %}{% icon "page-next.svg" %}{% else %}{% icon "page-previous.svg" %}{% endif %}</a>
+        </li>
+        <li class="dropdown">
+          <a class="dropdown-toggle" data-toggle="dropdown" href="#" title="{% trans "Go to position" %}" id="goto-dropdown">
+            {% blocktrans %}{{ filter_pos }} / {{ filter_count }}{% endblocktrans %}
+            <span class="caret"></span>
+          </a>
+          <div class="dropdown-menu">
+            <div class="panel-group">
+              <form action="{{ unit.translation.get_translate_url }}" method="GET">
+                {% for key, value in search_items %}
+                  <input type="hidden" name="{{ key }}" value="{{ value }}" aria-label="{{ value }}" />
+                {% endfor %}
+                <div class="form-group">
+                  <label class="control-label" for="id-goto-number">{% trans "Jump to position" %}</label>
+                  <div class="controls">
+                    <input type="number" min="1" max="{{ filter_count }}" value="{{ filter_pos }}" name="offset" id="id-goto-number">
+                  </div>
+                </div>
+                <input type="submit" value="{% trans "Jump" %}" class="btn btn-primary" aria-label="{% trans "Jump" %}" />
+              </form>
+            </div>
+          </div>
+        </li>
+        <li>
+          <a id="button-next" class="green" href="{{ next_unit_url }}" title="{% trans "Next" %}">{% if not LANGUAGE_BIDI %}{% icon "page-next.svg" %}{% else %}{% icon "page-previous.svg" %}{% endif %}</a>
+        </li>
+        <li>
+          <a id="button-end" class="green" href="{{ last_unit_url }}" title="{% trans "Last" %}">{% if not LANGUAGE_BIDI %}{% icon "page-last.svg" %}{% else %}{% icon "page-first.svg" %}{% endif %}</a>
+        </li>
+      </ul>
+    </div>
+  </div>
 </div>
 
 <div class="row">

weblate/trans/filter.py

@@ -70,7 +70,7 @@ def search_name(self):
 
     def get_search_name(self, query):
         try:
-            return self.search_name[query]
+            return self.search_name[query.strip()]
         except KeyError:
             return query
 

weblate/trans/forms.py

@@ -61,7 +61,12 @@
 )
 from weblate.trans.validators import validate_check_flags
 from weblate.utils.errors import report_error
-from weblate.utils.forms import ContextDiv, SortedSelect, SortedSelectMultiple
+from weblate.utils.forms import (
+    ContextDiv,
+    SearchField,
+    SortedSelect,
+    SortedSelectMultiple,
+)
 from weblate.utils.hash import checksum_to_hash, hash_to_checksum
 from weblate.utils.search import parse_query
 from weblate.utils.state import (
@@ -637,18 +642,20 @@ class SearchForm(forms.Form):
     def __init__(self, user, *args, **kwargs):
         """Generate choices for other component in same project."""
         self.user = user
+        show_builder = kwargs.pop("show_builder", True)
         super().__init__(*args, **kwargs)
 
         self.helper = FormHelper(self)
         self.helper.disable_csrf = True
         self.helper.form_tag = False
         self.helper.layout = Layout(
-            Field("q"),
+            SearchField("q", template="snippets/query-field.html"),
             ContextDiv(
                 template="snippets/query-builder.html",
                 context={
                     "user": self.user,
                     "month_ago": timezone.now() - timedelta(days=31),
+                    "show_builder": show_builder,
                 },
             ),
             Field("checksum"),

weblate/trans/models/unit.py

@@ -116,6 +116,19 @@ def same(self, unit, exclude=True):
             result = result.exclude(pk=unit.id)
         return result
 
+    def order_by_request(self, request):
+        sort_list_request = request.GET.get("sort_by", "").split(",")
+        sort_direction = request.GET.get("sort_by_direction", "")
+        available_sort_choices = ["priority", "position", "context", "num_words"]
+        sort_list = [
+            "{}{}".format(sort_direction, choice)
+            for choice in sort_list_request
+            if choice in available_sort_choices
+        ]
+        if not sort_list:
+            return self.order()
+        return self.order_by(*sort_list)
+
     def get_unit(self, ttunit):
         """Find unit matching translate-toolkit unit.