[fix] Fix small ui issues and inconsistencies in the action bar

Fixed following
- Fixed the transition time of the action bar
- Fixed the sudden jerk due to text change in the action bar
- select all text in the action bar now appears only if there are more objects to display

client/scss/components/_listing.scss

@@ -494,7 +494,7 @@ ul.listing {
 }
 
 footer.bulk-actions-choices {
-    @include transition(bottom 0.1s ease 0.5s);
+    @include transition(bottom 0.1s ease 0.1s);
 
     &.hidden {
         bottom: -200px;

client/src/entrypoints/admin/bulk-actions.js

@@ -15,12 +15,19 @@ const checkedState = {
 };
 
 /* Event listener for the `Select All` checkbox */
-function SelectBulkActionsFilter(e) {
+function SelectAllBulkActionsCheckbox(e) {
   const changeEvent = new Event('change');
   for (const el of document.querySelectorAll(`.${BULK_ACTION_PAGE_CHECKBOX_INPUT}`)) {
     if (el.checked === e.target.checked) continue;
     el.checked = e.target.checked;
-    el.dispatchEvent(changeEvent);
+    if (e.target.checked) {
+      el.dispatchEvent(changeEvent);
+    }
+  }
+  if (!e.target.checked) {
+    // when deselecting all checkbox, simply hide the footer for smooth transition
+    checkedState.checkedObjects.clear();
+    document.querySelector(`.${BULK_ACTION_CHOICES_DIV}`).classList.add('hidden');
   }
 }
 
@@ -39,11 +46,13 @@ function SelectBulkActionsCheckboxes(e) {
     checkedState.checkedObjects.delete(+e.target.dataset.objectId);
   }
 
-  if (checkedState.checkedObjects.size === 0) {
+  const numCheckedObjects = checkedState.checkedObjects.size;
+
+  if (numCheckedObjects === 0) {
     /* when all checkboxes are unchecked */
     document.querySelector(`.${BULK_ACTION_CHOICES_DIV}`).classList.add('hidden');
     document.querySelectorAll(`.${BULK_ACTION_PAGE_CHECKBOX_INPUT}`).forEach(el => el.classList.remove('show'));
-  } else if (checkedState.checkedObjects.size === 1 && prevLength === 0) {
+  } else if (numCheckedObjects === 1 && prevLength === 0) {
     /* when 1 checkbox is checked for the first time */
     document.querySelectorAll(`.${BULK_ACTION_PAGE_CHECKBOX_INPUT}`).forEach(el => {
       el.classList.add('show');
@@ -51,7 +60,7 @@ function SelectBulkActionsCheckboxes(e) {
     document.querySelector(`.${BULK_ACTION_CHOICES_DIV}`).classList.remove('hidden');
   }
 
-  if (checkedState.checkedObjects.size === checkedState.numObjects) {
+  if (numCheckedObjects === checkedState.numObjects) {
     /* when all checkboxes in the page are checked */
     document.querySelectorAll(`.${BULK_ACTION_SELECT_ALL_CHECKBOX_TH} input`).forEach(_el => {
       const el = _el;
@@ -66,20 +75,19 @@ function SelectBulkActionsCheckboxes(e) {
     }
   }
 
-  if (checkedState.checkedObjects.size > 0) {
+  if (numCheckedObjects > 0) {
     /* Update text on number of pages */
-    let numPagesSelected = '';
-    const numCheckPages = checkedState.checkedObjects.size;
-    if (numCheckPages === 1) {
-      numPagesSelected = wagtailConfig.STRINGS.NUM_PAGES_SELECTED_SINGULAR;
+    let numObjectsSelected = '';
+    if (numCheckedObjects === 1) {
+      numObjectsSelected = wagtailConfig.STRINGS.NUM_PAGES_SELECTED_SINGULAR;
     } else {
-      if (numCheckPages === checkedState.numObjects) {
-        numPagesSelected = wagtailConfig.STRINGS.NUM_PAGES_SELECTED_ALL.replace('{0}', numCheckPages);
+      if (numCheckedObjects === checkedState.numObjects) {
+        numObjectsSelected = wagtailConfig.STRINGS.NUM_PAGES_SELECTED_ALL.replace('{0}', numCheckedObjects);
       } else {
-        numPagesSelected = wagtailConfig.STRINGS.NUM_PAGES_SELECTED_PLURAL.replace('{0}', numCheckPages);
+        numObjectsSelected = wagtailConfig.STRINGS.NUM_PAGES_SELECTED_PLURAL.replace('{0}', numCheckedObjects);
       }
     }
-    document.querySelector(`.${BULK_ACTION_NUM_OBJECTS_SPAN}`).textContent = numPagesSelected;
+    document.querySelector(`.${BULK_ACTION_NUM_OBJECTS_SPAN}`).textContent = numObjectsSelected;
   }
 }
 
@@ -150,7 +158,7 @@ function addBulkActionListeners() {
       el.addEventListener('change', SelectBulkActionsCheckboxes);
     });
   document.querySelectorAll(`.${BULK_ACTION_SELECT_ALL_CHECKBOX_TH} input`).forEach(el => {
-    el.addEventListener('change', SelectBulkActionsFilter);
+    el.addEventListener('change', SelectAllBulkActionsCheckbox);
   });
   document.querySelectorAll(`.${BULK_ACTION_FILTERS_CLASS}`).forEach(
     elem => elem.addEventListener('click', FilterEventListener)

wagtail/admin/templates/wagtailadmin/bulk_actions/footer.html

@@ -6,7 +6,7 @@
         </div>
         <ul>{% bulk_action_choices bulk_action_register_hook %}</ul>
         <span class="num-objects"></span>
-        {% if select_all_obj_text %}
+        {% if select_all_obj_text and objects.has_other_pages %}
         <a class="num-objects-in-listing u-hidden" href='#'>{{ select_all_obj_text }}</a>
         {% endif %}
     </div>

wagtail/admin/templates/wagtailadmin/pages/index.html

@@ -21,7 +21,7 @@
             {% paginate pages base_url=pagination_base_url %}
         {% endif %}
         {% trans "Select all pages in listing" as select_all_text %}
-        {% include 'wagtailadmin/bulk_actions/footer.html' with select_all_obj_text=select_all_text bulk_action_register_hook='register_page_bulk_action' %}
+        {% include 'wagtailadmin/bulk_actions/footer.html' with select_all_obj_text=select_all_text bulk_action_register_hook='register_page_bulk_action' objects=pages %}
     </form>
 {% endblock %}
 

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

@@ -1,6 +1,6 @@
 {% load wagtailadmin_tags %}
 <div {{ self.attrs }} class="c-dropdown  {% if is_parent %}t-inverted{% else %}t-default{% endif %} {{ classes|join:' ' }}" data-dropdown>
-    <a href="javascript:void(0)" aria-label="{{ title }}" class="c-dropdown__button u-btn-current {{btn_classes|join:' ' }}">
+    <a href="javascript:void(0)" aria-label="{{ title }}" class="c-dropdown__button u-btn-current {{button_classes|join:' ' }}">
         {{ label }}
         <div data-dropdown-toggle class="o-icon c-dropdown__toggle c-dropdown__togle--icon [ icon icon-arrow-down ]">
             {% icon name="arrow-down" %}{% icon name="arrow-up" %}

wagtail/admin/templatetags/wagtailadmin_tags.py

@@ -544,7 +544,7 @@ def bulk_action_choices(context, hook_name):
                 'title': _("View more bulk actions")
             },
             classes={'bulk-actions-more', 'dropup'},
-            btn_classes={'button', 'button-small'},
+            button_classes={'button', 'button-small'},
             buttons_data=[{
                 'label': action.display_name,
                 'url': reverse(corresponding_url, args=[action.action_type]) + '?' + urlencode({'next': action.next_url}),

wagtail/admin/widgets/button.py

@@ -81,13 +81,13 @@ class ButtonWithDropdown(BaseDropdownMenuButton):
     template_name = 'wagtailadmin/pages/listing/_button_with_dropdown.html'
 
     def __init__(self, *args, **kwargs):
-        self.btn_classes = kwargs.pop('btn_classes', set())
+        self.button_classes = kwargs.pop('button_classes', set())
         self.buttons_data = kwargs.pop('buttons_data', [])
         super().__init__(*args, **kwargs)
 
     def get_context_data(self):
         context = super().get_context_data()
-        context['btn_classes'] = self.btn_classes
+        context['button_classes'] = self.button_classes
         context['classes'] = self.classes
         return context