diff options
author | Phil Hughes <me@iamphill.com> | 2016-03-11 12:47:18 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2016-03-11 12:47:47 +0300 |
commit | 25f392eab734bd68da377a61c608bca73355ba43 (patch) | |
tree | 2d453d2e117939d9179e96b9798a55a34d17d6e2 /app | |
parent | 57a9d07716b39206c683430ef65d00af32fd9811 (diff) |
Added 'surprise' animation
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/awards_handler.coffee | 20 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/awards.scss | 23 |
2 files changed, 34 insertions, 9 deletions
diff --git a/app/assets/javascripts/awards_handler.coffee b/app/assets/javascripts/awards_handler.coffee index da102db39c2..03a44874161 100644 --- a/app/assets/javascripts/awards_handler.coffee +++ b/app/assets/javascripts/awards_handler.coffee @@ -9,7 +9,7 @@ class @AwardsHandler $("html").on 'click', (event) -> if !$(event.target).closest(".emoji-menu").length if $(".emoji-menu").is(":visible") - $(".emoji-menu").hide() + $(".emoji-menu").removeClass "is-visible" $(".awards") .off "click" @@ -26,23 +26,29 @@ class @AwardsHandler showEmojiMenu: -> if $(".emoji-menu").length - $(".emoji-menu").show() - $("#emoji_search").focus() + if $(".emoji-menu").is ".is-visible" + $(".emoji-menu").removeClass "is-visible" + $("#emoji_search").blur() + else + $(".emoji-menu").addClass "is-visible" + $("#emoji_search").focus() else $('.js-add-award').addClass "is-loading" $.get "/emojis", (response) => $('.js-add-award').removeClass "is-loading" $(".js-award-holder").append response - $(".emoji-menu").show() - $("#emoji_search").focus() - @setupSearch() + setTimeout => + $(".emoji-menu").addClass "is-visible" + $("#emoji_search").focus() + @setupSearch() + , 200 addAward: (emoji) -> emoji = @normilizeEmojiName(emoji) @postEmoji emoji, => @addAwardToEmojiBar(emoji) - $(".emoji-menu").hide() + $(".emoji-menu").removeClass "is-visible" addAwardToEmojiBar: (emoji) -> @addEmojiToFrequentlyUsedList(emoji) diff --git a/app/assets/stylesheets/pages/awards.scss b/app/assets/stylesheets/pages/awards.scss index 6a19562e592..28994e60baa 100644 --- a/app/assets/stylesheets/pages/awards.scss +++ b/app/assets/stylesheets/pages/awards.scss @@ -11,14 +11,25 @@ position: absolute; top: 100%; left: 0; + margin-top: 3px; z-index: 1000; - display: none; min-width: 160px; font-size: 14px; background-color: $award-emoji-menu-bg; border: 1px solid $award-emoji-menu-border; border-radius: $border-radius-base; 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 { padding: $gl-padding; @@ -56,9 +67,17 @@ background: none; border: 0; border-radius: $border-radius-base; + transition: transform .15s cubic-bezier(.3, 0, .2, 2); &:hover { - background-color: $white-dark; + background-color: transparent; + outline: 0; + transform: scale(1.3); + } + + &:focus, + &:active { + outline: 0; } .emoji-icon { |