Issue #3302405 by agami4: Improve profile preview behaviour

[Agamich-FE]

Problem

In order not to have a "pop-up disco" with profile preview:

• https://user-images.githubusercontent.com/16086340/183505066-234fb54f-51d5-4195-8d3e-1942374b6e79.mov

Can we slow the interface down a bit and improve the animation so it doesn't react the second the user hovers over it?

• https://user-images.githubusercontent.com/16086340/183505128-00d1a36e-fc95-4b99-b243-f9ce4ccd469d.mov

Solution

Improve behaviour to the profile preview popup.

Issue tracker

• https://getopensocial.atlassian.net/browse/PROD-18896
• https://www.drupal.org/project/social/issues/3302405

Theme issue tracker

• https://www.drupal.org/project/socialblue/issues/3302506

How to test

• [ ] Go to the home page.
• [ ] Hover on the profile user avatar.

Definition of done

Before merge

• [ ] Code/peer review is completed
• [ ] All commit messages are clear and clean. If applicable a rebase was performed
• [ ] All automated tests are green
• [ ] Functional/manual tests of the acceptance criteria are approved
• [ ] All acceptance criteria were met
• [ ] New features or changes to existing features are covered by tests, either unit (preferably) or behat
• [ ] Update path is tested. New hook_updates should respect update order, right naming convention and consider hook_post_update code
• [ ] Module can be safely uninstalled. Update/implement hook_uninstall and make sure that removed configuration or dependencies are removed/uninstalled
• [ ] This pull request has all required labels (team/type/priority)
• [ ] This pull request has a milestone
• [ ] This pull request has an assignee (if applicable)
• [ ] Any front end changes are tested on all major browsers
• [ ] New UI elements, or changes on UI elements are approved by the design team
• [ ] New features, or feature changes are approved by the product owner

After merge

• [ ] Code is tested on all branches that it has been cherry-picked
• [ ] Update hook number might need adjustment, make sure they have the correct order
• [ ] The Drupal.org ticket(s) are updated according to this pull request status

Screenshots

before:

after:

Release notes

Profile preview pop up now takes 1 seconds before appearing, after an user hover it, previously it was immediately (200ms) showing the pop-up- leading to a messy UX. Also changed hover behaviour for the user name from primary color to underline.

Change Record

N/A

Translations

N/A

[mergeable[bot]]

Thanks for contributing towards Open Social! A maintainer from the @goalgorilla/maintainers group might not review all changes from all teams/contributors. Please don't be discouraged if it takes a while. In the meantime, we have some automated checks running and it might be that you will see our comments with some tips or requests to speed up the review process. :blush:

[tbsiqueira]

Hi @agami4, thank you for your contribution. Can you please add more explanations to the ticket? The screenshot is a bit confusing, and there is even a bug on it. ( I understand that you won't be able to copy a "slow down" animation into the screen shot, maybe a GIF might do the trick? if not possible that's ok )

Release notes are also not informing what is changing, we should aim something like :

Profile preview pop up now takes 2 seconds before appearing, after an user hover it, previously it was immediately showing the pop-up- leading to a messy UX

What you think? BTW the videos are one excellent touch to the extra information.

[Agamich-FE]

@tbsiqueira, I've added gifs and a new release note. Please check

[open-social-tugboat]

Tugboat has finished building the preview for this pull request!

Link:

• https://pr3065-ccjfbeguamfsgpkfegei786ldzzlvgdu.tugboatqa.com

Dashboard:

• https://dashboard.tugboatqa.com/62f171cca476796b1ccba0cb

[ribel]

@agami4 Failing behat test looks like false positive, but re-run didn't help, so we need to investigate it or merge main branch here again.

[ribel]

🍒-picked to 11.4.x