feat(changes): Add second paginator to the top of changes page (#12648)

- Fixed bug of inactive input when a second paginator is added.

weblate/static/loader-bootstrap.js

@@ -1009,32 +1009,41 @@ $(function () {
   });
 
   /* Click to edit position inline. Disable when clicked outside or pressed ESC */
-  $("#position-input").on("click", function () {
+  const $positionInput = $(".position-input");
+  const $positionInputEditable = $(".position-input-editable");
+  const $positionInputEditableInput = $("#position-input-editable-input");
+  $positionInput.on("click", function (event) {
     const $form = $(this).closest("form");
-    $("#position-input").hide();
+    $positionInput.hide();
     $form.find("input[name=offset]").prop("disabled", false);
-    $("#position-input-editable").show();
-    $("#position-input-editable-input").attr("type", "number").focus();
+    $positionInputEditable.show();
+    $positionInputEditableInput.attr("type", "number");
+    $(event.target)
+      .closest(".pagination")
+      .find("#position-input-editable-input")
+      .focus();
     document.addEventListener("click", clickedOutsideEditableInput);
     document.addEventListener("keyup", pressedEscape);
   });
   const clickedOutsideEditableInput = (event) => {
+    // Check if clicked outside of the input and the editable input
     if (
-      !$.contains($("#position-input-editable")[0], event.target) &&
-      event.target !== $("#position-input")[0]
+      !$positionInputEditable.is(event.target) &&
+      !$positionInputEditable.has(event.target).length &&
+      !$positionInput.is(event.target)
     ) {
-      $("#position-input").show();
-      $("#position-input-editable-input").attr("type", "hidden");
-      $("#position-input-editable").hide();
-      document.emoveEventListener("click", clickedOutsideEditableInput);
+      $positionInput.show();
+      $positionInputEditableInput.attr("type", "hidden");
+      $positionInputEditable.hide();
+      document.removeEventListener("click", clickedOutsideEditableInput);
       document.removeEventListener("keyup", pressedEscape);
     }
   };
   const pressedEscape = (event) => {
-    if (event.key === "Escape" && event.target !== $("#position-input")[0]) {
-      $("#position-input").show();
-      $("#position-input-editable-input").attr("type", "hidden");
-      $("#position-input-editable").hide();
+    if (event.key === "Escape" && event.target !== $positionInput[0]) {
+      $positionInput.show();
+      $positionInputEditableInput.attr("type", "hidden");
+      $positionInputEditable.hide();
       document.removeEventListener("click", clickedOutsideEditableInput);
       document.removeEventListener("keyup", pressedEscape);
     }

weblate/static/styles/main.css

@@ -699,28 +699,28 @@ kbd {
   background-color: #f9f9f9;
 }
 
-#position-input-editable {
-  padding: 2px 5px;
+.position-input-editable {
+  padding: 0 !important;
   max-width: 9em;
   display: none;
 }
 
-#position-input-editable input {
+.position-input-editable input {
   height: 31px;
   padding-left: 2px;
   padding-right: 2px;
   text-align: center;
 }
 
 /* Chrome, Safari, Edge, Opera */
-#position-input-editable input::-webkit-outer-spin-button,
-#position-input-editable input::-webkit-inner-spin-button {
+.position-input-editable input::-webkit-outer-spin-button,
+.position-input-editable input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
 /* Firefox */
-#position-input-editable input[type="number"] {
+.position-input-editable input[type="number"] {
   -moz-appearance: textfield;
 }
 

weblate/templates/paginator.html

@@ -6,10 +6,10 @@
 <li {% if page_obj.number == 1 %}class="disabled"{% endif %}><a href="?page=1&amp;limit={{ page_obj.paginator.per_page }}{% if page_obj.paginator.sort_by %}&amp;sort_by={{ page_obj.paginator.sort_by }}{% endif %}{% if query_string %}&amp;{{ query_string }}{% endif %}{% if anchor %}#{{ anchor }}{% endif %}" class="green">{% if LANGUAGE_BIDI %}{% icon "page-last.svg" %}{% else %}{% icon "page-first.svg" %}{% endif %}</a></li>
 <li {% if not page_obj.has_previous %}class="disabled"{% endif %}><a {% if page_obj.has_previous %}rel="prev" href="?page={{ page_obj.previous_page_number }}&amp;limit={{ page_obj.paginator.per_page }}{% if page_obj.paginator.sort_by %}&amp;sort_by={{ page_obj.paginator.sort_by }}{% endif %}{% if query_string %}&amp;{{ query_string }}{% endif %}{% if anchor %}#{{ anchor }}{% endif %}"{% endif %} class="green">{% if LANGUAGE_BIDI %}{% icon "page-next.svg" %}{% else %}{% icon "page-previous.svg" %}{% endif %}</a></li>
 <li>
-  <a id="position-input" title="{% trans "Click to edit position" %}" >
+  <a class="position-input" title="{% trans "Click to edit position" %}" >
     {% blocktrans with page_obj.number as position and page_obj.paginator.num_pages as total %}{{ position }} / {{ total }}{% endblocktrans %}
   </a>
-  <a id="position-input-editable" title="{% trans "Go to position" %}" >
+  <a class="position-input-editable" title="{% trans "Go to position" %}" >
     {% if not paginator_form %}
     <form method="GET">
     {% endif %}

weblate/templates/snippets/position-field.html

@@ -12,14 +12,14 @@
       <a id="button-prev" class="btn btn-default green disabled" title="{% trans "Previous" %}">{% if LANGUAGE_BIDI %}{% icon "page-next.svg" %}{% else %}{% icon "page-previous.svg" %}{% endif %}</a>
     {% endif %}
   {% endif %}
-    <div class="btn btn-default" id="position-input" title="{% trans "Click to edit position" %}">
+    <div class="btn btn-default position-input" title="{% trans "Click to edit position" %}">
       {% if filter_pos %}
         {% blocktrans with filter_pos=filter_pos|intcomma filter_count=filter_count|intcomma %}{{ filter_pos }} / {{ filter_count }}{% endblocktrans %}
       {% else %}
         {% blocktrans count cnt=filter_count with count=filter_count|intcomma %}{{ count }} string{% plural %}{{ count }} strings{% endblocktrans %}
       {% endif %}
     </div>
-    <div class="btn btn-default" id="position-input-editable" title="{% trans "Go to position" %}" >
+    <div class="btn btn-default position-input-editable" title="{% trans "Go to position" %}" >
           <div class="input-group">
             <input type="hidden" min="1" max="{{ filter_count }}" name="offset" class="form-control" value="{{ filter_pos }}" aria-label="{% trans "Jump to" %}" id="position-input-editable-input">
             <span class="input-group-addon">{% blocktrans with filter_count=filter_count|intcomma %}/ {{ filter_count }}{% endblocktrans %}</span>

weblate/templates/trans/change_list.html

@@ -35,8 +35,8 @@
 
 {% block content %}
 {% if form.is_valid %}
+  {% include "paginator.html" %}
   {% include "last-changes-content.html" with last_changes=object_list %}
-
   {% include "paginator.html" %}
 {% endif %}