verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Regression: right icons overlapping when users name is long (#4224) 

Co-authored-by: Diego Mello <diegolmello@gmail.com>
This commit is contained in:
Alex Junior 2022-05-27 14:27:43 -03:00 committed by GitHub
parent 3265a8395d
commit 1ce7d5cf6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 196 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/containers/message/Edited.tsx → app/containers/message/Components/RightIcons/Edited.tsx
View File

@ -1,10 +1,10 @@
import React, { memo } from 'react';
import { View } from 'react-native';
import { CustomIcon } from '../CustomIcon';
import { useTheme } from '../../theme';
import { themes } from '../../lib/constants';
import styles from './styles';
import { CustomIcon } from '../../../CustomIcon';
import { useTheme } from '../../../../theme';
import { themes } from '../../../../lib/constants';
import styles from '../../styles';
const Edited = memo(({ isEdited, testID }: { isEdited: boolean; testID?: string }) => {
const { theme } = useTheme();
@ -14,7 +14,7 @@ const Edited = memo(({ isEdited, testID }: { isEdited: boolean; testID?: string
}
return (
<View testID={testID} style={styles.leftIcons}>
<View testID={testID} style={styles.rightIcons}>
<CustomIcon name='edit' size={16} color={themes[theme].auxiliaryText} />
</View>
);

26
app/containers/message/Components/RightIcons/Encrypted.tsx Normal file
View File

@ -0,0 +1,26 @@
import React, { useContext } from 'react';
import Touchable from '../../Touchable';
import { CustomIcon } from '../../../CustomIcon';
import { BUTTON_HIT_SLOP } from '../../utils';
import MessageContext from '../../Context';
import styles from '../../styles';
import { useTheme } from '../../../../theme';
import { E2E_MESSAGE_TYPE, themes } from '../../../../lib/constants';
const Encrypted = React.memo(({ type }: { type: string }) => {
const { theme } = useTheme();
const { onEncryptedPress } = useContext(MessageContext);
if (type !== E2E_MESSAGE_TYPE) {
return null;
}
return (
<Touchable onPress={onEncryptedPress} style={styles.rightIcons} hitSlop={BUTTON_HIT_SLOP}>
<CustomIcon name='encrypted' size={16} color={themes[theme].auxiliaryText} />
</Touchable>
);
});
export default Encrypted;

16
app/containers/message/MessageError.tsx → app/containers/message/Components/RightIcons/MessageError.tsx
View File

@ -1,12 +1,12 @@
import React, { useContext } from 'react';
import Touchable from './Touchable';
import { CustomIcon } from '../CustomIcon';
import styles from './styles';
import { BUTTON_HIT_SLOP } from './utils';
import { themes } from '../../lib/constants';
import MessageContext from './Context';
import { useTheme } from '../../theme';
import Touchable from '../../Touchable';
import { CustomIcon } from '../../../CustomIcon';
import styles from '../../styles';
import { BUTTON_HIT_SLOP } from '../../utils';
import { themes } from '../../../../lib/constants';
import MessageContext from '../../Context';
import { useTheme } from '../../../../theme';
const MessageError = React.memo(
({ hasError }: { hasError: boolean }) => {
@ -18,7 +18,7 @@ const MessageError = React.memo(
}
return (
<Touchable onPress={onErrorPress} style={styles.leftIcons} hitSlop={BUTTON_HIT_SLOP}>
<Touchable onPress={onErrorPress} style={styles.rightIcons} hitSlop={BUTTON_HIT_SLOP}>
<CustomIcon name='warning' color={themes[theme].dangerColor} size={16} />
</Touchable>
);

10
app/containers/message/ReadReceipt.tsx → app/containers/message/Components/RightIcons/ReadReceipt.tsx
View File

@ -1,14 +1,14 @@
import React from 'react';
import { themes } from '../../lib/constants';
import { CustomIcon } from '../CustomIcon';
import styles from './styles';
import { useTheme } from '../../theme';
import { themes } from '../../../../lib/constants';
import { CustomIcon } from '../../../CustomIcon';
import styles from '../../styles';
import { useTheme } from '../../../../theme';
const ReadReceipt = React.memo(({ isReadReceiptEnabled, unread }: { isReadReceiptEnabled?: boolean; unread: boolean }) => {
const { theme } = useTheme();
if (isReadReceiptEnabled && !unread && unread !== null) {
return <CustomIcon name='check' color={themes[theme].tintColor} size={16} style={[styles.leftIcons, styles.readReceipt]} />;
return <CustomIcon name='check' color={themes[theme].tintColor} size={16} style={styles.rightIcons} />;
}
return null;
});

34
app/containers/message/Components/RightIcons/index.tsx Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import { StyleSheet, View } from 'react-native';
import Encrypted from './Encrypted';
import Edited from './Edited';
import MessageError from './MessageError';
import ReadReceipt from './ReadReceipt';
import { MessageType } from '../../../../definitions';
const styles = StyleSheet.create({
actionIcons: {
flexDirection: 'row'
}
});
interface IRightIcons {
type: MessageType;
msg?: string;
isEdited: boolean;
isReadReceiptEnabled: boolean;
unread: boolean;
hasError: boolean;
}
const RightIcons = ({ type, msg, isEdited, hasError, isReadReceiptEnabled, unread }: IRightIcons) => (
<View style={styles.actionIcons}>
<Encrypted type={type} />
<Edited testID={`${msg}-edited`} isEdited={isEdited} />
<MessageError hasError={hasError} />
<ReadReceipt isReadReceiptEnabled={isReadReceiptEnabled} unread={unread || false} />
</View>
);
export default RightIcons;

13
app/containers/message/Content.tsx
View File

@ -8,10 +8,9 @@ import Markdown, { MarkdownPreview } from '../markdown';
import User from './User';
import { SYSTEM_MESSAGE_TYPES_WITH_AUTHOR_NAME, getInfoMessage } from './utils';
import MessageContext from './Context';
import Encrypted from './Encrypted';
import { IMessageContent } from './interfaces';
import { useTheme } from '../../theme';
import { E2E_MESSAGE_TYPE, themes } from '../../lib/constants';
import { themes } from '../../lib/constants';
const Content = React.memo(
(props: IMessageContent) => {
@ -70,16 +69,6 @@ const Content = React.memo(
);
}
// If this is a encrypted message and is not a preview
if (props.type === E2E_MESSAGE_TYPE && !isPreview && !props.isHeader) {
content = (
<View style={styles.flex}>
<View style={styles.contentContainer}>{content}</View>
<Encrypted type={props.type} />
</View>
);
}
if (props.isIgnored) {
content = <Text style={[styles.textInfo, { color: themes[theme].auxiliaryText }]}>{I18n.t('Message_Ignored')}</Text>;
}

26
app/containers/message/Encrypted.tsx
View File

@ -1,26 +0,0 @@
import React, { useContext } from 'react';
import Touchable from './Touchable';
import { CustomIcon } from '../CustomIcon';
import { BUTTON_HIT_SLOP } from './utils';
import MessageContext from './Context';
import styles from './styles';
import { useTheme } from '../../theme';
import { E2E_MESSAGE_TYPE, themes } from '../../lib/constants';
const Encrypted = React.memo(({ type }: { type: string }) => {
const { theme } = useTheme();
const { onEncryptedPress } = useContext(MessageContext);
if (type !== E2E_MESSAGE_TYPE) {
return null;
}
return (
<Touchable onPress={onEncryptedPress} style={styles.leftIcons} hitSlop={BUTTON_HIT_SLOP}>
<CustomIcon name='encrypted' size={16} color={themes[theme].auxiliaryText} />
</Touchable>
);
});
export default Encrypted;

17
app/containers/message/Message.tsx
View File

@ -15,13 +15,11 @@ import Reactions from './Reactions';
import Broadcast from './Broadcast';
import Discussion from './Discussion';
import Content from './Content';
import ReadReceipt from './ReadReceipt';
import CallButton from './CallButton';
import { themes } from '../../lib/constants';
import { IMessage, IMessageInner, IMessageTouchable } from './interfaces';
import { useTheme } from '../../theme';
import Edited from './Edited';
import MessageError from './MessageError';
import RightIcons from './Components/RightIcons';
const MessageInner = React.memo((props: IMessageInner) => {
const { attachments } = props;
@ -105,12 +103,15 @@ const Message = React.memo((props: IMessage) => {
<MessageInner {...props} />
</View>
{!props.isHeader ? (
<>
<Edited testID={`${props.msg}-edited`} isEdited={props.isEdited} />
<MessageError hasError={props.hasError} />
</>
<RightIcons
type={props.type}
msg={props.msg}
isEdited={props.isEdited}
hasError={props.hasError}
isReadReceiptEnabled={props.isReadReceiptEnabled || false}
unread={props.unread || false}
/>
) : null}
<ReadReceipt isReadReceiptEnabled={props.isReadReceiptEnabled} unread={props.unread || false} />
</View>
</View>
);

25
app/containers/message/User.tsx
View File

@ -4,15 +4,13 @@ import moment from 'moment';
import { themes } from '../../lib/constants';
import { useTheme } from '../../theme';
import MessageError from './MessageError';
import sharedStyles from '../../views/Styles';
import messageStyles from './styles';
import MessageContext from './Context';
import { SYSTEM_MESSAGE_TYPES_WITH_AUTHOR_NAME } from './utils';
import { SubscriptionType } from '../../definitions';
import { MessageType, SubscriptionType } from '../../definitions';
import { IRoomInfoParam } from '../../views/SearchMessagesView';
import Edited from './Edited';
import Encrypted from './Encrypted';
import RightIcons from './Components/RightIcons';
const styles = StyleSheet.create({
container: {
@ -36,6 +34,7 @@ const styles = StyleSheet.create({
...sharedStyles.textMedium
},
titleContainer: {
flexShrink: 1,
flexDirection: 'row',
alignItems: 'center'
},
@ -58,8 +57,10 @@ interface IMessageUser {
ts?: Date;
timeFormat?: string;
navToRoomInfo?: (navParam: IRoomInfoParam) => void;
type: string;
type: MessageType;
isEdited: boolean;
isReadReceiptEnabled?: boolean;
unread?: boolean;
}
const User = React.memo(
@ -67,7 +68,7 @@ const User = React.memo(
const { user } = useContext(MessageContext);
const { theme } = useTheme();
if (isHeader || hasError) {
if (isHeader) {
const username = (useRealName && author?.name) || author?.username;
const aliasUsername = alias ? (
<Text style={[styles.alias, { color: themes[theme].auxiliaryText }]}> @{username}</Text>
@ -108,11 +109,13 @@ const User = React.memo(
</Text>
<Text style={[messageStyles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
</TouchableOpacity>
<View style={styles.actionIcons}>
<Encrypted type={type} />
<Edited isEdited={isEdited} />
<MessageError hasError={hasError} {...props} />
</View>
<RightIcons
type={type}
isEdited={isEdited}
hasError={hasError}
isReadReceiptEnabled={props.isReadReceiptEnabled || false}
unread={props.unread || false}
/>
</View>
);
}

2
app/containers/message/interfaces.ts
View File

@ -58,7 +58,7 @@ export interface IMessageContent {
navToRoomInfo: (navParam: IRoomInfoParam) => void;
useRealName?: boolean;
isIgnored: boolean;
type: string;
type: MessageType;
comment?: string;
hasError: boolean;
isHeader: boolean;

8
app/containers/message/styles.ts
View File

@ -163,12 +163,8 @@ export default StyleSheet.create({
threadBell: {
marginLeft: 8
},
leftIcons: {
paddingLeft: 5,
paddingVertical: 5
},
readReceipt: {
lineHeight: 20
rightIcons: {
paddingLeft: 5
},
threadDetails: {
flex: 1,

6
app/views/RoomView/LoadMore/__snapshots__/LoadMore.stories.storyshot
View File

File diff suppressed because one or more lines are too long

2
ios/Podfile.lock
View File

@ -960,7 +960,7 @@ SPEC CHECKSUMS:
EXVideoThumbnails: 442c3abadb51a81551a3b53705b7560de390e6f7
EXWebBrowser: 76783ba5dcb8699237746ecf41a9643d428a4cc5
FBLazyVector: c9b6dfcde9b3d497793c40d4ccbfbfb05092e0df
FBReactNativeSpec: c39f7fc0cd6cc64f0a2a5beffc64b1aa5d42740e
FBReactNativeSpec: addc4f0e6ab00dc628fe91de8bfca4601762673a
Firebase: 919186c8e119dd9372a45fd1dd17a8a942bc1892
FirebaseAnalytics: 5fa308e1b13f838d0f6dc74719ac2a72e8c5afc4
FirebaseCore: 8cd4f8ea22075e0ee582849b1cf79d8816506085

50
storybook/stories/Message.js
View File

@ -5,7 +5,7 @@ import { Provider } from 'react-redux';
import { storiesOf } from '@storybook/react-native';
import MessageComponent from '../../app/containers/message/Message';
import { messagesStatus, themes } from '../../app/lib/constants';
import { E2E_MESSAGE_TYPE, messagesStatus, themes } from '../../app/lib/constants';
import MessageSeparator from '../../app/views/RoomView/Separator';
import MessageContext from '../../app/containers/message/Context';
import { store } from './index';
@ -23,6 +23,12 @@ const author = {
_id: 'userid',
username: 'diego.mello'
};
const longNameAuthor = {
_id: 'userid',
username: 'Long name user looooong name user'
};
const baseUrl = 'https://open.rocket.chat';
const date = new Date(2017, 10, 10, 10);
const longText =
@ -863,3 +869,45 @@ stories.add('Thumbnail from server', () => (
]}
/>
));
stories.add('Long Name user', () => (
<>
<Message msg={'this is a normal message'} author={longNameAuthor} />
<Message msg={'Edited message'} author={longNameAuthor} isEdited />
<Message msg={'Encrypted message'} author={longNameAuthor} type={E2E_MESSAGE_TYPE} />
<Message msg={'Error message'} author={longNameAuthor} hasError />
<Message msg={'Message with read receipt'} author={longNameAuthor} isReadReceiptEnabled read />
<Message msg={'Message with read receipt'} author={longNameAuthor} isReadReceiptEnabled read type={E2E_MESSAGE_TYPE} />
<Message
msg={'Show all icons '}
author={longNameAuthor}
isEdited
type={E2E_MESSAGE_TYPE}
hasError
isReadReceiptEnabled
read
/>
<Message
msg={longText}
author={longNameAuthor}
isHeader={false}
isEdited
type={E2E_MESSAGE_TYPE}
hasError
isReadReceiptEnabled
read
/>
<Message
msg='small message'
author={longNameAuthor}
isHeader={false}
isEdited
type={E2E_MESSAGE_TYPE}
hasError
isReadReceiptEnabled
read
/>
</>
));

74
storybook/stories/__snapshots__/Message.storyshot
View File

File diff suppressed because one or more lines are too long