Make the page reordering UI easier to find (#5187)

* Update icon-order icon glyph
* Implement new UI for child ordering toggle
* Update documentation for page reordering

CHANGELOG.txt

@@ -26,6 +26,7 @@ Changelog
  * Added support for Markdown shortcuts for inline formatting in rich text editor, e.g. `**` for bold, `_` for italic, etc. (Thibaud Colas)
  * Added name attributes to all built-in page action menu items (LB (Ben Johnston))
  * Added validation on the filter string to the Jinja2 image template tag (Jonny Scholes)
+ * Changed the pages reodering UI toggle to make it easier to find (Katie Locke, Thibaud Colas)
  * Fix: Set `SERVER_PORT` to 443 in `Page.dummy_request()` for HTTPS sites (Sergey Fedoseev)
  * Fix: Include port number in `Host` header of `Page.dummy_request()` (Sergey Fedoseev)
  * Fix: Validation error messages in `InlinePanel` no longer count towards `max_num` when disabling the 'add' button (Todd Dembrey, Thibaud Colas)

CONTRIBUTORS.rst

@@ -360,6 +360,7 @@ Contributors
 * Md Arifin Ibne Matin
 * Tom Usher
 * Haydn Greatnews
+* Katie Locke
 
 Translators
 ===========

docs/editor_manual/finding_your_way_around/the_explorer_page.rst

@@ -27,6 +27,6 @@ ________________
 
 .. image:: ../../_static/images/screen08.5_reorder_page_handles.png
 
-* Clicking the icon to the far left of the child pages table will enable the reordering handles. This allows you to reorder the way that content displays in the main menu of your website.
+* Clicking the “Sort” control in the header row will enable the reordering handles. This allows you to reorder the way that content displays in the main menu of your website.
 * Reorder by dragging the pages by the handles on the far left (the icon made up of 6 dots).
 * Your new order will be automatically saved each time you drag and drop an item.

docs/releases/2.5.rst

@@ -47,6 +47,7 @@ Other features
  * Added edit / delete buttons to snippet index and "don't delete" option to confirmation screen, for consistency with pages (Kevin Howbrook)
  * Added name attributes to all built-in page action menu items (LB (Ben Johnston))
  * Added validation on the filter string to the Jinja2 image template tag (Jonny Scholes)
+ * Changed the pages reodering UI toggle to make it easier to find (Katie Locke, Thibaud Colas)
 
 
 Bug fixes

wagtail/admin/static_src/wagtailadmin/scss/components/_listing.scss

@@ -287,18 +287,25 @@ ul.listing {
         font-size: 30px;
     }
 
-    th.ord,
-    &.full-width th:first-child.ord {
-        padding-left: 25px;
-    }
+    th.ord {
+        text-align: center;
 
-    th.ord a:before {
-        width: 1em;
-        font-size: 15px;
-    }
+        .icon {
+            opacity: 0.5;
 
-    th.ord a:hover:before {
-        color: $color-teal;
+            &::before {
+                margin-right: 2px;
+            }
+        }
+
+        &--active a,
+        a:hover {
+            color: $color-teal;
+        }
+
+        &--active .icon {
+            opacity: 1;
+        }
     }
 
     .handle {
@@ -483,9 +490,7 @@ table.listing {
     }
 
     .table-headers {
-        .ord {
-            padding-right: 0;
-        }
+        height: 35px;
 
         .title {
             padding-left: 0;
@@ -691,7 +696,9 @@ table.listing {
 // Ordering
 td.ord {
     .handle {
+        // Align with the row's title text, and the column's label.
         margin-top: -28px;
+        margin-left: 13px;
     }
 }
 

wagtail/admin/templates/wagtailadmin/pages/listing/_table_headers_explore.html

@@ -1,4 +1,4 @@
-{% load i18n wagtailadmin_tags %}
+{% load i18n wagtailadmin_tags wagtailui_tags %}
 
 {% comment %}
 
@@ -18,12 +18,16 @@ ordering: the current sort parameter
 
 <tr class="table-headers">
     {% if show_ordering_column %}
-        <th class="ord">
+        <th class="ord{% if orderable and ordering == 'ord' %} ord--active{% endif %}">
             {% if orderable %}
                 {% if ordering == "ord" %}
-                    <a href="{% url 'wagtailadmin_explore' parent_page.id %}" class="icon icon-order text-replace" title="{% trans 'Disable ordering of child pages' %}">{% trans 'Order' %}</a>
+                    <a href="{% url 'wagtailadmin_explore' parent_page.id %}" title="{% trans 'Disable ordering of child pages' %}">
+                        {% wagtail_icon name="order" %}{% trans 'Sort' %}
+                    </a>
                 {% else %}
-                    <a href="{% url 'wagtailadmin_explore' parent_page.id %}?ordering=ord" class="icon icon-order text-replace" title="{% trans 'Enable ordering of child pages' %}">{% trans 'Order' %}</a>
+                    <a href="{% url 'wagtailadmin_explore' parent_page.id %}?ordering=ord" title="{% trans 'Enable ordering of child pages' %}">
+                        {% wagtail_icon name="order" %}{% trans 'Sort' %}
+                    </a>
                 {% endif %}
             {% endif %}
         </th>