Invario/Inventarsystem
3
1
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases 392 Wiki Activity

Refactor bulk delete drawer for improved UI and functionality

Browse Source
This commit is contained in:
AIIrondev
2026-04-10 23:14:27 +02:00
parent 1755ec222d
commit ef605e080b
1 changed files with 52 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/templates/main_admin.html
+52 -54
View File
@@ -26,23 +26,15 @@
font-weight: 600; font-weight: 600;
} }
.bulk-delete-inline-wrap {
position: relative;
display: inline-flex;
}
.bulk-delete-drawer-toggle { .bulk-delete-drawer-toggle {
position: fixed; position: static;
right: 0; transform: none;
top: 46%; z-index: 2;
transform: translateY(-50%);
z-index: 220;
border: 1px solid #0b5ed7;
border-radius: 10px 0 0 10px;
padding: 10px 10px 10px 8px;
background: linear-gradient(180deg, #0d6efd 0%, #0b5ed7 100%);
color: #fff;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.02em;
cursor: pointer;
box-shadow: 0 8px 18px rgba(13, 110, 253, 0.26);
transition: transform 0.15s ease, box-shadow 0.2s ease;
} }
.bulk-delete-drawer-toggle .drawer-icon { .bulk-delete-drawer-toggle .drawer-icon {
@@ -55,26 +47,30 @@
} }
.bulk-delete-drawer-toggle:active { .bulk-delete-drawer-toggle:active {
transform: translateY(-50%) scale(0.98); transform: scale(0.98);
} }
.bulk-delete-drawer { .bulk-delete-drawer {
position: fixed; position: absolute;
right: 12px; right: 0;
top: 50%; top: calc(100% + 10px);
transform: translate(120%, -50%); transform: translateY(-8px);
width: min(360px, calc(100vw - 24px)); width: min(360px, calc(100vw - 34px));
z-index: 219; z-index: 35;
border: 1px solid #dbe3ee; border: 1px solid #dbe3ee;
background: #ffffff; background: #ffffff;
border-radius: 14px; border-radius: 14px;
padding: 14px; padding: 14px;
box-shadow: 0 18px 34px rgba(15, 23, 42, 0.15); box-shadow: 0 18px 34px rgba(15, 23, 42, 0.15);
transition: transform 0.25s ease; transition: transform 0.2s ease, opacity 0.2s ease;
opacity: 0;
pointer-events: none;
} }
.bulk-delete-drawer.open { .bulk-delete-drawer.open {
transform: translate(0, -50%); transform: translateY(0);
opacity: 1;
pointer-events: auto;
} }
.bulk-delete-drawer strong { .bulk-delete-drawer strong {
@@ -391,16 +387,11 @@
cursor: pointer; cursor: pointer;
} }
.bulk-delete-drawer-overlay { @media (max-width: 768px) {
position: fixed; .bulk-delete-drawer {
inset: 0; right: -8px;
background: rgba(15, 23, 42, 0.14); width: min(340px, calc(100vw - 24px));
z-index: 218; }
display: none;
}
.bulk-delete-drawer-overlay.open {
display: block;
} }
.item-card .item-image { .item-card .item-image {
@@ -2255,23 +2246,24 @@ document.addEventListener('DOMContentLoaded', ()=>{
<button id="toggle-favorites-view" class="view-toggle-btn" title="Nur Merkliste anzeigen"> <button id="toggle-favorites-view" class="view-toggle-btn" title="Nur Merkliste anzeigen">
<span id="favorites-view-icon">🔖</span> <span id="favorites-view-icon">🔖</span>
</button> </button>
<div class="bulk-delete-inline-wrap">
<button type="button" id="bulk-delete-drawer-toggle" class="view-toggle-btn bulk-delete-drawer-toggle" aria-expanded="false" title="Massenlöschung" onclick="toggleBulkDeleteDrawer()">
<span class="drawer-icon">⚙</span>
</button>
<div id="bulk-delete-drawer" class="bulk-delete-drawer" aria-hidden="true">
<strong>Massenlöschung nach Kriterien</strong>
<div class="bulk-delete-summary" id="bulk-delete-summary">0 Elemente ausgewählt</div>
<small>Filter zuerst setzen, dann alle sichtbaren Elemente markieren oder einzelne Karten per Checkbox auswählen.</small>
<div class="bulk-delete-actions">
<button type="button" onclick="selectVisibleItems()">Alle sichtbaren auswählen</button>
<button type="button" onclick="clearBulkSelection()">Auswahl leeren</button>
<button type="button" id="bulk-delete-button" class="danger" onclick="deleteSelectedItems()" disabled>Auswahl löschen</button>
</div>
</div>
</div>
</div> </div>
</h1> </h1>
<div id="items-indicator" class="items-indicator">Objekte im System: 0</div> <div id="items-indicator" class="items-indicator">Objekte im System: 0</div>
<button type="button" id="bulk-delete-drawer-toggle" class="bulk-delete-drawer-toggle" aria-expanded="false" onclick="toggleBulkDeleteDrawer()">
<span class="drawer-icon">⚙</span> Auswahl
</button>
<div id="bulk-delete-drawer-overlay" class="bulk-delete-drawer-overlay" onclick="setBulkDeleteDrawer(false)"></div>
<div id="bulk-delete-drawer" class="bulk-delete-drawer" aria-hidden="true">
<strong>Massenlöschung nach Kriterien</strong>
<div class="bulk-delete-summary" id="bulk-delete-summary">0 Elemente ausgewählt</div>
<small>Filter zuerst setzen, dann alle sichtbaren Elemente markieren oder einzelne Karten per Checkbox auswählen.</small>
<div class="bulk-delete-actions">
<button type="button" onclick="selectVisibleItems()">Alle sichtbaren auswählen</button>
<button type="button" onclick="clearBulkSelection()">Auswahl leeren</button>
<button type="button" id="bulk-delete-button" class="danger" onclick="deleteSelectedItems()" disabled>Auswahl löschen</button>
</div>
</div>
<div class="filter-container"> <div class="filter-container">
<div class="filter-group"> <div class="filter-group">
<div class="filter-header"> <div class="filter-header">
@@ -3002,18 +2994,14 @@ document.addEventListener('DOMContentLoaded', ()=>{
function setBulkDeleteDrawer(open) { function setBulkDeleteDrawer(open) {
bulkDeleteDrawerOpen = Boolean(open); bulkDeleteDrawerOpen = Boolean(open);
const drawer = document.getElementById('bulk-delete-drawer'); const drawer = document.getElementById('bulk-delete-drawer');
const overlay = document.getElementById('bulk-delete-drawer-overlay');
const toggle = document.getElementById('bulk-delete-drawer-toggle'); const toggle = document.getElementById('bulk-delete-drawer-toggle');
if (drawer) { if (drawer) {
drawer.classList.toggle('open', bulkDeleteDrawerOpen); drawer.classList.toggle('open', bulkDeleteDrawerOpen);
drawer.setAttribute('aria-hidden', bulkDeleteDrawerOpen ? 'false' : 'true'); drawer.setAttribute('aria-hidden', bulkDeleteDrawerOpen ? 'false' : 'true');
} }
if (overlay) {
overlay.classList.toggle('open', bulkDeleteDrawerOpen);
}
if (toggle) { if (toggle) {
toggle.setAttribute('aria-expanded', bulkDeleteDrawerOpen ? 'true' : 'false'); toggle.setAttribute('aria-expanded', bulkDeleteDrawerOpen ? 'true' : 'false');
toggle.innerHTML = bulkDeleteDrawerOpen ? '<span class="drawer-icon">✕</span> Auswahl' : '<span class="drawer-icon">⚙</span> Auswahl'; toggle.innerHTML = bulkDeleteDrawerOpen ? '<span class="drawer-icon">✕</span>' : '<span class="drawer-icon">⚙</span>';
} }
} }
@@ -3083,6 +3071,16 @@ document.addEventListener('DOMContentLoaded', ()=>{
} }
}); });
document.addEventListener('click', function(event) {
if (!bulkDeleteDrawerOpen) {
return;
}
const wrapper = document.querySelector('.bulk-delete-inline-wrap');
if (wrapper && !wrapper.contains(event.target)) {
setBulkDeleteDrawer(false);
}
});
function deleteSelectedItems() { function deleteSelectedItems() {
const selectedIds = [...bulkDeleteSelection]; const selectedIds = [...bulkDeleteSelection];
if (selectedIds.length === 0) { if (selectedIds.length === 0) {