Repository navigation
Feature: LHN, avatar and header updates to reports, workspace chats and chat rooms tied to workspaces. #20486
Description
While we recently implemented threads, tasks, and manual requests, we realized that threads followed one set of design patterns, while manual requests and tasks followed a different set of patterns. In an effort to clean this up for manual requests and IOUs – threads are already being implemented and tasks are being handled separately – this doc outlines a new, unified approach to ensure business use cases match the rest of the app.
LHN & Avatars
Notes for completeness:
- The workspace chat now uses a consistent avatar for members and admins, with the overarching goal being consistency and less confusion. Workspace chats use a 40x40 dual-avatar, with a larger workspace avatar and a smaller member avatar overlaid in the bottom-right. That said, the name of the workspace chat will continue to differ for admins, taking the form %memberName%, so that they’re able to find workspace chats for specific employees.
- Expense reports use a 24x24 dual-avatar, with the rounded member avatar in the top-left and a rounded square workspace avatar in the bottom right. This dual avatar emphasizes the collaboration and shared nature of sending a request and eventually getting paid back. The title takes the form “%workspaceName% owes %amount%” (and updates to %workspaceName paid %amount% when settled).
- IOU reports will similarly use a 24x24 dual-avatar, though both members have a rounded avatar in contrast. The title is the same as expense reports.
- Requests made to the workspace will feature a larger 32x32 rounded member avatar, as well as a smaller 20x20 rounded square workspace avatar in the case of expense requests. The workspace overlay helps distinguish requests to a workspace vs a DM, which has no extra overlay. The title takes the form “%amount% request for %merchant% | %comment%”.
- Threads in workspace rooms/reports will use a distinct “overlay” avatar from requests. A larger 40x40 circular member avatar as well as a smaller 20x20 rounded square workspace avatar overlaid in the bottom right. This similarly helps distinguish workspace threads from DMs, and emphasizes the member who made the parent comment. The title of the thread is the parent comment.
- Threads in DMs/GroupDMs will simply use the avatar of the parent message sender.
- All chat rooms tied to workspaces will feature the workspace avatar. This deprecates the chair and similar icons for user-created rooms.
Headers
Notes for completeness:
- For the first line, the avatars and header follow the same convention as the LHN.
- For the second line, we use “From %parentChat% in %policyName%”.
- The parent report is always hyperlinked, displayed in blue and can be clicked to return to the parent report.
*iou/expenseReport subheaders
- Remove the
To:andamount - reposition the
Paybutton - modify the pay button copy, so it includes the report amount. i.e
Pay $50 with Expensify
Mobile (Old | New):
Desktop (Old | New):
Rollout Plan
- Update the subheader and parent navigation on all report types (PR) - @chiragsalian
- Update the avatars in all places they feature (LHN, Chat Headers, Report Previews) (GH) - @grgia
- Update the iou/expenseReport header logic. - @grgia - (GH)
- Remove the
To:andamount - reposition the
Paybutton - modify the pay button copy, so it includes the report amount. i.e
Pay $50 with Expensify - Add the "wide" reportTotal to the expanded scrollable header
- Remove the
- Update the iou/expense request header logic. - @grgia (GH)
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~01d3518465643567ea
- Upwork Job ID: 1666939604347977728
- Last Price Increase: 2023-06-08
Activity
melvin-bot commentedon Jun 8, 2023
Current assignees @JmillsExpensify and @trjExpensify are eligible for the NewFeature assigner, not assigning anyone new.
melvin-bot commentedon Jun 8, 2023
Job added to Upwork: https://www.upwork.com/jobs/~01d3518465643567ea
melvin-bot commentedon Jun 8, 2023
Triggered auto assignment to Contributor Plus for review of internal employee PR - @s77rt (
Internal)[-]Feature: LHN, avatar and header updates to IOU/Expenses, workspace chats and workspace chat rooms.[/-][+]Feature: LHN, avatar and header updates to IOU/Expenses, workspace chats and chat rooms tied to workspaces.[/+]JmillsExpensify commentedon Jun 9, 2023
Also @shawnborton did we decide one way or the other on all blue for the second line of the header rows? I still like the differentiated
Frombut I think you had some doubts. Chime in now, because we're going to start implementing this soon!shawnborton commentedon Jun 9, 2023
I'm cool with leaving From in gray to differentiate it, I agree it does look a bit nicer.
grgia commentedon Jun 9, 2023
@shawnborton are we good to combine this issue with #19264 ?
trjExpensify commentedon Jun 9, 2023
I agree. @chiragsalian, want to add that as a commit to your PR before it gets reviewed and merged?
40 remaining items
grgia commentedon Jul 10, 2023
@trjExpensify why not just show the pin icon instead of the three dots?
shawnborton commentedon Jul 10, 2023
Yeah, the intention was to move the pin action into the overflow menu. I like keeping things consistent and training the user that on basically every type of view (chat, task, expense, report, etc) you have an overflow menu that has additional options. So even if the pin is the only option available in some cases, I do like keeping things consistent by using the overflow menu.
grgia commentedon Jul 10, 2023
I have both PRs MVP done for these two views. @shawnborton @trjExpensify could we sync up and make sure I'm not missing any steps in these PRs? (Note: I still need to clean code up)
Is there a separate issue or design doc section for the pin changes?
Report
#22484
Request
#22562
shawnborton commentedon Jul 10, 2023
I think we missed putting this into an issue or design doc. That being said, happy to sync up and make sure we're all on the same page!
shawnborton commentedon Jul 10, 2023
But yeah, the idea is that we basically give every top chat header (the thing with the avatar + user/room/task/expense/report name) an overflow menu. The pin icon will live behind the overflow menu, and sometimes we'll also have a call icon, a delete icon, etc.
grgia commentedon Jul 11, 2023
EOD Update:
Major PRs Ready For Review:
🟢 Match LHN Avatars to Header Avatars #22467
🟢 Expense Report Headers #22484
🟢 Expense Request Headers #22562
Follow-Up Issues I will be tackling separately as they affect more views: (Note, I may make some of these external)
🟡 Move Pin Logic into Context Menu - #22635
🟡 Update DropDown button style - #22540
🟡 Update Header Link Style - #22641
melvin-bot commentedon Aug 3, 2023
This issue has not been updated in over 15 days. @JmillsExpensify, @trjExpensify, @s77rt, @grgia eroding to Monthly issue.
P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!
trjExpensify commentedon Aug 7, 2023
I think this should be back on
weeklyuntil we can close it out.JmillsExpensify commentedon Aug 10, 2023
Yeah, agreed. We're down to clean-up now.
JmillsExpensify commentedon Aug 22, 2023
Given that we have an issue for everything that remains from here, and related because all those are already included in the wave3 project, I'm inclined to close this larger issue out. In fact, I'm going to go ahead and do that, though please re-open if I'm missing something.