mirror of
https://github.com/devonthesofa/obsidian-note-status.git
synced 2026-07-22 12:30:24 +00:00
chore: testing with badge instead of button
This commit is contained in:
Aleix Soler
parent
75a07a6ca5
commit
91b17a74c5
5 changed files with 1485 additions and 120 deletions
|
|
@ -1,5 +1,7 @@
|
|||
import React, { FC, memo, useEffect, useState } from "react";
|
||||
import { GroupedStatuses } from "@/types/noteStatus";
|
||||
import { StatusesInfoPopup } from "@/integrations/popups/statusesInfoPopupIntegration";
|
||||
|
||||
interface EditorToolbarButtonProps {
|
||||
statuses: GroupedStatuses;
|
||||
onClick: () => void;
|
||||
|
|
@ -8,6 +10,7 @@ interface EditorToolbarButtonProps {
|
|||
color: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const EditorToolbarButton: FC<EditorToolbarButtonProps> = memo(
|
||||
({ statuses, onClick, unknownStatusConfig }) => {
|
||||
const [statusChanged, setStatusChanged] = useState(false);
|
||||
|
|
@ -16,6 +19,7 @@ export const EditorToolbarButton: FC<EditorToolbarButtonProps> = memo(
|
|||
([_, statusList]) => statusList,
|
||||
);
|
||||
const totalStatuses = allStatuses.length;
|
||||
|
||||
// Animate when status changes
|
||||
useEffect(() => {
|
||||
setStatusChanged(true);
|
||||
|
|
@ -23,77 +27,51 @@ export const EditorToolbarButton: FC<EditorToolbarButtonProps> = memo(
|
|||
return () => clearTimeout(timer);
|
||||
}, [statusEntries.length, allStatuses.map((s) => s.name).join(",")]);
|
||||
|
||||
const getTooltipText = () => {
|
||||
if (totalStatuses === 0) {
|
||||
return "No status assigned - click to set status";
|
||||
}
|
||||
if (totalStatuses === 1) {
|
||||
return `Status: ${allStatuses[0].name} - click to change`;
|
||||
}
|
||||
const statusNames = allStatuses.map((s) => s.name).join(", ");
|
||||
return `Statuses: ${statusNames} - click to change`;
|
||||
const handleMouseEnter = () => {
|
||||
StatusesInfoPopup.open(statuses);
|
||||
};
|
||||
|
||||
const buttonClasses = [
|
||||
"editor-toolbar-btn",
|
||||
const handleMouseLeave = () => {
|
||||
StatusesInfoPopup.close();
|
||||
};
|
||||
|
||||
const getDisplayText = () => {
|
||||
if (totalStatuses === 0) return "No Status";
|
||||
if (totalStatuses === 1) return allStatuses[0].name;
|
||||
return `${totalStatuses} Statuses`;
|
||||
};
|
||||
|
||||
const getPrimaryColor = () => {
|
||||
if (totalStatuses === 0) return unknownStatusConfig.color;
|
||||
return allStatuses[0]?.color || "var(--interactive-accent)";
|
||||
};
|
||||
|
||||
const badgeClasses = [
|
||||
"editor-toolbar-badge",
|
||||
totalStatuses === 0
|
||||
? "editor-toolbar-btn--no-status"
|
||||
: "editor-toolbar-btn--has-status",
|
||||
statusChanged ? "editor-toolbar-btn--status-changed" : "",
|
||||
? "editor-toolbar-badge--no-status"
|
||||
: "editor-toolbar-badge--has-status",
|
||||
statusChanged ? "editor-toolbar-badge--status-changed" : "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
if (totalStatuses === 0) {
|
||||
return (
|
||||
<button
|
||||
className={buttonClasses}
|
||||
onClick={onClick}
|
||||
title={getTooltipText()}
|
||||
aria-label={getTooltipText()}
|
||||
style={
|
||||
{
|
||||
"--status-color": unknownStatusConfig.color,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="editor-toolbar-btn__icon"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{unknownStatusConfig.icon}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
const primaryStatus = allStatuses[0];
|
||||
|
||||
return (
|
||||
<button
|
||||
className={buttonClasses}
|
||||
<div
|
||||
className={badgeClasses}
|
||||
onClick={onClick}
|
||||
title={getTooltipText()}
|
||||
aria-label={getTooltipText()}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
style={
|
||||
{
|
||||
"--status-color":
|
||||
primaryStatus.color || "var(--interactive-accent)",
|
||||
"--status-color": getPrimaryColor(),
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<span className="editor-toolbar-btn__icon" aria-hidden="true">
|
||||
{primaryStatus.icon || "📝"}
|
||||
<span className="editor-toolbar-badge__text">
|
||||
{getDisplayText()}
|
||||
</span>
|
||||
{totalStatuses > 1 && (
|
||||
<span
|
||||
className="editor-toolbar-btn__count"
|
||||
aria-label={`${totalStatuses} statuses`}
|
||||
>
|
||||
{totalStatuses}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ export const StatusDisplay: FC<StatusDisplayProps> = memo(
|
|||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<ObsidianIcon name="thrash" size={12} />
|
||||
<ObsidianIcon name="trash" size={12} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export class EditorToolbarIntegration {
|
|||
private buttonElement: HTMLElement | null = null;
|
||||
private noteStatusService: NoteStatusService | null = null;
|
||||
private currentLeaf: WorkspaceLeaf | null = null;
|
||||
private readonly BUTTON_CLASS = "note-status-editor-toolbar-button";
|
||||
private readonly BUTTON_CLASS = "note-status-editor-toolbar-badge";
|
||||
|
||||
constructor(plugin: Plugin) {
|
||||
if (EditorToolbarIntegration.instance) {
|
||||
|
|
|
|||
1420
styles.css
1420
styles.css
File diff suppressed because one or more lines are too long
|
|
@ -1,84 +1,53 @@
|
|||
/* Editor Toolbar Button - Status indicator for notes */
|
||||
.editor-toolbar-btn {
|
||||
/* Editor Toolbar Badge - Status indicator as badge */
|
||||
.editor-toolbar-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--header-height);
|
||||
height: var(--header-height);
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: var(--clickable-icon-radius);
|
||||
background: transparent;
|
||||
color: var(--icon-color);
|
||||
cursor: pointer;
|
||||
opacity: var(--icon-opacity);
|
||||
position: relative;
|
||||
transition: var(--anim-duration-fast) ease;
|
||||
}
|
||||
|
||||
.editor-toolbar-btn:hover {
|
||||
background: var(--background-modifier-hover);
|
||||
opacity: var(--icon-opacity-hover);
|
||||
}
|
||||
|
||||
.editor-toolbar-btn:active {
|
||||
background: var(--background-modifier-active);
|
||||
}
|
||||
|
||||
.editor-toolbar-btn:focus-visible {
|
||||
outline: 2px solid var(--background-modifier-border-focus);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.editor-toolbar-btn__icon {
|
||||
font-size: var(--icon-size-sm);
|
||||
line-height: 1;
|
||||
transition: inherit;
|
||||
}
|
||||
|
||||
.editor-toolbar-btn__count {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
min-width: var(--size-2-3);
|
||||
height: var(--size-2-3);
|
||||
padding: 0 var(--size-2-1);
|
||||
padding: var(--size-2-1) var(--size-2-2);
|
||||
background: var(--status-color, var(--interactive-accent));
|
||||
color: var(--text-on-accent);
|
||||
border-radius: var(--radius-m);
|
||||
font-size: var(--font-ui-smaller);
|
||||
font-weight: var(--font-weight-medium);
|
||||
border-radius: var(--radius-xl);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid var(--background-primary);
|
||||
cursor: pointer;
|
||||
transition: var(--anim-duration-fast) ease;
|
||||
opacity: 0.85;
|
||||
margin-left: var(--size-2-1);
|
||||
}
|
||||
|
||||
.editor-toolbar-badge:hover {
|
||||
opacity: 1;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-s);
|
||||
}
|
||||
|
||||
.editor-toolbar-badge__text {
|
||||
white-space: nowrap;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Status variants */
|
||||
.editor-toolbar-btn--no-status .editor-toolbar-btn__icon {
|
||||
color: var(--status-color, var(--text-muted));
|
||||
opacity: 0.7;
|
||||
.editor-toolbar-badge--no-status {
|
||||
background: var(--background-modifier-border);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.editor-toolbar-btn--has-status .editor-toolbar-btn__icon {
|
||||
color: var(--status-color, var(--interactive-accent));
|
||||
}
|
||||
|
||||
.editor-toolbar-btn--has-status:hover .editor-toolbar-btn__icon {
|
||||
transform: scale(1.05);
|
||||
.editor-toolbar-badge--no-status:hover {
|
||||
background: var(--background-modifier-border-hover);
|
||||
}
|
||||
|
||||
/* Status change animation */
|
||||
@keyframes status-pulse {
|
||||
@keyframes badge-pulse {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.85;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
transform: scale(1.05);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-toolbar-btn--status-changed .editor-toolbar-btn__icon {
|
||||
animation: status-pulse var(--anim-duration-moderate) ease-out;
|
||||
.editor-toolbar-badge--status-changed {
|
||||
animation: badge-pulse var(--anim-duration-moderate) ease-out;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue