diff --git a/styles.css b/styles.css index 7454a01..8c69d4a 100644 --- a/styles.css +++ b/styles.css @@ -1024,23 +1024,28 @@ /* Toolbar button styling */ .note-status-toolbar-button-container { - display: flex; - align-items: center; - margin-right: 4px; + 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; - align-items: center; - justify-content: center; - background: transparent; - border: none; - border-radius: var(--radius-s, 4px); - color: var(--text-normal); - padding: 6px; - cursor: pointer; - transition: all 0.15s var(--ease-out); - position: relative; + 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 { @@ -1056,10 +1061,16 @@ } .note-status-toolbar-icon { - font-size: 16px; - display: flex; - align-items: center; - justify-content: center; + 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 { diff --git a/ui/status-dropdown.ts b/ui/status-dropdown.ts index 9126381..2a44283 100644 --- a/ui/status-dropdown.ts +++ b/ui/status-dropdown.ts @@ -39,6 +39,16 @@ export class StatusDropdown { * Initialize the toolbar button in the Obsidian ribbon */ private initToolbarButton(): void { + // Clear timeout to prevent multiple initializations + if (this.toolbarButton) { + 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(() => { // Try different selectors to find the toolbar @@ -72,25 +82,37 @@ export class StatusDropdown { // Add the button to the container this.toolbarButtonContainer.appendChild(this.toolbarButton); - // Insert at specific position - before the last element (which is usually the more options button) - // If there's no children or insertion fails, just append it + // Add some debug styling to check visibility + this.toolbarButtonContainer.style.border = '2px solid red'; + this.toolbarButton.style.border = '1px solid blue'; + + // Force display properties + this.toolbarButtonContainer.style.display = 'flex'; + this.toolbarButtonContainer.style.visibility = 'visible'; + this.toolbarButtonContainer.style.opacity = '1'; + + // Insert at a more reliable position - just prepend to the container try { - if (toolbarContainer.children.length > 0) { - // Insert before the last element (more options button) - toolbarContainer.insertBefore( - this.toolbarButtonContainer, - toolbarContainer.children[toolbarContainer.children.length - 1] - ); - } else { - toolbarContainer.appendChild(this.toolbarButtonContainer); - } - - console.log('Note Status: Toolbar button added successfully'); + toolbarContainer.prepend(this.toolbarButtonContainer); + console.log('Note Status: Toolbar button added successfully at position:', + Array.from(toolbarContainer.children).indexOf(this.toolbarButtonContainer)); } catch (error) { console.error('Note Status: Error inserting toolbar button', error); // Fallback - just append it toolbarContainer.appendChild(this.toolbarButtonContainer); } + + // Force a redraw + setTimeout(() => { + if (this.toolbarButtonContainer) { + this.toolbarButtonContainer.style.display = 'none'; + setTimeout(() => { + if (this.toolbarButtonContainer) { + this.toolbarButtonContainer.style.display = 'flex'; + } + }, 10); + } + }, 100); }, 500); // Waiting 500ms to ensure the UI is ready }