Skip to content

Commit

Permalink
chore: normalize contextualbar footer buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@dougfabris
dougfabris committed Jul 11, 2023
1 parent 54579fb commit 71ca0aa
Show file tree
Hide file tree
Showing 11 changed files with 611 additions and 611 deletions.
84 changes: 42 additions & 42 deletions apps/meteor/client/views/admin/customEmoji/AddCustomEmoji.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
import type { ReactElement, ChangeEvent } from 'react';
import React, { useCallback, useState } from 'react';

import { ContextualbarScrollableContent } from '../../../components/Contextualbar';
import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../components/Contextualbar';
import { useEndpointUpload } from '../../../hooks/useEndpointUpload';
import { useFileInput } from '../../../hooks/useFileInput';

Expand Down Expand Up @@ -75,48 +75,48 @@ const AddCustomEmoji = ({ close, onChange, ...props }: AddCustomEmojiProps): Rea
};

return (
<ContextualbarScrollableContent {...props}>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput value={name} onChange={handleChangeName} placeholder={t('Name')} />
</Field.Row>
{errors.name && <Field.Error>{t('error-the-field-is-required', { field: t('Name') })}</Field.Error>}
</Field>
<Field>
<Field.Label>{t('Aliases')}</Field.Label>
<Field.Row>
<TextInput value={aliases} onChange={handleChangeAliases} placeholder={t('Aliases')} />
</Field.Row>
{errors.aliases && <Field.Error>{t('Custom_Emoji_Error_Same_Name_And_Alias')}</Field.Error>}
</Field>
<Field>
<Field.Label alignSelf='stretch' display='flex' justifyContent='space-between' alignItems='center'>
{t('Custom_Emoji')}
<Button square onClick={clickUpload}>
<Icon name='upload' size='x20' />
</Button>
</Field.Label>
{errors.emoji && <Field.Error>{t('error-the-field-is-required', { field: t('Custom_Emoji') })}</Field.Error>}
{newEmojiPreview && (
<Box display='flex' flexDirection='row' mi='neg-x4' justifyContent='center'>
<Margins inline='x4'>
<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')}
<>
<ContextualbarScrollableContent {...props}>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput value={name} onChange={handleChangeName} placeholder={t('Name')} />
</Field.Row>
{errors.name && <Field.Error>{t('error-the-field-is-required', { field: t('Name') })}</Field.Error>}
</Field>
<Field>
<Field.Label>{t('Aliases')}</Field.Label>
<Field.Row>
<TextInput value={aliases} onChange={handleChangeAliases} placeholder={t('Aliases')} />
</Field.Row>
{errors.aliases && <Field.Error>{t('Custom_Emoji_Error_Same_Name_And_Alias')}</Field.Error>}
</Field>
<Field>
<Field.Label alignSelf='stretch' display='flex' justifyContent='space-between' alignItems='center'>
{t('Custom_Emoji')}
<Button square onClick={clickUpload}>
<Icon name='upload' size='x20' />
</Button>
</ButtonGroup>
</Field.Row>
</Field>
</ContextualbarScrollableContent>
</Field.Label>
{errors.emoji && <Field.Error>{t('error-the-field-is-required', { field: t('Custom_Emoji') })}</Field.Error>}
{newEmojiPreview && (
<Box display='flex' flexDirection='row' mi='neg-x4' justifyContent='center'>
<Margins inline='x4'>
<Box is='img' style={{ objectFit: 'contain' }} w='x120' h='x120' src={newEmojiPreview} />
</Margins>
</Box>
)}
</Field>
</ContextualbarScrollableContent>
<ContextualbarFooter>
<ButtonGroup stretch>
<Button onClick={close}>{t('Cancel')}</Button>
<Button primary onClick={handleSave}>
{t('Save')}
</Button>
</ButtonGroup>
</ContextualbarFooter>
</>
);
};

Expand Down
93 changes: 48 additions & 45 deletions apps/meteor/client/views/admin/customEmoji/EditCustomEmoji.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useSetModal, useToastMessageDispatch, useAbsoluteUrl, useTranslation }
import type { FC, ChangeEvent } from 'react';
import React, { useCallback, useState, useMemo, useEffect } from 'react';

