fix: change status button disappears

This commit is contained in:
Aleix Soler 2025-04-17 11:49:54 +02:00
parent 9176f82da4
commit 1ef574e157
2 changed files with 64 additions and 31 deletions

View file

@ -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 {

View file

@ -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
}