fix(dashboard): properly filter dropdown menu buttons based on pre-hidden visibility

- Store button visibility state before hiding them in overflow/compact modes
- Use stored wasVisible data attribute to filter which buttons to show
- Prevents hidden buttons (like Done) from appearing inappropriately
- Also prevents visible buttons from being excluded when they're hidden by overflow manager
- Full mode now checks inline style to respect template display:none
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-27 20:06:25 +11:00
parent a330ea9b98
commit c39d348a81
+19 -11
View File
@@ -143,9 +143,13 @@ export class HeaderOverflowManager {
setFullMode() { setFullMode() {
// Show all overflow buttons // Show all overflow buttons
this.overflowButtons.forEach(btn => { this.overflowButtons.forEach(btn => {
if (btn.dataset.editMode === 'true' || !btn.hasAttribute('data-edit-mode')) { // Only show buttons that don't have inline display:none in the template
const inlineStyle = btn.getAttribute('style');
if (!inlineStyle || !inlineStyle.includes('display: none')) {
btn.style.display = ''; btn.style.display = '';
} }
// Clear the wasVisible flag
delete btn.dataset.wasVisible;
}); });
// Hide menu buttons // Hide menu buttons
@@ -158,7 +162,12 @@ export class HeaderOverflowManager {
*/ */
setOverflowMode() { setOverflowMode() {
// Hide overflow buttons (will be in dropdown) // Hide overflow buttons (will be in dropdown)
this.overflowButtons.forEach(btn => btn.style.display = 'none'); // Store original visibility before hiding
this.overflowButtons.forEach(btn => {
const computedStyle = window.getComputedStyle(btn);
btn.dataset.wasVisible = computedStyle.display !== 'none' ? 'true' : 'false';
btn.style.display = 'none';
});
// Show overflow menu button // Show overflow menu button
this.overflowMenuBtn.style.display = ''; this.overflowMenuBtn.style.display = '';
@@ -173,7 +182,12 @@ export class HeaderOverflowManager {
*/ */
setCompactMode() { setCompactMode() {
// Hide all overflow buttons // Hide all overflow buttons
this.overflowButtons.forEach(btn => btn.style.display = 'none'); // Store original visibility before hiding
this.overflowButtons.forEach(btn => {
const computedStyle = window.getComputedStyle(btn);
btn.dataset.wasVisible = computedStyle.display !== 'none' ? 'true' : 'false';
btn.style.display = 'none';
});
// Show hamburger menu button // Show hamburger menu button
this.overflowMenuBtn.style.display = 'none'; this.overflowMenuBtn.style.display = 'none';
@@ -194,10 +208,9 @@ export class HeaderOverflowManager {
? [...this.overflowButtons] ? [...this.overflowButtons]
: this.overflowButtons; : this.overflowButtons;
// Filter visible buttons (considering edit mode) // Filter visible buttons (only include buttons that were visible before being hidden)
const visibleButtons = buttonsToShow.filter(btn => { const visibleButtons = buttonsToShow.filter(btn => {
const computedStyle = window.getComputedStyle(btn); return btn.dataset.wasVisible === 'true';
return computedStyle.display !== 'none' || !btn.hasAttribute('data-edit-mode');
}); });
if (visibleButtons.length === 0) { if (visibleButtons.length === 0) {
@@ -240,11 +253,6 @@ export class HeaderOverflowManager {
this.closeMenu(); this.closeMenu();
}); });
// Handle edit mode visibility
if (button.style.display === 'none' && button.dataset.editMode === 'true') {
item.style.display = 'none';
}
return item; return item;
} }