fix(dashboard): improve edit mode UX and remove redundant weather subtitle

- Disable contenteditable fields in edit widget mode to prevent keyboard popup
- Re-enable content editing when exiting edit mode
- Change button tooltip from 'Toggle Edit Mode' to 'Toggle Edit Widget Mode' for clarity
- Remove redundant 'WEATHER' subtitle from weather widget (only show single editable field)
- Prevents layout shift on mobile when keyboard appears during widget arrangement
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-26 10:29:55 +11:00
parent f84cbf794a
commit 8317471922
3 changed files with 51 additions and 5 deletions
+48
View File
@@ -57,6 +57,9 @@ export class EditModeManager {
if (exportBtn) exportBtn.style.display = '';
if (importBtn) importBtn.style.display = '';
// Disable content editing to prevent keyboard from messing up layout
this.disableContentEditing();
// Add edit class to container
this.container.classList.add('edit-mode');
@@ -88,6 +91,9 @@ export class EditModeManager {
this.isEditMode = false;
this.originalLayout = null;
// Re-enable content editing
this.enableContentEditing();
// Hide edit mode buttons (lock button stays visible)
const addWidgetBtn = document.querySelector('#rpg-dashboard-add-widget');
const exportBtn = document.querySelector('#rpg-dashboard-export-layout');
@@ -153,6 +159,48 @@ export class EditModeManager {
return this.isLocked;
}
/**
* Disable content editing (prevent keyboard popup in edit mode)
*/
disableContentEditing() {
// Find all contenteditable elements within widgets
const editableElements = this.container.querySelectorAll('[contenteditable="true"]');
editableElements.forEach(element => {
element.dataset.wasEditable = 'true';
element.contentEditable = 'false';
});
// Also disable input fields
const inputElements = this.container.querySelectorAll('input, textarea');
inputElements.forEach(element => {
element.dataset.wasEnabled = element.disabled ? 'false' : 'true';
element.disabled = true;
});
console.log('[EditModeManager] Content editing disabled');
}
/**
* Re-enable content editing
*/
enableContentEditing() {
// Re-enable contenteditable elements
const editableElements = this.container.querySelectorAll('[data-was-editable="true"]');
editableElements.forEach(element => {
element.contentEditable = 'true';
delete element.dataset.wasEditable;
});
// Re-enable input fields
const inputElements = this.container.querySelectorAll('[data-was-enabled="true"]');
inputElements.forEach(element => {
element.disabled = false;
delete element.dataset.wasEnabled;
});
console.log('[EditModeManager] Content editing enabled');
}
/**
* Show grid overlay (now handled via CSS on container)