iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: change drawer behavior

Browse Source
This commit is contained in:
0x1d
2025-09-30 22:26:33 +02:00
parent 675d51bc66
commit 7cee2ff94f
5 changed files with 10 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/scripts/components/ClusterMembersComponent.js
View File

@@ -20,7 +20,7 @@ class ClusterMembersComponent extends Component {
} }
}, 200); }, 200);
// Drawer state for desktop // Drawer state for desktop (shared singleton)
this.drawer = new DrawerComponent(); this.drawer = new DrawerComponent();
// Terminal panel container (shared with drawer) // Terminal panel container (shared with drawer)

20
public/scripts/components/DrawerComponent.js
View File

@@ -1,11 +1,16 @@
// Reusable Drawer Component for desktop slide-in panels // Reusable Drawer Component for desktop slide-in panels
class DrawerComponent { class DrawerComponent {
constructor() { constructor() {
if (window.__sharedDrawerInstance) {
return window.__sharedDrawerInstance;
}
this.detailsDrawer = null; this.detailsDrawer = null;
this.detailsDrawerContent = null; this.detailsDrawerContent = null;
this.detailsDrawerBackdrop = null;
this.activeDrawerComponent = null; this.activeDrawerComponent = null;
this.onCloseCallback = null; this.onCloseCallback = null;
window.__sharedDrawerInstance = this;
} }
// Determine if we should use desktop drawer behavior // Determine if we should use desktop drawer behavior
@@ -20,11 +25,6 @@ class DrawerComponent {
ensureDrawer() { ensureDrawer() {
if (this.detailsDrawer) return; if (this.detailsDrawer) return;
// Create backdrop
this.detailsDrawerBackdrop = document.createElement('div');
this.detailsDrawerBackdrop.className = 'details-drawer-backdrop';
document.body.appendChild(this.detailsDrawerBackdrop);
// Create drawer // Create drawer
this.detailsDrawer = document.createElement('div'); this.detailsDrawer = document.createElement('div');
this.detailsDrawer.className = 'details-drawer'; this.detailsDrawer.className = 'details-drawer';
@@ -83,7 +83,6 @@ class DrawerComponent {
} }
}); });
} }
this.detailsDrawerBackdrop.addEventListener('click', close);
document.addEventListener('keydown', (e) => { document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') close(); if (e.key === 'Escape') close();
}); });
@@ -128,12 +127,10 @@ class DrawerComponent {
// Open drawer // Open drawer
this.detailsDrawer.classList.add('open'); this.detailsDrawer.classList.add('open');
this.detailsDrawerBackdrop.classList.add('visible');
} }
closeDrawer() { closeDrawer() {
if (this.detailsDrawer) this.detailsDrawer.classList.remove('open'); if (this.detailsDrawer) this.detailsDrawer.classList.remove('open');
if (this.detailsDrawerBackdrop) this.detailsDrawerBackdrop.classList.remove('visible');
// Call close callback if provided // Call close callback if provided
if (this.onCloseCallback) { if (this.onCloseCallback) {
@@ -147,13 +144,8 @@ class DrawerComponent {
if (this.detailsDrawer && this.detailsDrawer.parentNode) { if (this.detailsDrawer && this.detailsDrawer.parentNode) {
this.detailsDrawer.parentNode.removeChild(this.detailsDrawer); this.detailsDrawer.parentNode.removeChild(this.detailsDrawer);
} }
if (this.detailsDrawerBackdrop && this.detailsDrawerBackdrop.parentNode) {
this.detailsDrawerBackdrop.parentNode.removeChild(this.detailsDrawerBackdrop);
}
this.detailsDrawer = null; this.detailsDrawer = null;
this.detailsDrawerContent = null; this.detailsDrawerContent = null;
this.detailsDrawerBackdrop = null;
this.activeDrawerComponent = null; this.activeDrawerComponent = null;
} }

2
public/scripts/components/MonitoringViewComponent.js
View File

@@ -10,7 +10,7 @@ class MonitoringViewComponent extends Component {
// Track if we've already loaded data to prevent unnecessary reloads // Track if we've already loaded data to prevent unnecessary reloads
this.dataLoaded = false; this.dataLoaded = false;
// Drawer state for desktop // Drawer state for desktop (shared singleton)
this.drawer = new DrawerComponent(); this.drawer = new DrawerComponent();
} }

2
public/scripts/components/TopologyGraphComponent.js
View File

@@ -10,7 +10,7 @@ class TopologyGraphComponent extends Component {
this.height = 0; // Will be set dynamically based on container size this.height = 0; // Will be set dynamically based on container size
this.isInitialized = false; this.isInitialized = false;
// Drawer state for desktop reuse (same pattern as ClusterMembersComponent) // Drawer state for desktop reuse (shared singleton)
this.drawer = new DrawerComponent(); this.drawer = new DrawerComponent();
// Tooltip for labels on hover // Tooltip for labels on hover

14
public/styles/main.css
View File

@@ -3292,17 +3292,6 @@ select.param-input:focus {
} }
/* Desktop slide-in details drawer */ /* Desktop slide-in details drawer */
.details-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 999;
}
.details-drawer-backdrop.visible { opacity: 1; pointer-events: auto; }
.details-drawer { .details-drawer {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -3376,8 +3365,7 @@ select.param-input:focus {
/* Only enable drawer on wider screens; on small keep inline cards */ /* Only enable drawer on wider screens; on small keep inline cards */
@media (max-width: 1023px) { @media (max-width: 1023px) {
.details-drawer, .details-drawer { display: none; }
.details-drawer-backdrop { display: none; }
} }
/* Terminal Panel - bottom-centered modal style */ /* Terminal Panel - bottom-centered modal style */