Add CSS transition for contact tooltip size changes

ASSIGNED
Assigned to

Status

ASSIGNED
4 years ago
3 years ago

People

(Reporter: aleth, Assigned: sourab.reddy2k14)

Tracking

Details

Attachments

(1 attachment, 1 obsolete attachment)

(Reporter)

Description

4 years ago
When a tooltip grows due to e.g. IRC whois info arriving, the transition looks jarring. A CSS transition would help.
(Assignee)

Comment 1

3 years ago
Created attachment 8730728 [details] [diff] [review]
When we hover over a participant's name,  updateTooltipInfo() is called, it fills the tooltip with rows of fetched info and shows it, adding timeouts makes it look like a transition.

When we hover over a participant's name, updateTooltipInfo() is called, it fills the tooltip with rows of fetched info and shows it at once, making it look jarring. Adding timeouts between successive addition of rows in the tooltip helps the width of the tooltip grow gradually, makes the transition look smoother.
Attachment #8730728 - Flags: review?(aleth)
Comment on attachment 8730728 [details] [diff] [review]
When we hover over a participant's name,  updateTooltipInfo() is called, it fills the tooltip with rows of fetched info and shows it, adding timeouts makes it look like a transition.

Review of attachment 8730728 [details] [diff] [review]:
-----------------------------------------------------------------

I think we were interested in using the CSS transition property (https://developer.mozilla.org/en-US/docs/Web/CSS/transition) to perform this instead of doing it in JavaScript. Have you tried this? It should make it much simpler.
Attachment #8730728 - Flags: review?(aleth) → feedback+
(Assignee)

Comment 3

3 years ago
I tried using CSS transitions didn't work. I will try again and re-submit a patch in CSS if possible.
(Assignee)

Comment 4

3 years ago
Created attachment 8731232 [details] [diff] [review]
Added fadeIn and grow transitions to the tooltip, to avoid the jarring effect when it appears at once .

Added fadeIn and grow transitions to the the tooltip, by adding CSS opacity transition to the rows element and a font-size transition to individual row of the tooltip. The transitions are set/reset through JS.
Attachment #8730728 - Attachment is obsolete: true
Attachment #8731232 - Flags: review?(aleth)
Assignee: nobody → sourab.reddy2k14
Status: NEW → ASSIGNED
(Assignee)

Updated

3 years ago
Attachment #8731232 - Flags: feedback?(clokep)
Attachment #8731232 - Flags: feedback?(clokep)
(Reporter)

Comment 5

3 years ago
Comment on attachment 8731232 [details] [diff] [review]
Added fadeIn and grow transitions to the tooltip, to avoid the jarring effect when it appears at once .

Review of attachment 8731232 [details] [diff] [review]:
-----------------------------------------------------------------

This looks much better already!

::: chat/content/imtooltip.xml
@@ +178,5 @@
>             // Row with this label already exists - just update.
>             description = row.querySelector("description");
> +
> +           // Resetting the grow transition
> +           row.style.fontSize = "0.5em";

Please don't use .style. Use a state attribute (row.setAttribute) and CSS classes dependent on the attribute (see the contacts in the blist for an example).

::: chat/themes/imtooltip.css
@@ +69,5 @@
>    margin-left: 0 !important;
>  }
>  
> +.tooltipRows row{
> +  font-size: 0.5em;

Can you use something other than font-size? That seems very expensive.

Won't height or max-height work?
Attachment #8731232 - Flags: review?(aleth) → review-
(Reporter)

Updated

3 years ago
Attachment #8731232 - Flags: feedback+
(Assignee)

Comment 6

3 years ago
Sorry for the delay ( was busy with exams, boring student life -_- !)

I made the requested changes, but I am stuck at a small problem ( being horrible with CSS, but trying to improve )

1) I used setAttribute() for the opacity transition  i.e fadeIn , hurray it worked.

2) for grow, I tried replacing font-size with height/min-height/max-height/flex-grow, but it didn't work out, so this is my problem. I studied the blist for reference , understood the height transition, but I think this situation is slightly different. Following is the detailed structure of the tooltip for help:

---------------------------------------    <--- #largeTooltip
| user details, status                |
| blah blah blah                      |
| ----------------------------------- <-- .tooltipRows ( grid containing 2 columns with 2nd column flex=1)                                        
||                                   ||
||                                   ||
||                                   ||
| ----------------------------------- |
---------------------------------------

When the user hovers over a participant name , the info is fetched and dynamically inserted inside the inner grid .tooltipRows

the dynamically created row structure:

| label description |  , these row have attribute align = baseline set.

Waiting for your reply, so that this bug can be solved soon.
(Reporter)

Comment 7

3 years ago
If you merge two buddies into one contact, and then look at the tooltip for the contact, you will see there is already a working transition for the height at the bottom of the tooltip (without your patch). Maybe you can use similar code to that?
You need to log in before you can comment on or make changes to this bug.