cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-09-02 12:59:09 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

style: tweaks to settings (#772)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/app-settings/panel/Panel.module.scss
+26 -5
View File
@@ -1,3 +1,5 @@
$inner-padding: 1rem;
.header { .header {
font-size: 2rem; font-size: 2rem;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
@@ -6,16 +8,24 @@
} }
.subheader { .subheader {
font-size: 1.25rem; font-size: 1.5rem;
padding-bottom: 0.25rem; padding-bottom: 0.5rem;
font-weight: 600; font-weight: 600;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.title {
font-size: 1.25rem;
padding-left: $inner-padding;
display: flex;
align-items: center;
justify-content: space-between;
}
.section { .section {
margin: 2rem 0; margin-top: 2rem;
font-size: calc(1rem - 1px); font-size: calc(1rem - 1px);
max-width: 800px; max-width: 800px;
} }
@@ -25,7 +35,7 @@
} }
.card { .card {
padding: 1rem; padding: 2rem;
background-color: $white-1; background-color: $white-1;
border: 1px solid $gray-1100; border: 1px solid $gray-1100;
border-radius: 3px; border-radius: 3px;
@@ -37,6 +47,12 @@
color: $error-red; color: $error-red;
} }
.pad {
padding: 0 1rem;
max-height: 500px;
overflow-y: scroll;
}
.table { .table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
@@ -64,7 +80,7 @@
} }
.listGroup { .listGroup {
padding: 1rem 0; padding: 0.5rem 1rem 0 1rem;
> li:not(:last-child) { > li:not(:last-child) {
border-bottom: 1px solid $white-10; border-bottom: 1px solid $white-10;
@@ -92,3 +108,8 @@
font-size: calc(1rem - 2px); font-size: calc(1rem - 2px);
color: $red-500; color: $red-500;
} }
.divider {
border-top: 1px solid $white-10;
margin: 1rem -2rem;
}
apps/client/src/features/app-settings/panel/PanelUtils.tsx
+19 -3
View File
@@ -10,6 +10,10 @@ export function SubHeader({ children }: { children: ReactNode }) {
return <h3 className={style.subheader}>{children}</h3>; return <h3 className={style.subheader}>{children}</h3>;
} }
export function Title({ children }: { children: ReactNode }) {
return <h4 className={style.title}>{children}</h4>;
}
type AllowedTags = 'div' | 'form'; type AllowedTags = 'div' | 'form';
type SectionProps<C extends AllowedTags> = { type SectionProps<C extends AllowedTags> = {
as?: C; as?: C;
@@ -29,12 +33,20 @@ export function Paragraph({ children }: { children: ReactNode }) {
return <p className={style.paragraph}>{children}</p>; return <p className={style.paragraph}>{children}</p>;
} }
export function Card({ children }: { children: ReactNode }) { export function Card({ children, ...props }: { children: ReactNode } & JSX.IntrinsicElements['div']) {
return <div className={style.card}>{children}</div>; return (
<div className={style.card} {...props}>
{children}
</div>
);
} }
export function Table({ children }: { children: ReactNode }) { export function Table({ children }: { children: ReactNode }) {
return <table className={style.table}>{children}</table>; return (
<div className={style.pad}>
<table className={style.table}>{children}</table>
</div>
);
} }
export function ListGroup({ children }: { children: ReactNode }) { export function ListGroup({ children }: { children: ReactNode }) {
@@ -62,3 +74,7 @@ export function Description({ children }: { children: ReactNode }) {
export function Error({ children }: { children: ReactNode }) { export function Error({ children }: { children: ReactNode }) {
return <div className={style.fieldError}>{children}</div>; return <div className={style.fieldError}>{children}</div>;
} }
export function Divider() {
return <hr className={style.divider} />;
}
apps/client/src/features/app-settings/panel/integrations-panel/HttpIntegrations.tsx
+26 -18
View File
@@ -71,36 +71,44 @@ export default function HttpIntegrations() {
const canSubmit = !isSubmitting && isDirty && isValid; const canSubmit = !isSubmitting && isDirty && isValid;
return ( return (
<Panel.Section as='form' onSubmit={handleSubmit(onSubmit)} onKeyDown={preventEscape}> <Panel.Section>
<Panel.Section> <Panel.Card>
<Panel.SubHeader> <Panel.SubHeader>
HTTP settings HTTP
<div className={style.flex}> <div className={style.flex}>
<Button variant='ontime-ghosted' size='sm' onClick={() => reset()} isDisabled={!canSubmit}> <Button variant='ontime-ghosted' size='sm' onClick={() => reset()} isDisabled={!canSubmit}>
Reset Reset
</Button> </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 Save changes
</Button> </Button>
</div> </div>
</Panel.SubHeader> </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.Section as='form' id='http-form' onSubmit={handleSubmit(onSubmit)} onKeyDown={preventEscape}>
<Panel.Card> {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
<Panel.SubHeader> <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 HTTP Integration
<Button variant='ontime-subtle' size='sm' rightIcon={<IoAdd />} onClick={handleAddNewSubscription}> <Button variant='ontime-subtle' size='sm' rightIcon={<IoAdd />} onClick={handleAddNewSubscription}>
New New
</Button> </Button>
</Panel.SubHeader> </Panel.Title>
{fields.length > 0 && ( {fields.length > 0 && (
<Panel.Table> <Panel.Table>
<thead> <thead>
@@ -166,8 +174,8 @@ export default function HttpIntegrations() {
</tbody> </tbody>
</Panel.Table> </Panel.Table>
)} )}
</Panel.Card> </Panel.Section>
</Panel.Section> </Panel.Card>
</Panel.Section> </Panel.Section>
); );
} }
apps/client/src/features/app-settings/panel/integrations-panel/IntegrationsPanel.module.css
+4 -4
View File
@@ -1,12 +1,12 @@
.fullWidth { .fullWidth {
width: 100%; width: 100%;
} }
.fitContents { .fitContents {
width: max-content !important; /* override chakra */ width: max-content !important; /* override chakra */
} }
.flex { .flex {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
} }
apps/client/src/features/app-settings/panel/integrations-panel/IntegrationsPanel.tsx
+4 -2
View File
@@ -24,8 +24,10 @@ export default function IntegrationsPanel() {
</AlertDescription> </AlertDescription>
</Alert> </Alert>
</Panel.Section> </Panel.Section>
<OscIntegrations /> <Panel.Section>
<HttpIntegrations /> <OscIntegrations />
<HttpIntegrations />
</Panel.Section>
</> </>
); );
} }
apps/client/src/features/app-settings/panel/integrations-panel/OscIntegrations.tsx
+30 -21
View File
@@ -77,19 +77,27 @@ export default function OscIntegrations() {
const canSubmit = !isSubmitting && isDirty && isValid; const canSubmit = !isSubmitting && isDirty && isValid;
return ( return (
<Panel.Section onKeyDown={preventEscape}> <Panel.Card>
<Panel.Section as='form' onSubmit={handleSubmit(onSubmit)}> <Panel.SubHeader>
<Panel.SubHeader> Open Sound Control
Open Sound Control settings <div className={style.flex}>
<div className={style.flex}> <Button variant='ontime-ghosted' size='sm' onClick={() => reset()} isDisabled={!canSubmit}>
<Button variant='ontime-ghosted' size='sm' onClick={() => reset()} isDisabled={!canSubmit}> Reset
Reset </Button>
</Button> <Button
<Button variant='ontime-filled' size='sm' type='submit' isDisabled={!canSubmit} isLoading={isSubmitting}> variant='ontime-filled'
Save changes size='sm'
</Button> type='submit'
</div> form='osc-form'
</Panel.SubHeader> 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>} {errors?.root && <Panel.Error>{errors.root.message}</Panel.Error>}
<Panel.ListGroup> <Panel.ListGroup>
<Panel.ListItem> <Panel.ListItem>
@@ -178,15 +186,16 @@ export default function OscIntegrations() {
/> />
</Panel.ListItem> </Panel.ListItem>
</Panel.ListGroup> </Panel.ListGroup>
</Panel.Section>
<Panel.Card> <Panel.Divider />
<Panel.SubHeader>
OSC Integration <Panel.Title>
OSC Integrations
<Button variant='ontime-subtle' size='sm' rightIcon={<IoAdd />} onClick={handleAddNewSubscription}> <Button variant='ontime-subtle' size='sm' rightIcon={<IoAdd />} onClick={handleAddNewSubscription}>
New Add
</Button> </Button>
</Panel.SubHeader> </Panel.Title>
{fields.length > 0 && ( {fields.length > 0 && (
<Panel.Table> <Panel.Table>
<thead> <thead>
@@ -253,7 +262,7 @@ export default function OscIntegrations() {
</tbody> </tbody>
</Panel.Table> </Panel.Table>
)} )}
</Panel.Card> </Panel.Section>
</Panel.Section> </Panel.Card>
); );
} }
apps/client/src/features/app-settings/settingsStore.ts
+2 -2
View File
@@ -30,8 +30,8 @@ export const settingPanels: Readonly<SettingsOption[]> = [
id: 'integrations', id: 'integrations',
label: 'Integrations', label: 'Integrations',
secondary: [ secondary: [
{ id: 'integrations__osc', label: 'OSC Integration' }, { id: 'integrations__osc', label: 'OSC settings' },
{ id: 'integrations__http', label: 'HTTP Integration' }, { id: 'integrations__http', label: 'HTTP settings' },
], ],
}, },
{ id: 'log', label: 'Log', split: true }, { id: 'log', label: 'Log', split: true },