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:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user