feat(web/context): allow separate metadata progress bars colors

Closes #430
This commit is contained in:
Luke
2023-10-28 18:30:28 +02:00
parent e6e7bf5547
commit 1c5f4d6ac8
4 changed files with 19 additions and 4 deletions

View File

@@ -12,7 +12,10 @@ interface ContextMenuItem {
colorScheme?: string; colorScheme?: string;
onSelect?: (args: any) => void; onSelect?: (args: any) => void;
readOnly?: boolean; readOnly?: boolean;
metadata?: string[] | { [key: string]: any } | { label: string; value: any; progress?: number }[]; metadata?:
| string[]
| { [key: string]: any }
| { label: string; value: any; progress?: number; colorScheme?: string }[];
disabled?: boolean; disabled?: boolean;
event?: string; event?: string;
serverEvent?: string; serverEvent?: string;

View File

@@ -19,11 +19,13 @@ export const debugContext = () => {
['label']: 'Body', ['label']: 'Body',
['value']: '55%', ['value']: '55%',
['progress']: 55, ['progress']: 55,
colorScheme: 'red',
}, },
{ {
['label']: 'Engine', ['label']: 'Engine',
['value']: '100%', ['value']: '100%',
['progress']: 100, ['progress']: 100,
colorScheme: 'green',
}, },
{ {
['label']: 'Oil', ['label']: 'Oil',

View File

@@ -145,14 +145,21 @@ const ContextButton: React.FC<{
{button.image && <Image src={button.image} />} {button.image && <Image src={button.image} />}
{Array.isArray(button.metadata) ? ( {Array.isArray(button.metadata) ? (
button.metadata.map( button.metadata.map(
(metadata: string | { label: string; value?: any; progress?: number }, index: number) => ( (
metadata: string | { label: string; value?: any; progress?: number; colorScheme?: string },
index: number
) => (
<> <>
<Text key={`context-metadata-${index}`}> <Text key={`context-metadata-${index}`}>
{typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata?.value ?? ''}`} {typeof metadata === 'string' ? `${metadata}` : `${metadata.label}: ${metadata?.value ?? ''}`}
</Text> </Text>
{typeof metadata === 'object' && metadata.progress !== undefined && ( {typeof metadata === 'object' && metadata.progress !== undefined && (
<Progress value={metadata.progress} size="sm" color={button.colorScheme || 'dark.3'} /> <Progress
value={metadata.progress}
size="sm"
color={metadata.colorScheme || button.colorScheme || 'dark.3'}
/>
)} )}
</> </>
) )

View File

@@ -11,7 +11,10 @@ export interface Option {
progress?: number; progress?: number;
colorScheme?: string; colorScheme?: string;
readOnly?: boolean; readOnly?: boolean;
metadata?: string[] | { [key: string]: any } | { label: string; value: any; progress?: number }[]; metadata?:
| string[]
| { [key: string]: any }
| { label: string; value: any; progress?: number; colorScheme?: string }[];
disabled?: boolean; disabled?: boolean;
event?: string; event?: string;
serverEvent?: string; serverEvent?: string;