From 6376da9dc24cd55082f4d59e2fcfe568d5f6998b Mon Sep 17 00:00:00 2001 From: Aleix Soler Date: Thu, 17 Apr 2025 14:51:01 +0200 Subject: [PATCH] fix: restore the button position --- styles.css | 104 ------------------------------- ui/components/status-dropdown.ts | 24 ++----- 2 files changed, 6 insertions(+), 122 deletions(-) diff --git a/styles.css b/styles.css index 26cd289..bb034ae 100644 --- a/styles.css +++ b/styles.css @@ -1023,36 +1023,6 @@ /* Toolbar button styling */ -.note-status-toolbar-button-container { - display: flex !important; - visibility: visible !important; - opacity: 1 !important; - position: relative !important; - margin-right: 8px !important; - z-index: 100 !important; - height: 24px !important; - width: auto !important; -} - -.note-status-toolbar-button { - display: flex !important; - align-items: center !important; - justify-content: center !important; - padding: 4px !important; - background-color: var(--interactive-accent-hover) !important; - border-radius: 4px !important; - cursor: pointer !important; - width: 24px !important; - height: 24px !important; - min-width: 24px !important; - min-height: 24px !important; -} - -.note-status-toolbar-button:hover { - background-color: var(--background-modifier-hover); - color: var(--text-accent); -} - .note-status-toolbar-badge-container { display: flex; align-items: center; @@ -1061,18 +1031,10 @@ } .note-status-toolbar-icon { - font-size: 16px !important; color: var(--text-normal) !important; } /* Target all possible toolbar locations */ -.view-header .view-actions .note-status-toolbar-button-container, -.view-header-actions .note-status-toolbar-button-container, -.workspace-ribbon.mod-right .note-status-toolbar-button-container, -.workspace-tab-header-container .note-status-toolbar-button-container { - display: flex !important; -} - .note-status-count-badge { position: absolute; top: -5px; @@ -1144,56 +1106,13 @@ background: transparent; } -/* Ensure the button container has proper z-index and positioning */ -.note-status-toolbar-button-container { - display: flex !important; - align-items: center !important; - margin-right: 4px !important; - position: relative !important; - z-index: 10 !important; -} - -/* Ensure button is visible with proper sizing */ -.note-status-toolbar-button { - display: flex !important; - align-items: center !important; - justify-content: center !important; - background: transparent !important; - border: none !important; - border-radius: var(--radius-s, 4px) !important; - color: var(--text-normal) !important; - padding: 6px !important; - cursor: pointer !important; - transition: all 0.15s var(--ease-out) !important; - position: relative !important; - width: 28px !important; - height: 28px !important; - min-width: 28px !important; - min-height: 28px !important; -} - /* Make icons more visible */ .note-status-toolbar-icon { - font-size: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; } -/* Alternative selectors for toolbar button placement */ -.view-header .view-actions .note-status-toolbar-button-container, -.view-header-actions .note-status-toolbar-button-container, -.workspace-ribbon.mod-right .note-status-toolbar-button-container { - display: flex !important; - visibility: visible !important; - opacity: 1 !important; -} - -/* Debug outline to help identify the button (you can remove this after debugging) */ -.note-status-toolbar-button-container { - outline: 1px solid rgba(255, 0, 0, 0.3) !important; -} - /* Make the unified dropdown look consistent in all contexts */ .note-status-unified-dropdown { width: 280px; @@ -1398,29 +1317,6 @@ color: var(--text-accent); } -/* Fix toolbar button */ -.note-status-toolbar-button-container { - display: flex !important; - align-items: center !important; - margin-right: 8px !important; -} - -.note-status-toolbar-button { - display: flex !important; - align-items: center !important; - justify-content: center !important; - width: 32px !important; - height: 32px !important; - border-radius: var(--radius-s, 4px) !important; - background: transparent !important; - color: var(--text-normal) !important; - cursor: pointer !important; - transition: background 0.2s ease !important; -} - -.note-status-toolbar-button:hover { - background: var(--background-modifier-hover) !important; -} /* Prevent event propagation issues */ .note-status-unified-dropdown * { diff --git a/ui/components/status-dropdown.ts b/ui/components/status-dropdown.ts index a95d3aa..adde608 100644 --- a/ui/components/status-dropdown.ts +++ b/ui/components/status-dropdown.ts @@ -11,7 +11,6 @@ export class StatusDropdown { private settings: NoteStatusSettings; private statusService: StatusService; private currentStatuses: string[] = ['unknown']; - private toolbarButtonContainer?: HTMLElement; private toolbarButton?: HTMLElement; private dropdownComponent: StatusDropdownComponent; @@ -58,10 +57,6 @@ export class StatusDropdown { this.toolbarButton.remove(); this.toolbarButton = undefined; } - if (this.toolbarButtonContainer) { - this.toolbarButtonContainer.remove(); - this.toolbarButtonContainer = undefined; - } // Wait for next tick to ensure the UI is fully rendered setTimeout(() => { @@ -86,13 +81,9 @@ export class StatusDropdown { * Create the toolbar button element */ private createToolbarButton(toolbarContainer: HTMLElement): void { - // Create button container for proper positioning - this.toolbarButtonContainer = toolbarContainer.createEl('div'); - this.toolbarButtonContainer.addClass('note-status-toolbar-button-container'); - // Create the button element this.toolbarButton = document.createElement('button'); - this.toolbarButton.addClass('note-status-toolbar-button', 'clickable-icon'); + this.toolbarButton.addClass('note-status-toolbar-button', 'clickable-icon', 'view-action'); this.toolbarButton.setAttribute('aria-label', 'Note Status'); // Update initial button state @@ -105,16 +96,13 @@ export class StatusDropdown { this.toggleStatusPopover(); }); - // Add the button to the container - this.toolbarButtonContainer.appendChild(this.toolbarButton); - // Insert at a more reliable position - just prepend to the container try { - toolbarContainer.prepend(this.toolbarButtonContainer); + toolbarContainer.prepend(this.toolbarButton); } catch (error) { console.error('Note Status: Error inserting toolbar button', error); // Fallback - just append it - toolbarContainer.appendChild(this.toolbarButtonContainer); + toolbarContainer.appendChild(this.toolbarButton); } } @@ -331,9 +319,9 @@ export class StatusDropdown { this.dropdownComponent.dispose(); // Remove toolbar button - if (this.toolbarButtonContainer) { - this.toolbarButtonContainer.remove(); - this.toolbarButtonContainer = undefined; + if (this.toolbarButton) { + this.toolbarButton.remove(); + this.toolbarButton = undefined; } } } \ No newline at end of file