css tabs and facets

includes Makfile changes to get images to deploy

install/static/Makefile.am

@@ -1,5 +1,9 @@
 NULL =
 
+SUBDIRS =                       	\
+	images				\
+	$(NULL)
+
 appdir = $(IPA_DATA_DIR)/static
 app_DATA =                              \
 	add.js				\

install/static/entity.js

@@ -131,17 +131,19 @@ function ipa_entity_generate_views(obj_name, container)
 
     var ul = $('<ul></ul>', {'class': 'entity-views'});
 
+    //TODO replace the plus image with the correct image for each facet
     ul.append($('<li></li>', {
-        text: 'Back to Search',
         title: 'search',
         click: switch_view
-    }));
+    })).append('<img src="plus-enabled.png"/>')
+        .append('Search')  ;
 
     ul.append($('<li></li>', {
         text: 'Details',
         title: 'details',
         click: switch_view
-    }));
+    })).append('<img src="plus-enabled.png"/>')
+        .append('Details')  ;
 
     var attribute_members = ipa_objs[obj_name].attribute_members;
     for (attr in attribute_members) {
@@ -151,10 +153,10 @@ function ipa_entity_generate_views(obj_name, container)
             var label = ipa_objs[m].label;
 
             ul.append($('<li></li>', {
-                text: label,
                 title: m,
                 click: switch_view
-            }));
+            })).append('<img src="plus-enabled.png"/>')
+                .append(label);
         }
     }
 

install/static/images/Makefile.am

@@ -0,0 +1,28 @@
+NULL =
+
+appdir = $(IPA_DATA_DIR)/static
+app_DATA =                                       \
+        ui-bg_flat_65_ffffff_40x100.png          \
+        ui-bg_glass_40_111111_1x400.png          \
+        ui-bg_glass_55_1c1c1c_1x400.png          \
+        ui-bg_highlight-hard_100_f9f9f9_1x100.png\
+        ui-bg_highlight-hard_40_aaaaaa_1x100.png \
+        ui-bg_highlight-soft_50_aaaaaa_1x100.png \
+        ui-bg_inset-hard_45_cd0a0a_1x100.png     \
+        ui-bg_inset-hard_55_ffeb80_1x100.png     \
+        ui-bg_loop_8_333333_21x21.png            \
+        ui-icons_222222_256x240.png              \
+        ui-icons_4ca300_256x240.png              \
+        ui-icons_bbbbbb_256x240.png              \
+        ui-icons_ededed_256x240.png              \
+        ui-icons_ffcf29_256x240.png              \
+        ui-icons_ffffff_256x240.png              \
+	$(NULL)
+
+EXTRA_DIST =                            \
+        $(app_DATA)                     \
+        $(NULL)
+
+MAINTAINERCLEANFILES =                  \
+        *~                              \
+        Makefile.in

install/static/ipa.css

@@ -8,8 +8,14 @@
 body {
     font-family: sans-serif;
     font-size: 14pt;
+    margin: 25px;
 }
 
+/*demo page css*/
+.demoHeaders { margin-top: 2em; }
+.input_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
+.input_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
+
 a {
     text-decoration: none;
     border: 0;
@@ -175,6 +181,46 @@ span.attrhint {
 
 /*Navigation */
 
+
+.tabs1 .ui-tabs-nav{
+    padding: 0.1em;
+
+}
+
+.tabs1 .ui-tabs-nav {
+    background-image: url(Mainnav-background.png);
+}
+
+.tabs1 .ui-tabs-nav li > a:link, span.main-nav-off >  a:visited{
+    color:white;
+}
+
+.tabs1 .ui-tabs-nav li.ui-tabs-selected {
+    background-image: url(Mainnav-ontab.png);
+}
+
+.tabs1 .ui-tabs-panel { display: block; border-width: 0; padding: 0.1em 0.4em; background: none; }
+
+
+.tabs2 .ui-tabs-nav {
+    background-image: url(Subnav-background.png);
+}
+
+.tabs2 .ui-tabs-nav li{
+    background-image: url(Subnav-offbutton.png);
+    padding:0px;
+    color: white;
+    font-size: 80%;
+}
+
+.tabs2 .ui-tabs-nav li.ui-tabs-selected{
+    background-image: url(Subnav-onbutton.png);
+    padding:5px;
+    color: white;
+    font-size: 80%;
+}
+
+
 span.sub-nav-off > a:link, span.sub-nav-off >  a:visited{
     color:white;
 }
@@ -183,41 +229,11 @@ span.main-nav-off > a:link, span.main-nav-off >  a:visited{
     color:white;
 }
 
-#main-nav{
-    background-image: url(Mainnav-background.png);
-    font-size: 100%;
-}
-
-span.main-nav-on{
-    background-image: url(Mainnav-ontab.png);
-}
-
-span.main-nav-off{
-    background-image: url(Mainnav-offtab.png);
-}
-
-
 span.main-separator{
     background: #333339;
-	padding:1px;
+    padding:1px;
 }
 
-#sub-nav{
-    background-image: url(Subnav-background.png);
-    padding:5px;
-    color: white;
-    font-size: 80%;
-}
-
-span.sub-nav-on{
-    background-image: url(Subnav-onbutton.png);
-    margin: 10px;
-}
-
-span.sub-nav-off{
-    background-image: url(Subnav-offbutton.png);
-    margin: 10px;
-}
 
 
 /* Search  */
@@ -259,4 +275,13 @@ span.sub-nav-off{
 
 .search-table tr:nth-child(odd){
     background-color:#FFF;
-}
+}
+
+.entity-views{
+    list-style-type:none;
+}
+
+.entity-views li {
+    display:inline;
+}
+

install/static/navigation.js

@@ -25,16 +25,17 @@ function nav_create(nls, container, tabclass)
     if (!tabclass)
         tabclass = 'tabs';
 
-    nav_generate_tabs(nls, container, tabclass);
+    nav_generate_tabs(nls, container, tabclass, 1);
 
     var tabs = $('.' + tabclass);
     tabs.tabs({event: 'change'});
     tabs.find('ul.ui-tabs-nav a').click(_nav_tab_on_click);
 }
 
-function nav_generate_tabs(nls, container, tabclass)
+function nav_generate_tabs(nls, container, tabclass, depth)
 {
     container.addClass(tabclass);
+    container.addClass('tabs'+depth);
     container.prepend('<ul></ul>');
 
     var ul = container.children().first();
@@ -48,7 +49,7 @@ function nav_generate_tabs(nls, container, tabclass)
         if (typeof n[2] == 'function') {
             n[2](div);
         } else if (n[2].length) {
-            nav_generate_tabs(n[2], div, tabclass);
+            nav_generate_tabs(n[2], div, tabclass, depth +1 );
         }
     }
 }