RCUE Navigation

https://fedorahosted.org/freeipa/ticket/3902

5 files changed, 50 insertions, 245 deletions

diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 440f5a65b..126c51ed7 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -194,172 +194,6 @@ textarea[readonly] {
     word-wrap: break-word;
 }
 
-/* ---- Navigation ---- */
-.navigation {
-    position: absolute;
-    top: 34px;
-    left: 6px;
-    right: 6px;
-    height: 102px;
-}
-
-.navigation ul {
-    list-style-type: none;
-}
-
-.navigation .submenu li {
-    float: left;
-    position: relative;
-    list-style: none;
-    white-space:nowrap;
-}
-/*
-.navigation.tabs-3 {
-    height: 150px;
-}*/
-
-.submenu {
-    width: 100%;
-/*    min-height: 4em;
-    background: transparent;*/
-}
-
-/* ---- Navigation level 1 ---- */
-
-.menu-level-1 > ul {
-    height: 38px;
-    padding: 34px 0 0;
-    margin: 0;
-/*    border: none;*/
-}
-
-.menu-level-1 > ul > li {
-    height: 36px;
-    padding: 0 18px;
-    border: 1px solid #A0A0A0;
-    border-bottom:none;
-    background-image: url(images/mainnav-tab-off.png);
-    margin: 0 0.4em 0 0;
-    text-align: center;
-    vertical-align:baseline;
-}
-
-.menu-level-1 > ul > li.ui-state-hover,
-.menu-level-1 > ul > li:hover {
-    background: url(images/hover-tab.png);
-}
-
-.menu-level-1 > ul > li.selected {
-    padding-bottom: 1px;
-    background-image: url(images/mainnav-tab-on.png);
-}
-
-.menu-level-1 > ul > li > a {
-    font-family: "Overpass Bold","Liberation Sans", Arial, sans-serif;
-    min-width: 5em;
-    line-height: 38px;
-    color: #858585;
-    margin: 0 auto;
-    text-align:center;
-    font-size:1.5em;
-    text-shadow: 1px 1px 0 #FFFFFF;
-}
-
-.menu-level-1 > ul > li.selected > a {
-    color: #1e5e05;
-}
-
-
-/* ---- Navigation level 2 ---- */
-
-.menu-level-2 {
-    display: block;
-    border-width: 0;
-    padding: 0 0 0 0;
-    background-color: transparent;
-}
-
-.menu-level-2 > ul {
-    padding: 5px 24px 1px;
-    margin: 0;
-    height: 25px;
-}
-
-.menu-level-2 > ul > li {
-    width: auto;
-    margin: 0;
-    color: white;
-    padding-top: 3px;
-}
-
-.menu-level-2 > ul > li.selected {
-    background: url(images/nav-arrow.png) no-repeat scroll center 2.1em transparent !important;
-    height: 31px;
-    border: none;
-    margin: 0;
-}
-
-.menu-level-2 > ul > li > a {
-    width:auto;
-    padding: 0.3em 0.8em ;
-    -moz-border-radius: 2em !important;
-    -webkit-border-radius: 2em !important;
-    border-radius: 2em !important;
-    color: #333333;
-    font-size: 1em;
-    font-family: "Liberation Sans", Arial, Sans;
-    margin: 0 0.3em;
-}
-
-.menu-level-2 > ul > li.selected > a,
-.menu-level-2 > ul > li > a:hover {
-    background-color:#EEEEEE;
-    color: #164304;
-        text-shadow: 1px 1px 0 #FFFFFF;
-
-}
-
-/* ---- Navigation level 3 ---- */
-.menu-level-3 {
-    height: 28px;
-}
-
-.menu-level-3 > ul {
-    padding: 0 22px 0.1em;
-}
-
-.menu-level-3 > ul > li {
-    margin: 0 2.4em 1px 0;
-}
-
-.menu-level-3 > ul > li > a {
-    width: auto;
-    margin: 0;
-    padding: 0.3em 0 0.3em 0;
-    font-family: "Overpass", "Liberation Sans", Arial, sans-serif;
-    font-size: 1.2em;
-    text-transform: uppercase;
-    color: #858585;
-}
-
-.menu-level-3 > ul > li.selected > a {
-    font-family: "Overpass Bold", "Liberation Sans", Arial, sans-serif;
-    color: #1e5e05;
-}
-
-/* ---- Content ---- */
-.content {
-    position: absolute;
-    top: 151px;
-    left: 6px;
-    right: 6px;
-    bottom: 10px;
-}
-
-.content.nav-space-3 {
-    top: 175px;
-}
-
 /* ---- Entity ---- */
 
 .entity {
diff --git a/install/ui/src/freeipa/navigation/Menu.js b/install/ui/src/freeipa/navigation/Menu.js
index a5e96d3c9..17678a59f 100644
--- a/install/ui/src/freeipa/navigation/Menu.js
+++ b/install/ui/src/freeipa/navigation/Menu.js
@@ -106,6 +106,7 @@ return declare([Evented],
             if (!item.title) item.title = facet.title;
         }
 
+        item.hidden = !!item.hidden;
         item.selected = false;
 
         // check parent
diff --git a/install/ui/src/freeipa/widgets/App.js b/install/ui/src/freeipa/widgets/App.js
index bdd17efac..e89d4cc61 100644
--- a/install/ui/src/freeipa/widgets/App.js
+++ b/install/ui/src/freeipa/widgets/App.js
@@ -107,7 +107,7 @@ define(['dojo/_base/declare',
             this._render_header();
 
             this.menu_node = this.menu_widget.render();
-            construct.place(this.menu_node, this.domNode);
+            construct.place(this.menu_node, this.header_node);
 
             this.content_node = construct.create('div', {
                 'class': 'content'
@@ -116,7 +116,7 @@ define(['dojo/_base/declare',
 
         _render_header: function() {
             this.header_node = construct.create('div', {
-                'class': 'header'
+                'class': 'header rcue'
             }, this.domNode);
 
             // logo
diff --git a/install/ui/src/freeipa/widgets/Menu.js b/install/ui/src/freeipa/widgets/Menu.js
index 2f78051f8..e8ffcf0f1 100644
--- a/install/ui/src/freeipa/widgets/Menu.js
+++ b/install/ui/src/freeipa/widgets/Menu.js
@@ -30,8 +30,9 @@ define(['dojo/_base/declare',
         'dojo/query',
         'dojo/Evented',
         'dojo/on',
+        '../jquery',
         '../ipa'], function(declare, array, lang, dom, construct, prop, dom_class,
-                            dom_style, attr, query, Evented, on, IPA) {
+                            dom_style, attr, query, Evented, on, $, IPA) {
 
     return declare([Evented], {
         /**
@@ -86,7 +87,7 @@ define(['dojo/_base/declare',
                 'class': 'navbar-inner'
             }, this.domNode);
             if (this.menu) {
-                this._render_children(null, this.innerNode, 1);
+                this._render_children(null, null, this.innerNode, 1);
             }
             return this.domNode;
         },
@@ -101,9 +102,12 @@ define(['dojo/_base/declare',
         _render_level_container: function(node, level) {
 
             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';
 
             var cont = construct.create('ul', {
-                'class': 'nav ' + lvl_class
+                'class': type_cls + ' ' + lvl_class
             }, node);
             return cont;
         },
@@ -115,20 +119,33 @@ define(['dojo/_base/declare',
 
             var self = this;
             var click_handler = function(event) {
+                if (event.defaultPrevented) return;
                 self.item_clicked(menu_item, event);
                 event.preventDefault();
             };
 
-            var li_node = construct.create('li', {
+            var item_node = construct.create('li', {
                 'data-name': menu_item.name,
                 click: click_handler
-            }, container);
+            });
+            var a_node = construct.create('a', {}, item_node);
+
+            var children = this._get_children(menu_item);
+            if (level > 1 && children.total > 0) {
+                dom_class.add(item_node, 'dropdown-submenu');
+                dom_class.add(a_node, 'dropdown-toggle');
+                prop.set(item_node, 'onclick', undefined);
+                attr.set(a_node, 'data-toggle', 'dropdown');
+                attr.set(a_node, 'data-target', '#');
+                $(a_node).dropdown();
+            }
 
-            var a_node = construct.create('a', {}, li_node);
-            this._update_item(menu_item, li_node);
+            this._update_item(menu_item, item_node);
 
              // create submenu
-            this._render_children(menu_item, container, level + 1);
+            this._render_children(menu_item, children, item_node, level + 1);
+
+            construct.place(item_node, container);
         },
 
         /**
@@ -140,11 +157,11 @@ define(['dojo/_base/declare',
          * @param {HTMLElement} container
          * @param {number} level
          */
-        _render_children: function(menu_item, container, level) {
+        _render_children: function(menu_item, children, container, level) {
 
-            var name = menu_item ? menu_item.name : null;
-            var children = this.menu.items.query({ parent: name },
-                                 { sort: [{attribute:'position'}]});
+            if (children === null) {
+                children = this._get_children(menu_item);
+            }
 
             if (children.total > 0) {
                 var item_container = this._render_level_container(container, level);
@@ -157,59 +174,12 @@ define(['dojo/_base/declare',
             }
         },
 
-//         /**
-//          * Render children of menu_item
-//          * Top level items are rendered if menu_items is null
-//          *
-//          * @protected
-//          * @param {navigation.MenuItem|null} menu_item
-//          * @param {HTMLElement} node
-//          * @param {number} level
-//          */
-//         _render_children2: function (menu_item, node, level) {
-//
-//             var self = this;
-//             var name = menu_item ? menu_item.name : null;
-//             var children = this.menu.items.query({ parent: name },
-//                                  { sort: [{attribute:'position'}]});
-//
-//             var lvl_class = this._get_lvl_class(level);
-//
-//             if (children.total > 0) {
-//                 var menu_node = construct.create('div', {
-//                     'class': 'submenu ' + lvl_class
-//                     //style: { display: 'none' }
-//                 });
-//
-//                 if (menu_item) {
-//                     attr.set(menu_node, 'data-item', menu_item.name);
-//                 }
-//
-//                 var ul_node = construct.create('ul', null, menu_node);
-//
-//                 array.forEach(children, function(menu_item) {
-//
-//                     var click_handler = function(event) {
-//                         self.item_clicked(menu_item, event);
-//                         event.preventDefault();
-//                     };
-//
-//                     var li_node = construct.create('li', {
-//                         'data-name': menu_item.name,
-//                         click: click_handler
-//                     }, ul_node);
-//
-//                     var a_node = construct.create('a', {}, li_node);
-//
-//                     this._update_item(menu_item, li_node);
-//
-//                     // create submenu
-//                     this._render_children(menu_item, menu_node, level + 1);
-//                 }, this);
-//
-//                 construct.place(menu_node, node);
-//             }
-//         },
+        _get_children: function(menu_item) {
+            var name = menu_item ? menu_item.name : null;
+            var children = this.menu.items.query({ parent: name, hidden: false },
+                                 { sort: [{attribute:'position'}]});
+            return children;
+        },
 
         _get_lvl_class: function(level) {
             return this.level_class + '-' + level;
@@ -238,7 +208,7 @@ define(['dojo/_base/declare',
             }
 
             dom_class.toggle(li_node, 'disabled', !!menu_item.disabled);
-            dom_class.toggle(li_node, 'selected', menu_item.selected);
+            dom_class.toggle(li_node, 'active', menu_item.selected);
             dom_style.set(li_node, {
                 display: menu_item.hidden ? 'none': 'default'
             });
diff --git a/ipatests/test_webui/test_navigation.py b/ipatests/test_webui/test_navigation.py
index 419be19db..e656b0f45 100644
--- a/ipatests/test_webui/test_navigation.py
+++ b/ipatests/test_webui/test_navigation.py
@@ -103,8 +103,8 @@ class test_navigation(UI_driver):
         self.navigate_by_menu('identity/netgroup', False)
         self.navigate_by_menu('identity/service', False)
         if self.has_dns():
+            self.navigate_by_menu('identity/dns/dnsconfig', True)
             self.navigate_by_menu('identity/dns', False)
-            self.navigate_by_menu('identity/dns/dnsconfig', False)
             self.navigate_by_menu('identity/dns/dnszone', False)
         else:
             self.assert_menu_item('identity/dns', False)
@@ -116,32 +116,32 @@ class test_navigation(UI_driver):
         self.navigate_by_menu('policy')
         self.navigate_by_menu('policy/hbac', False)
         self.navigate_by_menu('policy/hbac/hbacsvc', False)
-        self.navigate_by_menu('policy/hbac/hbacrule', False)
-        self.navigate_by_menu('policy/hbac/hbacsvcgroup', False)
-        self.navigate_by_menu('policy/hbac/hbactest', False)
+        self.navigate_by_menu('policy/hbac/hbacrule')
+        self.navigate_by_menu('policy/hbac/hbacsvcgroup')
+        self.navigate_by_menu('policy/hbac/hbactest')
         self.navigate_by_menu('policy/sudo', False)
         self.navigate_by_menu('policy/sudo/sudorule', False)
-        self.navigate_by_menu('policy/sudo/sudocmd', False)
-        self.navigate_by_menu('policy/sudo/sudocmdgroup', False)
+        self.navigate_by_menu('policy/sudo/sudocmd')
+        self.navigate_by_menu('policy/sudo/sudocmdgroup')
         self.navigate_by_menu('policy/automount', False)
         self.navigate_by_menu('policy/pwpolicy', False)
         self.navigate_by_menu('policy/krbtpolicy', False)
         self.navigate_by_menu('policy/selinuxusermap', False)
         self.navigate_by_menu('policy/automember', False)
-        self.navigate_by_menu('policy/automember/amhostgroup', False)
-        self.navigate_by_menu('policy/automember/amgroup', False)
+        self.navigate_by_menu('policy/automember/amhostgroup')
+        self.navigate_by_menu('policy/automember/amgroup')
         self.navigate_by_menu('ipaserver')
         self.navigate_by_menu('ipaserver/rolebased', False)
         self.navigate_by_menu('ipaserver/rolebased/privilege', False)
-        self.navigate_by_menu('ipaserver/rolebased/role', False)
-        self.navigate_by_menu('ipaserver/rolebased/permission', False)
+        self.navigate_by_menu('ipaserver/rolebased/role')
+        self.navigate_by_menu('ipaserver/rolebased/permission')
         self.navigate_by_menu('ipaserver/selfservice', False)
         self.navigate_by_menu('ipaserver/delegation', False)
         self.navigate_by_menu('ipaserver/idrange', False)
         if self.has_trusts():
             self.navigate_by_menu('ipaserver/trusts', False)
             self.navigate_by_menu('ipaserver/trusts/trust', False)
-            self.navigate_by_menu('ipaserver/trusts/trustconfig', False)
+            self.navigate_by_menu('ipaserver/trusts/trustconfig')
         else:
             self.assert_menu_item('ipaserver/trusts', False)
         self.navigate_by_menu('ipaserver/config', False)