roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-15 17:19:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(Editor): add reset/delete actions to each category (fixes #302)

Browse source
This commit is contained in:
41666 2021-07-13 22:59:05 -04:00
parent 5dce2fc949
commit 5671a408c1
5 changed files with 63 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -29,12 +29,18 @@ export const Box = styled.div`
flex-wrap: wrap;
`;
export const Section = styled.div<{ big?: boolean }>`
export const Section = styled.div<{ big?: boolean; actions?: boolean }>`
padding: 7px 5px;
flex: 1 2 ${(props) => (props.big ? '100%' : '50%')};
${onSmallScreen(css`
flex-basis: 100%;
`)}
${(props) =>
props.actions &&
css`
display: flex;
`};
`;
export const RoleContainer = styled.div`

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

@ -1,3 +1,4 @@
import { Button } from '@roleypoly/design-system/atoms/button';
import { Popover } from '@roleypoly/design-system/atoms/popover';
import { Role } from '@roleypoly/design-system/atoms/role';
import { TextInput } from '@roleypoly/design-system/atoms/text-input';
@ -7,7 +8,7 @@ import { RoleSearch } from '@roleypoly/design-system/molecules/role-search';
import { Category as CategoryT, CategoryType, Role as RoleT } from '@roleypoly/types';
import { sortBy, uniq } from 'lodash';
import * as React from 'react';
import { GoPlus } from 'react-icons/go';
import { GoHistory, GoPlus, GoTrashcan } from 'react-icons/go';
import ReactTooltip from 'react-tooltip';
import { AddRoleButton, Box, RoleContainer, Section } from './EditorCategory.styled';
@ -17,6 +18,8 @@ export type CategoryProps = {
category: CategoryT;
unselectedRoles: RoleT[];
onChange: (updatedCategory: CategoryT) => void;
onReset: () => void;
onDelete: () => void;
};
export const EditorCategory = (props: CategoryProps) => {
@ -43,6 +46,16 @@ export const EditorCategory = (props: CategoryProps) => {
return (
<Box>
<Section big actions>
<Button size="small" color="muted" icon={<GoHistory />} onClick={props.onReset}>
Reset to Default
</Button>
&nbsp;
<Button size="small" color="muted" icon={<GoTrashcan />} onClick={props.onDelete}>
Delete Category
</Button>
</Section>
<Section>
<div>
<Text>Category Name</Text>