roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-04-25 03:49:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

category skeleton

Browse source
This commit is contained in:
41666 2021-07-06 14:42:39 -05:00
parent 098a4133df
commit 28bebd531f
4 changed files with 59 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/design-system/atoms/toggle/Toggle.styled.tsx
View file

@ -20,9 +20,9 @@ export const ToggleState = styled.div`
export const ToggleSwitch = styled.div<{ state: boolean }>`
display: inline-block;
background-color: ${(props) => (props.state ? palette.green200 : 'rgba(0,0,0,0.45)')};
height: 1.3em;
width: 2.6em;
border-radius: 1.3em;
height: 1.375rem;
width: 2.675rem;
border-radius: 1.375rem;
position: relative;
border: 1px solid rgba(0, 0, 0, 0.1);
top: 0.23em;

18
packages/design-system/molecules/editor-category/EditorCategory.styled.ts
View file

@ -1,4 +1,5 @@
import styled from 'styled-components';
import { onSmallScreen } from '@roleypoly/design-system/atoms/breakpoints';
import styled, { css } from 'styled-components';
export const Head = styled.div`
margin: 7px 5px;
@ -18,3 +19,18 @@ export const HeadSub = styled.div`
flex-shrink: 0;
margin-top: -4px;
`;
export const Box = styled.div`
display: flex;
align-items: top;
justify-content: space-between;
flex-wrap: wrap;
`;
export const Section = styled.div<{ big?: boolean }>`
padding: 7px 5px;
flex: 1 2 ${(props) => (props.big ? '100%' : '50%')};
${onSmallScreen(css`
flex-basis: 100%;
`)}
`;

68
packages/design-system/molecules/editor-category/EditorCategory.tsx
View file

@ -1,50 +1,60 @@
import { TextInput } from '@roleypoly/design-system/atoms/text-input';
import { Toggle } from '@roleypoly/design-system/atoms/toggle';
import { Text } from '@roleypoly/design-system/atoms/typography';
import { Category as CategoryT, Role as RoleT } from '@roleypoly/types';
import { Category as CategoryT, CategoryType, Role as RoleT } from '@roleypoly/types';
import * as React from 'react';
import ReactTooltip from 'react-tooltip';
import styled from 'styled-components';
import { Head, HeadTitle } from './EditorCategory.styled';
import { Box, Section } from './EditorCategory.styled';
export type CategoryProps = {
title: string;
roles: RoleT[];
category: CategoryT;
selectedRoles: string[];
onChange: (updatedCategory: CategoryT) => void;
type: 'single' | 'multi';
};
const Category = styled.div`
display: flex;
flex-wrap: wrap;
`;
const Container = styled.div`
overflow: hidden;
padding: 5px;
`;
export const EditorCategory = (props: CategoryProps) => {
const updateValue = <T extends keyof CategoryT>(key: T, value: CategoryT[T]) => {
props.onChange({ ...props.category, [key]: value });
};
return (
<>
<Head>
<HeadTitle>
<div>
<Text>Category Name</Text>
</div>
<TextInput
value={props.category.name}
onChange={(event) => updateValue('name', event.target.value)}
/>
</HeadTitle>
</Head>
<Category></Category>
<Box>
<Section>
<div>
<Text>Category Name</Text>
</div>
<TextInput
value={props.category.name}
onChange={(event) => updateValue('name', event.target.value)}
/>
</Section>
<Section>
<div>
<Text>Options</Text>
</div>
<div>
<Toggle
state={props.category.hidden}
onChange={(value) => updateValue('hidden', value)}
>
Show this category to members
</Toggle>
<Toggle
state={props.category.type === CategoryType.Multi}
onChange={(value) =>
updateValue('type', value ? CategoryType.Multi : CategoryType.Single)
}
>
Let members pick more than one role
</Toggle>
</div>
</Section>
<Section big>aa</Section>
<ReactTooltip id={props.category.id} />
</>
</Box>
);
};

3
packages/design-system/organisms/server-category-editor/ServerCategoryEditor.tsx
View file

@ -83,17 +83,14 @@ export const ServerCategoryEditor = (props: Props) => {
{sortBy(props.guild.data.categories, ['position', 'id']).map((category, idx) => (
<CategoryContainer key={idx}>
<EditorCategory
key={idx}
category={category}
title={category.name}
selectedRoles={[]}
roles={
category.roles
.map((role) => props.guild.roles.find((r) => r.id === role))
.filter((r) => r !== undefined) as Role[]
}
onChange={updateSingleCategory}
type={category.type === CategoryType.Single ? 'single' : 'multi'}
/>
</CategoryContainer>
))}