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

Feat/editor category pass2 (#290)

Browse source 
* feat(design-system): add editor skeletons

* use css media queries rather than JS media queries

* init remake

* feat: add basis of toggle atom

* finish toggle

* use pointer cursor with toggle

* sync

* feat: add server message in editor

* cleanup storybook

* add short editor item and data model for categories

* chore: fix build by moving jest version downward

* chore: remove old category editor

* chore: fix EditorCategoryShort index

* add editor wiring and styling updates

* fix linting issues
This commit is contained in:
41666 2021-07-05 12:18:40 -05:00 • committed by GitHub
parent a37d481b18
commit 7d681d69d6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
48 changed files with 927 additions and 1100 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,4 +3,11 @@ import styled from 'styled-components';
export const RoleContainer = styled.div`
display: flex;
margin: 10px;
flex-wrap: wrap;
& > div {
/* This should be a Role element */
border: 1px solid rgba(0, 0, 0, 0.15);
margin: 1px;
}
`;

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

@ -1,9 +1,9 @@
import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
import { HorizontalSwitch } from '@roleypoly/design-system/atoms/horizontal-switch';
import { Popover } from '@roleypoly/design-system/atoms/popover';
import { Role } from '@roleypoly/design-system/atoms/role';
import { Space } from '@roleypoly/design-system/atoms/space';
import { TextInput, TextInputWithIcon } from '@roleypoly/design-system/atoms/text-input';
import { Toggle } from '@roleypoly/design-system/atoms/toggle';
import { Text } from '@roleypoly/design-system/atoms/typography';
import { RoleSearch } from '@roleypoly/design-system/molecules/role-search';
import { Category, CategoryType, Role as RoleType } from '@roleypoly/types';
@ -74,24 +74,22 @@ export const EditorCategory = (props: Props) => {
<Space />
<Text>Selection Type</Text>
<div>
<HorizontalSwitch
items={['Multiple', 'Single']}
value={typeEnumToSwitch(props.category.type)}
onChange={onUpdate('type', switchToTypeEnum)}
/>
<Toggle
state={props.category.type === CategoryType.Multi}
onChange={onUpdate('type', (x) =>
x ? CategoryType.Multi : CategoryType.Single
)}
>
Allow users to pick multiple roles
</Toggle>
</div>
<Space />
<Text>Visiblity</Text>
<div>
<HorizontalSwitch
items={['Visible', 'Hidden']}
value={props.category.hidden ? 'Hidden' : 'Visible'}
onChange={onUpdate('hidden', (a) => a === 'Hidden')}
/>
<Toggle state={props.category.hidden} onChange={onUpdate('hidden')}>
Hide category from users
</Toggle>
</div>
<Space />