From 3ebd15b67e4ab05cb280d4f363a966e4a4fc09eb Mon Sep 17 00:00:00 2001
From: Mike Masey <michael_masey@hotmail.com>
Date: Sun, 23 Oct 2022 15:37:43 +0100
Subject: [PATCH] fix: move list view selection options to after list in focus
 order

---
 .../components/umbstickybar.directive.js      |   8 +-
 .../src/less/listview.less                    |  10 ++
 .../propertyeditors/listview/listview.html    | 153 +++++++-----------
 3 files changed, 77 insertions(+), 94 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js
index de6555a05a..28b2647184 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js
@@ -30,16 +30,18 @@ Use this directive make an element sticky and follow the page when scrolling. `u
         /**
         Toggle `umb-sticky-bar--active` class on the sticky-bar element
         **/
-        const setClass = (addClass, current) => current.classList.toggle('umb-sticky-bar--active', addClass);                    
+        const setClass = (addClass, current) => current.classList.toggle('umb-sticky-bar--active', addClass);
 
         /**
         Inserts two elements in the umbStickyBar parent element
         These are used by the IntersectionObserve to calculate scroll position
         **/
         const addSentinel = current => {
-            const sentinel = document.createElement('div');
-            sentinel.classList.add('umb-sticky-sentinel', '-top');
+          if (current.parentElement.querySelector(".umb-sticky-sentinel") === null) {
+            const sentinel = document.createElement("div");
+            sentinel.classList.add("umb-sticky-sentinel", "-top");
             current.parentElement.prepend(sentinel);
+          }
         };
 
         /**
diff --git a/src/Umbraco.Web.UI.Client/src/less/listview.less b/src/Umbraco.Web.UI.Client/src/less/listview.less
index 9321577c15..736fc99f85 100644
--- a/src/Umbraco.Web.UI.Client/src/less/listview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/listview.less
@@ -219,6 +219,16 @@
   display: none !important
 }
 
+/* Sticky sub header with correct focus ordering */
+.umb-listview .umb-listview__container {
+  display: flex;
+  flex-direction: column;
+}
+
+.umb-listview .umb-listview__container .umb-editor-sub-header {
+  order: -1;
+}
+
 /* ---------- LAYOUTS ---------- */
 
 .list-view-layout {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
index ab9464d6b2..b7462696b6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
@@ -4,9 +4,9 @@
 
    </div>
 
-   <div class="row-fluid" ng-switch-when="false">
+   <div class="row-fluid umb-listview__container" ng-switch-when="false">
 
-       <umb-editor-sub-header ng-class="{'--state-selection':(selection.length > 0)}">
+       <umb-editor-sub-header ng-if="(selection.length == 0)">
 
            <umb-editor-sub-header-content-left>
 
@@ -88,30 +88,12 @@
 
                </umb-editor-sub-header-section>
 
-               <umb-editor-sub-header-section ng-show="(selection.length > 0)">
-                   <umb-button
-                       type="button"
-                       label="Clear selection"
-                       label-key="buttons_clearSelection"
-                       button-style="white"
-                       action="clearSelection()"
-                       disabled="actionInProgress">
-                   </umb-button>
-               </umb-editor-sub-header-section>
-
-               <umb-editor-sub-header-section ng-show="(selection.length > 0)">
-                   <strong ng-show="!actionInProgress">{{ selectedItemsCount() }} <localize key="general_of">of</localize> {{ listViewResultSet.items.length }} <localize key="general_selected">selected</localize></strong>
-                   <strong ng-show="actionInProgress" ng-bind="bulkStatus"></strong>
-
-                   <umb-loader position="bottom" ng-show="actionInProgress"></umb-loader>
-               </umb-editor-sub-header-section>
-
            </umb-editor-sub-header-content-left>
 
 
            <umb-editor-sub-header-content-right>
 
-               <umb-editor-sub-header-section ng-show="(selection.length == 0)">
+               <umb-editor-sub-header-section>
 
                    <umb-layout-selector
                        ng-show="options.layout.layouts"
@@ -122,81 +104,12 @@
 
                </umb-editor-sub-header-section>
 
-               <umb-editor-sub-header-section ng-show="(selection.length == 0)">
+               <umb-editor-sub-header-section>
 
                     <umb-mini-search model="options.filter" on-search="makeSearch()" on-start-typing="onSearchStartTyping()">
                     </umb-mini-search>
 
                </umb-editor-sub-header-section>
-
-               <umb-editor-sub-header-section ng-show="(selection.length > 0)">
-
-                   <umb-button
-                       ng-if="options.allowBulkPublish && (buttonPermissions == null || buttonPermissions.canPublish)"
-                       style="margin-right: 5px;"
-                       type="button"
-                       button-style="white"
-                       label-key="actions_publish"
-                       icon="icon-globe"
-                       action="publish()"
-                       disabled="actionInProgress"
-                       size="xs"
-                       add-ellipsis="true">
-                   </umb-button>
-
-                   <umb-button
-                       ng-if="options.allowBulkUnpublish && (buttonPermissions == null || buttonPermissions.canUnpublish)"
-                       style="margin-right: 5px;"
-                       type="button"
-                       button-style="white"
-                       label-key="actions_unpublish"
-                       icon="icon-block"
-                       action="unpublish()"
-                       disabled="actionInProgress"
-                       size="xs"
-                       add-ellipsis="true">
-                   </umb-button>
-
-                   <umb-button
-                       ng-if="options.allowBulkCopy && (buttonPermissions == null || buttonPermissions.canCopy)"
-                       style="margin-right: 5px;"
-                       type="button"
-                       button-style="white"
-                       label-key="actions_copy"
-                       icon="icon-documents"
-                       action="copy()"
-                       disabled="actionInProgress"
-                       size="xs"
-                       add-ellipsis="true">
-                   </umb-button>
-
-                   <umb-button
-                       ng-if="options.allowBulkMove && (buttonPermissions == null || buttonPermissions.canMove)"
-                       style="margin-right: 5px;"
-                       type="button"
-                       button-style="white"
-                       label-key="actions_move"
-                       icon="icon-enter"
-                       action="move()"
-                       disabled="actionInProgress"
-                       size="xs"
-                       add-ellipsis="true">
-                   </umb-button>
-
-                   <umb-button
-                       ng-if="options.allowBulkDelete && (buttonPermissions == null || buttonPermissions.canDelete)"
-                       type="button"
-                       button-style="white"
-                       label-key="actions_delete"
-                       icon="icon-trash"
-                       action="delete(selection.length, listViewResultSet.items.length)"
-                       disabled="actionInProgress"
-                       size="xs"
-                       add-ellipsis="true">
-                   </umb-button>
-
-               </umb-editor-sub-header-section>
-
            </umb-editor-sub-header-content-right>
 
        </umb-editor-sub-header>
@@ -216,6 +129,64 @@
 
       <div ng-if="viewLoaded && viewLoadedError" class="umb-alert umb-alert--warning">{{viewLoadedError}}</div>
 
+      <umb-editor-sub-header class="--state-selection" ng-if="(selection.length > 0)">
+
+        <umb-editor-sub-header-content-left>
+
+            <umb-editor-sub-header-section>
+                <umb-button type="button" label="Clear selection" label-key="buttons_clearSelection" button-style="white"
+                  action="clearSelection()" disabled="actionInProgress">
+                </umb-button>
+            </umb-editor-sub-header-section>
+
+            <umb-editor-sub-header-section>
+                <strong ng-show="!actionInProgress">{{ selectedItemsCount() }}
+                  <localize key="general_of">of</localize> {{
+                  listViewResultSet.items.length }}
+                  <localize key="general_selected">selected</localize>
+                </strong>
+                <strong ng-show="actionInProgress" ng-bind="bulkStatus"></strong>
+                <umb-loader position="bottom" ng-show="actionInProgress"></umb-loader>
+            </umb-editor-sub-header-section>
+
+        </umb-editor-sub-header-content-left>
+
+
+        <umb-editor-sub-header-content-right>
+
+          <umb-editor-sub-header-section>
+            <umb-button ng-if="options.allowBulkPublish && (buttonPermissions == null || buttonPermissions.canPublish)"
+              style="margin-right: 5px" type="button" button-style="white" label-key="actions_publish" icon="icon-globe"
+              action="publish()" disabled="actionInProgress" size="xs" add-ellipsis="true">
+            </umb-button>
+
+            <umb-button
+              ng-if="options.allowBulkUnpublish && (buttonPermissions == null || buttonPermissions.canUnpublish)"
+              style="margin-right: 5px" type="button" button-style="white" label-key="actions_unpublish" icon="icon-block"
+              action="unpublish()" disabled="actionInProgress" size="xs" add-ellipsis="true">
+            </umb-button>
+
+            <umb-button ng-if="options.allowBulkCopy && (buttonPermissions == null || buttonPermissions.canCopy)"
+              style="margin-right: 5px" type="button" button-style="white" label-key="actions_copy" icon="icon-documents"
+              action="copy()" disabled="actionInProgress" size="xs" add-ellipsis="true">
+            </umb-button>
+
+            <umb-button ng-if="options.allowBulkMove && (buttonPermissions == null || buttonPermissions.canMove)"
+              style="margin-right: 5px" type="button" button-style="white" label-key="actions_move" icon="icon-enter"
+              action="move()" disabled="actionInProgress" size="xs" add-ellipsis="true">
+            </umb-button>
+
+            <umb-button ng-if="options.allowBulkDelete && (buttonPermissions == null || buttonPermissions.canDelete)"
+              type="button" button-style="white" label-key="actions_delete" icon="icon-trash"
+              action="delete(selection.length, listViewResultSet.items.length)" disabled="actionInProgress" size="xs"
+              add-ellipsis="true">
+            </umb-button>
+          </umb-editor-sub-header-section>
+
+        </umb-editor-sub-header-content-right>
+
+      </umb-editor-sub-header>
+
       <div class="flex justify-center">
           <umb-pagination
              ng-show="listViewResultSet.totalPages"