diff --git a/netbox/project-static/dist/netbox.css b/netbox/project-static/dist/netbox.css index 8c6bfd134..fbad302ff 100644 Binary files a/netbox/project-static/dist/netbox.css and b/netbox/project-static/dist/netbox.css differ diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index afdbea0f8..a4365ca63 100644 Binary files a/netbox/project-static/dist/netbox.js and b/netbox/project-static/dist/netbox.js differ diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map index 212be3659..eb3623216 100644 Binary files a/netbox/project-static/dist/netbox.js.map and b/netbox/project-static/dist/netbox.js.map differ diff --git a/netbox/project-static/src/buttons/floatBulk.ts b/netbox/project-static/src/buttons/floatBulk.ts new file mode 100644 index 000000000..0735690cd --- /dev/null +++ b/netbox/project-static/src/buttons/floatBulk.ts @@ -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( + 'input[type="checkbox"][name="pk"]:checked', + ); + const buttonGroup = document.querySelector( + '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('input[type="checkbox"][name="pk"]')) { + element.addEventListener('change', () => { + toggleFloat(); + }); + } + // Handle the select-all checkbox + for (const element of getElements( + 'table tr th > input[type="checkbox"].toggle', + )) { + element.addEventListener('change', () => { + toggleFloat(); + }); + } +} diff --git a/netbox/project-static/src/buttons/index.ts b/netbox/project-static/src/buttons/index.ts index 6c1c0db0b..cb520b818 100644 --- a/netbox/project-static/src/buttons/index.ts +++ b/netbox/project-static/src/buttons/index.ts @@ -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, diff --git a/netbox/project-static/styles/custom/_misc.scss b/netbox/project-static/styles/custom/_misc.scss index 89eefbaa0..4ef2f1337 100644 --- a/netbox/project-static/styles/custom/_misc.scss +++ b/netbox/project-static/styles/custom/_misc.scss @@ -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; } diff --git a/netbox/templates/generic/bulk_edit.html b/netbox/templates/generic/bulk_edit.html index 7da69a281..4b4d5aece 100644 --- a/netbox/templates/generic/bulk_edit.html +++ b/netbox/templates/generic/bulk_edit.html @@ -102,8 +102,8 @@ Context: {% endif %} -
- {% trans "Cancel" %} +
+ {% trans "Cancel" %}
diff --git a/netbox/templates/generic/object_edit.html b/netbox/templates/generic/object_edit.html index d496a544a..3e0a096fa 100644 --- a/netbox/templates/generic/object_edit.html +++ b/netbox/templates/generic/object_edit.html @@ -67,9 +67,9 @@ Context: {% endblock form %}
-
+
{% block buttons %} - {% trans "Cancel" %} + {% trans "Cancel" %} {% if object.pk %} -
diff --git a/netbox/templates/generic/object_list.html b/netbox/templates/generic/object_list.html index a89c5a960..fdd3cd3d8 100644 --- a/netbox/templates/generic/object_list.html +++ b/netbox/templates/generic/object_list.html @@ -121,7 +121,7 @@ Context: {# /Objects table #} {# Form buttons #} -
+
{% block bulk_buttons %}
{% if 'bulk_edit' in actions %} diff --git a/netbox/templates/inc/filter_list.html b/netbox/templates/inc/filter_list.html index b8c93ca4c..9e1629d10 100644 --- a/netbox/templates/inc/filter_list.html +++ b/netbox/templates/inc/filter_list.html @@ -37,13 +37,13 @@
{% endif %}
- +
+
+ +