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".