diff --git a/webui/html/index.html b/webui/html/index.html index 82426bd..eae509c 100644 --- a/webui/html/index.html +++ b/webui/html/index.html @@ -122,6 +122,19 @@ .btn.ok{border-color: rgba(45,212,191,.6)} .btn.bad{border-color: rgba(251,113,133,.6)} .btn.warn{border-color: rgba(251,191,36,.6)} + .btn.icon { + padding: 6px 7px; + min-width: 28px; + height: 28px; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 13px; + border-radius: 8px; + } + .btn.icon span { + pointer-events: none; + } .pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; @@ -233,6 +246,45 @@ opacity: 0.65; font-style: italic; } + /* 3-dot dropdown actions */ + .actions-menu { position: relative; display: inline-flex; } + + .menuPanel{ + position: absolute; + right: 0; + top: 34px; + min-width: 140px; + background: linear-gradient(180deg, rgba(17,26,46,.98), rgba(14,23,48,.98)); + border: 1px solid rgba(36,52,95,.9); + border-radius: 12px; + box-shadow: var(--shadow); + padding: 6px; + display: none; + z-index: 50; + } + + .menuPanel.open { display: block; } + + .menuItem{ + width: 100%; + text-align: left; + padding: 8px 10px; + border-radius: 10px; + border: 1px solid transparent; + background: transparent; + color: var(--text); + cursor: pointer; + font-size: 13px; + } + + .menuItem:hover{ + background: rgba(96,165,250,.10); + border-color: rgba(96,165,250,.25); + } + + .menuItem.ok{ border-color: rgba(45,212,191,.35); } + .menuItem.warn{ border-color: rgba(251,191,36,.35); } + .menuItem.bad{ border-color: rgba(251,113,133,.35); } @@ -516,6 +568,25 @@ function hideModal() { document.getElementById('modalBack').style.display = 'none'; } function closeModal(e){ if(e.target.id === 'modalBack') hideModal(); } + function closeAllMenus() { + document.querySelectorAll('.menuPanel.open').forEach(p => p.classList.remove('open')); + } + + function toggleMenu(menuId) { + const el = document.getElementById(menuId); + if (!el) return; + const willOpen = !el.classList.contains('open'); + closeAllMenus(); + if (willOpen) el.classList.add('open'); + } + + // klik buiten menu = sluiten + document.addEventListener('click', (e) => { + // als je op een menu knop klikt, laat toggleMenu het regelen + if (e.target.closest('.actions-menu')) return; + closeAllMenus(); + }); + // ---- Tabs ---- let currentTab = 'dashboard'; function setTab(tab) { @@ -655,6 +726,21 @@ function _setCollapsed(pod, v) { localStorage.setItem('pod_group_collapsed:' + pod, v ? '1' : '0'); } + + function renderActionsDropdown(menuId, actionFn, targetEsc) { + // actionFn is string: "containerAction" of "podAction" + // targetEsc is al esc(...) dus veilig in onclick + return ` + + + + + `; + } function renderContainerRow(c) { const name = (c.Names && c.Names[0]) ? c.Names[0] : (c.Names || c.Name || c.name || ''); @@ -662,6 +748,7 @@ const podName = c.PodName || '-'; const image = c.Image || c.image || ''; const managed = c._dashboard_source || 'podman'; + const menuId = `menu-${cssSafeId('c:' + normalizeContainerName(name))}`; const inPod = !!(c.PodName && String(c.PodName).trim()); const ports = inPod ? '' // verberg bij pod-containers @@ -680,11 +767,9 @@ ${ports || '-'}
- - - - - + + + ${renderActionsDropdown(menuId, 'containerAction', esc(name))}
@@ -727,6 +812,7 @@ const collapsed = _isCollapsed(pod); const isRealPod = (pod !== '(geen pod)'); const total = items.length; + const podMenuId = `menu-${cssSafeId('p:' + pod)}`; let podPortsText = "-"; if (isRealPod) { @@ -779,14 +865,13 @@ ${esc(podPortsText)} ${isRealPod ? ` -
- - +
+ + + - - - -
+ ${renderActionsDropdown(podMenuId, 'podAction', esc(pod))} +
` : '-'}