Repository navigation
[HOLD for payment 2024-05-15] HIGH: [Polish] [$500] Redesign thread ancestry #36752
Description
Activity
- converted this from a draft issue
on Feb 17, 2024 Auto-assigning issues to engineers is no longer supported. If you think this issue should receive engineering attention, please raise it in #whatsnext.
- changed the title
[-]HIGH: Redesign thread ancestry[/-][+][$500] HIGH: Redesign thread ancestry[/+]on Feb 17, 2024 Job added to Upwork: https://www.upwork.com/jobs/~01c49e505032aeb5f6
Triggered auto assignment to Contributor-plus team member for initial proposal review - @aimane-chnaif (
External)Proposal
Please re-state the problem that we are trying to solve in this issue.
Redesign thread ancestr
What is the root cause of that problem?
New Feature
What changes do you think we should make in order to solve the problem?
We will be modifying the thread divider line here in regards to its ancestors:
We will:
-
Wrap Text and Icon and Divider line with a view like this:
<View style={[styles.flexRow, styles.alignItemsCenter, styles.ml5]}> <Icon /> <Text style={[styles.link}>Thread</Text> <View style={[styles.threadDividerLine]} /> </View>
-
We can put this in a component called
ThreadDividerLine -
Render a divider line before elements here with text
Thread -
Take in index as the second argument when mapping ancestors here:
-
Render a divider line here according to the logic checking for last element:
{i !== allAncestors.length - 1 ? <ThreadDividerLine text='common.Thread' fill={colors.blue400}/> : <ThreadDividerLine text='common.Replies'/>
Result
Icon will have to be requested from the design team
-
Proposal
Please re-state the problem that we are trying to solve in this issue.
Redesign thread ancestry
What is the root cause of that problem?
New Feature
What changes do you think we should make in order to solve the problem?
- Add a blue "thread" link to each separator line
to do this, we should remove the current thread separator that is displayed below every ancestors here:
App/src/pages/home/report/ReportActionItemParentAction.tsx
Lines 86 to 96 in 91ea979
and add a blue "thread" link with a thread divider line above every ancestor
ReportActionItemhere, we should add this code:<View style={[styles.flexRow, styles.alignItemsCenter, styles.ml5, index === 0 ? styles.mv2 : [styles.mt3, styles.mb1]]}> <PressableWithoutFeedback onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor?.report?.parentReportID ?? ''))} accessibilityLabel={"Thread"} role={CONST.ROLE.BUTTON} style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]} > <Icon src={Expensicons.Thread} fill={theme.link} width={variables.iconSizeExtraSmall} height={variables.iconSizeExtraSmall} /> <Text style={[styles.threadDividerText, styles.link]}>Thread</Text> </PressableWithoutFeedback> {!ancestor.shouldDisplayNewMarker && <View style={[styles.threadDividerLine]} />} </View>
- Thread's divider line should hide when the ancestor item is marked as unread, This is so that they will not be conflicting.
we will determine if we should display the Thread's divider line withancestor.shouldDisplayNewMarker, therefore, theancestor.shouldHideThreadDividerLinewill not be needed anymore and we should remove it, here, and here.
From #36752 (comment) - we want the entire message (including the blue thread icon) to be clickable to navigate you to the thread.
From #36752 (comment) - clicking on an ancestor message should take you to the thread/room where the message originally appeared, not the thread for the message.- we should use
PressableWithoutFeedbackto make the link clickable. - we should pass
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.reportID))to thePressableWithoutFeedbackonPressprop to navigate to the thread on click. - we should change the
ReportActionItemonPressprop here to:
onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor?.report?.parentReportID ?? ''))}
- we should use
theme.linkandstyles.linkto make the icon and "Thread" text blue. - For "Thread" and "Replies" text we should use this style:
threadDividerText: { fontFamily: FontUtils.fontFamily.platform.EXP_NEUE, fontSize: variables.fontSizeSmall, textTransform: 'capitalize', },
- we should change the
threadDividerLinemargins to match the design, instead ofmarginHorizontal: 20,we should usemarginLeft: 8, marginRight: 20, - we should use
ancestorindexto apply a8pxvertical margin for the firstancestor, and for others we apply12pxtop margin and4pxbottom margin. - if we want to display a pointer cursor on the report message, we need to modify the getReportActionItemStyle function here to return styles.cursorPointer in the styles based on a boolean, and we should pass this boolean here as
!_.isUndefined(props.onPress)and remove thecursor.cursorAutostyle for the message here
- Add a gray "replies" message to the final separator
to do this, after displaying all ancestors here, we should add below them this code:
<View style={[styles.flexRow, styles.alignItemsCenter, styles.ml5, styles.mv1]}> <Icon src={Expensicons.Thread} fill={theme.icon} width={variables.iconSizeExtraSmall} height={variables.iconSizeExtraSmall} /> <Text style={[styles.threadDividerText, styles.textSupporting, styles.ml1]}>Replies</Text> {!shouldHideThreadDividerLine && <View style={[styles.threadDividerLine]} />} </View>
- Thread's divider line should hide when the first item in the current thread is marked as unread, This is so that they will not be conflicting.
- we should use
theme.iconandstyles.textSupportingto make the icon and "Replies" text gray.
We should use localization function for "Thread" and "Replies" messages.
We can refactor the code into reusable components.
Result
Threads.Redesign.Recording.2024-03-05.174204.mp4
What alternative solutions did you explore? (Optional)
N/A
Figma file here. cc'ing @Expensify/design on this for visibility.
And here's one more mockup to show more context around how ancestry works:
This look right to you
@designteam?Reacted by rayane-d156 remaining items
updated to reflect
payment tomorrow!
Please correct the payment summary, the payment amount is 500$ not 750$
@dannymcclain, @chiragsalian, @dylanexpensify, @rayane-djouah Eep! 4 days overdue now. Issues have feelings too...
@rayane-djouah we decided $750 given there was a follow on issue created and done that wasn't necessarily needed to solve the bug, but a polish. Does that sound right? cc @chiragsalian
Reacted by rayane-d@dylanexpensify I trust your judgment on what you find fair. Thanks!
Not overdue, right @dylanexpensify?
Nope! Just finishing payments!
Done!
$750 approved for @allroundexperts
Problem:
Infinite threading means you can get buried deep in a hierarchy and lose track of where you are. We show your ancestors to help with this, but user complaints suggest this isn't enough:
Solution:
Make it look more clear! There was a log discussion on this (Slack) ending with this design:
Specifically:
Upwork Automation - Do Not Edit