Merge pull request #17523 from atownson/issue_16009

Closes #16009 - Added styling to form templates to enable floating button groups

Author: jeremystretch

netbox/project-static/dist/netbox.css

@@ -0,0 +1,42 @@
+import { getElements } from '../util';
+
+/**
+ * Conditionally add and remove a class that will float the button group
+ * based on whether or not items in the list are checked
+ */
+function toggleFloat(): void {
+  const checkedCheckboxes = document.querySelector<HTMLInputElement>(
+    'input[type="checkbox"][name="pk"]:checked',
+  );
+  const buttonGroup = document.querySelector<HTMLDivElement>(
+    'div.form.form-horizontal div.btn-list',
+  );
+  if (!buttonGroup) {
+    return;
+  }
+  const isFloating = buttonGroup.classList.contains('btn-float-group-left');
+  if (checkedCheckboxes !== null && !isFloating) {
+    buttonGroup.classList.add('btn-float-group-left');
+  } else if (checkedCheckboxes === null && isFloating) {
+    buttonGroup.classList.remove('btn-float-group-left');
+  }
+}
+
+/**
+ * Initialize floating bulk buttons.
+ */
+export function initFloatBulk(): void {
+  for (const element of getElements<HTMLInputElement>('input[type="checkbox"][name="pk"]')) {
+    element.addEventListener('change', () => {
+      toggleFloat();
+    });
+  }
+  // Handle the select-all checkbox
+  for (const element of getElements<HTMLInputElement>(
+    'table tr th > input[type="checkbox"].toggle',
+  )) {
+    element.addEventListener('change', () => {
+      toggleFloat();
+    });
+  }
+}

netbox/project-static/dist/netbox.js

@@ -3,6 +3,7 @@ import { initDepthToggle } from './depthToggle';
 import { initMoveButtons } from './moveOptions';
 import { initReslug } from './reslug';
 import { initSelectAll } from './selectAll';
+import { initFloatBulk } from './floatBulk';
 import { initSelectMultiple } from './selectMultiple';
 import { initMarkdownPreviews } from './markdownPreview';
 import { initSecretToggle } from './secretToggle';
@@ -14,6 +15,7 @@ export function initButtons(): void {
     initReslug,
     initSelectAll,
     initSelectMultiple,
+    initFloatBulk,
     initMoveButtons,
     initMarkdownPreviews,
     initSecretToggle,

netbox/project-static/dist/netbox.js.map

@@ -34,6 +34,28 @@ span.color-label {
   letter-spacing: .15rem;
 }
 
+// A floating div for form buttons
+.btn-float-group {
+  position: sticky;
+  bottom: 10px;
+  z-index: 2;
+}
+
+.btn-float-group-left {
+  @extend .btn-float-group;
+  float: left;  
+}
+
+.btn-float-group-right {
+  @extend .btn-float-group;
+  float: right;
+}
+
+// Override a transparent background
+.btn-float {
+  --tblr-btn-bg: var(--#{$prefix}bg-surface-tertiary) !important;
+}
+
 .logo {
   height: 80px;
 }

netbox/project-static/src/buttons/floatBulk.ts

@@ -102,8 +102,8 @@ <h2 class="col-9 offset-3">{% trans "Comments" %}</h2>
 
       {% endif %}
 
-      <div class="text-end">
-        <a href="{{ return_url }}" class="btn btn-outline-secondary">{% trans "Cancel" %}</a>
+      <div class="btn-float-group-right">
+        <a href="{{ return_url }}" class="btn btn-outline-secondary btn-float">{% trans "Cancel" %}</a>
         <button type="submit" name="_apply" class="btn btn-primary">{% trans "Apply" %}</button>
       </div>
 

netbox/project-static/src/buttons/index.ts

@@ -67,9 +67,9 @@
         {% endblock form %}
       </div>
 
-      <div class="text-end my-3">
+      <div class="btn-float-group-right">
         {% block buttons %}
-          <a href="{{ return_url }}" class="btn btn-outline-secondary">{% trans "Cancel" %}</a>
+          <a href="{{ return_url }}" class="btn btn-outline-secondary btn-float">{% trans "Cancel" %}</a>
           {% if object.pk %}
             <button type="submit" name="_update" class="btn btn-primary">
               {% trans "Save" %}
@@ -79,7 +79,7 @@
               <button type="submit" name="_create" class="btn btn-primary">
                 {% trans "Create" %}
               </button>
-              <button type="submit" name="_addanother" class="btn btn-outline-primary">
+              <button type="submit" name="_addanother" class="btn btn-outline-primary btn-float">
                 {% trans "Create & Add Another" %}
               </button>
             </div>

netbox/project-static/styles/custom/_misc.scss

@@ -121,7 +121,7 @@
           {# /Objects table #}
 
           {# Form buttons #}
-          <div class="btn-list d-print-none mt-2">
+          <div class="btn-list d-print-none">
             {% block bulk_buttons %}
               <div class="bulk-action-buttons">
                 {% if 'bulk_edit' in actions %}

netbox/templates/generic/bulk_edit.html

@@ -37,13 +37,13 @@
         </div>
       {% endif %}
     </div>
-    <div class="card-footer text-end d-print-none border-0">
-      <button type="button" class="btn btn-outline-danger m-1" data-reset-select>
-        <i class="mdi mdi-backspace"></i> {% trans "Reset" %}
-      </button>
-      <button type="submit" class="btn btn-primary m-1">
-        <i class="mdi mdi-magnify"></i> {% trans "Search" %}
-      </button>
-    </div>
+  </div>
+  <div class="btn-float-group-right me-1">
+    <button type="button" class="btn btn-outline-danger btn-float" data-reset-select>
+      <i class="mdi mdi-backspace"></i> {% trans "Reset" %}
+    </button>
+    <button type="submit" class="btn btn-primary">
+      <i class="mdi mdi-magnify"></i> {% trans "Search" %}
+    </button>
   </div>
 </form>