fix(import): keep count badge visible
- add a contrast override for badges inside primary buttons - keep the singles process action aligned with the select/deselect row - update import route tests for the new button label shape
This commit is contained in:
parent
9f2c5c685b
commit
0721a859a9
3 changed files with 14 additions and 8 deletions
|
|
@ -554,6 +554,12 @@
|
||||||
color: rgba(0, 0, 0, 0.55);
|
color: rgba(0, 0, 0, 0.55);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.buttonPrimary .badge {
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 0, 0, 0.18);
|
||||||
|
border-color: rgba(0, 0, 0, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
.buttonSecondary {
|
.buttonSecondary {
|
||||||
border-color: rgba(255, 255, 255, 0.12);
|
border-color: rgba(255, 255, 255, 0.12);
|
||||||
background: rgba(255, 255, 255, 0.08);
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
|
|
||||||
|
|
@ -240,7 +240,7 @@ describe('import route', () => {
|
||||||
fireEvent.click(await screen.findByRole('link', { name: 'Singles' }));
|
fireEvent.click(await screen.findByRole('link', { name: 'Singles' }));
|
||||||
|
|
||||||
await waitFor(() => expect(history.location.pathname).toBe('/import/singles'));
|
await waitFor(() => expect(history.location.pathname).toBe('/import/singles'));
|
||||||
expect(screen.getByText('Process Selected (0)')).toBeInTheDocument();
|
expect(screen.getByRole('button', { name: /Process Selected\s*0/ })).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('keeps client workflow drafts across page remounts', async () => {
|
it('keeps client workflow drafts across page remounts', async () => {
|
||||||
|
|
@ -280,7 +280,7 @@ describe('import route', () => {
|
||||||
expect(screen.getByRole('checkbox', { name: 'Select 02-track.flac' })).toBeChecked(),
|
expect(screen.getByRole('checkbox', { name: 'Select 02-track.flac' })).toBeChecked(),
|
||||||
);
|
);
|
||||||
expect(screen.getByRole('checkbox', { name: 'Select 01-track.flac' })).not.toBeChecked();
|
expect(screen.getByRole('checkbox', { name: 'Select 01-track.flac' })).not.toBeChecked();
|
||||||
expect(screen.getByText('Process Selected (1)')).toBeInTheDocument();
|
expect(screen.getByRole('button', { name: /Process Selected\s*1/ })).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('preserves album source details when matching an album', async () => {
|
it('preserves album source details when matching an album', async () => {
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,15 @@
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
import { Button, Checkbox, TextInput } from '@/components/form/form';
|
import { Badge, Button, Checkbox, TextInput } from '@/components/form/form';
|
||||||
|
|
||||||
import type { SingleSearchState } from '../-import.store';
|
import type { SingleSearchState } from '../-import.store';
|
||||||
import type { ImportTrackResult } from '../-import.types';
|
import type { ImportTrackResult } from '../-import.types';
|
||||||
import type { ImportStagingFile } from '../-import.types';
|
import type { ImportStagingFile } from '../-import.types';
|
||||||
|
|
||||||
import styles from './import-page.module.css';
|
|
||||||
import { searchImportTracks } from '../-import.api';
|
import { searchImportTracks } from '../-import.api';
|
||||||
import { formatDuration, getStagingFileKey } from '../-import.helpers';
|
import { formatDuration, getStagingFileKey } from '../-import.helpers';
|
||||||
import { useSinglesImportWorkflow } from '../-import.store';
|
import { useSinglesImportWorkflow } from '../-import.store';
|
||||||
|
import styles from './import-page.module.css';
|
||||||
import {
|
import {
|
||||||
fallbackImage,
|
fallbackImage,
|
||||||
getErrorMessage,
|
getErrorMessage,
|
||||||
|
|
@ -185,9 +185,11 @@ export function SinglesImportPanel({
|
||||||
variant={processVariant}
|
variant={processVariant}
|
||||||
id="import-page-singles-process-btn"
|
id="import-page-singles-process-btn"
|
||||||
disabled={selectedCount === 0}
|
disabled={selectedCount === 0}
|
||||||
|
size="sm"
|
||||||
onClick={onProcessSingles}
|
onClick={onProcessSingles}
|
||||||
>
|
>
|
||||||
Process Selected ({selectedCount})
|
<span>Process Selected</span>
|
||||||
|
<Badge>{selectedCount}</Badge>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -203,9 +205,7 @@ export function SinglesImportPanel({
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={fileKey}
|
key={fileKey}
|
||||||
className={`${styles.importPageSingleItem} ${
|
className={`${styles.importPageSingleItem} ${manualMatch ? styles.matched : ''}`}
|
||||||
manualMatch ? styles.matched : ''
|
|
||||||
}`}
|
|
||||||
data-single-key={fileKey}
|
data-single-key={fileKey}
|
||||||
>
|
>
|
||||||
<label className={styles.importPageSingleCheckboxWrap}>
|
<label className={styles.importPageSingleCheckboxWrap}>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue