From f250dcf8b4a792b2bba9447a763083b56db02343 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Tue, 7 Jan 2025 16:00:52 +0700 Subject: [PATCH 1/7] fix: border around workspace not matching hovered background --- src/pages/home/report/ReportActionItemSingle.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 3d4c1fdadbda..2288f1db42ea 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -215,6 +215,7 @@ function ReportActionItemSingle({ mainAvatar={icon} secondaryAvatar={secondaryAvatar} noMargin + backgroundColor={isHovered ? styles.sidebarLinkActive.backgroundColor : theme.sidebar} /> ); } From 8542fd5e4872d283258cce2053ad0f0515e7db3c Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 13 Jan 2025 15:34:16 +0700 Subject: [PATCH 2/7] Add active case --- src/pages/home/report/PureReportActionItem.tsx | 1 + src/pages/home/report/ReportActionItemSingle.tsx | 15 ++++++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index dd44558f83bf..cba395570a95 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -996,6 +996,7 @@ function PureReportActionItem({ report={report} iouReport={iouReport} isHovered={hovered} + isActive={!!isReportActionLinked} hasBeenFlagged={ ![CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING].some((item) => item === moderationDecision) && !ReportActionsUtils.isPendingRemove(action) diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 2288f1db42ea..25f8b33379e0 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -57,6 +57,9 @@ type ReportActionItemSingleProps = Partial & { /** If the action is being hovered */ isHovered?: boolean; + + /** If the action is being actived */ + isActive?: boolean; }; const showUserDetails = (accountID: string) => { @@ -80,6 +83,7 @@ function ReportActionItemSingle({ report, iouReport, isHovered = false, + isActive = false, }: ReportActionItemSingleProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -208,6 +212,15 @@ function ReportActionItemSingle({ [action, isWorkspaceActor, actorAccountID], ); + const getBackgroundColor = () => { + if (isActive) { + return theme.messageHighlightBG; + } + if (isHovered) { + return styles.sidebarLinkActive.backgroundColor; + } + return theme.sidebar; + }; const getAvatar = () => { if (shouldShowSubscriptAvatar) { return ( @@ -215,7 +228,7 @@ function ReportActionItemSingle({ mainAvatar={icon} secondaryAvatar={secondaryAvatar} noMargin - backgroundColor={isHovered ? styles.sidebarLinkActive.backgroundColor : theme.sidebar} + backgroundColor={getBackgroundColor()} /> ); } From cacb979d9cbf4dead5a89812a94df4ed16a8e06d Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 15 Jan 2025 01:49:44 +0700 Subject: [PATCH 3/7] fix reply border when active --- src/components/MultipleAvatars.tsx | 6 +++++- src/pages/home/report/PureReportActionItem.tsx | 1 + src/pages/home/report/ReportActionItemSingle.tsx | 6 +++--- src/pages/home/report/ReportActionItemThread.tsx | 6 +++++- src/styles/utils/index.ts | 13 ++++++++++++- 5 files changed, 26 insertions(+), 6 deletions(-) diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx index f8169503f932..6ce785fbdc73 100644 --- a/src/components/MultipleAvatars.tsx +++ b/src/components/MultipleAvatars.tsx @@ -37,6 +37,9 @@ type MultipleAvatarsProps = { /** Whether the avatars are hovered */ isHovered?: boolean; + /** Whether the avatars are actived */ + isActive?: boolean; + /** Whether the avatars are in an element being pressed */ isPressed?: boolean; @@ -76,6 +79,7 @@ function MultipleAvatars({ shouldStackHorizontally = false, shouldDisplayAvatarsInRows = false, isHovered = false, + isActive = false, isPressed = false, isFocusMode = false, isInReportAction = false, @@ -173,7 +177,6 @@ function MultipleAvatars({ const oneAvatarSize = StyleUtils.getAvatarStyle(size); const oneAvatarBorderWidth = StyleUtils.getAvatarBorderWidth(size).borderWidth ?? 0; const overlapSize = oneAvatarSize.width / overlapDivider; - if (shouldStackHorizontally) { // Height of one avatar + border space const height = oneAvatarSize.height + 2 * oneAvatarBorderWidth; @@ -206,6 +209,7 @@ function MultipleAvatars({ isPressed, isInReportAction, shouldUseCardBackground, + isActive, }), StyleUtils.getAvatarBorderWidth(size), ]} diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index cba395570a95..ff471583a483 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -964,6 +964,7 @@ function PureReportActionItem({ isHovered={hovered} icons={ReportUtils.getIconsForParticipants(oldestFourAccountIDs, personalDetails)} onSecondaryInteraction={showPopover} + isActive={!!isReportActionLinked} /> )} diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 25f8b33379e0..853e830323fc 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -213,12 +213,12 @@ function ReportActionItemSingle({ ); const getBackgroundColor = () => { - if (isActive) { - return theme.messageHighlightBG; - } if (isHovered) { return styles.sidebarLinkActive.backgroundColor; } + if (isActive) { + return theme.messageHighlightBG; + } return theme.sidebar; }; const getAvatar = () => { diff --git a/src/pages/home/report/ReportActionItemThread.tsx b/src/pages/home/report/ReportActionItemThread.tsx index 13072a653749..b3a39da997dc 100644 --- a/src/pages/home/report/ReportActionItemThread.tsx +++ b/src/pages/home/report/ReportActionItemThread.tsx @@ -28,11 +28,14 @@ type ReportActionItemThreadProps = { /** Whether the thread item / message is being hovered */ isHovered: boolean; + /** Whether the thread item / message is being actived */ + isActive?: boolean; + /** The function that should be called when the thread is LongPressed or right-clicked */ onSecondaryInteraction: (event: GestureResponderEvent | MouseEvent) => void; }; -function ReportActionItemThread({numberOfReplies, icons, mostRecentReply, childReportID, isHovered, onSecondaryInteraction}: ReportActionItemThreadProps) { +function ReportActionItemThread({numberOfReplies, icons, mostRecentReply, childReportID, isHovered, onSecondaryInteraction, isActive}: ReportActionItemThreadProps) { const styles = useThemeStyles(); const {translate, datetimeToCalendarTime} = useLocalize(); @@ -60,6 +63,7 @@ function ReportActionItemThread({numberOfReplies, icons, mostRecentReply, childR icons={icons} shouldStackHorizontally isHovered={isHovered} + isActive={isActive} isInReportAction /> diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 3bb80f71f1b5..1f3cd3ee63f5 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -762,14 +762,25 @@ type AvatarBorderStyleParams = { isPressed: boolean; isInReportAction: boolean; shouldUseCardBackground: boolean; + isActive?: boolean; }; -function getHorizontalStackedAvatarBorderStyle({theme, isHovered, isPressed, isInReportAction = false, shouldUseCardBackground = false}: AvatarBorderStyleParams): ViewStyle { +function getHorizontalStackedAvatarBorderStyle({ + theme, + isHovered, + isPressed, + isInReportAction = false, + shouldUseCardBackground = false, + isActive = false, +}: AvatarBorderStyleParams): ViewStyle { let borderColor = shouldUseCardBackground ? theme.cardBG : theme.appBG; if (isHovered) { borderColor = isInReportAction ? theme.hoverComponentBG : theme.border; } + if (isActive) { + borderColor = theme.messageHighlightBG; + } if (isPressed) { borderColor = isInReportAction ? theme.hoverComponentBG : theme.buttonPressedBG; From 24ec2023f88135269d7585a9cc49f587546056cf Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 16 Jan 2025 17:24:29 +0700 Subject: [PATCH 4/7] fix border style --- src/pages/home/report/ReportActionItemSingle.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 853e830323fc..dee7c028160f 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -213,12 +213,12 @@ function ReportActionItemSingle({ ); const getBackgroundColor = () => { - if (isHovered) { - return styles.sidebarLinkActive.backgroundColor; - } if (isActive) { return theme.messageHighlightBG; } + if (isHovered) { + return theme.hoverComponentBG; + } return theme.sidebar; }; const getAvatar = () => { From 8e0e08136215bda0795c60c93cdec0660bcea0ec Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 24 Jan 2025 15:14:56 +0700 Subject: [PATCH 5/7] fix background color when hover --- src/components/MultipleAvatars.tsx | 4 ++-- src/pages/home/report/PureReportActionItem.tsx | 12 +++++++++--- src/pages/home/report/ReportActionItemThread.tsx | 4 ++-- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/src/components/MultipleAvatars.tsx b/src/components/MultipleAvatars.tsx index 6ce785fbdc73..158970d1e9f3 100644 --- a/src/components/MultipleAvatars.tsx +++ b/src/components/MultipleAvatars.tsx @@ -5,7 +5,7 @@ import type {ValueOf} from 'type-fest'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as ReportUtils from '@libs/ReportUtils'; +import {getUserDetailTooltipText} from '@libs/ReportUtils'; import type {AvatarSource} from '@libs/UserUtils'; import variables from '@styles/variables'; import CONST from '@src/CONST'; @@ -114,7 +114,7 @@ function MultipleAvatars({ let avatarContainerStyles = StyleUtils.getContainerStyles(size, isInReportAction); const {singleAvatarStyle, secondAvatarStyles} = useMemo(() => avatarSizeToStylesMap[size as AvatarSizeToStyles] ?? avatarSizeToStylesMap.default, [size, avatarSizeToStylesMap]); - const tooltipTexts = useMemo(() => (shouldShowTooltip ? icons.map((icon) => ReportUtils.getUserDetailTooltipText(Number(icon.id), icon.name)) : ['']), [shouldShowTooltip, icons]); + const tooltipTexts = useMemo(() => (shouldShowTooltip ? icons.map((icon) => getUserDetailTooltipText(Number(icon.id), icon.name)) : ['']), [shouldShowTooltip, icons]); const avatarSize = useMemo(() => { if (isFocusMode) { diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index 2e7c52242cfc..eecde01ec925 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -371,6 +371,7 @@ function PureReportActionItem({ const downloadedPreviews = useRef([]); const prevDraftMessage = usePrevious(draftMessage); const isReportActionLinked = linkedReportActionID && action.reportActionID && linkedReportActionID === action.reportActionID; + const [isReportActionActive, setIsReportActionActive] = useState(!!isReportActionLinked); const isActionableWhisper = isActionableMentionWhisper(action) || isActionableTrackExpense(action) || isActionableReportMentionWhisper(action); const highlightedBackgroundColorIfNeeded = useMemo( @@ -410,7 +411,6 @@ function PureReportActionItem({ } clearAllRelatedReportActionErrors(reportID, action); }; - useEffect( () => () => { // ReportActionContextMenu, EmojiPicker and PopoverReactionList are global components, @@ -1012,7 +1012,7 @@ function PureReportActionItem({ isHovered={hovered} icons={getIconsForParticipants(oldestFourAccountIDs, personalDetails)} onSecondaryInteraction={showPopover} - isActive={!!isReportActionLinked} + isActive={isReportActionActive} /> )} @@ -1045,7 +1045,7 @@ function PureReportActionItem({ report={report} iouReport={iouReport} isHovered={hovered} - isActive={!!isReportActionLinked} + isActive={isReportActionActive} hasBeenFlagged={ ![CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING].some((item) => item === moderationDecision) && !isPendingRemove(action) } @@ -1131,6 +1131,12 @@ function PureReportActionItem({ shouldHandleScroll isDisabled={draftMessage !== undefined} shouldFreezeCapture={isPaymentMethodPopoverActive} + onHoverIn={() => { + setIsReportActionActive(false); + }} + onHoverOut={() => { + setIsReportActionActive(!!isReportActionLinked); + }} > {(hovered) => ( diff --git a/src/pages/home/report/ReportActionItemThread.tsx b/src/pages/home/report/ReportActionItemThread.tsx index b3a39da997dc..223c2713ac70 100644 --- a/src/pages/home/report/ReportActionItemThread.tsx +++ b/src/pages/home/report/ReportActionItemThread.tsx @@ -6,9 +6,9 @@ import PressableWithSecondaryInteraction from '@components/PressableWithSecondar import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import {navigateToAndOpenChildReport} from '@libs/actions/Report'; import Timing from '@libs/actions/Timing'; import Performance from '@libs/Performance'; -import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import type {Icon} from '@src/types/onyx/OnyxCommon'; @@ -51,7 +51,7 @@ function ReportActionItemThread({numberOfReplies, icons, mostRecentReply, childR onPress={() => { Performance.markStart(CONST.TIMING.OPEN_REPORT_THREAD); Timing.start(CONST.TIMING.OPEN_REPORT_THREAD); - Report.navigateToAndOpenChildReport(childReportID); + navigateToAndOpenChildReport(childReportID); }} role={CONST.ROLE.BUTTON} accessibilityLabel={`${numberOfReplies} ${replyText}`} From d4dfd05385aea12806ed40d3586b45d437ec7130 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 30 Jan 2025 01:54:33 +0700 Subject: [PATCH 6/7] fix bug --- src/pages/home/report/PureReportActionItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index a87b3fa4346f..5a5eef58b62c 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -1013,7 +1013,7 @@ function PureReportActionItem({ isHovered={hovered} icons={getIconsForParticipants(oldestFourAccountIDs, personalDetails)} onSecondaryInteraction={showPopover} - isActive={isReportActionActive} + isActive={isReportActionActive && !isContextMenuActive} /> )} @@ -1046,7 +1046,7 @@ function PureReportActionItem({ report={report} iouReport={iouReport} isHovered={hovered} - isActive={isReportActionActive} + isActive={isReportActionActive && !isContextMenuActive} hasBeenFlagged={ ![CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING].some((item) => item === moderationDecision) && !isPendingRemove(action) } From 02c54c35a460553d4426f51ab1fa543f93ea5d33 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Sun, 2 Feb 2025 00:19:47 +0700 Subject: [PATCH 7/7] fix background hover --- src/pages/home/report/PureReportActionItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx index 5a5eef58b62c..c36391ecec70 100644 --- a/src/pages/home/report/PureReportActionItem.tsx +++ b/src/pages/home/report/PureReportActionItem.tsx @@ -1010,7 +1010,7 @@ function PureReportActionItem({ childReportID={`${action.childReportID}`} numberOfReplies={numberOfThreadReplies} mostRecentReply={`${action.childLastVisibleActionCreated}`} - isHovered={hovered} + isHovered={hovered || isContextMenuActive} icons={getIconsForParticipants(oldestFourAccountIDs, personalDetails)} onSecondaryInteraction={showPopover} isActive={isReportActionActive && !isContextMenuActive} @@ -1045,7 +1045,7 @@ function PureReportActionItem({ shouldShowSubscriptAvatar={shouldShowSubscriptAvatar} report={report} iouReport={iouReport} - isHovered={hovered} + isHovered={hovered || isContextMenuActive} isActive={isReportActionActive && !isContextMenuActive} hasBeenFlagged={ ![CONST.MODERATION.MODERATOR_DECISION_APPROVED, CONST.MODERATION.MODERATOR_DECISION_PENDING].some((item) => item === moderationDecision) && !isPendingRemove(action)