Skip to content

Regression: Scroll on admin user info #17711

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 2 commits into from
May 25, 2020
Merged

Regression: Scroll on admin user info #17711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c5b0ff1
Fiz scroll on admin user info
ggazzo May 21, 2020
0a005ca
Fix edit room
ggazzo May 21, 2020
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
48 changes: 19 additions & 29 deletions client/admin/rooms/EditRoom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useCallback, useState, useMemo } from 'react';
import { Box, Button, Margins, TextInput, Skeleton, Field, ToggleSwitch, Divider, Icon, Callout } from '@rocket.chat/fuselage';
import { Box, Button, Margins, TextInput, Skeleton, Field, ToggleSwitch, Divider, Icon, Callout, RadioButton } from '@rocket.chat/fuselage';

import { useTranslation } from '../../contexts/TranslationContext';
import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental';
Expand Down Expand Up @@ -103,41 +103,31 @@ function EditRoom({ room, onChange }) {
<TextInput disabled={deleted} value={(newData.roomTopic ?? room.topic) || ''} onChange={handleChange('roomTopic', room.topic)} flexGrow={1}/>
</Field.Row>
</Field>
<Field mbs='x20'>
<Divider />
<Field>
<Field.Row>
<Box display='flex' flexDirection='row' alignItems='flex-start'>
<Box display='flex' flexDirection='column' alignItems='flex-end' flexGrow='1' color={roomType !== 'c' ? 'hint' : 'default'}>
<Box fontScale='s1'>{t('Public')}</Box>
<Box fontScale='p1' style={{ textAlign: 'end' }}>{t('All_users_in_the_channel_can_write_new_messages')}</Box>
</Box>
<Margins inline='x16'>
<ToggleSwitch disabled={deleted} checked={roomType === 'p'} onChange={handleChange('roomType', room.t, updateType(roomType))}/>
</Margins>
<Box display='flex' flexDirection='column' alignItems='flex-start' flexGrow='1' color={roomType !== 'p' ? 'hint' : 'default'}>
<Box fontScale='s1'>{t('Private')}</Box>
<Box fontScale='p1' style={{ textAlign: 'start' }}>{t('Just_invited_people_can_access_this_channel')}</Box>
</Box>
<Box display='flex' flexDirection='row' justifyContent='space-between' flexGrow={1}>
<Field.Label>{t('Public')}</Field.Label>
<RadioButton disabled={deleted} checked={roomType === 'p'} onChange={handleChange('roomType', room.t, updateType(roomType))}/>
</Box>
</Field.Row>
<Divider />
</Field>
<Field mbs='x20'>
<Field>
<Field.Row>
<Box display='flex' flexDirection='row' alignItems='flex-start'>
<Box display='flex' flexDirection='column' alignItems='flex-end' flexGrow='1' color={readOnly ? 'hint' : 'default'}>
<Box fontScale='s1'>{t('Collaborative')}</Box>
<Box fontScale='p1' style={{ textAlign: 'end' }}>{t('All_users_in_the_channel_can_write_new_messages')}</Box>
</Box>
<Margins inline='x16'>
<ToggleSwitch disabled={deleted} checked={readOnly} onChange={handleChange('readOnly', room.ro, () => !readOnly)}/>
</Margins>
<Box display='flex' flexDirection='column' alignItems='flex-start' flexGrow='1' color={!readOnly ? 'hint' : 'default'}>
<Box fontScale='s1'>{t('Read_only')}</Box>
<Box fontScale='p1' style={{ textAlign: 'start' }}>{t('Only_authorized_users_can_write_new_messages')}</Box>
</Box>
<Box display='flex' flexDirection='row' justifyContent='space-between' flexGrow={1}>
<Field.Label>{t('Private')}</Field.Label>
<RadioButton disabled={deleted} checked={roomType !== 'p'} onChange={handleChange('roomType', room.t, updateType(roomType))}/>
</Box>
</Field.Row>
</Field>
<Divider />
<Field>
<Field.Row>
<Box display='flex' flexDirection='row' justifyContent='space-between' flexGrow={1}>
<Field.Label>{t('Read_only')}</Field.Label>
<ToggleSwitch disabled={deleted} checked={readOnly} onChange={handleChange('readOnly', room.ro, () => !readOnly)}/>
</Box>
</Field.Row>
<Divider />
</Field>
<Field>
<Field.Row>
Expand Down
6 changes: 3 additions & 3 deletions client/admin/users/UserInfo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export function UserInfo({ data, onChange, ...props }) {
const avatarUrl = roomTypes.getConfig('d').getAvatarPath({ name: data.username || data.name, type: 'd', _id: data._id });

return <VerticalBar.ScrollableContent is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} {...props}>
<Box display='flex' flexDirection='column' alignItems='center' withTruncatedText>
<Box display='flex' flexDirection='column' alignItems='center' flexShrink={0} withTruncatedText>
<Margins block='x2' inline='auto'>
<Avatar size={'x120'} title={data.username} url={avatarUrl}/>
<Box fontScale='h1' withTruncatedText>{data.name || data.username}</Box>
Expand All @@ -69,9 +69,9 @@ export function UserInfo({ data, onChange, ...props }) {
</Box>

<UserInfoActions isActive={data.active} isAdmin={data.roles.includes('admin')} _id={data._id} username={data.username} onChange={onChange}/>
<Box display='flex' flexDirection='column' w='full' backgroundColor='neutral-200' p='x16' withTruncatedText>
<Box display='flex' flexDirection='column' w='full' backgroundColor='neutral-200' p='x16' withTruncatedTex flexShrink={0}t>
<Margins blockEnd='x4'>
{data.bio && data.bio.trim().length > 0 && <MarkdownText fontScale='s1'>{data.bio}</MarkdownText>}
{data.bio && data.bio.trim().length > 0 && <Box withTruncatedText> <MarkdownText fontScale='s1'>{data.bio}</MarkdownText></Box>}
{!!data.roles.length && <>
<Box fontScale='micro' color='hint' mbs='none'>{t('Roles')}</Box>
<Box display='flex' flexDirection='row' flexWrap='wrap'>
Expand Down
2 changes: 1 addition & 1 deletion client/components/basic/VerticalBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ function VerticalBarContent(props) {
return <Page.Content {...props} />;
}

function VerticalBarScrollableContent({ children, props }) {
function VerticalBarScrollableContent({ children, ...props }) {
return <Page.ScrollableContent padding='x24' mi='neg-x24' {...props}>
<Margins blockEnd='x16'>{children}</Margins>
</Page.ScrollableContent>;
Expand Down