Commit 25f392ea authored by Phil Hughes's avatar Phil Hughes

Added 'surprise' animation

parent 57a9d077
...@@ -9,7 +9,7 @@ class @AwardsHandler ...@@ -9,7 +9,7 @@ class @AwardsHandler
$("html").on 'click', (event) -> $("html").on 'click', (event) ->
if !$(event.target).closest(".emoji-menu").length if !$(event.target).closest(".emoji-menu").length
if $(".emoji-menu").is(":visible") if $(".emoji-menu").is(":visible")
$(".emoji-menu").hide() $(".emoji-menu").removeClass "is-visible"
$(".awards") $(".awards")
.off "click" .off "click"
...@@ -26,23 +26,29 @@ class @AwardsHandler ...@@ -26,23 +26,29 @@ class @AwardsHandler
showEmojiMenu: -> showEmojiMenu: ->
if $(".emoji-menu").length if $(".emoji-menu").length
$(".emoji-menu").show() if $(".emoji-menu").is ".is-visible"
$(".emoji-menu").removeClass "is-visible"
$("#emoji_search").blur()
else
$(".emoji-menu").addClass "is-visible"
$("#emoji_search").focus() $("#emoji_search").focus()
else else
$('.js-add-award').addClass "is-loading" $('.js-add-award').addClass "is-loading"
$.get "/emojis", (response) => $.get "/emojis", (response) =>
$('.js-add-award').removeClass "is-loading" $('.js-add-award').removeClass "is-loading"
$(".js-award-holder").append response $(".js-award-holder").append response
$(".emoji-menu").show() setTimeout =>
$(".emoji-menu").addClass "is-visible"
$("#emoji_search").focus() $("#emoji_search").focus()
@setupSearch() @setupSearch()
, 200
addAward: (emoji) -> addAward: (emoji) ->
emoji = @normilizeEmojiName(emoji) emoji = @normilizeEmojiName(emoji)
@postEmoji emoji, => @postEmoji emoji, =>
@addAwardToEmojiBar(emoji) @addAwardToEmojiBar(emoji)
$(".emoji-menu").hide() $(".emoji-menu").removeClass "is-visible"
addAwardToEmojiBar: (emoji) -> addAwardToEmojiBar: (emoji) ->
@addEmojiToFrequentlyUsedList(emoji) @addEmojiToFrequentlyUsedList(emoji)
......
...@@ -11,14 +11,25 @@ ...@@ -11,14 +11,25 @@
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 0; left: 0;
margin-top: 3px;
z-index: 1000; z-index: 1000;
display: none;
min-width: 160px; min-width: 160px;
font-size: 14px; font-size: 14px;
background-color: $award-emoji-menu-bg; background-color: $award-emoji-menu-bg;
border: 1px solid $award-emoji-menu-border; border: 1px solid $award-emoji-menu-border;
border-radius: $border-radius-base; border-radius: $border-radius-base;
box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175);
pointer-events: none;
opacity: 0;
transform: scale(.2);
transform-origin: 0 -45px;
transition: all .3s cubic-bezier(.87,-.41,.19,1.44);
&.is-visible {
pointer-events: all;
opacity: 1;
transform: scale(1);
}
.emoji-menu-content { .emoji-menu-content {
padding: $gl-padding; padding: $gl-padding;
...@@ -56,9 +67,17 @@ ...@@ -56,9 +67,17 @@
background: none; background: none;
border: 0; border: 0;
border-radius: $border-radius-base; border-radius: $border-radius-base;
transition: transform .15s cubic-bezier(.3, 0, .2, 2);
&:hover { &:hover {
background-color: $white-dark; background-color: transparent;
outline: 0;
transform: scale(1.3);
}
&:focus,
&:active {
outline: 0;
} }
.emoji-icon { .emoji-icon {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment