Hide grid stack buttons when dashboard is locked

This commit is contained in:
Jonathan Senecal 2023-08-16 17:38:19 -04:00
parent 3c7ad61f8b
commit e8b6f5c89d
2 changed files with 11 additions and 2 deletions

View File

@ -6,8 +6,13 @@ function lockDashboard(): void {
const dashboard = document.getElementById('dashboard') as any;
const gridUnlockButton = document.getElementById('unlock_dashboard') as HTMLButtonElement;
const gridLockButton = document.getElementById('lock_dashboard') as HTMLButtonElement;
if (dashboard) {
dashboard.gridstack.disable();
// Hide the grid stack items buttons
Array.from(document.getElementsByClassName("grid-stack-item-button")).forEach(function (element) {
element.classList.add('invisible');
});
}
if (gridUnlockButton && gridLockButton) {
gridUnlockButton.classList.remove('invisible');
@ -21,6 +26,10 @@ function unlockDashboard(): void {
const gridLockButton = document.getElementById('lock_dashboard') as HTMLButtonElement;
if (dashboard) {
dashboard.gridstack.enable();
// Show the grid stack items buttons
Array.from(document.getElementsByClassName("grid-stack-item-button")).forEach(function (element) {
element.classList.remove('invisible');
});
}
if (gridUnlockButton && gridLockButton) {
gridUnlockButton.classList.add('invisible');

View File

@ -10,7 +10,7 @@
>
<div class="card grid-stack-item-content">
<div class="card-header text-center text-light bg-{% if widget.color %}{{ widget.color }}{% else %}secondary{% endif %} p-1">
<div class="float-start ps-1">
<div class="float-start ps-1 grid-stack-item-button invisible">
<a href="#"
hx-get="{% url 'extras:dashboardwidget_config' id=widget.id %}"
hx-target="#htmx-modal-content"
@ -18,7 +18,7 @@
data-bs-target="#htmx-modal"
><i class="mdi mdi-cog text-gray"></i></a>
</div>
<div class="float-end pe-1">
<div class="float-end pe-1 grid-stack-item-button invisible">
<a href="#"
hx-get="{% url 'extras:dashboardwidget_delete' id=widget.id %}"
hx-target="#htmx-modal-content"