A bit of clean of menu.js for the chat tab

client/galaxy/scripts/layout/menu.js

@@ -1,5 +1,5 @@
 /** Masthead Collection **/
-define(['mvc/tours', 'mvc/ui/ui-modal'], function( Tours, Modal ) {
+define(['mvc/tours', 'layout/generic-nav-view'], function( Tours, GenericNav ) {
 var Collection = Backbone.Collection.extend({
     model: Backbone.Model.extend({
         defaults: {
@@ -14,52 +14,8 @@ var Collection = Backbone.Collection.extend({
         //
         // Chat server tab
         //
-        this.add({
-            id              : 'show-chat-online',
-            icon            : 'fa-comment-o',
-            tooltip         : 'Chat Online',
-            visible         : false,
-            onclick         : function( e ) {
-                // make modal
-                var host =  window.Galaxy.config.communication_server_host,
-                    port = window.Galaxy.config.communication_server_port,
-                    username = escape(window.Galaxy.user.attributes.username),
-                    persistent_communication_rooms = escape(window.Galaxy.config.persistent_communication_rooms),
-                    query_string = "?username=" + username + "&persistent_communication_rooms=" + persistent_communication_rooms,
-                    src = host + ":" + port + query_string,
-                    $el_chat_modal_header = null,
-                    $el_chat_modal_body = null,
-                    header_template = "",
-                    template = "<iframe class='f-iframe fade in' src=" + src + " style='width:100%; height:100%;'> </iframe>";
-                // deletes the chat modal if already present and create one
-                if( $( '.modal-dialog' ).find( 'iframe' ).parent().parent().parent().length > 0 ) {
-                    $el_chat_modal = $( '.modal-dialog' ).find( 'iframe' ).parent().parent().parent().parent().remove();
-                }
-                this.modal = new Modal.View({
-                    body            : template,
-                    height          : 350,
-                    width           : 600,
-                    closing_events  : true,
-                    title_separator : false
-                });
-                // show modal
-                this.modal.show();
-                $el_chat_modal_header = $($('.modal-dialog').find('iframe').parent().parent().children()[0]);
-                $el_chat_modal_body = $($('.modal-dialog').find('iframe').parent().parent().children()[1]);
-                // adjusts the css of bootstrap modal for chat
-                header_template  = '<i class="fa fa-comment" aria-hidden="true" title="Communicate with other users"></i>' +
-                              '<i class="fa fa-times close-modal" aria-hidden="true" style="float: right; cursor: pointer;" title="Close"></i>';
-                $el_chat_modal_header.css( 'padding', '3px' );
-                $el_chat_modal_body.css( 'padding', '2px' );
-                $el_chat_modal_header.find( 'h4' ).remove();
-                $el_chat_modal_header.removeAttr( 'min-height' ).removeAttr( 'padding' ).removeAttr( 'border' );
-                $el_chat_modal_header.append(header_template);
-                // click event of the close button for chat
-                $( '.close-modal' ).click(function( e ) {
-                    $( '.modal' ).css( 'display', 'none' );
-                });
-            }
-        });
+        var extendedNavItem = new GenericNav.GenericNavView();
+        this.add(extendedNavItem.render()); 
 
         //
         // Analyze data tab.

client/galaxy/style/less/base.less

@@ -1719,3 +1719,23 @@ div.toolTitleNoSection
 #for_bears {
     display: none;
 }
+
+// communication channel bootstrap modal 
+
+.chat-modal {
+    overflow: hidden;
+}
+
+.modal-header-body {
+    padding: 2px;
+}
+
+.communication-iframe {
+    width: 100%;
+    height: 100%;
+}
+
+.close-modal {
+    float: right; 
+    cursor: pointer;
+}