Skip to content

Commit

Permalink
fix all paddings and mixed content between screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@ggazzo
ggazzo committed May 5, 2020
1 parent 48c43c6 commit c99b609
Show file tree
Hide file tree
Showing 19 changed files with 620 additions and 628 deletions.
79 changes: 39 additions & 40 deletions client/admin/customEmoji/AddCustomEmoji.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Box, Button, ButtonGroup, Margins, TextInput, Field, Icon } from '@rock
import { useTranslation } from '../../contexts/TranslationContext';
import { useFileInput } from '../../hooks/useFileInput';
import { useEndpointAction } from '../../hooks/useEndpointAction';
import VerticalBar from '../../components/basic/VerticalBar';

export function AddCustomEmoji({ close, onChange, ...props }) {
const t = useTranslation();
Expand Down Expand Up @@ -35,44 +36,42 @@ export function AddCustomEmoji({ close, onChange, ...props }) {

const clickUpload = useFileInput(setEmojiPreview, 'emoji');

return <Box display='flex' flexDirection='column' fontScale='p1' color='default' mbs='x20' {...props}>
<Margins block='x4'>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Name')} />
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Aliases')}</Field.Label>
<Field.Row>
<TextInput value={aliases} onChange={(e) => setAliases(e.currentTarget.value)} placeholder={t('Aliases')} />
</Field.Row>
</Field>
<Field>
<Field.Label alignSelf='stretch'>{t('Custom_Emoji')}</Field.Label>
<Box display='flex' flexDirection='row' mi='neg-x4'>
<Margins inline='x4'>
<Button square onClick={clickUpload}><Icon name='upload' size='x20'/></Button>
{ newEmojiPreview && <Box is='img' style={{ objectFit: 'contain' }} w='x120' h='x120' src={newEmojiPreview}/>}
</Margins>
</Box>
</Field>
<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button onClick={close}>{t('Cancel')}</Button>
<Button primary onClick={handleSave}>{t('Save')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button primary danger><Icon name='trash' mie='x4'/>{t('Delete')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
</Margins>
</Box>;
return <VerticalBar.ScrollableContent {...props}>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Name')} />
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Aliases')}</Field.Label>
<Field.Row>
<TextInput value={aliases} onChange={(e) => setAliases(e.currentTarget.value)} placeholder={t('Aliases')} />
</Field.Row>
</Field>
<Field>
<Field.Label alignSelf='stretch'>{t('Custom_Emoji')}</Field.Label>
<Box display='flex' flexDirection='row' mi='neg-x4'>
<Margins inline='x4'>
<Button square onClick={clickUpload}><Icon name='upload' size='x20'/></Button>
{ newEmojiPreview && <Box is='img' style={{ objectFit: 'contain' }} w='x120' h='x120' src={newEmojiPreview}/>}
</Margins>
</Box>
</Field>
<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button onClick={close}>{t('Cancel')}</Button>
<Button primary onClick={handleSave}>{t('Save')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button primary danger><Icon name='trash' mie='x4'/>{t('Delete')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
</VerticalBar.ScrollableContent>;
}
79 changes: 39 additions & 40 deletions client/admin/customEmoji/EditCustomEmoji.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Modal } from '../../components/basic/Modal';
import { useFileInput } from '../../hooks/useFileInput';
import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental';
import { useEndpointAction } from '../../hooks/useEndpointAction';
import VerticalBar from '../../components/basic/VerticalBar';

const DeleteWarningModal = ({ onDelete, onCancel, ...props }) => {
const t = useTranslation();
Expand Down Expand Up @@ -131,46 +132,44 @@ export function EditCustomEmoji({ close, onChange, data, ...props }) {
const clickUpload = useFileInput(setEmojiPreview, 'emoji');

return <>
<Box display='flex' flexDirection='column' fontScale='p1' color='default' mbs='x20' {...props}>
<Margins block='x4'>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Name')} />
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Aliases')}</Field.Label>
<Field.Row>
<TextInput value={aliases} onChange={handleAliasesChange} placeholder={t('Aliases')} />
</Field.Row>
</Field>
<Field>
<Field.Label alignSelf='stretch'>{t('Custom_Emoji')}</Field.Label>
<Box display='flex' flexDirection='row' mbs='none'>
<Margins inline='x4'>
<Button square onClick={clickUpload}><Icon name='upload' size='x20'/></Button>
<Box is='img' style={{ objectFit: 'contain' }} w='x120' h='x120' src={newEmojiPreview}/>
</Margins>
</Box>
</Field>
<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button onClick={close}>{t('Cancel')}</Button>
<Button primary onClick={handleSave} disabled={!hasUnsavedChanges}>{t('Save')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button primary danger onClick={openConfirmDelete}><Icon name='trash' mie='x4'/>{t('Delete')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
</Margins>
</Box>
<VerticalBar.ScrollableContent {...props}>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Name')} />
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Aliases')}</Field.Label>
<Field.Row>
<TextInput value={aliases} onChange={handleAliasesChange} placeholder={t('Aliases')} />
</Field.Row>
</Field>
<Field>
<Field.Label alignSelf='stretch'>{t('Custom_Emoji')}</Field.Label>
<Box display='flex' flexDirection='row' mbs='none'>
<Margins inline='x4'>
<Button square onClick={clickUpload}><Icon name='upload' size='x20'/></Button>
<Box is='img' style={{ objectFit: 'contain' }} w='x120' h='x120' src={newEmojiPreview}/>
</Margins>
</Box>
</Field>
<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button onClick={close}>{t('Cancel')}</Button>
<Button primary onClick={handleSave} disabled={!hasUnsavedChanges}>{t('Save')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button primary danger onClick={openConfirmDelete}><Icon name='trash' mie='x4'/>{t('Delete')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
</VerticalBar.ScrollableContent>
{ modal }
</>;
}
55 changes: 27 additions & 28 deletions client/admin/customSounds/NewSound.js → client/admin/customSounds/AddCustomSound.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ import { useTranslation } from '../../contexts/TranslationContext';
import { useMethod } from '../../contexts/ServerContext';
import { useFileInput } from '../../hooks/useFileInput';
import { validate, createSoundData } from './lib';
import VerticalBar from '../../components/basic/VerticalBar';

export function NewSound({ goToNew, close, onChange, ...props }) {
export function AddCustomSound({ goToNew, close, onChange, ...props }) {
const t = useTranslation();
const dispatchToastMessage = useToastMessageDispatch();

Expand Down Expand Up @@ -71,31 +72,29 @@ export function NewSound({ goToNew, close, onChange, ...props }) {
}
}, [name, sound]);

return <Box display='flex' flexDirection='column' fontScale='p1' color='default' mbs='x20' {...props}>
<Margins block='x4'>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Name')} />
</Field.Row>
</Field>
<Field>
<Field.Label alignSelf='stretch'>{t('Sound_File_mp3')}</Field.Label>
<Box display='flex' flexDirection='row' mbs='none'>
<Margins inline='x4'>
<Button square onClick={clickUpload}><Icon name='upload' size='x20'/></Button>
{(sound && sound.name) || 'none'}
</Margins>
</Box>
</Field>
<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button mie='x4' onClick={close}>{t('Cancel')}</Button>
<Button primary onClick={handleSave} disabled={name === ''}>{t('Save')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
</Margins>
</Box>;
return <VerticalBar.ScrollableContent {...props}>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Name')} />
</Field.Row>
</Field>
<Field>
<Field.Label alignSelf='stretch'>{t('Sound_File_mp3')}</Field.Label>
<Box display='flex' flexDirection='row' mbs='none'>
<Margins inline='x4'>
<Button square onClick={clickUpload}><Icon name='upload' size='x20'/></Button>
{(sound && sound.name) || 'none'}
</Margins>
</Box>
</Field>
<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button mie='x4' onClick={close}>{t('Cancel')}</Button>
<Button primary onClick={handleSave} disabled={name === ''}>{t('Save')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
</VerticalBar.ScrollableContent>;
}
8 changes: 4 additions & 4 deletions client/admin/customSounds/AdminSoundsRoute.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import { usePermission } from '../../contexts/AuthorizationContext';
import { useTranslation } from '../../contexts/TranslationContext';
import Page from '../../components/basic/Page';
import { AdminSounds } from './AdminSounds';
import { NewSound } from './NewSound';
import { EditSound } from './EditSound';
import { AddCustomSound } from './AddCustomSound';
import { EditCustomSound } from './EditCustomSound';
import { useRoute, useRouteParameter } from '../../contexts/RouterContext';
import { useEndpointData } from '../../hooks/useEndpointData';
import VerticalBar from '../../components/basic/VerticalBar';
Expand Down Expand Up @@ -101,8 +101,8 @@ export default function CustomSoundsRoute({ props }) {
{ context === 'new' && t('Custom_Sound_Add') }
<VerticalBar.Close onClick={close}/></VerticalBar.Header>
<VerticalBar.Content>
{context === 'edit' && <EditSound _id={id} close={close} onChange={onChange} cache={cache}/>}
{context === 'new' && <NewSound goToNew={onClick} close={close} onChange={onChange}/>}
{context === 'edit' && <EditCustomSound _id={id} close={close} onChange={onChange} cache={cache}/>}
{context === 'new' && <AddCustomSound goToNew={onClick} close={close} onChange={onChange}/>}
</VerticalBar.Content>
</VerticalBar>}
</Page>;
Expand Down
71 changes: 35 additions & 36 deletions client/admin/customSounds/EditSound.js → client/admin/customSounds/EditCustomSound.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { Modal } from '../../components/basic/Modal';
import { useFileInput } from '../../hooks/useFileInput';
import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental';
import { validate, createSoundData } from './lib';
import VerticalBar from '../../components/basic/VerticalBar';

const DeleteWarningModal = ({ onDelete, onCancel, ...props }) => {
const t = useTranslation();
Expand Down Expand Up @@ -161,42 +162,40 @@ export function EditCustomSound({ close, onChange, data, ...props }) {


return <>
<Box display='flex' flexDirection='column' fontScale='p1' color='default' mbs='x20' {...props}>
<Margins block='x4'>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Name')} />
</Field.Row>
</Field>

<Field>
<Field.Label alignSelf='stretch'>{t('Sound_File_mp3')}</Field.Label>
<Box display='flex' flexDirection='row' mbs='none'>
<Margins inline='x4'>
<Button square onClick={clickUpload}><Icon name='upload' size='x20'/></Button>
{(sound && sound.name) || 'none'}
</Margins>
</Box>
</Field>

<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button onClick={close}>{t('Cancel')}</Button>
<Button primary onClick={handleSave} disabled={!hasUnsavedChanges}>{t('Save')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button primary danger onClick={openConfirmDelete}><Icon name='trash' mie='x4'/>{t('Delete')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
</Margins>
</Box>
<VerticalBar.ScrollableContent {...props}>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder={t('Name')} />
</Field.Row>
</Field>

<Field>
<Field.Label alignSelf='stretch'>{t('Sound_File_mp3')}</Field.Label>
<Box display='flex' flexDirection='row' mbs='none'>
<Margins inline='x4'>
<Button square onClick={clickUpload}><Icon name='upload' size='x20'/></Button>
{(sound && sound.name) || 'none'}
</Margins>
</Box>
</Field>

<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button onClick={close}>{t('Cancel')}</Button>
<Button primary onClick={handleSave} disabled={!hasUnsavedChanges}>{t('Save')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
<Field>
<Field.Row>
<ButtonGroup stretch w='full'>
<Button primary danger onClick={openConfirmDelete}><Icon name='trash' mie='x4'/>{t('Delete')}</Button>
</ButtonGroup>
</Field.Row>
</Field>
</VerticalBar.ScrollableContent>
{ modal }
</>;
}
Loading

0 comments on commit c99b609

Please sign in to comment.