import { ContextualbarScrollableContent } from '../../../components/Contextualbar';
import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../components/Contextualbar';
import GenericModal from '../../../components/GenericModal';
import { useEndpointAction } from '../../../hooks/useEndpointAction';
import { useEndpointUpload } from '../../../hooks/useEndpointUpload';
Expand Down Expand Up @@ -130,50 +130,53 @@ const EditCustomEmoji: FC<EditCustomEmojiProps> = ({ close, onChange, data, ...p
};

return (
<ContextualbarScrollableContent {...props}>
<FieldGroup>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput value={name} onChange={handleChangeName} placeholder={t('Name')} />
</Field.Row>
{errors.name && <Field.Error>{t('error-the-field-is-required', { field: t('Name') })}</Field.Error>}
</Field>
<Field>
<Field.Label>{t('Aliases')}</Field.Label>
<Field.Row>
<TextInput value={aliases} onChange={handleChangeAliases} placeholder={t('Aliases')} />
</Field.Row>
{errors.aliases && <Field.Error>{t('Custom_Emoji_Error_Same_Name_And_Alias')}</Field.Error>}
</Field>
<Field>
<Field.Label alignSelf='stretch' display='flex' justifyContent='space-between' alignItems='center'>
{t('Custom_Emoji')}
<IconButton icon='upload' secondary onClick={clickUpload} />
</Field.Label>
{newEmojiPreview && (
<Box display='flex' flexDirection='row' mbs='none' justifyContent='center'>
<Margins inline='x4'>
<Box is='img' style={{ objectFit: 'contain' }} w='x120' h='x120' src={newEmojiPreview} />
</Margins>
</Box>
)}
</Field>
</FieldGroup>
<ButtonGroup stretch w='full'>
<Button onClick={close}>{t('Cancel')}</Button>
<Button primary onClick={handleSave} disabled={!hasUnsavedChanges}>
{t('Save')}
</Button>
</ButtonGroup>

<ButtonGroup stretch w='full'>
<Button danger onClick={handleDeleteButtonClick}>
<Icon name='trash' mie='x4' />
{t('Delete')}
</Button>
</ButtonGroup>
</ContextualbarScrollableContent>
<>
<ContextualbarScrollableContent {...props}>
<FieldGroup>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput value={name} onChange={handleChangeName} placeholder={t('Name')} />
</Field.Row>
{errors.name && <Field.Error>{t('error-the-field-is-required', { field: t('Name') })}</Field.Error>}
</Field>
<Field>
<Field.Label>{t('Aliases')}</Field.Label>
<Field.Row>
<TextInput value={aliases} onChange={handleChangeAliases} placeholder={t('Aliases')} />
</Field.Row>
{errors.aliases && <Field.Error>{t('Custom_Emoji_Error_Same_Name_And_Alias')}</Field.Error>}
</Field>
<Field>
<Field.Label alignSelf='stretch' display='flex' justifyContent='space-between' alignItems='center'>
{t('Custom_Emoji')}
<IconButton icon='upload' secondary onClick={clickUpload} />
</Field.Label>
{newEmojiPreview && (
<Box display='flex' flexDirection='row' mbs='none' justifyContent='center'>
<Margins inline='x4'>
<Box is='img' style={{ objectFit: 'contain' }} w='x120' h='x120' src={newEmojiPreview} />
</Margins>
</Box>
)}
</Field>
</FieldGroup>
</ContextualbarScrollableContent>
<ContextualbarFooter>
<ButtonGroup stretch>
<Button onClick={close}>{t('Cancel')}</Button>
<Button primary onClick={handleSave} disabled={!hasUnsavedChanges}>
{t('Save')}
</Button>
</ButtonGroup>
<ButtonGroup mbs='x8' stretch>
<Button danger onClick={handleDeleteButtonClick}>
<Icon name='trash' mie='x4' />
{t('Delete')}
</Button>
</ButtonGroup>
</ContextualbarFooter>
</>
);
};

