From b0580bf54754271eaad622a1185a7aa18289e984 Mon Sep 17 00:00:00 2001 From: Gerzon Z Date: Mon, 21 Mar 2022 16:44:06 -0400 Subject: [PATCH] [NEW] Redesign quoted messages (#3883) --- app/constants/colors.ts | 3 + app/containers/markdown/Table.tsx | 4 +- app/containers/markdown/TableCell.tsx | 4 +- app/containers/markdown/TableRow.tsx | 4 +- app/containers/markdown/index.tsx | 1 + app/containers/markdown/styles.ts | 2 +- app/containers/message/Attachments.tsx | 66 +++++++++++------ app/containers/message/Audio.tsx | 42 +++++++---- app/containers/message/Image.tsx | 35 +++++++--- app/containers/message/Message.tsx | 20 +++++- app/containers/message/Reply.tsx | 60 +++++++++------- app/containers/message/User.tsx | 2 +- app/containers/message/Video.tsx | 24 ++++--- app/containers/message/interfaces.ts | 15 ++-- app/containers/message/styles.ts | 5 +- app/definitions/IAttachment.ts | 4 +- app/lib/utils.ts | 4 +- .../__snapshots__/LoadMore.stories.storyshot | 6 +- storybook/stories/Message.js | 18 +++++ .../stories/__snapshots__/Message.storyshot | 70 +++++++++---------- 20 files changed, 246 insertions(+), 143 deletions(-) diff --git a/app/constants/colors.ts b/app/constants/colors.ts index 397f2eb19..3920441a2 100644 --- a/app/constants/colors.ts +++ b/app/constants/colors.ts @@ -37,6 +37,7 @@ export const themes: any = { infoText: '#6d6d72', tintColor: '#1d74f5', tintActive: '#549df9', + tintDisabled: '#88B4F5', auxiliaryTintColor: '#6C727A', actionTintColor: '#1d74f5', separatorColor: '#cbcbcc', @@ -87,6 +88,7 @@ export const themes: any = { infoText: '#6D6D72', tintColor: '#1d74f5', tintActive: '#549df9', + tintDisabled: '#88B4F5', auxiliaryTintColor: '#f9f9f9', actionTintColor: '#1d74f5', separatorColor: '#2b2b2d', @@ -137,6 +139,7 @@ export const themes: any = { infoText: '#6d6d72', tintColor: '#1e9bfe', tintActive: '#76b7fc', + tintDisabled: '#88B4F5', // TODO: Evaluate this with design team auxiliaryTintColor: '#f9f9f9', actionTintColor: '#1e9bfe', separatorColor: '#272728', diff --git a/app/containers/markdown/Table.tsx b/app/containers/markdown/Table.tsx index f7c742b6e..4a0a972bf 100644 --- a/app/containers/markdown/Table.tsx +++ b/app/containers/markdown/Table.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { ScrollView, Text, TouchableOpacity, View } from 'react-native'; +import { ScrollView, Text, TouchableOpacity, View, ViewStyle } from 'react-native'; import { CELL_WIDTH } from './TableCell'; import styles from './styles'; @@ -19,7 +19,7 @@ const Table = React.memo(({ children, numColumns, theme }: ITable) => { const getTableWidth = () => numColumns * CELL_WIDTH; const renderRows = (drawExtraBorders = true) => { - const tableStyle = [styles.table, { borderColor: themes[theme].borderColor }]; + const tableStyle: ViewStyle[] = [styles.table, { borderColor: themes[theme].borderColor }]; if (drawExtraBorders) { tableStyle.push(styles.tableExtraBorders); } diff --git a/app/containers/markdown/TableCell.tsx b/app/containers/markdown/TableCell.tsx index 09e5c4fc3..a00b0e092 100644 --- a/app/containers/markdown/TableCell.tsx +++ b/app/containers/markdown/TableCell.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Text, View } from 'react-native'; +import { Text, View, ViewStyle } from 'react-native'; import { themes } from '../../constants/colors'; import styles from './styles'; @@ -14,7 +14,7 @@ interface ITableCell { export const CELL_WIDTH = 100; const TableCell = React.memo(({ isLastCell, align, children, theme }: ITableCell) => { - const cellStyle = [styles.cell, { borderColor: themes[theme].borderColor }]; + const cellStyle: ViewStyle[] = [styles.cell, { borderColor: themes[theme].borderColor }]; if (!isLastCell) { cellStyle.push(styles.cellRightBorder); } diff --git a/app/containers/markdown/TableRow.tsx b/app/containers/markdown/TableRow.tsx index 730c0b71e..c1fc9e906 100644 --- a/app/containers/markdown/TableRow.tsx +++ b/app/containers/markdown/TableRow.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { View } from 'react-native'; +import { View, ViewStyle } from 'react-native'; import { themes } from '../../constants/colors'; import styles from './styles'; @@ -11,7 +11,7 @@ interface ITableRow { } const TableRow = React.memo(({ isLastRow, children: _children, theme }: ITableRow) => { - const rowStyle = [styles.row, { borderColor: themes[theme].borderColor }]; + const rowStyle: ViewStyle[] = [styles.row, { borderColor: themes[theme].borderColor }]; if (!isLastRow) { rowStyle.push(styles.rowBottomBorder); } diff --git a/app/containers/markdown/index.tsx b/app/containers/markdown/index.tsx index 73e74e8f3..e4c942d1e 100644 --- a/app/containers/markdown/index.tsx +++ b/app/containers/markdown/index.tsx @@ -280,6 +280,7 @@ class Markdown extends PureComponent { renderHeading = ({ children, level }: any) => { const { numberOfLines, theme } = this.props; + // @ts-ignore const textStyle = styles[`heading${level}Text`]; return ( diff --git a/app/containers/markdown/styles.ts b/app/containers/markdown/styles.ts index 0e594d3a4..fa8abd9da 100644 --- a/app/containers/markdown/styles.ts +++ b/app/containers/markdown/styles.ts @@ -7,7 +7,7 @@ const codeFontFamily = Platform.select({ android: { fontFamily: 'monospace' } }); -export default StyleSheet.create({ +export default StyleSheet.create({ container: { alignItems: 'flex-start', flexDirection: 'row' diff --git a/app/containers/message/Attachments.tsx b/app/containers/message/Attachments.tsx index c2bbcd56e..673f91ae1 100644 --- a/app/containers/message/Attachments.tsx +++ b/app/containers/message/Attachments.tsx @@ -10,10 +10,16 @@ import Reply from './Reply'; import Button from '../Button'; import styles from './styles'; import MessageContext from './Context'; +import { useTheme } from '../../theme'; +import { IAttachment } from '../../definitions'; import CollapsibleQuote from './Components/CollapsibleQuote'; -const AttachedActions = ({ attachment, theme }: IMessageAttachedActions) => { +const AttachedActions = ({ attachment }: IMessageAttachedActions) => { + if (!attachment.actions) { + return null; + } const { onAnswerButtonPress } = useContext(MessageContext); + const { theme } = useTheme(); const attachedButtons = attachment.actions.map((element: { type: string; msg: string; text: string }) => { if (element.type === 'button') { @@ -30,46 +36,62 @@ const AttachedActions = ({ attachment, theme }: IMessageAttachedActions) => { }; const Attachments = React.memo( - ({ attachments, timeFormat, showAttachment, getCustomEmoji, theme }: IMessageAttachments) => { + // @ts-ignore + ({ attachments, timeFormat, showAttachment, style, getCustomEmoji, isReply }: IMessageAttachments) => { if (!attachments || attachments.length === 0) { return null; } - return attachments.map((file: any, index: number) => { - if (file.image_url) { + const { theme } = useTheme(); + + return attachments.map((file: IAttachment, index: number) => { + if (file && file.image_url) { return ( - + ); } - if (file.audio_url) { - return