fix(magic-notes): label entry actions and show note more button on hover

This commit is contained in:
mesalogo
2026-10-10 13:43:14 +08:00
parent 12a0291279
commit ba30852058
3 changed files with 49 additions and 8 deletions
@@ -1460,7 +1460,7 @@ describe('MagicNotesWorkspace detail behavior', () => {
const { container } = render(<MagicNotesWorkspace onNotify={onNotify} />)
await openNote()
expect(container.querySelector('.magic-note-detail-header > :first-child')).toBe(screen.getByLabelText('笔记标题'))
expect(screen.getByRole('button', { name: '删除记录' })).toHaveClass('icon-button', 'magic-note-entry__delete-button')
expect(screen.getByRole('button', { name: '删除记录' })).toHaveClass('magic-note-entry__action-button', 'magic-note-entry__delete-button')
fireEvent.click(screen.getByRole('button', { name: '编辑' }))
expect(container.querySelector('.magic-note-entry__editor')).toBeVisible()
expect(screen.getByRole('button', { name: '删除记录' })).toBeDisabled()
+6 -4
View File
@@ -3091,7 +3091,7 @@ function MagicNotesWorkspaceView({
</button>
)}
<button
className="icon-button"
className="magic-note-entry__action-button"
aria-label={t(entry.content.version === 2 ? 'canvas.edit' : 'actions.edit')}
title={t(entry.content.version === 2 ? 'canvas.edit' : 'actions.edit')}
disabled={Boolean(busy) || editingEntry?.id === entry.id}
@@ -3104,12 +3104,13 @@ function MagicNotesWorkspaceView({
})
}
>
<Pencil aria-hidden="true" size={15} />
<Pencil aria-hidden="true" size={14} />
<span>{t(entry.content.version === 2 ? 'canvas.edit' : 'actions.edit')}</span>
</button>
<button
aria-label={t('actions.deleteEntry')}
title={t('actions.deleteEntry')}
className="icon-button magic-note-entry__delete-button"
className="magic-note-entry__action-button magic-note-entry__delete-button"
disabled={Boolean(busy) || Boolean(editingEntry)}
type="button"
onClick={() => {
@@ -3119,7 +3120,8 @@ function MagicNotesWorkspaceView({
setDeletingEntryId(entry.id)
}}
>
<Trash2 aria-hidden="true" size={15} />
<Trash2 aria-hidden="true" size={14} />
<span>{t('actions.deleteEntry')}</span>
</button>
</div>}
</header>
+42 -3
View File
@@ -2433,7 +2433,8 @@
position: absolute;
top: var(--space-2);
right: var(--space-2);
opacity: 1;
opacity: 0;
transition: opacity var(--motion-fast) ease-out;
}
.magic-note-row:hover .magic-note-more,
@@ -2721,9 +2722,18 @@
line-height: 1;
}
.magic-note-entry {
position: relative;
}
/* Floats over the top-right corner so the actions never take their own row. */
.magic-note-entry__actions {
display: flex;
gap: 2px;
position: absolute;
z-index: 1;
top: var(--space-1);
right: var(--space-2);
gap: var(--space-1);
}
.magic-note-entry__actions .icon-button {
@@ -2731,7 +2741,36 @@
height: 28px;
}
.magic-note-entry__actions .magic-note-entry__delete-button:hover:not(:disabled) {
.magic-note-entry__action-button {
height: 28px;
padding: 0 var(--space-2);
border: 0;
border-radius: var(--radius-control);
background: transparent;
color: var(--text-secondary);
font: inherit;
font-size: var(--font-caption);
white-space: nowrap;
cursor: pointer;
}
.magic-note-entry__action-button:hover:not(:disabled),
.magic-note-entry__action-button:focus-visible {
background: var(--surface-subtle);
color: var(--text-primary);
}
.magic-note-entry__action-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.magic-note-entry__actions .magic-note-entry__delete-button {
color: var(--danger-strong);
}
.magic-note-entry__actions .magic-note-entry__delete-button:hover:not(:disabled),
.magic-note-entry__actions .magic-note-entry__delete-button:focus-visible {
background: var(--danger-subtle);
color: var(--danger-strong);
}