Page MenuHomePhabricator
Differential D8857

[web] introduce calculateReactionTooltipSize function
ClosedPublic
Actions

Authored by ginsu on Aug 17 2023, 5:24 PM.
Tags
None
Referenced Files
F3348653: D8857.id30052.diff
Fri, Nov 22, 3:42 PM
F3348615: D8857.id30391.diff
Fri, Nov 22, 3:26 PM
Unknown Object (File)
Wed, Nov 13, 2:12 AM
Unknown Object (File)
Thu, Nov 7, 5:53 PM
Unknown Object (File)
Mon, Nov 4, 10:48 PM
Unknown Object (File)
Mon, Oct 28, 5:40 AM
Unknown Object (File)
Mon, Oct 28, 5:40 AM
Unknown Object (File)
Mon, Oct 28, 5:40 AM
View All Files
Subscribers
ashoat
tomek

Details

Reviewers
atul
kamil
Commits
rCOMMa1f7c72f4e9e: [web] introduce calculateReactionTooltipSize function
Summary

This diff introduces a function to calculate the size of the reaction tooltip. In order to build a tooltip, we need to first know the size, so this function will handles that for our new reaction tooltip.

Here is a screenshot of the reaction for context:

Screenshot 2023-08-17 at 9.22.20 PM.png (482×486 px, 45 KB)

Depends on D8858

Test Plan

logged out the values of width and height and confirmed that they matched the size of the tooltip that was being rendered

Screenshot 2023-08-17 at 9.18.17 PM.png (616×726 px, 84 KB)

Screenshot 2023-08-17 at 9.18.33 PM.png (170×3 px, 39 KB)

Screenshot 2023-08-17 at 9.18.52 PM.png (402×806 px, 56 KB)

Screenshot 2023-08-17 at 9.19.18 PM.png (152×3 px, 42 KB)

Screenshot 2023-08-17 at 9.17.18 PM.png (316×796 px, 39 KB)

Screenshot 2023-08-17 at 9.18.00 PM.png (148×2 px, 42 KB)

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu created this revision.Aug 17 2023, 5:24 PM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptAug 17 2023, 5:24 PM
Harbormaster completed remote builds in B21871: Diff 30049.Aug 17 2023, 5:42 PM
ginsu requested review of this revision.Aug 17 2023, 5:42 PM
ginsu updated this revision to Diff 30051.Aug 17 2023, 6:01 PM

rebase

Harbormaster completed remote builds in B21873: Diff 30051.Aug 17 2023, 6:20 PM
ginsu updated this revision to Diff 30052.Aug 17 2023, 6:20 PM

update

ginsu added inline comments.Aug 17 2023, 6:26 PM
web/utils/tooltip-utils.js
354 ↗(On Diff #30052)

Screenshot 2023-08-17 at 9.22.20 PM.png (482×486 px, 45 KB)

Hoping that having a visualization of the tooltip will help with reviewing my logic

366 ↗(On Diff #30052)

We want to make sure that even if all the usernames in the list are short ('a', 'z', 'c2' etc.) and 'See more' is wider than all the usernames we still get the correct width

370 ↗(On Diff #30052)

We wrap super long usernames

ginsu attached a referenced file: F694574: Screenshot 2023-08-17 at 9.22.20 PM.png. (Show Details)Aug 17 2023, 6:26 PM
ginsu edited the summary of this revision. (Show Details)
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, kamil.
ginsu added a parent revision: D8858: [web] rename calculateToolTipSize to calculateMessageTooltipSize.
ginsu edited the test plan for this revision. (Show Details)Aug 17 2023, 6:28 PM
ginsu edited the test plan for this revision. (Show Details)
ginsu attached a referenced file: F694582: Screenshot 2023-08-17 at 9.17.18 PM.png. (Show Details)
ginsu attached a referenced file: F694583: Screenshot 2023-08-17 at 9.18.33 PM.png. (Show Details)
ginsu attached a referenced file: F694584: Screenshot 2023-08-17 at 9.18.00 PM.png. (Show Details)
ginsu attached a referenced file: F694585: Screenshot 2023-08-17 at 9.19.18 PM.png. (Show Details)
ginsu attached a referenced file: F694586: Screenshot 2023-08-17 at 9.18.52 PM.png. (Show Details)
ginsu attached a referenced file: F694587: Screenshot 2023-08-17 at 9.18.17 PM.png. (Show Details)
ginsu attached a referenced file: F694576: Screenshot 2023-08-17 at 9.22.20 PM.png. (Show Details)
ginsu added inline comments.
web/utils/tooltip-utils.js
370 ↗(On Diff #30052)

eclipse not wrap...

Harbormaster completed remote builds in B21874: Diff 30052.Aug 17 2023, 6:38 PM
ginsu added a child revision: D8859: [web] introduce useReactionTooltip hook.Aug 17 2023, 6:39 PM
kamil accepted this revision.Aug 24 2023, 2:01 PM
kamil added inline comments.
web/utils/tooltip-utils.js
358–359 ↗(On Diff #30052)

const { paddingTop, paddingBottom, padding... } = reactionTooltipStyle;

I would destruct reactionTooltipStyle at the beginning to simply reduce the code lines width and remove those two lines - maybe this will improve readability

This revision is now accepted and ready to land.Aug 24 2023, 2:01 PM
ginsu updated this revision to Diff 30391.Aug 27 2023, 9:08 PM
ginsu edited the test plan for this revision. (Show Details)

address comments and rebase before landing

Harbormaster completed remote builds in B22145: Diff 30391.Aug 27 2023, 9:26 PM
Closed by commit rCOMMa1f7c72f4e9e: [web] introduce calculateReactionTooltipSize function (authored by ginsu). · Explain WhyAug 27 2023, 10:04 PM
This revision was automatically updated to reflect the committed changes.
ginsu added a commit: rCOMMa1f7c72f4e9e: [web] introduce calculateReactionTooltipSize function.

Revision Contents
Changeset List

PathSize
web/
utils/
49 lines

Diff 30049

View Options

web/utils/tooltip-utils.js

Loading...