mirror of
https://github.com/jeffvli/feishin.git
synced 2026-07-21 18:06:30 +02:00
Style edited fields in metadata editor
This commit is contained in:
@@ -104,6 +104,7 @@ export const SongEditModal = ({ songs }: { songs: Song[] }) => {
|
|||||||
<Table.Tbody>
|
<Table.Tbody>
|
||||||
{editor.sortedFieldEntries.map(([key, value]) => (
|
{editor.sortedFieldEntries.map(([key, value]) => (
|
||||||
<TagFieldRow
|
<TagFieldRow
|
||||||
|
isDirty={key in editor.editedFields}
|
||||||
isMixed={editor.mixedKeys.has(key)}
|
isMixed={editor.mixedKeys.has(key)}
|
||||||
key={key}
|
key={key}
|
||||||
meta={editor.getFieldMeta(key)}
|
meta={editor.getFieldMeta(key)}
|
||||||
|
|||||||
@@ -6,3 +6,7 @@
|
|||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dirty-label {
|
||||||
|
box-shadow: inset 2px 0 0 var(--mantine-primary-color-filled);
|
||||||
|
}
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ import { TextInput } from '/@/shared/components/text-input/text-input';
|
|||||||
import { Textarea } from '/@/shared/components/textarea/textarea';
|
import { Textarea } from '/@/shared/components/textarea/textarea';
|
||||||
|
|
||||||
interface TagFieldRowProps {
|
interface TagFieldRowProps {
|
||||||
|
isDirty?: boolean;
|
||||||
isMixed: boolean;
|
isMixed: boolean;
|
||||||
meta: KnownTag;
|
meta: KnownTag;
|
||||||
mixedPlaceholder?: string;
|
mixedPlaceholder?: string;
|
||||||
@@ -22,6 +23,7 @@ interface TagFieldRowProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const TagFieldRow = ({
|
export const TagFieldRow = ({
|
||||||
|
isDirty,
|
||||||
isMixed,
|
isMixed,
|
||||||
meta,
|
meta,
|
||||||
mixedPlaceholder,
|
mixedPlaceholder,
|
||||||
@@ -31,7 +33,7 @@ export const TagFieldRow = ({
|
|||||||
value,
|
value,
|
||||||
}: TagFieldRowProps) => (
|
}: TagFieldRowProps) => (
|
||||||
<Table.Tr data-field-key={tagKey} key={tagKey}>
|
<Table.Tr data-field-key={tagKey} key={tagKey}>
|
||||||
<Table.Th>{meta.label}</Table.Th>
|
<Table.Th className={isDirty ? styles.dirtyLabel : undefined}>{meta.label}</Table.Th>
|
||||||
<Table.Td>
|
<Table.Td>
|
||||||
{meta.type === 'textarea' ? (
|
{meta.type === 'textarea' ? (
|
||||||
<Textarea
|
<Textarea
|
||||||
|
|||||||
@@ -323,6 +323,7 @@ export const useMetadataEditor = ({ browser, songs: songsProp, utils }: UseMetad
|
|||||||
artworkDisplayUrl,
|
artworkDisplayUrl,
|
||||||
artworkIsMixed,
|
artworkIsMixed,
|
||||||
availableToAdd,
|
availableToAdd,
|
||||||
|
editedFields,
|
||||||
error,
|
error,
|
||||||
getFieldMeta,
|
getFieldMeta,
|
||||||
handleAddField,
|
handleAddField,
|
||||||
|
|||||||
Reference in New Issue
Block a user