webui: change navigation from RCUE to PatternFly

Mainly html and css changes.

Second level menus are absolutely positioned and so they don't adjust container
size making other elements to overlap.

side effect partially fixes:
https://fedorahosted.org/freeipa/ticket/3435

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>

3 files changed, 116 insertions, 49 deletions

diff --git a/install/ui/src/freeipa/ipa.js b/install/ui/src/freeipa/ipa.js
index d1a02f540..ad70f9f71 100644
--- a/install/ui/src/freeipa/ipa.js
+++ b/install/ui/src/freeipa/ipa.js
@@ -318,7 +318,7 @@ var IPA = function () {
      */
     that.display_activity_icon = function() {
         that.network_call_count++;
-        $('.network-activity-indicator').css('visibility', 'visible');
+        $('.network-activity-indicator').css('display', '');
         if (that.network_call_count === 1) {
             topic.publish('network-activity-start');
         }
@@ -333,7 +333,7 @@ var IPA = function () {
         that.network_call_count--;
 
         if (0 === that.network_call_count) {
-            $('.network-activity-indicator').css('visibility', 'hidden');
+            $('.network-activity-indicator').css('display', 'none');
             topic.publish('network-activity-end');
         }
     };
@@ -583,14 +583,14 @@ IPA.reset_password = function(username, old_password, new_password) {
  */
 IPA.update_password_expiration = function() {
 
-    var now, expires, notify_days, diff, message, container;
+    var now, expires, notify_days, diff, message, container, notify;
 
     expires = IPA.whoami.krbpasswordexpiration;
     expires = expires ? datetime.parse(expires[0]) : null;
 
     notify_days = IPA.server_config.ipapwdexpadvnotify;
     notify_days = notify_days ? notify_days[0] : 0;
-
+    notify = false;
     now = new Date();
 
     container = $('.header-passwordexpires');
@@ -602,11 +602,13 @@ IPA.update_password_expiration = function() {
         diff = Math.floor(diff / 86400000);
 
         if (diff <= notify_days) {
+            notify = true;
             message = text.get('@i18n:password.expires_in');
             message = message.replace('${days}', diff);
             container.append(message);
         }
     }
+    container.toggle(notify);
 };
 
 /**
diff --git a/install/ui/src/freeipa/widgets/App.js b/install/ui/src/freeipa/widgets/App.js
index 82c0a24c4..c7924e8df 100644
--- a/install/ui/src/freeipa/widgets/App.js
+++ b/install/ui/src/freeipa/widgets/App.js
@@ -92,42 +92,71 @@ define(['dojo/_base/declare',
                 construct.place(this.dom_node, this.container_node);
             }
 
-            this._render_header();
+            this._render_navigation();
 
             this.content_node = construct.create('div', {
                 'class': 'content'
             }, this.dom_node);
         },
 
-        _render_header: function() {
-            this.header_node = construct.create('div', {
-                'class': 'header rcue'
+        _render_navigation: function() {
+
+            this.nav_node = construct.create('nav', {
+                'class': 'navbar navbar-default navbar-pf',
+                role: 'navigation'
             });
 
+            this._render_nav_header();
+            construct.place(this.header_node, this.nav_node);
+
             this._render_nav_util();
-            construct.place(this.nav_util_node, this.header_node);
+            construct.place(this.nav_util_node, this.nav_node);
 
             this.menu_node = this.menu_widget.render();
-            construct.place(this.menu_node, this.header_node);
+            construct.place(this.menu_node, this.nav_util_node);
 
-            construct.place(this.header_node, this.dom_node);
+            construct.place(this.nav_node, this.dom_node);
         },
 
-        _render_nav_util: function() {
-            this.nav_util_node = construct.create('div', {
-                'class': 'navbar utility'
+        _render_nav_header: function() {
+
+            this.header_node = construct.create('div', {
+                'class': 'navbar-header'
+            }, this.nav_node);
+
+            var button = construct.create('button', {
+                'class': 'navbar-toggle',
+                'data-toggle': 'collapse',
+                'data-target': '.navbar-collapse-21'
             });
 
-            this.nav_util_inner_node = construct.create('div', {
-                'class': 'navbar-inner'
-            }, this.nav_util_node);
+            construct.create('span', {
+                'class': 'sr-only',
+                innerHTML: 'Toggle navigation'
+            }, button);
+
+            construct.create('span', { 'class': 'icon-bar' }, button);
+            construct.create('span', { 'class': 'icon-bar' }, button);
+            construct.create('span', { 'class': 'icon-bar' }, button);
+
+            construct.place(button, this.header_node);
 
             this._render_brand();
-            construct.place(this.brand_node, this.nav_util_inner_node);
+            construct.place(this.brand_node, this.header_node);
+            return this.header_node;
+        },
+
+        _render_nav_util: function() {
+
+            this.nav_util_node = construct.create('div', {
+                'class': 'collapse navbar-collapse navbar-collapse-21'
+            }, this.nav_node);
+
+
 
             this.nav_util_tool_node = construct.create('ul', {
-                'class': 'nav pull-right'
-            }, this.nav_util_inner_node);
+                'class': 'nav navbar-nav navbar-utility'
+            }, this.nav_util_node);
 
             this.password_expires_node = construct.create('li', {
                 'class': 'header-passwordexpires'
@@ -150,7 +179,7 @@ define(['dojo/_base/declare',
 
         _render_brand: function() {
             this.brand_node = construct.create('a', {
-                'class': 'brand',
+                'class': 'navbar-brand',
                 href: '#'
             });
 
@@ -182,6 +211,19 @@ define(['dojo/_base/declare',
             return nodes;
         },
 
+        collapse_menu: function() {
+            if (this.nav_util_node) {
+                var $nav = $(this.nav_util_node);
+                if ($nav.hasClass('in')) {
+                    $nav.collapse('hide');
+                }
+            }
+        },
+
+        on_menu_item_click: function(item) {
+            this.collapse_menu();
+        },
+
         on_user_menu_click: function(item) {
 
             if (item.name === 'profile') {
@@ -193,6 +235,7 @@ define(['dojo/_base/declare',
             } else if (item.name == 'about') {
                 this.emit('about-click');
             }
+            this.collapse_menu();
         },
 
         constructor: function(spec) {
@@ -231,6 +274,7 @@ define(['dojo/_base/declare',
                 ]
             });
             on(this.user_menu, 'item-click', lang.hitch(this, this.on_user_menu_click));
+            on(this.menu_widget, 'item-select', lang.hitch(this, this.on_menu_item_click));
         }
 
     });
diff --git a/install/ui/src/freeipa/widgets/Menu.js b/install/ui/src/freeipa/widgets/Menu.js
index 1a7a3f005..df53a2aeb 100644
--- a/install/ui/src/freeipa/widgets/Menu.js
+++ b/install/ui/src/freeipa/widgets/Menu.js
@@ -78,17 +78,10 @@ define(['dojo/_base/declare',
         render: function() {
             if (this.dom_node) {
                 construct.empty(this.dom_node);
-            } else {
-                this.dom_node = construct.create('div', {
-                    'class': 'navbar primary persistent-secondary'
-                });
-            }
-            this.innerNode = construct.create('div', {
-                'class': 'navbar-inner'
-            }, this.dom_node);
-            if (this.menu) {
-                this._render_children(null, null, this.innerNode, 1);
             }
+
+            this.dom_node = this._render_children(null, null, this.dom_node, null, 1);
+
             return this.dom_node;
         },
 
@@ -96,19 +89,24 @@ define(['dojo/_base/declare',
          * Render submenu container of given level
          *
          * @protected
-         * @param {HTMLElement} node Node to add the container to.
          * @param {Number} level submenu level
          */
-        _render_level_container: function(node, level) {
+        _render_level_container: function(level, parent) {
 
             var lvl_class = this._get_lvl_class(level);
             var type_cls = 'nav';
-            if (level === 2) type_cls = 'persistent';
-            if (level > 2) type_cls = 'dropdown-menu';
+            if (level === 1) {
+                type_cls = 'nav navbar-nav navbar-primary persistent-secondary';
+            } else if (level === 2) {
+                type_cls = 'nav navbar-nav navbar-persistent';
+            } else {
+                type_cls = 'dropdown-menu';
+            }
 
             var cont = construct.create('ul', {
                 'class': type_cls + ' ' + lvl_class
-            }, node);
+            });
+
             return cont;
         },
 
@@ -143,7 +141,7 @@ define(['dojo/_base/declare',
             this._update_item(menu_item, item_node);
 
              // create submenu
-            this._render_children(menu_item, children, item_node, level + 1);
+            this._render_children(menu_item, children, null, item_node, level + 1);
 
             construct.place(item_node, container);
         },
@@ -154,24 +152,35 @@ define(['dojo/_base/declare',
          *
          * @protected
          * @param {navigation.MenuItem|null} menu_item
-         * @param {HTMLElement} container
+         * @param {Object|null} children query result
+         * @param {HTMLElement|null} item_container  container for children
+         * @param {HTMLElement|null} container container for item_container
          * @param {number} level
          */
-        _render_children: function(menu_item, children, container, level) {
+        _render_children: function(menu_item, children, item_container, container, level) {
 
             if (children === null) {
                 children = this._get_children(menu_item);
             }
 
-            if (children.total > 0) {
-                var item_container = this._render_level_container(container, level);
+            if (!item_container) {
+                item_container = this._render_level_container(level, container);
+            }
 
+            if (children.total > 0) {
                 array.forEach(children, function(menu_item) {
                     this._render_item(menu_item, item_container, level);
                 }, this);
+            }
 
+            if (container) {
                 construct.place(item_container, container);
+                // use jQuery resize to make use of window.resize throttling
+                $(window).bind('resize', lang.hitch(this, function() {
+                    this._adjust_size(container, item_container, level);
+                }));
             }
+            return item_container;
         },
 
         _get_children: function(menu_item) {
@@ -240,15 +249,10 @@ define(['dojo/_base/declare',
             // show and update selected
             array.forEach(menu_items, function(item) {
                 this._update_item(item);
-
-                // show submenu
-                var item_div = query('div[data-item=\''+item.name+'\']', this.dom_node)[0];
-                if (item_div) {
-                    dom_style.set(item_div, {
-                        display: 'block'
-                    });
-                }
             }, this);
+
+            // to force adjusting of item sizes
+            $(window).trigger('resize');
         },
 
         /**
@@ -306,6 +310,23 @@ define(['dojo/_base/declare',
          */
         item_clicked: function(menu_item/*, event*/) {
             this._item_clicked(menu_item);
+        },
+
+        /**
+         * Adjust parent size according to child size
+         * @param  {HTMLElement} parent parent menu item container
+         * @param  {HTMLElement} child child menu item container
+         * @param  {number} level level of the child menu item
+         */
+        _adjust_size: function(parent, child, level) {
+
+            if (level !== 2) return;
+
+            var child_height = dom_style.get(child, 'height');
+            var absolute = dom_style.get(child, 'position') === 'absolute';
+            if (child_height && absolute) {
+                dom_style.set(parent, 'marginBottom', child_height+'px');
+            }
         }
     });
 });
\ No newline at end of file