Add "Pick a reaction" header title to emoji dialog box and update dis…

…play style. (publiclab#8558) * Add Title to emoji display and update display style. Add 'Pick a reaction' header to emoji dialog box. Update emoji display style Add hover effect to emojis. * change classname for div containing emojis
piyushswain · Oct 22, 2020 · 912b09f · 912b09f
1 parent 4bedb01
commit 912b09f
Showing 1 changed file with 22 additions and 11 deletions.
diff --git a/app/views/notes/_comment.html.erb b/app/views/notes/_comment.html.erb
@@ -76,18 +76,25 @@
               <i class='icon fa fa-smile-o'></i>
               <sup style="font-size: 12px;">+</sup>
             </button>
-            <div id="emoji-dropdown" style="background: #f8f8f8;" class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-              <% emoji_names, emoji_image_map = emoji_info %>
+
+            <div id="emoji-dropdown" style="background:#f8f8f8;padding:0;" class=" dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+            <p id="emoji-title" style="text-align: center;color: #586069; font-size:14px;margin:6px;">Pick your reaction</p>
+            <div id= "dropdown-divider" style="display: block;height: 0;border-top: 1px solid #e1e4e8;"></div>         
+
+            <div id="emoji-list" class="emoji-container">              
+              <% emoji_names, emoji_image_map = emoji_info %>                           
               <% emoji_names.each do |e| %>
               <% capitalized_emoji_name = e.split("-").map(&:capitalize).join %>
-              <% str = "/comment/like?comment_id=#{comment.cid}&user_id=#{current_user.uid}&emoji_type=#{capitalized_emoji_name}" %>
-              <%= link_to str, data: { method: "post", remote: true }, style: "padding: 0;" do %>
-                <img alt="React to post" class="emoji" height="20" width="20" src="<%= emoji_image_map[e] %>">
+              <% str = "/comment/like?comment_id=#{comment.cid}&user_id=#{current_user.uid}&emoji_type=#{capitalized_emoji_name}" %>               
+              <%= link_to str, data: { method: "post", remote: true }, style: "margin: 6px;" do %>                     
+                <img alt="React to post" class="emoji grow" height="20" width="20" src="<%= emoji_image_map[e] %>">                         
               <% end %>
               <% end %>
+            </div>  
+
         <% end %>
       </div>
-    </div>
+    </div>  
 
   </div>
 
@@ -201,18 +208,22 @@
 </script>
 
 <style>
-  .open>#emoji-dropdown.dropdown-menu {
+  .emoji-container {
     display: flex;
-    justify-content: space-around;
-    padding: 6px;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: start;
+    align-content:center; 
+    box-sizing: border-box;
+    padding:6px;
   }
 
   #emoji-dropdown .dropdown-menu {
-    min-width: 196px;
+    max-width: 196px;
   }
 
   .grow {
-    transition: all .1s ease-in-out;
+    transition: transform .15s cubic-bezier(.2,0,.13,2);
   }
 
   .grow:hover {