style: tweaks to settings (#772)

This commit is contained in:
Carlos Valente
2024-02-12 21:24:49 +01:00
committed by GitHub
parent 53963a9ad7
commit 67c448572c
7 changed files with 111 additions and 55 deletions
@@ -71,36 +71,44 @@ export default function HttpIntegrations() {
const canSubmit = !isSubmitting && isDirty && isValid;
return (
<Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} onKeyDown={preventEscape}>
<Panel.Section>
<Panel.Section>
<Panel.Card>
<Panel.SubHeader>
HTTP settings
HTTP
<div className={style.flex}>
<Button variant='ontime-ghosted' size='sm' onClick={() => reset()} isDisabled={!canSubmit}>
Reset
</Button>
<Button variant='ontime-filled' size='sm' type='submit' isDisabled={!canSubmit} isLoading={isSubmitting}>
<Button
variant='ontime-filled'
size='sm'
type='submit'
form='http-form'
isDisabled={!canSubmit}
isLoading={isSubmitting}
>
Save changes
</Button>
</div>
</Panel.SubHeader>
{errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
<Panel.ListGroup>
<Panel.ListItem>
<Panel.Field title='HTTP Output' description='Provide feedback from Ontime through HTTP' />
<Switch variant='ontime' size='lg' {...register('enabledOut')} />
</Panel.ListItem>
</Panel.ListGroup>
</Panel.Section>
<Panel.Section>
<Panel.Card>
<Panel.SubHeader>
<Panel.Section as='form' id='http-form' onSubmit={handleSubmit(onSubmit)} onKeyDown={preventEscape}>
{errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
<Panel.ListGroup>
<Panel.ListItem>
<Panel.Field title='HTTP Output' description='Provide feedback from Ontime through HTTP' />
<Switch variant='ontime' size='lg' {...register('enabledOut')} />
</Panel.ListItem>
</Panel.ListGroup>
<Panel.Divider />
<Panel.Title>
HTTP Integration
<Button variant='ontime-subtle' size='sm' rightIcon={<IoAdd />} onClick={handleAddNewSubscription}>
New
</Button>
</Panel.SubHeader>
</Panel.Title>
{fields.length > 0 && (
<Panel.Table>
<thead>
@@ -166,8 +174,8 @@ export default function HttpIntegrations() {
</tbody>
</Panel.Table>
)}
</Panel.Card>
</Panel.Section>
</Panel.Section>
</Panel.Card>
</Panel.Section>
);
}
@@ -1,12 +1,12 @@
.fullWidth {
width: 100%;
width: 100%;
}
.fitContents {
width: max-content !important; /* override chakra */
width: max-content !important; /* override chakra */
}
.flex {
display: flex;
gap: 1rem;
display: flex;
gap: 1rem;
}
@@ -24,8 +24,10 @@ export default function IntegrationsPanel() {
</AlertDescription>
</Alert>
</Panel.Section>
<OscIntegrations />
<HttpIntegrations />
<Panel.Section>
<OscIntegrations />
<HttpIntegrations />
</Panel.Section>
</>
);
}
@@ -77,19 +77,27 @@ export default function OscIntegrations() {
const canSubmit = !isSubmitting && isDirty && isValid;
return (
<Panel.Section onKeyDown={preventEscape}>
<Panel.Section as='form' onSubmit={handleSubmit(onSubmit)}>
<Panel.SubHeader>
Open Sound Control settings
<div className={style.flex}>
<Button variant='ontime-ghosted' size='sm' onClick={() => reset()} isDisabled={!canSubmit}>
Reset
</Button>
<Button variant='ontime-filled' size='sm' type='submit' isDisabled={!canSubmit} isLoading={isSubmitting}>
Save changes
</Button>
</div>
</Panel.SubHeader>
<Panel.Card>
<Panel.SubHeader>
Open Sound Control
<div className={style.flex}>
<Button variant='ontime-ghosted' size='sm' onClick={() => reset()} isDisabled={!canSubmit}>
Reset
</Button>
<Button
variant='ontime-filled'
size='sm'
type='submit'
form='osc-form'
isDisabled={!canSubmit}
isLoading={isSubmitting}
>
Save changes
</Button>
</div>
</Panel.SubHeader>
<Panel.Section as='form' id='osc-form' onSubmit={handleSubmit(onSubmit)} onKeyDown={preventEscape}>
{errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
<Panel.ListGroup>
<Panel.ListItem>
@@ -178,15 +186,16 @@ export default function OscIntegrations() {
/>
</Panel.ListItem>
</Panel.ListGroup>
</Panel.Section>
<Panel.Card>
<Panel.SubHeader>
OSC Integration
<Panel.Divider />
<Panel.Title>
OSC Integrations
<Button variant='ontime-subtle' size='sm' rightIcon={<IoAdd />} onClick={handleAddNewSubscription}>
New
Add
</Button>
</Panel.SubHeader>
</Panel.Title>
{fields.length > 0 && (
<Panel.Table>
<thead>
@@ -253,7 +262,7 @@ export default function OscIntegrations() {
</tbody>
</Panel.Table>
)}
</Panel.Card>
</Panel.Section>
</Panel.Section>
</Panel.Card>
);
}