Skip to content

[FIX] Fields overflowing page #20287

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ggazzo merged 1 commit into from
Jan 21, 2021
Merged

[FIX] Fields overflowing page #20287

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 18 additions & 16 deletions client/views/admin/permissions/UsersInRole.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useRef } from 'react';
import { Box, Field, Margins, ButtonGroup, Button, Callout } from '@rocket.chat/fuselage';
import { Box, Field, Margins, ButtonGroup, Button, Callout, Flex } from '@rocket.chat/fuselage';
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';

import Page from '../../../components/Page';
Expand Down Expand Up @@ -67,21 +67,23 @@ const UsersInRolePage = ({ data }) => {
<Page.Content>
<Box display='flex' flexDirection='row' w='full' mi='neg-x4'>
<Margins inline='x4'>
{data.scope !== 'Users' && <Field>
<Field.Label>{t('Choose_a_room')}</Field.Label>
<Field.Row>
<RoomAutoComplete value={rid} onChange={setRid} placeholder={t('User')}/>
</Field.Row>
</Field>}
<Field>
<Field.Label>{t('Add_user')}</Field.Label>
<Field.Row>
<UserAutoComplete value={user} onChange={setUser} placeholder={t('User')}/>
</Field.Row>
</Field>
<Box display='flex' flexGrow={1} flexDirection='column' justifyContent='flex-end'>
<Button primary onClick={handleAdd}>{t('Add')}</Button>
</Box>
<Flex.Item shrink={1}>
{data.scope !== 'Users' && <Field>
<Field.Label>{t('Choose_a_room')}</Field.Label>
<Field.Row>
<RoomAutoComplete value={rid} onChange={setRid} placeholder={t('User')}/>
</Field.Row>
</Field>}
<Field>
<Field.Label>{t('Add_user')}</Field.Label>
<Field.Row>
<UserAutoComplete value={user} onChange={setUser} placeholder={t('User')}/>
</Field.Row>
</Field>
<Box display='flex' flexGrow={1} flexDirection='column' justifyContent='flex-end'>
<Button primary onClick={handleAdd}>{t('Add')}</Button>
</Box>
</Flex.Item>
</Margins>
</Box>
<Margins blockStart='x8'>
Expand Down
3 changes: 2 additions & 1 deletion client/views/admin/permissions/UsersInRoleTable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useState, useMemo } from 'react';
import { Box, Table, Button, Icon } from '@rocket.chat/fuselage';
import { useMutableCallback, useDebouncedValue } from '@rocket.chat/fuselage-hooks';

import { getUserEmailAddress } from '../../../lib/getUserEmailAddress';
import UserAvatar from '../../../components/avatar/UserAvatar';
import DeleteWarningModal from '../../../components/DeleteWarningModal';
import { useMethod } from '../../../contexts/ServerContext';
Expand All @@ -13,7 +14,7 @@ import { useEndpointData } from '../../../hooks/useEndpointData';


