obsidian-plugin/devonthesofa_obsidian-note-status
1
0
Fork 0
mirror of https://github.com/devonthesofa/obsidian-note-status.git synced 2026-07-22 12:30:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: restore the button position

Browse source
This commit is contained in:
Aleix Soler 2025-04-17 14:51:01 +02:00
parent 2671502bcc
commit 6376da9dc2
2 changed files with 6 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
styles.css
View file

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

24
ui/components/status-dropdown.ts
View file

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