landscape: add GroupifyForm

This commit is contained in:
Liam Fitzgerald 2020-11-05 11:54:07 +10:00
parent 118f153dc7
commit 414567b843
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
3 changed files with 17 additions and 21 deletions

View File

@ -10,7 +10,7 @@ import {
} from "@tlon/indigo-react"; } from "@tlon/indigo-react";
import { Formik, Form, useFormikContext, FormikHelpers } from "formik"; import { Formik, Form, useFormikContext, FormikHelpers } from "formik";
import GlobalApi from "~/logic/api/global"; import GlobalApi from "~/logic/api/global";
import { uxToHex } from '~/logic/lib/util'; import { uxToHex } from "~/logic/lib/util";
import { FormError } from "~/views/components/FormError"; import { FormError } from "~/views/components/FormError";
import { ColorInput } from "~/views/components/ColorInput"; import { ColorInput } from "~/views/components/ColorInput";
import { Association, Groups, Associations } from "~/types"; import { Association, Groups, Associations } from "~/types";
@ -66,16 +66,13 @@ export function ChannelSettings(props: ChannelSettingsProps) {
}; };
return ( return (
<Box overflowY="auto" p={4}> <Col gapY="6" overflowY="auto" p={4}>
<Formik initialValues={initialValues} onSubmit={onSubmit}> <Formik initialValues={initialValues} onSubmit={onSubmit}>
<Form style={{ display: "contents" }}> <Form style={{ display: "contents" }}>
<Col <Col maxWidth="512px" gapY="4">
maxWidth="512px"
gapY="4"
>
<Col mb={3}> <Col mb={3}>
<Text fontWeight="bold">Channel Settings</Text> <Text fontWeight="bold">Channel Settings</Text>
<Label gray mt='2'> <Label gray mt="2">
Set the title, description and colour of the channel Set the title, description and colour of the channel
</Label> </Label>
</Col> </Col>
@ -101,7 +98,8 @@ export function ChannelSettings(props: ChannelSettingsProps) {
</Col> </Col>
</Form> </Form>
</Formik> </Formik>
<Box borderBottom="1" borderBottomColor="lightGray" width="100%" maxWidth="512px" />
<GroupifyForm {...props} /> <GroupifyForm {...props} />
</Box> </Col>
); );
} }

View File

@ -1,11 +1,8 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { Box, Col, Button, InputLabel, InputCaption } from "@tlon/indigo-react"; import { Box, Col, Text } from "@tlon/indigo-react";
import * as Yup from "yup"; import * as Yup from "yup";
import GlobalApi from "~/logic/api/global"; import GlobalApi from "~/logic/api/global";
import { Notebook } from "~/types/publish-update";
import { Contacts } from "~/types/contact-update";
import { MetadataForm } from "./MetadataForm";
import { Groups, Associations, Association } from "~/types"; import { Groups, Associations, Association } from "~/types";
import { Formik, FormikHelpers, Form } from "formik"; import { Formik, FormikHelpers, Form } from "formik";
import GroupSearch from "~/views/components/GroupSearch"; import GroupSearch from "~/views/components/GroupSearch";
@ -63,8 +60,11 @@ export function GroupifyForm(props: GroupifyFormProps) {
initialValues={initialValues} initialValues={initialValues}
onSubmit={onGroupify} onSubmit={onGroupify}
> >
<Form style={{ display: "contents" }}> <Form>
<Col mt="4" gapY="4" maxWidth="512px"> <Col gapY="4" maxWidth="512px">
<Box>
<Text fontWeight="500">Groupify this chanel</Text>
</Box>
<GroupSearch <GroupSearch
id="group" id="group"
label="Group" label="Group"
@ -73,7 +73,7 @@ export function GroupifyForm(props: GroupifyFormProps) {
associations={props.associations} associations={props.associations}
adminOnly adminOnly
/> />
<AsyncButton loadingText="Groupifying..." border> <AsyncButton primary loadingText="Groupifying..." border>
Groupify Groupify
</AsyncButton> </AsyncButton>
</Col> </Col>

View File

@ -126,11 +126,9 @@ export function NewChannel(props: NewChannelProps & RouteComponentProps) {
onSubmit={onSubmit} onSubmit={onSubmit}
> >
<Form> <Form>
<Box <Col
display="grid" maxWidth="348px"
gridTemplateRows="auto" gapY="4"
gridRowGap={4}
gridTemplateColumns="300px"
> >
<Col gapY="2"> <Col gapY="2">
<Box color="black" mb={2}>Channel Type</Box> <Box color="black" mb={2}>Channel Type</Box>
@ -168,7 +166,7 @@ export function NewChannel(props: NewChannelProps & RouteComponentProps) {
</AsyncButton> </AsyncButton>
</Box> </Box>
<FormError message="Channel creation failed" /> <FormError message="Channel creation failed" />
</Box> </Col>
</Form> </Form>
</Formik> </Formik>
</Col> </Col>