fix(magic-notes): label entry actions and show note more button on hover
This commit is contained in:
@@ -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()
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user