roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-04-25 11:59: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 }>` export const ToggleSwitch = styled.div<{ state: boolean }>`
display: inline-block; display: inline-block;
background-color: ${(props) => (props.state ? palette.green200 : 'rgba(0,0,0,0.45)')}; background-color: ${(props) => (props.state ? palette.green200 : 'rgba(0,0,0,0.45)')};
height: 1.3em; height: 1.375rem;
width: 2.6em; width: 2.675rem;
border-radius: 1.3em; border-radius: 1.375rem;
position: relative; position: relative;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
top: 0.23em; 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` export const Head = styled.div`
margin: 7px 5px; margin: 7px 5px;
@ -18,3 +19,18 @@ export const HeadSub = styled.div`
flex-shrink: 0; flex-shrink: 0;
margin-top: -4px; 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%;
`)}
`;

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

@ -1,39 +1,26 @@
import { TextInput } from '@roleypoly/design-system/atoms/text-input'; 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 { 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 * as React from 'react';
import ReactTooltip from 'react-tooltip'; import ReactTooltip from 'react-tooltip';
import styled from 'styled-components'; import { Box, Section } from './EditorCategory.styled';
import { Head, HeadTitle } from './EditorCategory.styled';
export type CategoryProps = { export type CategoryProps = {
title: string; title: string;
roles: RoleT[]; roles: RoleT[];
category: CategoryT; category: CategoryT;
selectedRoles: string[];
onChange: (updatedCategory: CategoryT) => void; 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) => { export const EditorCategory = (props: CategoryProps) => {
const updateValue = <T extends keyof CategoryT>(key: T, value: CategoryT[T]) => { const updateValue = <T extends keyof CategoryT>(key: T, value: CategoryT[T]) => {
props.onChange({ ...props.category, [key]: value }); props.onChange({ ...props.category, [key]: value });
}; };
return ( return (
<> <Box>
<Head> <Section>
<HeadTitle>
<div> <div>
<Text>Category Name</Text> <Text>Category Name</Text>
</div> </div>
@ -41,10 +28,33 @@ export const EditorCategory = (props: CategoryProps) => {
value={props.category.name} value={props.category.name}
onChange={(event) => updateValue('name', event.target.value)} onChange={(event) => updateValue('name', event.target.value)}
/> />
</HeadTitle> </Section>
</Head>
<Category></Category> <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} /> <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) => ( {sortBy(props.guild.data.categories, ['position', 'id']).map((category, idx) => (
<CategoryContainer key={idx}> <CategoryContainer key={idx}>
<EditorCategory <EditorCategory
key={idx}
category={category} category={category}
title={category.name} title={category.name}
selectedRoles={[]}
roles={ roles={
category.roles category.roles
.map((role) => props.guild.roles.find((r) => r.id === role)) .map((role) => props.guild.roles.find((r) => r.id === role))
.filter((r) => r !== undefined) as Role[] .filter((r) => r !== undefined) as Role[]
} }
onChange={updateSingleCategory} onChange={updateSingleCategory}
type={category.type === CategoryType.Single ? 'single' : 'multi'}
/> />
</CategoryContainer> </CategoryContainer>
))} ))}