ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2025-01-05 22:03:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

interface: allow channel list to scroll and set a max-height

Browse Source
This commit is contained in:
Logan Allen 2021-02-08 16:02:32 -06:00
parent 5112937f59
commit 9380a46fc3
2 changed files with 70 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/interface/src/views/landscape/components/GroupSummary.tsx
View File

@ -13,7 +13,7 @@ interface GroupSummaryProps {
export function GroupSummary(props: GroupSummaryProps) {
const { channelCount, memberCount, metadata, children } = props;
return (
<Col maxWidth="600px" gapY="4">
<Col maxWidth="500px" gapY="4">
<Row gapX="2" width="100%">
<MetadataIcon
borderRadius="1"

136
pkg/interface/src/views/landscape/components/JoinGroup.tsx
View File

@ -131,84 +131,86 @@ export function JoinGroup(props: JoinGroupProps) {
);
return (
<>
<Col overflowY="auto" p="3">
<Box mb={3}>
<Text fontSize="2" fontWeight="bold">
Join a Group
</Text>
</Box>
{_.isString(preview) ? (
<Col width="100%" gapY="4">
<Text>The host appears to be offline. Join anyway?</Text>
<StatelessAsyncButton
primary
name="join"
onClick={() => onConfirm(preview)}
>
Join anyway
</StatelessAsyncButton>
</Col>
) : preview ? (
<GroupSummary
metadata={preview.metadata}
memberCount={preview?.members}
channelCount={preview?.["channel-count"]}
<Col p="3">
<Box mb={3}>
<Text fontSize="2" fontWeight="bold">
Join a Group
</Text>
</Box>
{_.isString(preview) ? (
<Col width="100%" gapY="4">
<Text>The host appears to be offline. Join anyway?</Text>
<StatelessAsyncButton
primary
name="join"
onClick={() => onConfirm(preview)}
>
{ Object.keys(preview.channels).length > 0 && (
<Col
Join anyway
</StatelessAsyncButton>
</Col>
) : preview ? (
<GroupSummary
metadata={preview.metadata}
memberCount={preview?.members}
channelCount={preview?.["channel-count"]}
>
{ Object.keys(preview.channels).length > 0 && (
<Col
gapY="2"
p="2"
borderRadius="2"
border="1"
borderColor="washedGray"
bg="washedBlue"
maxHeight="300px"
overflowY="auto"
>
<Text gray fontSize="1">
Channels
</Text>
{Object.values(preview.channels).map(({ metadata }: any) => (
<Row>
<Icon
mr="2"
color="blue"
icon={getModuleIcon(metadata.module) as any}
/>
<Text color="blue">{metadata.title} </Text>
</Row>
))}
<Box width="100%" flexShrink="0">
{Object.values(preview.channels).map(({ metadata }: any) => (
<Row width="100%">
<Icon
mr="2"
color="blue"
icon={getModuleIcon(metadata.module) as any}
/>
<Text color="blue">{metadata.title} </Text>
</Row>
))}
</Box>
</Col>
)}
<StatelessAsyncButton
primary
name="join"
onClick={() => onConfirm(preview.group)}
>
Join {preview.metadata.title}
</StatelessAsyncButton>
</GroupSummary>
) : (
<Col width="100%" gapY="4">
<Formik
validationSchema={formSchema}
initialValues={initialValues}
onSubmit={onSubmit}
>
<Form style={{ display: "contents" }}>
<Autojoin autojoin={autojoin ?? null} />
<Input
id="group"
label="Group"
caption="What group are you joining?"
placeholder="~sampel-palnet/test-group"
/>
<AsyncButton mt="4">Join Group</AsyncButton>
<FormError mt="4" />
</Form>
</Formik>
</Col>
)}
</Col>
</>
)}
<StatelessAsyncButton
primary
name="join"
onClick={() => onConfirm(preview.group)}
>
Join {preview.metadata.title}
</StatelessAsyncButton>
</GroupSummary>
) : (
<Col width="100%" gapY="4">
<Formik
validationSchema={formSchema}
initialValues={initialValues}
onSubmit={onSubmit}
>
<Form style={{ display: "contents" }}>
<Autojoin autojoin={autojoin ?? null} />
<Input
id="group"
label="Group"
caption="What group are you joining?"
placeholder="~sampel-palnet/test-group"
/>
<AsyncButton mt="4">Join Group</AsyncButton>
<FormError mt="4" />
</Form>
</Formik>
</Col>
)}
</Col>
);
}