Added 'surprise' animationaward-emoji-design-update

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 {