Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dashboard): move edit mode controls to menu permanently

Browse Source 
Reduces header button crowding by keeping edit controls in menu at all screen sizes.

Changes:
- Add .rpg-menu-only-btn class to Add/Export/Import/Done buttons
- Remove display toggling from EditModeManager (simpler state machine)
- Update HeaderOverflowManager to:
  - Always hide menu-only buttons (never show inline)
  - Mark them as available for menu (wasVisible = 'true')
  - Filter menu items based on edit mode state
  - Add setEditModeManager() for edit state access
- Wire editModeManager to headerOverflowManager in integration

Result:
- Full mode: 6 visible buttons (was 10 with edit mode active)
- Overflow mode: 3 priority + menu with 3 standard + 4 edit (when active)
- Compact mode: 3 priority + hamburger with all actions (filtered by edit state)

Edit mode controls (Add Widget, Export, Import, Done) now only appear in
dropdown/hamburger menu, never inline. This creates cleaner visual hierarchy
and eliminates layout jumping when toggling edit mode.

Existing menu refresh on edit mode toggle (line 305) ensures menu updates
with correct items when entering/exiting edit mode.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-02 19:43:16 +11:00
parent 2cdad81cb8
commit 64d0fe41dd
4 changed files with 61 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/systems/dashboard/editModeManager.js
+2 -18
View File
@@ -59,18 +59,10 @@ export class EditModeManager {
// Store original layout for cancel
this.originalLayout = this.captureLayout();
// Hide edit mode button, show done button and edit mode controls
// Hide edit mode button (menu-only controls managed by headerOverflowManager)
const editModeBtn = document.querySelector('#rpg-dashboard-edit-mode');
const doneBtn = document.querySelector('#rpg-dashboard-done-edit');
const addWidgetBtn = document.querySelector('#rpg-dashboard-add-widget');
const exportBtn = document.querySelector('#rpg-dashboard-export-layout');
const importBtn = document.querySelector('#rpg-dashboard-import-layout');
if (editModeBtn) editModeBtn.style.display = 'none';
if (doneBtn) doneBtn.style.display = '';
if (addWidgetBtn) addWidgetBtn.style.display = '';
if (exportBtn) exportBtn.style.display = '';
if (importBtn) importBtn.style.display = '';
// Disable content editing to prevent keyboard from messing up layout
this.disableContentEditing();
@@ -112,18 +104,10 @@ export class EditModeManager {
// Re-enable content editing
this.enableContentEditing();
// Show edit mode button, hide done button and edit controls
// Show edit mode button (menu-only controls managed by headerOverflowManager)
const editModeBtn = document.querySelector('#rpg-dashboard-edit-mode');
const doneBtn = document.querySelector('#rpg-dashboard-done-edit');
const addWidgetBtn = document.querySelector('#rpg-dashboard-add-widget');
const exportBtn = document.querySelector('#rpg-dashboard-export-layout');
const importBtn = document.querySelector('#rpg-dashboard-import-layout');
if (editModeBtn) editModeBtn.style.display = '';
if (doneBtn) doneBtn.style.display = 'none';
if (addWidgetBtn) addWidgetBtn.style.display = 'none';
if (exportBtn) exportBtn.style.display = 'none';
if (importBtn) importBtn.style.display = 'none';
// Remove edit class from container
this.container.classList.remove('edit-mode');