Merge pull request #12023 from dacook/buu/sticky_table_header_and_saving_banner-2

[BUU] Sticky table header and saving banner - alternate solution

app/views/admin/products_v3/_table.html.haml

@@ -5,17 +5,6 @@
                    'data-bulk-form-error-value': defined?(error_counts),
                   } do |form|
   = render(partial: "admin/shared/flashes", locals: { flashes: }) if defined? flashes
-  %fieldset.form-actions{ class: ("hidden" unless defined?(error_counts)), 'data-bulk-form-target': "actions" }
-    .container
-      .status.eleven.columns
-        .modified_summary{ 'data-bulk-form-target': "changedSummary", 'data-translation-key': 'admin.products_v3.table.changed_summary'}
-        - if defined?(error_counts)
-          .error_summary
-            -# X products were saved correctly, but Y products could not be saved correctly. Please review errors and try again
-            = t('.error_summary.saved', count: error_counts[:saved]) + t('.error_summary.invalid', count: error_counts[:invalid])
-      .form-buttons.five.columns
-        = form.submit t('.reset'), type: :reset, class: "medium", 'data-reflex': 'click->products#fetch'
-        = form.submit t('.save'), class: "medium"
   %table.products
     %col{ width:"15%" }
     %col{ width:"5%", style: "max-width:5em" }
@@ -28,6 +17,20 @@
     %col{ width:"5%", style: "max-width:5em" }
     %col{ width:"5%", style: "max-width:5em" }
     %thead
+      %tr
+        %td.form-actions-wrapper{ colspan: 10 }
+          .form-actions-wrapper2
+            %fieldset.form-actions{ class: ("hidden" unless defined?(error_counts)), 'data-bulk-form-target': "actions" }
+              .container
+                .status
+                  .modified_summary{ 'data-bulk-form-target': "changedSummary", 'data-translation-key': 'admin.products_v3.table.changed_summary'}
+                  - if defined?(error_counts)
+                    .error_summary
+                      -# X products were saved correctly, but Y products could not be saved correctly. Please review errors and try again
+                      = t('.error_summary.saved', count: error_counts[:saved]) + t('.error_summary.invalid', count: error_counts[:invalid])
+                .form-buttons
+                  = form.submit t('.reset'), type: :reset, class: "medium", 'data-reflex': 'click->products#fetch'
+                  = form.submit t('.save'), class: "medium"
       %tr
         %th.align-left.with-input= t('admin.products_page.columns.name')
         %th.align-right= t('admin.products_page.columns.sku')

app/webpacker/css/admin/products_v3.scss

@@ -19,14 +19,17 @@
     position: relative;
   }
 
-  // Form actions floats over other controls when active
   #products-form {
     .form-actions {
-      position: absolute;
-      top: -1em;
-      left: 0;
-      right: 0;
-      z-index: 1; // Ensure tom-select and .disabled-section are covered
+      .container {
+        .status {
+          flex-grow: 1; // Fill space
+        }
+
+        .form-buttons {
+          flex-shrink: 0; // Don't shrink
+        }
+      }
     }
   }
 
@@ -36,12 +39,37 @@
 
     background-color: $color-tbl-bg;
     padding: 4px;
+    padding-top: 0; // Hide border because .form-actions is there. It is added with th padding instead.
     border-collapse: separate; // This is needed for the outer padding. Also should be helpful to give more flexibility of borders between rows.
 
     // Additional horizontal padding to align with input contents
-    thead th.with-input {
-      padding-left: $padding-tbl-cell + $hpadding-txt;
-      padding-right: $padding-tbl-cell + $hpadding-txt;
+    thead {
+      position: sticky;
+      top: 0;
+      z-index: 1; // TODO: Cover .popout and .vertical-ellipsis-menu, but only when sticky
+      box-shadow: $box-shadow;
+
+      // Form actions replaces other controls when active
+      // It is part of the table header, to allow for sticky stacking when scrolling.
+      .form-actions-wrapper {
+        padding: 0;
+        overflow: visible;
+        background-color: white;
+      }
+      .form-actions-wrapper2 {
+        position: relative;
+        // Stretch to cover table side borders
+        left: -4px;
+        width: calc(100% + 8px);
+        background-color: white;
+
+        padding: 4px 0;
+      }
+
+      th.with-input {
+        padding-left: $padding-tbl-cell + $hpadding-txt;
+        padding-right: $padding-tbl-cell + $hpadding-txt;
+      }
     }
 
     // Row hover
@@ -77,6 +105,7 @@
     }
 
     th {
+      padding-top: $padding-tbl-cell + 4px; // Increase padding to create a top border
       // Clip long content in headers, but allow wrapping
       overflow: hidden;
       text-overflow: clip; // If colums are so small that headers are clipping, ellipsis are more of a hindrance
@@ -126,7 +155,7 @@
     }
 
     // "Naked" inputs. Row hover helps reveal them.
-    input:not([type="checkbox"]) {
+    tbody input:not([type="checkbox"]) {
       background-color: $color-tbl-cell-bg;
       height: auto;
       font-size: inherit;
@@ -164,7 +193,8 @@
   }
 
   #sort {
-    margin-bottom: 1em;
+    margin-top: 3px; // Helps even up with .form-actions when visible
+    margin-bottom: 1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -174,6 +204,10 @@
     line-height: $btn-relaxed-height;
     height: $btn-relaxed-height;
 
+    &.disabled-section {
+      display: none;
+    }
+
     .with-dropdown {
       display: flex;
       justify-content: space-between;
@@ -188,7 +222,7 @@
     grid-template-rows: 1fr;
     grid-column-gap: 20px;
     align-items: end;
-    margin-bottom: 20px;
+    margin-bottom: 1rem;
 
     .query {
       grid-column: 1 / span 3;