From 72de155d1110d63470870115884ec7d6ddddbcde Mon Sep 17 00:00:00 2001 From: Saul Carlin Date: Fri, 9 Aug 2024 17:17:19 -0700 Subject: [PATCH 1/4] fix: reaction styles --- components/Chat/Message/MessageReactions.tsx | 78 +++++++++++--------- 1 file changed, 42 insertions(+), 36 deletions(-) diff --git a/components/Chat/Message/MessageReactions.tsx b/components/Chat/Message/MessageReactions.tsx index a32ebfd07..606618f49 100644 --- a/components/Chat/Message/MessageReactions.tsx +++ b/components/Chat/Message/MessageReactions.tsx @@ -32,6 +32,7 @@ import { import { showActionSheetWithOptions } from "../../StateHandlers/ActionSheetStateHandler"; const MAX_REACTORS_TO_SHOW = 3; +const REACTOR_OFFSET = 10; type Props = { message: MessageToDisplay; @@ -160,9 +161,6 @@ export default function ChatMessageReactions({ message, reactions }: Props) { {reactionCounts.map((reaction) => { const reactorCount = reaction.reactors.length; - const containerWidth = - reactorCount > MAX_REACTORS_TO_SHOW ? 20 : reactorCount * 15 + 5; - return ( {reaction.content} - - {reaction.reactors && - reaction.reactors.length <= MAX_REACTORS_TO_SHOW ? ( - reaction.reactors.slice(0, 3).map((reactor, index) => ( - - )) - ) : ( + {reactorCount <= MAX_REACTORS_TO_SHOW ? ( + + {reaction.reactors + .slice(0, MAX_REACTORS_TO_SHOW) + .map((reactor, index) => ( + + ))} + + ) : ( + - +{reaction.reactors.length} + {reactorCount} - )} - + + )} ); })} @@ -233,32 +242,29 @@ const useStyles = () => { }, myReactionButton: { backgroundColor: primaryColor(colorScheme), - borderWidth: 0.5, - borderColor: inversePrimaryColor(colorScheme), }, otherReactionButton: { backgroundColor: backgroundColor(colorScheme), }, emoji: { - fontSize: 18, - marginRight: 2, + fontSize: 14, + marginHorizontal: 2, }, reactorContainer: { flexDirection: "row", alignItems: "center", - height: 20, - position: "relative", + height: 22, }, profileImage: { - width: 20, - height: 20, - borderRadius: 10, - position: "absolute", - borderWidth: 0.5, + width: 22, + height: 22, + borderRadius: 22, + borderWidth: 1, borderColor: inversePrimaryColor(colorScheme), }, reactorCount: { fontSize: 12, + marginHorizontal: 2, color: textPrimaryColor(colorScheme), }, }); From 945b7bcb1ce4febea83217c9dd432be816b5b7ba Mon Sep 17 00:00:00 2001 From: Saul Carlin Date: Sun, 11 Aug 2024 17:20:55 -0700 Subject: [PATCH 2/4] feat: reactions outside bubbles for non-text messages --- components/Chat/Message/Message.tsx | 69 ++++++++++---------- components/Chat/Message/MessageActions.tsx | 26 +------- components/Chat/Message/MessageReactions.tsx | 66 ++++++++++++------- 3 files changed, 82 insertions(+), 79 deletions(-) diff --git a/components/Chat/Message/Message.tsx b/components/Chat/Message/Message.tsx index b0fc5b062..a5d682e95 100644 --- a/components/Chat/Message/Message.tsx +++ b/components/Chat/Message/Message.tsx @@ -18,6 +18,7 @@ import { TouchableOpacity, View, useColorScheme, + DimensionValue, } from "react-native"; import { Swipeable } from "react-native-gesture-handler"; @@ -182,6 +183,24 @@ function ChatMessage({ message, colorScheme, isGroup, isFrame }: Props) { const reactions = getMessageReactions(message); const showInBubble = !isGroupUpdated; const showAvatar = isGroup && !message.fromMe; + const showReactionsOutside = isAttachment || isFrame || isTransaction; + + let messageMaxWidth: DimensionValue; + if (isDesktop) { + if (isAttachment) { + messageMaxWidth = 366; + } else { + messageMaxWidth = 588; + } + } else { + if (isAttachment) { + messageMaxWidth = "70%"; + } else { + if (isFrame) { + messageMaxWidth = "100%"; + } else messageMaxWidth = "85%"; + } + } const showStatus = message.fromMe && @@ -289,6 +308,7 @@ function ChatMessage({ message, colorScheme, isGroup, isFrame }: Props) { style={{ alignSelf: message.fromMe ? "flex-end" : "flex-start", alignItems: message.fromMe ? "flex-end" : "flex-start", + maxWidth: messageMaxWidth, }} > {messageContent} - - - ) : ( - {messageContent} - + {messageContent} + + )} + {Object.keys(reactions).length > 0 && + !showReactionsOutside && ( + - - )} + )} - + {isFrame && ( handleUrlPress(message.content)} - style={{ flex: 1 }} > {getUrlToRender(message.content)} )} + {showReactionsOutside && ( + + )} {message.fromMe && ( @@ -534,8 +537,8 @@ const useStyles = () => { paddingHorizontal: 0, }, messageContentContainer: { - paddingVertical: 8, - paddingHorizontal: 14, + paddingVertical: 6, + paddingHorizontal: 10, }, messageText: { color: textPrimaryColor(colorScheme), diff --git a/components/Chat/Message/MessageActions.tsx b/components/Chat/Message/MessageActions.tsx index 7432de28e..5228f6b93 100644 --- a/components/Chat/Message/MessageActions.tsx +++ b/components/Chat/Message/MessageActions.tsx @@ -10,7 +10,6 @@ import * as Haptics from "expo-haptics"; import React, { useCallback, useEffect, useMemo, useState } from "react"; import { ColorSchemeName, - DimensionValue, Platform, StyleSheet, useColorScheme, @@ -40,7 +39,6 @@ import { useFramesStore } from "../../../data/store/framesStore"; import { ReanimatedTouchableOpacity } from "../../../utils/animations"; import { isAttachmentMessage } from "../../../utils/attachment/helpers"; import { useConversationContext } from "../../../utils/conversation"; -import { isDesktop } from "../../../utils/device"; import { converseEventEmitter } from "../../../utils/events"; import { MessageReaction, @@ -78,23 +76,6 @@ export default function ChatMessageActions({ const isFrame = !!frames[message.content.toLowerCase()]; const styles = useStyles(); - let messageMaxWidth: DimensionValue; - if (isDesktop) { - if (isAttachment) { - messageMaxWidth = 366; - } else { - messageMaxWidth = 588; - } - } else { - if (isAttachment) { - messageMaxWidth = "70%"; - } else { - if (isFrame) { - messageMaxWidth = "100%"; - } else messageMaxWidth = "85%"; - } - } - const [emojiPickerShown, setEmojiPickerShown] = useState(false); const showReactionModal = useCallback(() => { @@ -391,7 +372,7 @@ export default function ChatMessageActions({ }, }), { - maxWidth: messageMaxWidth, + // maxWidth: messageMaxWidth, }, ]} onPress={() => { @@ -499,10 +480,9 @@ const useStyles = () => { messageBubble: { flexShrink: 1, flexGrow: 0, - minHeight: 36, - borderRadius: 18, + minHeight: 32, + borderRadius: 16, }, - messageBubbleMe: { marginLeft: "auto", }, diff --git a/components/Chat/Message/MessageReactions.tsx b/components/Chat/Message/MessageReactions.tsx index 606618f49..1c4dbb6f4 100644 --- a/components/Chat/Message/MessageReactions.tsx +++ b/components/Chat/Message/MessageReactions.tsx @@ -2,7 +2,7 @@ import { actionSheetColors, inversePrimaryColor, textPrimaryColor, - backgroundColor, + tertiaryBackgroundColor, primaryColor, } from "@styles/colors"; import { useCallback, useMemo } from "react"; @@ -20,7 +20,6 @@ import { useCurrentAccount, useProfilesStore, } from "../../../data/store/accountsStore"; -import { isAttachmentMessage } from "../../../utils/attachment/helpers"; import { useConversationContext } from "../../../utils/conversation"; import { getPreferredName, getPreferredAvatar } from "../../../utils/profile"; import { @@ -128,14 +127,12 @@ export default function ChatMessageReactions({ message, reactions }: Props) { }; }); methods["Back"] = () => {}; - const isAttachment = isAttachmentMessage(message.contentType); const options = Object.keys(methods); showActionSheetWithOptions( { options, - title: isAttachment ? "📎 Media" : message.content, cancelButtonIndex: options.indexOf("Back"), ...actionSheetColors(colorScheme), }, @@ -158,7 +155,12 @@ export default function ChatMessageReactions({ message, reactions }: Props) { if (reactionsList.length === 0) return null; return ( - + {reactionCounts.map((reaction) => { const reactorCount = reaction.reactors.length; return ( @@ -169,7 +171,9 @@ export default function ChatMessageReactions({ message, reactions }: Props) { style={[ styles.reactionButton, reaction.userReacted - ? styles.myReactionButton + ? message.fromMe + ? styles.myReactionToMyMessageButton + : styles.myReactionToOtherMessageButton : styles.otherReactionButton, ]} > @@ -196,8 +200,10 @@ export default function ChatMessageReactions({ message, reactions }: Props) { zIndex: MAX_REACTORS_TO_SHOW - (index + 1), }, reaction.userReacted - ? { borderColor: primaryColor(colorScheme) } - : {}, + ? message.fromMe + ? styles.myReactionToMyMessageProfileImage + : styles.myReactionToOtherMessageProfileImage + : styles.otherProfileImage, ]} /> ))} @@ -229,22 +235,43 @@ const useStyles = () => { reactionsWrapper: { flexDirection: "row", flexWrap: "wrap", - marginHorizontal: 10, + rowGap: 4, + columnGap: 5, }, reactionButton: { flexDirection: "row", alignItems: "center", - marginRight: 8, - marginBottom: 8, - paddingHorizontal: 8, - paddingVertical: 4, + paddingHorizontal: 4, + paddingVertical: 2, borderRadius: 16, + borderWidth: 0.25, }, - myReactionButton: { - backgroundColor: primaryColor(colorScheme), + profileImage: { + width: 22, + height: 22, + borderRadius: 22, + borderWidth: 1, }, otherReactionButton: { - backgroundColor: backgroundColor(colorScheme), + backgroundColor: tertiaryBackgroundColor(colorScheme), + borderColor: tertiaryBackgroundColor(colorScheme), + }, + otherProfileImage: { + borderColor: tertiaryBackgroundColor(colorScheme), + }, + myReactionToOtherMessageButton: { + backgroundColor: primaryColor(colorScheme), + borderColor: primaryColor(colorScheme), + }, + myReactionToOtherMessageProfileImage: { + borderColor: primaryColor(colorScheme), + }, + myReactionToMyMessageButton: { + backgroundColor: primaryColor(colorScheme), + borderColor: tertiaryBackgroundColor(colorScheme), + }, + myReactionToMyMessageProfileImage: { + borderColor: primaryColor(colorScheme), }, emoji: { fontSize: 14, @@ -255,13 +282,6 @@ const useStyles = () => { alignItems: "center", height: 22, }, - profileImage: { - width: 22, - height: 22, - borderRadius: 22, - borderWidth: 1, - borderColor: inversePrimaryColor(colorScheme), - }, reactorCount: { fontSize: 12, marginHorizontal: 2, From fdde598d64a655937474cc30a027073509926a78 Mon Sep 17 00:00:00 2001 From: Saul Carlin Date: Sun, 11 Aug 2024 22:12:10 -0700 Subject: [PATCH 3/4] fix: reactions to frames --- components/Chat/Message/Message.tsx | 64 ++++++++++++++--------- components/Chat/Message/MessageStatus.tsx | 13 +++-- 2 files changed, 46 insertions(+), 31 deletions(-) diff --git a/components/Chat/Message/Message.tsx b/components/Chat/Message/Message.tsx index a5d682e95..3a9d08147 100644 --- a/components/Chat/Message/Message.tsx +++ b/components/Chat/Message/Message.tsx @@ -220,8 +220,8 @@ function ChatMessage({ message, colorScheme, isGroup, isFrame }: Props) { const messageAttachment = useChatStore( (state) => state.messageAttachments[message.id] || null ); - const attachmentStillLoading = - isAttachment && (!messageAttachment || messageAttachment.loading); + + const hasReactions = Object.keys(reactions).length > 0; const swipeableRef = useRef(null); @@ -374,17 +374,18 @@ function ChatMessage({ message, colorScheme, isGroup, isFrame }: Props) { {messageContent} )} - {Object.keys(reactions).length > 0 && - !showReactionsOutside && ( - - - - )} + {hasReactions && !showReactionsOutside && ( + + + + )} - + {isFrame && ( handleUrlPress(message.content)} @@ -395,16 +396,16 @@ function ChatMessage({ message, colorScheme, isGroup, isFrame }: Props) { )} {showReactionsOutside && ( - - )} - {message.fromMe && ( - - + + )} + {message.fromMe && !hasReactions && ( + + )} @@ -510,15 +511,11 @@ const useStyles = () => { flexDirection: "row", flexWrap: "wrap", }, - statusContainer: { - marginLeft: "auto", - }, linkToFrame: { fontSize: 12, - marginVertical: 7, - marginLeft: 6, - marginRight: "auto", + padding: 6, color: textSecondaryColor(colorScheme), + flexGrow: 1, }, date: { flexBasis: "100%", @@ -574,5 +571,20 @@ const useStyles = () => { width: AvatarSizes.messageSender, height: AvatarSizes.messageSender, }, + outsideMetaContainer: { + marginTop: 4, + flexDirection: "row", + justifyContent: "flex-start", + columnGap: 8, + width: "100%", + }, + reactionsContainer: { + marginHorizontal: 8, + marginBottom: 8, + }, + outsideReactionsContainer: { + flexShrink: 1, + flexGrow: 1, + }, }); }; diff --git a/components/Chat/Message/MessageStatus.tsx b/components/Chat/Message/MessageStatus.tsx index d6a895780..aaab75d98 100644 --- a/components/Chat/Message/MessageStatus.tsx +++ b/components/Chat/Message/MessageStatus.tsx @@ -1,5 +1,5 @@ import { textSecondaryColor } from "@styles/colors"; -import React, { useEffect, useRef } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { StyleSheet, useColorScheme, View } from "react-native"; import Animated, { useSharedValue, @@ -32,12 +32,13 @@ export default function MessageStatus({ message }: Props) { message.status === "sent" || message.status === "delivered"; const isLatestSettledFromMe = message.isLatestSettledFromMe; + const [renderText, setRenderText] = useState(false); const opacity = useSharedValue(message.isLatestSettledFromMe ? 1 : 0); const height = useSharedValue(message.isLatestSettledFromMe ? 22 : 0); const scale = useSharedValue(message.isLatestSettledFromMe ? 1 : 0); const timingConfig = { - duration: 100, + duration: 200, easing: Easing.inOut(Easing.quad), }; @@ -61,17 +62,20 @@ export default function MessageStatus({ message }: Props) { opacity.value = withTiming(1, timingConfig); height.value = withTiming(22, timingConfig); scale.value = withTiming(1, timingConfig); + setRenderText(true); } else if (isSentOrDelivered && !isLatestSettledFromMe) { opacity.value = withTiming(0, timingConfig); height.value = withTiming(0, timingConfig); scale.value = withTiming(0, timingConfig); + setTimeout(() => setRenderText(false), timingConfig.duration); } else if (isLatestSettledFromMe) { opacity.value = 1; height.value = 22; scale.value = 1; + setRenderText(true); } }); - }, 200); + }, 100); }, // eslint-disable-next-line react-hooks/exhaustive-deps [isLatestSettledFromMe, isSentOrDelivered] @@ -84,7 +88,7 @@ export default function MessageStatus({ message }: Props) { - {statusMapping[message.status]} + {renderText && statusMapping[message.status]} @@ -104,7 +108,6 @@ const useStyles = () => { statusText: { fontSize: 12, color: textSecondaryColor(colorScheme), - marginRight: 3, }, }); }; From a2d813d73481c83534580deccc9c2ec0d4c8076a Mon Sep 17 00:00:00 2001 From: Saul Carlin Date: Mon, 12 Aug 2024 08:58:42 -0700 Subject: [PATCH 4/4] fix flex style Co-authored-by: Alex Risch --- components/Chat/Message/Message.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/Chat/Message/Message.tsx b/components/Chat/Message/Message.tsx index 3a9d08147..08930cc11 100644 --- a/components/Chat/Message/Message.tsx +++ b/components/Chat/Message/Message.tsx @@ -583,8 +583,7 @@ const useStyles = () => { marginBottom: 8, }, outsideReactionsContainer: { - flexShrink: 1, - flexGrow: 1, + flex: 1, }, }); };