Chat: Use new dropdown on /chat page

Not very pretty due to the button being higher than normal text lines,
but it'll eventually be adapted to the style for videoconference rooms.

chat/indico_chat/static/js/chat.js

@@ -18,34 +18,6 @@
 (function(global) {
     'use strict';
 
-    global.eventChatInfo = function eventChatInfo() {
-        var menu = null;
-        var links = $('#chat-info-container').data('chatLinks');
-
-        $('.js-chat-join').on('click', function(e) {
-            e.preventDefault();
-            var $this = $(this);
-            var menuItems = {};
-            $.each(links, function(i, link) {
-                var action = link.link;
-                action = action.replace(/\{server\}/g, $this.data('server'));
-                action = action.replace(/\{room\}/g, $this.data('room'));
-                menuItems[i] = {display: link.title, action: action};
-            });
-
-            if (menu && menu.isOpen()) {
-                menu.close();
-                if (menu._link == this) {
-                    return;
-                }
-            }
-            menu = new PopupMenu(menuItems, [$E(this)], 'categoryDisplayPopupList', true, false, null, null, true);
-            menu._link = this;
-            var pos = $this.offset();
-            menu.open(pos.left - 3, pos.top + $this.height());
-        });
-    };
-
     global.eventManageChat = function eventManageChat() {
 
         $('.toggle-details').on('click', function(e) {

chat/indico_chat/templates/event_page.html

@@ -44,7 +44,16 @@
                 {% endif %}
                 {% if chat_links %}
                     <td style="white-space: nowrap;">
-                        <strong><a class="dropDownMenu highlight js-chat-join" href="#" data-server="{{ server }}" data-room="{{ chatroom.jid_node }}">{% trans %}Join now!{% endtrans %}</a></strong>
+                        <div class="toolbar js-chat-links" style="margin: 0; min-height: 0;">
+                            <div class="group">
+                                <a class="i-button i-button-mini arrow event-service-right-button dropDownMenu highlight js-chat-join join-button" data-server="{{ server }}" data-room="{{ chatroom.jid_node }}" data-toggle="dropdown"><strong>{% trans %}Join{% endtrans %}</strong></a>
+                                <ul class="dropdown">
+                                    {% for chat_link in chat_links %}
+                                        <li><a class="fakeLink" href="{{ chat_link.link.format(room=chatroom.jid_node, server=server) }}" target="_blank">{{ chat_link.title }}</a></li>
+                                    {% endfor %}
+                                </ul>
+                            </div>
+                        </div>
                     </td>
                 {% endif %}
             </tr>
@@ -52,5 +61,5 @@
     </tbody>
 </table>
 <script>
-    eventChatInfo();
+    $('.js-chat-links').dropdown();
 </script>