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

Feat/editor as preview (#294)

Browse source 
* try editor as preview

* add databinding for editor actions and message

* add actions, reordering base interactions

* add drag and drop ordering for categoriers

* category skeleton

* fix linting issues

* add role list and add button, non-functional

* bump packages

* add role search prototype

* yarn.lock sync

* fix lint

* remove cfw-emulator bin
This commit is contained in:
41666 2021-07-08 16:51:00 -05:00 • committed by GitHub
parent 7d681d69d6
commit ab3f718e6d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
43 changed files with 1157 additions and 741 deletions
Download patch file Download diff file Expand all files Collapse all files

37
packages/design-system/molecules/editable-server-message/EditableServerMessage.tsx Normal file
View file

@ -0,0 +1,37 @@
import { palette } from '@roleypoly/design-system/atoms/colors';
import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
import { MultilineTextInput } from '@roleypoly/design-system/atoms/text-input';
import {
AmbientLarge,
Text as TextTypo,
} from '@roleypoly/design-system/atoms/typography';
import { MessageBox } from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled';
import { GuildSlug } from '@roleypoly/types';
import { GoEyeClosed } from 'react-icons/go';
type Props = {
guild: GuildSlug;
onChange: (newMessage: string) => void;
value: string;
};
export const EditableServerMessage = (props: Props) => (
<MessageBox>
<TextTypo>Server Message</TextTypo>
<MultilineTextInput
rows={2}
value={props.value}
onChange={(event) => props.onChange(event.target.value)}
placeholder={`Hey friend from ${props.guild.name}! Pick your roles!`}
>
{props.value}
</MultilineTextInput>
<AmbientLarge style={{ display: 'flex', color: palette.taupe600 }}>
Shows a message to your server members.
<FaderOpacity isVisible={props.value.trim().length === 0}>
&nbsp;Since the message is empty, this won't show up.&nbsp;&nbsp;&nbsp;
<GoEyeClosed style={{ position: 'relative', top: 2 }} />
</FaderOpacity>
</AmbientLarge>
</MessageBox>
);