LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Fix layout of checkboxes in modals. Closes https://github.com/owncast/owncast/issues/945

Browse Source
This commit is contained in:
Gabe Kangas 2021-04-19 17:59:04 -07:00
parent f18c0e19ae
commit 95e3a1d4c5
2 changed files with 31 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/pages/access-tokens.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography, Tooltip } from 'antd'; import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography, Tooltip, Row, Col } from 'antd';
import { DeleteOutlined } from '@ant-design/icons'; import { DeleteOutlined } from '@ant-design/icons';
import format from 'date-fns/format'; import format from 'date-fns/format';
@ -73,6 +73,9 @@ function NewTokenModal(props: Props) {
function selectAll() { function selectAll() {
setSelectedScopes(Object.keys(availableScopes)); setSelectedScopes(Object.keys(availableScopes));
} }
const checkboxes = scopes.map(function (singleEvent) {
return (<Col span={8} key={singleEvent.value}><Checkbox value={singleEvent.value}>{singleEvent.label}</Checkbox></Col>)
});
return ( return (
<Modal <Modal
@ -94,7 +97,11 @@ function NewTokenModal(props: Props) {
Select the permissions this access token will have. It cannot be edited after it&apos;s Select the permissions this access token will have. It cannot be edited after it&apos;s
created. created.
</p> </p>
<Checkbox.Group options={scopes} value={selectedScopes} onChange={onChange} /> <Checkbox.Group style={{ width: '100%' }} value={selectedScopes} onChange={onChange}>
<Row>
{checkboxes}
</Row>
</Checkbox.Group>
<p> <p>
<Button type="primary" onClick={selectAll}> <Button type="primary" onClick={selectAll}>

25
web/pages/webhooks.tsx
View File

@ -1,5 +1,17 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Table, Tag, Space, Button, Modal, Checkbox, Input, Typography, Tooltip } from 'antd'; import {
Table,
Tag,
Space,
Button,
Modal,
Checkbox,
Input,
Typography,
Tooltip,
Row,
Col,
} from 'antd';
import { DeleteOutlined } from '@ant-design/icons'; import { DeleteOutlined } from '@ant-design/icons';
import isValidUrl from '../utils/urls'; import isValidUrl from '../utils/urls';
@ -73,6 +85,10 @@ function NewWebhookModal(props: Props) {
disabled: selectedEvents?.length === 0 || !isValidUrl(webhookUrl), disabled: selectedEvents?.length === 0 || !isValidUrl(webhookUrl),
}; };
const checkboxes = events.map(function (singleEvent) {
return (<Col span={8} key={singleEvent.value}><Checkbox value={singleEvent.value}>{singleEvent.label}</Checkbox></Col>)
});
return ( return (
<Modal <Modal
title="Create New Webhook" title="Create New Webhook"
@ -90,8 +106,11 @@ function NewWebhookModal(props: Props) {
</div> </div>
<p>Select the events that will be sent to this webhook.</p> <p>Select the events that will be sent to this webhook.</p>
<Checkbox.Group options={events} value={selectedEvents} onChange={onChange} /> <Checkbox.Group style={{ width: '100%' }} value={selectedEvents} onChange={onChange}>
<Row>
{checkboxes}
</Row>
</Checkbox.Group>
<p> <p>
<Button type="primary" onClick={selectAll}> <Button type="primary" onClick={selectAll}>
Select all Select all