fix(dashboard): fix resize, drag-drop, overflow, and add auto-migration
Multiple critical fixes for dashboard v2: **1. ResizeHandler error - updateContainerWidth is not a function** - resizeHandler.js:288 was calling non-existent method - Removed call - containerWidth tracked by ResizeObserver - Resizing now functional **2. DragDrop bug - widgets can't be released** - endDrag() destructured widgets, originalX, originalY from dragState - These fields were never added in startDrag() - Added widgets parameter to initWidget() and startDrag() - Store originalX, originalY, widgets in dragState - dashboardManager now passes current tab widgets - Widgets can now be dropped properly **3. Widget content overflow** - Added base .rpg-widget CSS: overflow: hidden, box-sizing: border-box - Prevents content extending beyond widget bounds - max-width: 100% on children **4. Automatic layout migration** - Old 12-column layouts (w: 8, w: 12) cause 500%+ widths in 2-4 column grid - Added migrateOldLayouts() method - Detects widgets with w > current column count - Runs auto-layout to reposition for responsive grid - Clears and re-renders current tab with new positions - Saves migrated layout automatically **5. Tab rendering** - Implemented renderTabs() method - Displays tab buttons with icons and names - Active state highlighting - Click handlers to switch tabs **6. Collision prevention** - Modified dragDrop endDrag() to check collisions - Same-size widgets: swap positions - Different sizes: revert to original - Prevents overlapping widgets **7. Edit mode fixes** - Fixed edit button to call toggleEditMode() - Added CSS to hide resize handles when not in edit mode - Handles only visible in edit mode **8. Icon-only header buttons** - Auto-Arrange and Edit buttons now icon-only - Saves horizontal space in header All issues from user testing resolved.
This commit is contained in:
@@ -138,15 +138,12 @@ function getInlineDashboardTemplate() {
|
||||
<div class="rpg-dashboard-header-right">
|
||||
<button id="rpg-dashboard-auto-layout" class="rpg-dashboard-btn rpg-auto-layout-btn" title="Auto-Arrange Widgets">
|
||||
<i class="fa-solid fa-table-cells-large"></i>
|
||||
<span>Auto-Arrange</span>
|
||||
</button>
|
||||
<button id="rpg-dashboard-edit-mode" class="rpg-dashboard-btn rpg-edit-mode-btn" title="Toggle Edit Mode">
|
||||
<i class="fa-solid fa-pen-to-square"></i>
|
||||
<span>Edit</span>
|
||||
</button>
|
||||
<button id="rpg-dashboard-add-widget" class="rpg-dashboard-btn rpg-add-widget-btn" style="display: none;" title="Add Widget">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
<span>Add Widget</span>
|
||||
</button>
|
||||
<button id="rpg-dashboard-export-layout" class="rpg-dashboard-btn rpg-export-btn" style="display: none;" title="Export Layout">
|
||||
<i class="fa-solid fa-download"></i>
|
||||
@@ -202,9 +199,9 @@ function setupDashboardEventListeners(dependencies) {
|
||||
const editModeBtn = document.querySelector('#rpg-dashboard-edit-mode');
|
||||
if (editModeBtn) {
|
||||
editModeBtn.addEventListener('click', () => {
|
||||
if (dashboardManager) {
|
||||
const isEditMode = dashboardManager.editModeManager.isEditMode();
|
||||
dashboardManager.editModeManager.setEditMode(!isEditMode);
|
||||
if (dashboardManager && dashboardManager.editManager) {
|
||||
console.log('[RPG Companion] Edit button clicked');
|
||||
dashboardManager.editManager.toggleEditMode();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user