Expand Down
72 changes: 36 additions & 36 deletions apps/meteor/client/views/admin/customSounds/AddCustomSound.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useToastMessageDispatch, useMethod, useTranslation } from '@rocket.chat
import type { ReactElement, FormEvent } from 'react';
import React, { useState, useCallback } from 'react';

import { ContextualbarScrollableContent } from '../../../components/Contextualbar';
import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../components/Contextualbar';
import { useFileInput } from '../../../hooks/useFileInput';
import { validate, createSoundData } from './lib';

Expand Down Expand Up @@ -81,41 +81,41 @@ const AddCustomSound = ({ goToNew, close, onChange, ...props }: AddCustomSoundPr
}, [dispatchToastMessage, goToNew, name, onChange, saveAction, sound, t]);

return (
<ContextualbarScrollableContent {...props}>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput
value={name}
onChange={(e: FormEvent<HTMLInputElement>): void => 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?.name || t('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>
</ContextualbarScrollableContent>
<>
<ContextualbarScrollableContent {...props}>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput
value={name}
onChange={(e: FormEvent<HTMLInputElement>): void => 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?.name || t('None')}
</Margins>
</Box>
</Field>
</ContextualbarScrollableContent>
<ContextualbarFooter>
<ButtonGroup stretch>
<Button mie='x4' onClick={close}>
{t('Cancel')}
</Button>
<Button primary onClick={handleSave} disabled={name === ''}>
{t('Save')}
</Button>
</ButtonGroup>
</ContextualbarFooter>
</>
);
};

Expand Down
82 changes: 38 additions & 44 deletions apps/meteor/client/views/admin/customSounds/EditSound.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { useSetModal, useToastMessageDispatch, useMethod, useTranslation } from
import type { ReactElement, SyntheticEvent } from 'react';
import React, { useCallback, useState, useMemo, useEffect } from 'react';

import { ContextualbarScrollableContent } from '../../../components/Contextualbar';
import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../components/Contextualbar';
import GenericModal from '../../../components/GenericModal';
import { useFileInput } from '../../../hooks/useFileInput';
import { validate, createSoundData } from './lib';
Expand Down Expand Up @@ -117,49 +117,43 @@ function EditSound({ close, onChange, data, ...props }: EditSoundProps): ReactEl
const [clickUpload] = useFileInput(handleChangeFile, 'audio/mp3');

return (
<ContextualbarScrollableContent {...props}>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput
value={name}
onChange={(e: SyntheticEvent<HTMLInputElement>): void => 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'>
<IconButton icon='upload' secondary onClick={clickUpload} />
{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 danger onClick={handleDeleteButtonClick}>
<Icon name='trash' mie='x4' />
{t('Delete')}
</Button>
</ButtonGroup>
</Field.Row>
</Field>
</ContextualbarScrollableContent>
<>
<ContextualbarScrollableContent {...props}>
<Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput
value={name}
onChange={(e: SyntheticEvent<HTMLInputElement>): void => 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'>
<IconButton icon='upload' secondary onClick={clickUpload} />
{sound?.name || 'none'}
</Margins>
</Box>
</Field>
</ContextualbarScrollableContent>
<ContextualbarFooter>
<ButtonGroup stretch>
<Button onClick={close}>{t('Cancel')}</Button>
<Button primary onClick={handleSave} disabled={!hasUnsavedChanges}>
{t('Save')}
</Button>
</ButtonGroup>
<ButtonGroup mbs='x8' stretch>
<Button danger onClick={handleDeleteButtonClick}>
<Icon name='trash' mie='x4' />
{t('Delete')}
</Button>
</ButtonGroup>
</ContextualbarFooter>
</>
);
}

Expand Down
Loading

0 comments on commit 71ca0aa

Please sign in to comment.