apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Regression: Margins on Export Messages (#18682)

Browse Source 
* Fix Margins on Export Messages

* Add Content Scroll
pull/18661/head^2
Guilherme Gazzo 5 years ago committed by GitHub
parent a97c1cb32f
commit b5d199e74f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 118 additions and 111 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 180
      client/admin/users/UserForm.js
  2. 40
      client/channel/ExportMessages/index.js
  3. 2
      client/components/basic/Buttons/ActionButton.js
  4. 2
      client/components/basic/PlanTag.js
  5. 5
      client/components/basic/Sidebar.js

180
client/admin/users/UserForm.js
Unescape View File

@ -1,5 +1,5 @@
import React, { useCallback, useMemo, useState } from 'react';
import { Field, TextInput, TextAreaInput, PasswordInput, MultiSelectFiltered, Box, ToggleSwitch, Icon, Divider } from '@rocket.chat/fuselage';
import { Field, TextInput, TextAreaInput, PasswordInput, MultiSelectFiltered, Box, ToggleSwitch, Icon, Divider, FieldGroup } from '@rocket.chat/fuselage';
import { useTranslation } from '../../contexts/TranslationContext';
import { isEmail } from '../../../app/utils/lib/isEmail.js';
@ -47,93 +47,95 @@ export default function UserForm({ formValues, formHandlers, availableRoles, app
const onLoadCustomFields = useCallback((hasCustomFields) => setHasCustomFields(hasCustomFields), []);
return <VerticalBar.ScrollableContent is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} { ...props }>
{ prepend }
{useMemo(() => <Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={name} onChange={handleName}/>
</Field.Row>
</Field>, [t, name, handleName])}
{useMemo(() => <Field>
<Field.Label>{t('Username')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={username} onChange={handleUsername} addon={<Icon name='at' size='x20'/>}/>
</Field.Row>
</Field>, [t, username, handleUsername])}
{useMemo(() => <Field>
<Field.Label>{t('Email')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={email} error={!isEmail(email) && email.length > 0 ? 'error' : undefined} onChange={handleEmail} addon={<Icon name='mail' size='x20'/>}/>
</Field.Row>
<Field.Row>
<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between' mbs='x4'>
<Box>{t('Verified')}</Box><ToggleSwitch checked={verified} onChange={handleVerified} />
</Box>
</Field.Row>
</Field>, [t, email, handleEmail, verified, handleVerified])}
{useMemo(() => <Field>
<Field.Label>{t('StatusMessage')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={statusText} onChange={handleStatusText} addon={<Icon name='edit' size='x20'/>}/>
</Field.Row>
</Field>, [t, statusText, handleStatusText])}
{useMemo(() => <Field>
<Field.Label>{t('Bio')}</Field.Label>
<Field.Row>
<TextAreaInput rows={3} flexGrow={1} value={bio} onChange={handleBio} addon={<Icon name='edit' size='x20' alignSelf='center'/>}/>
</Field.Row>
</Field>, [bio, handleBio, t])}
{useMemo(() => <Field>
<Field.Label>{t('Nickname')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={nickname} onChange={handleNickname} addon={<Icon name='edit' size='x20' alignSelf='center'/>}/>
</Field.Row>
</Field>, [nickname, handleNickname, t])}
{useMemo(() => <Field>
<Field.Label>{t('Password')}</Field.Label>
<Field.Row>
<PasswordInput autoComplete='off' flexGrow={1} value={password} onChange={handlePassword} addon={<Icon name='key' size='x20'/>}/>
</Field.Row>
</Field>, [t, password, handlePassword])}
{useMemo(() => <Field>
<Field.Row>
<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
<Box>{t('Require_password_change')}</Box><ToggleSwitch disabled={setRandomPassword} checked={setRandomPassword || requirePasswordChange} onChange={handleRequirePasswordChange} />
</Box>
</Field.Row>
</Field>, [t, setRandomPassword, requirePasswordChange, handleRequirePasswordChange])}
{useMemo(() => <Field>
<Field.Row>
<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
<Box>{t('Set_random_password_and_send_by_email')}</Box><ToggleSwitch checked={setRandomPassword} onChange={handleSetRandomPassword} />
</Box>
</Field.Row>
</Field>, [t, setRandomPassword, handleSetRandomPassword])}
{useMemo(() => <Field>
<Field.Label>{t('Roles')}</Field.Label>
<Field.Row>
<MultiSelectFiltered options={availableRoles} value={roles} onChange={handleRoles} placeholder={t('Select_role')} flexShrink={1}/>
</Field.Row>
</Field>, [availableRoles, handleRoles, roles, t])}
{useMemo(() => handleJoinDefaultChannels && <Field>
<Field.Row>
<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
<Box>{t('Join_default_channels')}</Box><ToggleSwitch checked={joinDefaultChannels} onChange={handleJoinDefaultChannels} />
</Box>
</Field.Row>
</Field>, [handleJoinDefaultChannels, t, joinDefaultChannels])}
{useMemo(() => handleSendWelcomeEmail && <Field>
<Field.Row>
<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
<Box>{t('Send_welcome_email')}</Box><ToggleSwitch checked={sendWelcomeEmail} onChange={handleSendWelcomeEmail} />
</Box>
</Field.Row>
</Field>, [handleSendWelcomeEmail, t, sendWelcomeEmail])}
{hasCustomFields && <>
<Divider />
<Box fontScale='s2'>{t('Custom_Fields')}</Box>
</>}
<CustomFieldsForm onLoadFields={onLoadCustomFields} customFieldsData={customFields} setCustomFieldsData={handleCustomFields}/>
{ append }
<FieldGroup>
{ prepend }
{useMemo(() => <Field>
<Field.Label>{t('Name')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={name} onChange={handleName}/>
</Field.Row>
</Field>, [t, name, handleName])}
{useMemo(() => <Field>
<Field.Label>{t('Username')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={username} onChange={handleUsername} addon={<Icon name='at' size='x20'/>}/>
</Field.Row>
</Field>, [t, username, handleUsername])}
{useMemo(() => <Field>
<Field.Label>{t('Email')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={email} error={!isEmail(email) && email.length > 0 ? 'error' : undefined} onChange={handleEmail} addon={<Icon name='mail' size='x20'/>}/>
</Field.Row>
<Field.Row>
<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between' mbs='x4'>
<Box>{t('Verified')}</Box><ToggleSwitch checked={verified} onChange={handleVerified} />
</Box>
</Field.Row>
</Field>, [t, email, handleEmail, verified, handleVerified])}
{useMemo(() => <Field>
<Field.Label>{t('StatusMessage')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={statusText} onChange={handleStatusText} addon={<Icon name='edit' size='x20'/>}/>
</Field.Row>
</Field>, [t, statusText, handleStatusText])}
{useMemo(() => <Field>
<Field.Label>{t('Bio')}</Field.Label>
<Field.Row>
<TextAreaInput rows={3} flexGrow={1} value={bio} onChange={handleBio} addon={<Icon name='edit' size='x20' alignSelf='center'/>}/>
</Field.Row>
</Field>, [bio, handleBio, t])}
{useMemo(() => <Field>
<Field.Label>{t('Nickname')}</Field.Label>
<Field.Row>
<TextInput flexGrow={1} value={nickname} onChange={handleNickname} addon={<Icon name='edit' size='x20' alignSelf='center'/>}/>
</Field.Row>
</Field>, [nickname, handleNickname, t])}
{useMemo(() => <Field>
<Field.Label>{t('Password')}</Field.Label>
<Field.Row>
<PasswordInput autoComplete='off' flexGrow={1} value={password} onChange={handlePassword} addon={<Icon name='key' size='x20'/>}/>
</Field.Row>
</Field>, [t, password, handlePassword])}
{useMemo(() => <Field>
<Field.Row>
<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
<Box>{t('Require_password_change')}</Box><ToggleSwitch disabled={setRandomPassword} checked={setRandomPassword || requirePasswordChange} onChange={handleRequirePasswordChange} />
</Box>
</Field.Row>
</Field>, [t, setRandomPassword, requirePasswordChange, handleRequirePasswordChange])}
{useMemo(() => <Field>
<Field.Row>
<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
<Box>{t('Set_random_password_and_send_by_email')}</Box><ToggleSwitch checked={setRandomPassword} onChange={handleSetRandomPassword} />
</Box>
</Field.Row>
</Field>, [t, setRandomPassword, handleSetRandomPassword])}
{useMemo(() => <Field>
<Field.Label>{t('Roles')}</Field.Label>
<Field.Row>
<MultiSelectFiltered options={availableRoles} value={roles} onChange={handleRoles} placeholder={t('Select_role')} flexShrink={1}/>
</Field.Row>
</Field>, [availableRoles, handleRoles, roles, t])}
{useMemo(() => handleJoinDefaultChannels && <Field>
<Field.Row>
<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
<Box>{t('Join_default_channels')}</Box><ToggleSwitch checked={joinDefaultChannels} onChange={handleJoinDefaultChannels} />
</Box>
</Field.Row>
</Field>, [handleJoinDefaultChannels, t, joinDefaultChannels])}
{useMemo(() => handleSendWelcomeEmail && <Field>
<Field.Row>
<Box flexGrow={1} display='flex' flexDirection='row' alignItems='center' justifyContent='space-between'>
<Box>{t('Send_welcome_email')}</Box><ToggleSwitch checked={sendWelcomeEmail} onChange={handleSendWelcomeEmail} />
</Box>
</Field.Row>
</Field>, [handleSendWelcomeEmail, t, sendWelcomeEmail])}
{hasCustomFields && <>
<Divider />
<Box fontScale='s2'>{t('Custom_Fields')}</Box>
</>}
<CustomFieldsForm onLoadFields={onLoadCustomFields} customFieldsData={customFields} setCustomFieldsData={handleCustomFields}/>
{ append }
</FieldGroup>
</VerticalBar.ScrollableContent>;
}

40
client/channel/ExportMessages/index.js
Unescape View File

@ -1,5 +1,5 @@
import React, { useState, useEffect, useMemo } from 'react';
import { Field, TextInput, Select, ButtonGroup, Button, Box, Icon, Callout } from '@rocket.chat/fuselage';
import { Field, TextInput, Select, ButtonGroup, Button, Box, Icon, Callout, FieldGroup } from '@rocket.chat/fuselage';
import { css } from '@rocket.chat/css-in-js';
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
import toastr from 'toastr';
@ -61,7 +61,7 @@ const FileExport = ({ onCancel, rid }) => {
};
return (
<>
<FieldGroup>
<Field>
<Field.Label>{t('Date')}</Field.Label>
<Field.Row>
@ -83,7 +83,7 @@ const FileExport = ({ onCancel, rid }) => {
{t('Export')}
</Button>
</ButtonGroup>
</>
</FieldGroup>
);
};
@ -185,12 +185,14 @@ const MailExportForm = ({ onCancel, rid }) => {
};
return (
<>
<Callout onClick={reset} title={t('Messages selected')} type={selectedMessages.length > 0 ? 'success' : 'info'}>
<p>{`${ selectedMessages.length } Messages selected`}</p>
{ selectedMessages.length > 0 && <Box is='p' className={clickable} >{t('Click here to clear the selection')}</Box> }
{ selectedMessages.length === 0 && <Box is='p'>{t('Click_the_messages_you_would_like_to_send_by_email')}</Box> }
</Callout>
<FieldGroup>
<Field>
<Callout onClick={reset} title={t('Messages selected')} type={selectedMessages.length > 0 ? 'success' : 'info'}>
<p>{`${ selectedMessages.length } Messages selected`}</p>
{ selectedMessages.length > 0 && <Box is='p' className={clickable} >{t('Click here to clear the selection')}</Box> }
{ selectedMessages.length === 0 && <Box is='p'>{t('Click_the_messages_you_would_like_to_send_by_email')}</Box> }
</Callout>
</Field>
<Field>
<Field.Label>{t('To_users')}</Field.Label>
<Field.Row>
@ -220,7 +222,7 @@ const MailExportForm = ({ onCancel, rid }) => {
{t('Send')}
</Button>
</ButtonGroup>
</>
</FieldGroup>
);
};
@ -240,16 +242,18 @@ export const ExportMessages = function ExportMessages({ rid, tabBar }) {
{t('Export_Messages')}
<VerticalBar.Close onClick={() => tabBar.close()} />
</VerticalBar.Header>
<VerticalBar.Content>
<Field>
<Field.Label>{t('Method')}</Field.Label>
<Field.Row>
<Select value={type} onChange={(value) => setType(value)} placeholder={t('Type')} options={exportOptions}/>
</Field.Row>
</Field>
<VerticalBar.ScrollableContent>
<FieldGroup>
<Field>
<Field.Label>{t('Method')}</Field.Label>
<Field.Row>
<Select value={type} onChange={(value) => setType(value)} placeholder={t('Type')} options={exportOptions}/>
</Field.Row>
</Field>
</FieldGroup>
{type && type === 'file' && <FileExport rid={rid} onCancel={() => tabBar.close()} />}
{type && type === 'email' && <MailExportForm rid={rid} onCancel={() => tabBar.close()} />}
</VerticalBar.Content>
</VerticalBar.ScrollableContent>
</VerticalBar>
);
};

2
client/components/basic/Buttons/ActionButton.js
Unescape View File

@ -1,4 +1,4 @@
import React from 'react';
import { Button, Icon } from '@rocket.chat/fuselage';
// TODO fuselage
export const ActionButton = ({ icon, ...props }) => <Button {...props} square ghost small><Icon name={icon} size='x20'/></Button>;
export const ActionButton = ({ icon, ...props }) => <Button {...props} square ghost small flexShrink={0}><Icon name={icon} size='x20'/></Button>;

2
client/components/basic/PlanTag.js
Unescape View File

@ -16,7 +16,7 @@ function PlanTag() {
})();
}, []);
return plans.map(({ plan, background }) => <Tag key={plan} backgroundColor={background} marginInline='x4' color='#fff' textTransform='capitalize'>{plan}</Tag>);
return plans.map(({ plan, background }) => <Tag key={plan} verticalAlign='middle' backgroundColor={background} marginInline='x4' color='#fff' textTransform='capitalize'>{plan}</Tag>);
}
export default PlanTag;

5
client/components/basic/Sidebar.js
Unescape View File

@ -1,9 +1,10 @@
import React, { useMemo } from 'react';
import { css } from '@rocket.chat/css-in-js';
import { Box, Scrollable, Button, Icon } from '@rocket.chat/fuselage';
import { Box, Scrollable, Icon } from '@rocket.chat/fuselage';
import { useTranslation } from '../../contexts/TranslationContext';
import { useRoutePath } from '../../contexts/RouterContext';
import { ActionButton } from './Buttons/ActionButton';
const Sidebar = ({ children, ...props }) => <Box display='flex' flexDirection='column' h='100vh' {...props}>
{children}
@ -18,7 +19,7 @@ const Content = ({ children, ...props }) => <Scrollable {...props}>
const Header = ({ title, onClose, children = undefined, ...props }) => <Box is='header' display='flex' flexDirection='column' pb='x16' {...props}>
{(title || onClose) && <Box display='flex' flexDirection='row' alignItems='center' pi='x24' justifyContent='space-between' flexGrow={1}>
{title && <Box color='neutral-800' fontSize='p1' fontWeight='p1' flexShrink={1} withTruncatedText>{title}</Box>}
{onClose && <Button square small ghost onClick={onClose}><Icon name='cross' size='x20'/></Button>}
{onClose && <ActionButton icon='cross' onClick={onClose}/>}
</Box>}
{children}
</Box>;

Write Preview
Loading…
Cancel
Save