diff --git a/src/opnsense/www/css/dashboard.css b/src/opnsense/www/css/dashboard.css
index fccf0572a..6a50e589e 100644
--- a/src/opnsense/www/css/dashboard.css
+++ b/src/opnsense/www/css/dashboard.css
@@ -2,6 +2,11 @@
--chart-js-font-color: #000000;
}
+.btn-pressed, .btn-pressed:hover {
+ background-color: #d94f00;
+ color: white;
+}
+
.fa-spinner {
font-size: 2em;
}
diff --git a/src/opnsense/www/js/opnsense_widget_manager.js b/src/opnsense/www/js/opnsense_widget_manager.js
index 1ce21aac8..382c991e5 100644
--- a/src/opnsense/www/js/opnsense_widget_manager.js
+++ b/src/opnsense/www/js/opnsense_widget_manager.js
@@ -272,6 +272,11 @@ class WidgetManager {
`));
$btn_group.append($(``));
+ $btn_group.append($(`
+
+ `));
// Initially hide the save button
$('#save-grid').hide();
@@ -386,6 +391,24 @@ class WidgetManager {
}
});
});
+
+ $('#lock-grid').on('click', () => {
+ $('#lock-grid').toggleClass('btn-pressed');
+
+ if ($('#lock-grid').hasClass('btn-pressed')) {
+ this.grid.enableMove(false);
+ this.grid.enableResize(false);
+ $('.widget-content').css('cursor', 'default');
+ } else {
+ this.grid.enableMove(true);
+ this.grid.enableResize(true);
+ $('.widget-content').css('cursor', 'grab');
+ }
+ });
+
+ $('#lock-grid').mouseup(function() {
+ $(this).blur();
+ });
}
/* Executes all widget post-render callbacks asynchronously and in "parallel".