From 826fef5e5667cf80503416b82efaf6079585dc9a Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 25 Sep 2024 14:38:02 +0800 Subject: [PATCH 1/6] fix task title overflown and align the checkbox and arrow correctly --- src/components/ReportActionItem/TaskPreview.tsx | 16 ++++++++-------- src/styles/index.ts | 5 ----- src/styles/utils/index.ts | 8 ++++++++ 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx index 053ad0c2c63e..9c482a0972e3 100644 --- a/src/components/ReportActionItem/TaskPreview.tsx +++ b/src/components/ReportActionItem/TaskPreview.tsx @@ -11,6 +11,7 @@ import {usePersonalDetails} from '@components/OnyxProvider'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import RenderHTML from '@components/RenderHTML'; import {showContextMenuForReport} from '@components/ShowContextMenuContext'; +import Text from '@components/Text'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; @@ -69,8 +70,8 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che const taskAssigneeAccountID = Task.getTaskAssigneeAccountID(taskReport) ?? action?.childManagerAccountID ?? -1; const personalDetails = usePersonalDetails(); const avatar = personalDetails?.[taskAssigneeAccountID]?.avatar ?? Expensicons.FallbackAvatar; - const htmlForTaskPreview = `${taskTitle}`; const isDeletedParentAction = ReportUtils.isCanceledTaskReport(taskReport, action); + const iconWrapperStyle = StyleUtils.getTaskPreviewIconWrapper(taskAssigneeAccountID > 0); if (isDeletedParentAction) { return ${translate('parentReportAction.deletedTask')}`} />; @@ -84,12 +85,12 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che onPressOut={() => ControlSelection.unblock()} onLongPress={(event) => showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive)} shouldUseHapticsOnLongPress - style={[styles.flexRow, styles.justifyContentBetween]} + style={[styles.flexRow, styles.justifyContentBetween, styles.mt1]} role={CONST.ROLE.BUTTON} accessibilityLabel={translate('task.task')} > - - + + {taskAssigneeAccountID > 0 && ( )} - - ${htmlForTaskPreview}` : htmlForTaskPreview} /> - + {taskTitle} diff --git a/src/styles/index.ts b/src/styles/index.ts index f94a047fd459..03f79209b705 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4108,11 +4108,6 @@ const styles = (theme: ThemeColors) => width: 1, }, - taskCheckboxWrapper: { - height: variables.fontSizeNormalHeight, - ...flex.justifyContentCenter, - }, - taskTitleMenuItem: { ...writingDirection.ltr, ...headlineFont, diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index d3d31cc2ea1b..0564c836b877 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1668,6 +1668,14 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ alignItems: 'center', justifyContent: 'center', }), + + getTaskPreviewIconWrapper: (hasAvatar: boolean) => { + const height = hasAvatar ? getAvatarSize(CONST.AVATAR_SIZE.SMALL) : variables.fontSizeNormalHeight; + return { + height, + ...styles.justifyContentCenter, + }; + }, }); type StyleUtilsType = ReturnType; From 7d628d8ee428248ddde68589886beaa76908e086 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 25 Sep 2024 18:32:38 +0800 Subject: [PATCH 2/6] add a bit spacing between title and arrow --- src/components/ReportActionItem/TaskPreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx index 9c482a0972e3..3fd56242c6c6 100644 --- a/src/components/ReportActionItem/TaskPreview.tsx +++ b/src/components/ReportActionItem/TaskPreview.tsx @@ -89,7 +89,7 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che role={CONST.ROLE.BUTTON} accessibilityLabel={translate('task.task')} > - + Date: Wed, 25 Sep 2024 18:34:56 +0800 Subject: [PATCH 3/6] only apply margin top if it's displayed with user display name --- src/components/ReportActionItem/TaskPreview.tsx | 8 ++++++-- src/pages/home/report/ReportActionItem.tsx | 1 + 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx index 3fd56242c6c6..4b45dde53c23 100644 --- a/src/components/ReportActionItem/TaskPreview.tsx +++ b/src/components/ReportActionItem/TaskPreview.tsx @@ -1,6 +1,7 @@ import {Str} from 'expensify-common'; import React from 'react'; import {View} from 'react-native'; +import type {StyleProp, ViewStyle} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import Avatar from '@components/Avatar'; @@ -53,9 +54,12 @@ type TaskPreviewProps = WithCurrentUserPersonalDetailsProps & { /** Callback for updating context menu active state, used for showing context menu */ checkIfContextMenuActive: () => void; + + /** Style for the task preview container */ + style: StyleProp; }; -function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, checkIfContextMenuActive, currentUserPersonalDetails, isHovered = false}: TaskPreviewProps) { +function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, checkIfContextMenuActive, currentUserPersonalDetails, isHovered = false, style}: TaskPreviewProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); @@ -85,7 +89,7 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che onPressOut={() => ControlSelection.unblock()} onLongPress={(event) => showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive)} shouldUseHapticsOnLongPress - style={[styles.flexRow, styles.justifyContentBetween, styles.mt1]} + style={[styles.flexRow, styles.justifyContentBetween, style]} role={CONST.ROLE.BUTTON} accessibilityLabel={translate('task.task')} > diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index 99d25e2b4023..9c15427b0fda 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -568,6 +568,7 @@ function ReportActionItem({ children = ( Date: Wed, 25 Sep 2024 18:42:22 +0800 Subject: [PATCH 4/6] use same height with or without avatar --- src/components/ReportActionItem/TaskPreview.tsx | 5 +++-- src/styles/utils/index.ts | 5 ++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx index 4b45dde53c23..00b02f6ec522 100644 --- a/src/components/ReportActionItem/TaskPreview.tsx +++ b/src/components/ReportActionItem/TaskPreview.tsx @@ -74,8 +74,9 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che const taskAssigneeAccountID = Task.getTaskAssigneeAccountID(taskReport) ?? action?.childManagerAccountID ?? -1; const personalDetails = usePersonalDetails(); const avatar = personalDetails?.[taskAssigneeAccountID]?.avatar ?? Expensicons.FallbackAvatar; + const avatarSize = CONST.AVATAR_SIZE.SMALL; const isDeletedParentAction = ReportUtils.isCanceledTaskReport(taskReport, action); - const iconWrapperStyle = StyleUtils.getTaskPreviewIconWrapper(taskAssigneeAccountID > 0); + const iconWrapperStyle = StyleUtils.getTaskPreviewIconWrapper(avatarSize); if (isDeletedParentAction) { return ${translate('parentReportAction.deletedTask')}`} />; @@ -113,7 +114,7 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 0564c836b877..6d398e37f5d7 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1669,10 +1669,9 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ justifyContent: 'center', }), - getTaskPreviewIconWrapper: (hasAvatar: boolean) => { - const height = hasAvatar ? getAvatarSize(CONST.AVATAR_SIZE.SMALL) : variables.fontSizeNormalHeight; + getTaskPreviewIconWrapper: (avatarSize: AvatarSizeName) => { return { - height, + height: getAvatarSize(avatarSize), ...styles.justifyContentCenter, }; }, From 7087eaae388b5ab62be2dbcfabbafebb01ec69d9 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 26 Sep 2024 11:28:38 +0800 Subject: [PATCH 5/6] achieve same height with margin --- src/components/ReportActionItem/TaskPreview.tsx | 7 ++++--- src/styles/utils/index.ts | 4 ++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx index 00b02f6ec522..6324ebeb627d 100644 --- a/src/components/ReportActionItem/TaskPreview.tsx +++ b/src/components/ReportActionItem/TaskPreview.tsx @@ -72,18 +72,19 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che : action?.childStateNum === CONST.REPORT.STATE_NUM.APPROVED && action?.childStatusNum === CONST.REPORT.STATUS_NUM.APPROVED; const taskTitle = Str.htmlEncode(TaskUtils.getTaskTitle(taskReportID, action?.childReportName ?? '')); const taskAssigneeAccountID = Task.getTaskAssigneeAccountID(taskReport) ?? action?.childManagerAccountID ?? -1; + const hasAssignee = taskAssigneeAccountID > 0; const personalDetails = usePersonalDetails(); const avatar = personalDetails?.[taskAssigneeAccountID]?.avatar ?? Expensicons.FallbackAvatar; const avatarSize = CONST.AVATAR_SIZE.SMALL; const isDeletedParentAction = ReportUtils.isCanceledTaskReport(taskReport, action); - const iconWrapperStyle = StyleUtils.getTaskPreviewIconWrapper(avatarSize); + const iconWrapperStyle = StyleUtils.getTaskPreviewIconWrapper(hasAssignee ? avatarSize : undefined); if (isDeletedParentAction) { return ${translate('parentReportAction.deletedTask')}`} />; } return ( - + Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(taskReportID))} onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()} @@ -110,7 +111,7 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che accessibilityLabel={translate('task.task')} /> - {taskAssigneeAccountID > 0 && ( + {hasAssignee && ( ({ justifyContent: 'center', }), - getTaskPreviewIconWrapper: (avatarSize: AvatarSizeName) => { + getTaskPreviewIconWrapper: (avatarSize?: AvatarSizeName) => { return { - height: getAvatarSize(avatarSize), + height: avatarSize ? getAvatarSize(avatarSize) : variables.fontSizeNormalHeight, ...styles.justifyContentCenter, }; }, From 92eee5f433c15203e37cf5c87ea57fd9a1664b3e Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 27 Sep 2024 12:37:26 +0800 Subject: [PATCH 6/6] fix title isn't aligned to the center of the avatar --- src/components/ReportActionItem/TaskPreview.tsx | 3 ++- src/styles/utils/index.ts | 16 ++++++++++------ 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx index 032be0a00b14..95528286d1e1 100644 --- a/src/components/ReportActionItem/TaskPreview.tsx +++ b/src/components/ReportActionItem/TaskPreview.tsx @@ -81,6 +81,7 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che const avatarSize = CONST.AVATAR_SIZE.SMALL; const isDeletedParentAction = ReportUtils.isCanceledTaskReport(taskReport, action); const iconWrapperStyle = StyleUtils.getTaskPreviewIconWrapper(hasAssignee ? avatarSize : undefined); + const titleStyle = StyleUtils.getTaskPreviewTitleStyle(iconWrapperStyle.height, isTaskCompleted); const shouldShowGreenDotIndicator = ReportUtils.isOpenTaskReport(taskReport, action) && ReportUtils.isReportManager(taskReport); if (isDeletedParentAction) { @@ -124,7 +125,7 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che type={CONST.ICON_TYPE_AVATAR} /> )} - {taskTitle} + {taskTitle} {shouldShowGreenDotIndicator && ( diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 19feb9a0b81d..341f72aa64a2 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1669,12 +1669,16 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ justifyContent: 'center', }), - getTaskPreviewIconWrapper: (avatarSize?: AvatarSizeName) => { - return { - height: avatarSize ? getAvatarSize(avatarSize) : variables.fontSizeNormalHeight, - ...styles.justifyContentCenter, - }; - }, + getTaskPreviewIconWrapper: (avatarSize?: AvatarSizeName) => ({ + height: avatarSize ? getAvatarSize(avatarSize) : variables.fontSizeNormalHeight, + ...styles.justifyContentCenter, + }), + + getTaskPreviewTitleStyle: (iconHeight: number, isTaskCompleted: boolean): StyleProp => [ + styles.flex1, + isTaskCompleted ? [styles.textSupporting, styles.textLineThrough] : [], + {marginTop: (iconHeight - variables.fontSizeNormalHeight) / 2}, + ], }); type StyleUtilsType = ReturnType;