Award emoji button smiley animation

What does this MR do?

It adds a changing smiley (neutral to positive) animation to the new award emoji button.

Are there points in the code the reviewer needs to double check?

Why was this MR needed?

to motivate users to use award emoji

Screenshots (if relevant)

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• Documentation created/updated
• API support added
• Tests
  • Added for this feature/bug
  • All builds are passing
• Conform by the merge request performance guides
• Conform by the style guides
• Branch has no merge conflicts with master (if it does - rebase it please)
• Squashed related commits together

What are the relevant issue numbers?

cc: @victorwu @MadLittleMods @tauriedavis @annabeldunstone

mentioned in merge request !10124 (merged)

added 1 commit

• 313bd185 - improved colors

Compare with previous version

just for fun :)

related to https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/10124 (will prob have merge conflicts with it)

assigned to @annabeldunstone

added emoji label

💙 Looooove this. We should make sure it goes back to the inactive state once you've selected an emoji though (right now it stays on the color icon). Also- were you able to test this in IE11 by any chance?

@dimitrieh are there any other places we can add these fun little interactions?

added 19 commits

• 313bd185...bd90f502 - 18 commits from branch master
• 6140c2ed - Added award emoji animation and improved active state

Compare with previous version

added 19 commits

• 313bd185...bd90f502 - 18 commits from branch master
• 6140c2ed - Added award emoji animation and improved active state

Compare with previous version

@annabeldunstone thanks :) this basically has taken inspiration from slack with

Lots of places in the long run ^^ the most prominent of all i think the "mark done" button.. which i had a slightly more difficult example for here: https://gitlab.com/gitlab-org/gitlab-ce/issues/24831#note_18867591

but let's keep this mr to itself.. and see if the effect will snowball into new places where we want this 😸

right now it stays on the color icon

that's a bug.. mmhm and it seems to be related to this:

the emoji button seems keep the is-active class even when its not active anymore.. which is weird. Probably a small thing in app/assets/javascripts/awards_handler.js.. could you perhaps take a look?

rebased for changes with https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/10124

we have a small additional problem with the tooltip:

added 1 commit

• ec27474d - added same animation to award emoji in notes buttons

Compare with previous version

@annabeldunstone I added the same thing to the notes.. (couldn't leave those out of course!)

though it has the same .is-active problem. I intentionally added the class .is-active to the list with things like :hover cause it then reacts in the same way as it does on slack.. the button stays active.. while the menu is open.. so its the script that should be fixed.

mentioned in issue #24831 (closed)

Also- were you able to test this in IE11 by any chance?

seems to work the same way on ie11 win7! (tested with browserstack trial) ezgif.com-optimize

added 1 commit

• d752e343 - fix linting

Compare with previous version

the button stays active.. while the menu is open.. so its the script that should be fixed.

@fatihacet do you know why this is happening? is-active shouldn't still be there if the menu is closed

assigned to @fatihacet

also note the small tooltip problem :)

added 1 commit

• f55e719e - added 3rd is-active smiley state to enhance animation

Compare with previous version

small edit, which also hopefully fixes linting.. 3rd emoji state to improve on fidelity and satisfaction of animation when pressing the actual button and summoning the emoji menu 😄 (with this we are officially beyond the app that inspired this 🎱 )

https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/10130#note_26008276

@dimitrieh @annabeldunstone is this still a problem?

@fatihacet to my understanding it is, or would it be fixed by rebasing this on top of new changes on master since?

changed milestone to %9.1

@dimitrieh I think it would be. Let me know if you need help from me.

added 645 commits

• f55e719e...d9aca741 - 642 commits from branch master
• ae9791fd - Added award emoji animation and improved active state
• 9ed71c70 - added same animation to award emoji in notes buttons
• 273e2d63 - added 3rd is-active smiley state to enhance animation

Compare with previous version

@fatihacet this is still a problem 😉

@dimitrieh updated to remove is-active after adding emoji.

added 5 commits

• 6140c2ed - Added award emoji animation and improved active state
• ec27474d - added same animation to award emoji in notes buttons
• f55e719e - added 3rd is-active smiley state to enhance animation
• 09ef9a4c - remove is-active class after adding emoji
• 8b1f29fd - Merge branch 'award-emoji-button-smiley-animation' of gitlab.com:gitlab-org/gitl…

Compare with previous version

@psimyn works like a charm! although now it has some tests failing 😺

that last commit seems to add very much, is that intended?

assigned to @psimyn

thanks @dimitrieh - fixing the failing spinach tests now

The last commit is a merge commit (the branch I had was out of date before my changes) only changes are https://gitlab.com/gitlab-org/gitlab-ce/commit/09ef9a4cbcfef77df138689b5c5245aae5130828

@dimitrieh test worked after retry with latest branch 🤷

the tooltip overflow was an existing issue, fixed in latest commit.

added 1 commit

• 368765e8 - fix hidden tooltip on Add award button

Compare with previous version

assigned to @dimitrieh

added 1 commit

• 20594f2c - fix weird mispositioning of smiley because of reliance on absolute positioned parent

Compare with previous version

thanks a lot @psimyn

this last commit however created this glitch, because underlying objects rely on absolute positioning

fixed it with a commit

@annabeldunstone would you be able to merge this?

assigned to @annabeldunstone

thanks @dimitrieh, good catch!

LGTM! Thanks @dimitrieh & @psimyn 🚀

merged

mentioned in commit 8199ff7b

jeuj!

mentioned in issue #30863 (closed)

mentioned in issue #30909 (closed)

@dimitrieh Thank you for this! I just noticed it and it made my day. 😄