const UserRow = React.memo(({ _id, username, name, avatarETag, emails, onRemove }) => {
const email = emails?.find(({ address }) => !!address).address;
const email = getUserEmailAddress({ emails });

const handleRemove = useMutableCallback(() => {
onRemove(username);
Expand Down
126 changes: 65 additions & 61 deletions ee/client/audit/AuditPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useRef, useState } from 'react';
import { Box, Field, TextInput, ButtonGroup, Button, Margins, Tabs } from '@rocket.chat/fuselage';
import { Box, Field, TextInput, ButtonGroup, Button, Margins, Tabs, Flex } from '@rocket.chat/fuselage';
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';

import Page from '../../../client/components/Page';
Expand Down Expand Up @@ -127,75 +127,79 @@ const AuditPage = () => {
</Tabs>
<Page.ScrollableContentWithShadow mb='neg-x4'>
<Margins block='x4'>
<Box display='flex' flexDirection='row' mi='neg-x4'>
<Box display='flex' flexDirection='row' mi='neg-x4' justifyContent='stretch'>
<Margins inline='x4'>
<Field>
<Field.Label>{t('Message')}</Field.Label>
<Field.Row>
<TextInput value={msg} onChange={handleMsg} placeholder={t('Search')}/>
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Date')}</Field.Label>
<Field.Row>
<DateRangePicker onChange={handleDateRange} display='flex' flexGrow={1}/>
</Field.Row>
</Field>
</Margins>
</Box>
<Box display='flex' flexDirection='row' alignItems='flex-end'>
{type === '' && <Field>
<Field.Label>{t('Channel_name')}</Field.Label>
<Field.Row>
<RoomAutoComplete error={errors.rid} value={rid} onChange={handleRid} placeholder={t('Channel_Name_Placeholder')}/>
</Field.Row>
{errors.rid && <Field.Error>
{errors.rid}
</Field.Error>}
</Field>}
{type === 'u' && <Field>
<Field.Label>{t('Users')}</Field.Label>
<Field.Row>
<UserAutoCompleteMultiple error={errors.users} value={users} onChange={onChangeUsers} placeholder={t('Username_Placeholder')}/>
</Field.Row>
{errors.users && <Field.Error>
{errors.users}
</Field.Error>}
</Field>}
{type === 'd' && <Field>
<Field.Label>{t('Users')}</Field.Label>
<Field.Row>
<UserAutoCompleteMultiple error={errors.users} value={users} onChange={onChangeUsers} placeholder={t('Username_Placeholder')}/>
</Field.Row>
{errors.users && <Field.Error>
{errors.users}
</Field.Error>}
</Field>}
{type === 'l' && <Box display='flex' flexDirection='row' w='full' mi='neg-x4'>
<Margins inline='x4'>
<Flex.Item shrink={1}>
<Field>
<Field.Label flexGrow={0}>{t('Visitor')}</Field.Label>
<Field.Label>{t('Message')}</Field.Label>
<Field.Row>
<VisitorAutoComplete error={errors.visitor} value={visitor} onChange={handleVisitor} placeholder={t('Username_Placeholder')}/>
<TextInput value={msg} onChange={handleMsg} placeholder={t('Search')}/>
</Field.Row>
{errors.visitor && <Field.Error>
{errors.visitor}
</Field.Error>}
</Field>
<Field>
<Field.Label flexGrow={0}>{t('Agent')}</Field.Label>
<Field.Label>{t('Date')}</Field.Label>
<Field.Row>
<AutoCompleteAgent error={errors.agent} value={agent} onChange={handleAgent} placeholder={t('Username_Placeholder')}/>
<DateRangePicker onChange={handleDateRange} display='flex' flexGrow={1}/>
</Field.Row>
{errors.agent && <Field.Error>
{errors.agent}
</Field.Error>}
</Field>
</Margins>
</Box>}
<ButtonGroup mis='x8' align='end'>
<Button primary onClick={apply}>{t('Apply')}</Button>
</ButtonGroup>
</Flex.Item>
</Margins>
</Box>
<Box display='flex' flexDirection='row' alignItems='flex-end'>
<Flex.Item shrink={1}>
{type === '' && <Field>
<Field.Label>{t('Channel_name')}</Field.Label>
<Field.Row>
<RoomAutoComplete error={errors.rid} value={rid} onChange={handleRid} placeholder={t('Channel_Name_Placeholder')}/>
</Field.Row>
{errors.rid && <Field.Error>
{errors.rid}
</Field.Error>}
</Field>}
{type === 'u' && <Field>
<Field.Label>{t('Users')}</Field.Label>
<Field.Row>
<UserAutoCompleteMultiple error={errors.users} value={users} onChange={onChangeUsers} placeholder={t('Username_Placeholder')}/>
</Field.Row>
{errors.users && <Field.Error>
{errors.users}
</Field.Error>}
</Field>}
{type === 'd' && <Field>
<Field.Label>{t('Users')}</Field.Label>
<Field.Row>
<UserAutoCompleteMultiple error={errors.users} value={users} onChange={onChangeUsers} placeholder={t('Username_Placeholder')}/>
</Field.Row>
{errors.users && <Field.Error>
{errors.users}
</Field.Error>}
</Field>}
{type === 'l' && <>
<Margins inline='x4'>
<Field>
<Field.Label flexGrow={0}>{t('Visitor')}</Field.Label>
<Field.Row>
<VisitorAutoComplete error={errors.visitor} value={visitor} onChange={handleVisitor} placeholder={t('Username_Placeholder')}/>
</Field.Row>
{errors.visitor && <Field.Error>
{errors.visitor}
</Field.Error>}
</Field>
<Field>
<Field.Label flexGrow={0}>{t('Agent')}</Field.Label>
<Field.Row>
<AutoCompleteAgent error={errors.agent} value={agent} onChange={handleAgent} placeholder={t('Username_Placeholder')}/>
</Field.Row>
{errors.agent && <Field.Error>
{errors.agent}
</Field.Error>}
</Field>
</Margins>
</>}
<ButtonGroup mis='x8' align='end'>
<Button primary onClick={apply}>{t('Apply')}</Button>
</ButtonGroup>
</Flex.Item>
</Box>
<Result setDataRef={setData} />
</Margins>
Expand Down