facet nesting

correctly nest the facet groups
change 'parent' to 'member of' for facet group

2 files changed, 34 insertions, 6 deletions

diff --git a/install/static/entity.js b/install/static/entity.js
index a6f31e84b..7f8d1ec87 100644
--- a/install/static/entity.js
+++ b/install/static/entity.js
@@ -520,22 +520,35 @@ function ipa_facet_create_action_panel(container) {
                     }
                     var li = facet_groups[facet_group];
                     var link =  build_link(other_facet, other_facet.label)
+                    link.addClass('facet-group-member');
                     li.after(link );
+                    /*
+                      If we are on the current facet, we make the text black, non-clickable,
+                      add an icon and make suer the action controls are positioned underneath it.
+                     */
                     if ( other_facet.name === ipa_current_facet( entity)){
                         var text = link.text();
                         link.text('');
                         link.append($('<ul>').
-                                    append('<li>'+ text+'</li>').
+                                    append($('<li />',{
+                                        'class': 'entity-facet-selected',
+                                        html:  $('<span />',{
+                                            'class':'input_link',
+                                            html:'<span class="ui-icon ui-icon-triangle-1-e" />'+ text
+                                        })})).
                                     append($('<li/>',{
                                         html:$('<span />',{
-                                            class:"action-controls"})})));
+                                            class:"action-controls"
+                                        })
+                                    }))
+                                   );
                     }
                     facet_groups[facet_group] = li.next();
-
                 } else {
-                    ul.append(build_link(other_facet, other_facet.label));
+                    var innerlist = $('<ul/>').appendTo(ul);
+                    innerlist.append(build_link(other_facet, other_facet.label));
                     if ( other_facet.name === ipa_current_facet( entity)){
-                        ul.append($('<li><span class="action-controls"/></li>'));
+                        innerlist.append($('<li class="entity-facet"><span class="action-controls"  /></li>'));
                     }
                 }
             }
diff --git a/install/static/ipa.css b/install/static/ipa.css
index 85ec91f39..455781b1c 100644
--- a/install/static/ipa.css
+++ b/install/static/ipa.css
@@ -465,12 +465,20 @@ span.main-separator{
     text-transform: none;
 }
 
+.action-panel li.entity-facet-selected {
+    font-family: "FreeWayBold", "Liberation Sans", Arial, Sans;
+    color: black;
+    text-transform: uppercase;
+    cursor: pointer;
+}
+
 .action-panel li.entity-facet-disabled {
     font-family: "Liberation Sans",Arial,sans-serif;
     color: gray;
     cursor: default;
     text-decoration: none;
     text-transform: none;
+
 }
 
 .action-panel li.entity-facet-relation-label {
@@ -479,8 +487,14 @@ span.main-separator{
     cursor: default;
     text-transform: uppercase;
     font-size: 1.2em;
+    margin-left:1.8em;
 }
 
+.action-panel li.facet-group-member {
+    margin-left:3.6em;
+}
+
+
 .action-button {
     background: none;
     background-image:none;
@@ -489,7 +503,8 @@ span.main-separator{
 }
 
 .action-controls {
-    padding-left: 2em;
+    position: relative;
+    display:inline;
 }
 
 .client {