Root cause: Modals appended to body were transparent because default theme
CSS variables use rgba with 0.9 opacity. Confirm dialog works because it
starts inside .rpg-panel HTML (solid background) before being moved to body.
Solution: For new modals (tab context menu, prompt dialog, icon picker):
1. If themed (data-theme exists): Copy theme attribute for CSS overrides
2. If default theme: Read computed colors from panel, convert to opacity 1.0,
apply as inline styles with !important
Also improved context menu hover effects:
- Normal items: rgba(255, 255, 255, 0.1) for better contrast
- Delete button: rgba(233, 69, 96, 0.3) for more visibility
Changes:
- promptDialog.js: Dynamic theme-aware solid backgrounds
- tabContextMenu.js: Same for context menu and icon picker + hover effects
Problem: CSS variables --rpg-bg and --rpg-accent have 0.9 opacity,
making all modals and menus transparent even with gradient backgrounds.
Solution: Use solid RGB colors directly in gradients:
- rgba(22, 33, 62, 1) instead of var(--rpg-accent)
- rgba(26, 26, 46, 1) instead of var(--rpg-bg)
Changes:
- style.css: .rpg-modal-content uses solid gradient
- tabContextMenu.js: Context menu uses solid gradient
- Both maintain inset shadow for depth
- Mobile long-press support included
Now modals and context menus have opaque backgrounds matching
widget styling instead of see-through transparency.
Fix Exit Edit Mode button:
- Move button before Lock button (left side as requested)
- Add visibility toggle in editModeManager.js
- Show done button when entering edit mode
- Hide done button when exiting edit mode
- Fixes critical bug where button stayed hidden permanently
Add tab management UI:
- Create promptDialog.js for text input modals (rename, create)
- Create tabContextMenu.js with right-click context menu on tabs
- Integrate with TabManager API for all operations:
- Add New Tab (with validation)
- Rename Tab (with validation)
- Change Icon (icon picker with 20 common icons)
- Duplicate Tab (copies widgets)
- Delete Tab (with confirmation, blocks if last tab)
- Auto-save after tab operations
- Event delegation for dynamic tab elements
Files changed:
- dashboardTemplate.html: Move done button to correct position
- editModeManager.js: Add visibility toggles in enter/exit methods
- promptDialog.js: New dialog system for text input
- tabContextMenu.js: New context menu system
- dashboardIntegration.js: Initialize tab context menu
Lucas 'Paperboy' Rose-Winters