Fixed resizing issues.

The UI has been modified to fix some resizing issues:

Previously the height of facet content was roughly calculated using
resize(). Now the height can be more accurately defined in CSS.

Previously the UI width was fixed. The HTML layout and background
images have been modified to support horizontal expansion if needed.

install/ui/Makefile.am

@@ -12,6 +12,9 @@ app_DATA =                              \
 	add.js				\
 	associate.js			\
 	automount.js			\
+	background-center.png		\
+	background-left.png		\
+	background-right.png		\
 	caution.png			\
 	centered-bg.png                 \
 	check.png			\

install/ui/associate.js

@@ -717,10 +717,6 @@ IPA.association_facet = function (spec) {
         that.columns.put(column.name, column);
     };
 
-    that.resize = function(){
-        that.table.resize();
-    };
-
     that.create_column = function(spec) {
         var column = IPA.column(spec);
         if (spec.link_entity){
@@ -769,6 +765,7 @@ IPA.association_facet = function (spec) {
 
         that.table = IPA.table_widget({
             id: that.entity_name+'-'+that.other_entity,
+            'class': 'content-table',
             name: pkey_name,
             label: label,
             entity_name: that.entity_name,
@@ -863,18 +860,8 @@ IPA.association_facet = function (spec) {
 
     that.create_content = function(container) {
 
-        var span = $('<span/>', { 'name': 'association' }).appendTo(container);
+        that.table.create(container);
-
+        that.table.setup(container);
-        that.table.create(span);
-    };
-
-    that.setup = function(container) {
-
-        that.facet_setup(container);
-
-        var span = $('span[name=association]', that.container);
-
-        that.table.setup(span);
     };
 
     that.show = function() {

install/ui/details.js

@@ -407,8 +407,8 @@ IPA.details_facet = function(spec) {
 
     that.create_content = function(container) {
 
-        var details = $('<div/>', {
+        that.content = $('<div/>', {
-            'name': 'details'
+            'class': 'details-content'
         }).appendTo(container);
 
         var sections = that.sections.values;
@@ -418,7 +418,7 @@ IPA.details_facet = function(spec) {
             var header = $('<h2/>', {
                 name: section.name,
                 title: section.label
-            }).appendTo(details);
+            }).appendTo(that.content);
 
             var icon = $('<span/>', {
                 name: 'icon',
@@ -432,7 +432,7 @@ IPA.details_facet = function(spec) {
             var div = $('<div/>', {
                 name: section.name,
                 'class': 'details-section'
-            }).appendTo(details);
+            }).appendTo(that.content);
 
             header.click(function(section, div) {
                 return function() {
@@ -443,25 +443,26 @@ IPA.details_facet = function(spec) {
 
             section.create(div);
 
-            details.append('<hr/>');
+            if (i < sections.length-1) {
+                that.content.append('<hr/>');
+            }
         }
 
-
+        $('<span/>', {
-        that.resize();
+            name: 'summary',
+            'class': 'details-summary'
+        }).appendTo(container);
     };
 
-
     that.setup = function(container) {
 
         that.facet_setup(container);
 
-        var details = $('div[name=details]', that.container);
-
         var sections = that.sections.values;
         for (var i=0; i<sections.length; i++) {
             var section = sections[i];
 
-            var div = $('div.details-section[name='+section.name+']', that.container);
+            var div = $('.details-section[name='+section.name+']', that.container);
 
             section.setup(div);
         }
@@ -492,7 +493,7 @@ IPA.details_facet = function(spec) {
         var div = section.container;
 
         if (visible != div.is(":visible")) {
-            div.slideToggle('slow', that.resize);
+            div.slideToggle('slow');
         }
     };
 

install/ui/dialog.js

@@ -394,9 +394,6 @@ IPA.adder_dialog = function (spec) {
             height: '151px'
         });
 
-        that.available_table.resize = function(){
-        };
-
         var columns = that.columns.values;
         that.available_table.set_columns(columns);
 
@@ -408,9 +405,6 @@ IPA.adder_dialog = function (spec) {
             height: '151px'
         });
 
-        that.selected_table.resize = function(){
-        };
-
         that.selected_table.set_columns(columns);
 
         that.selected_table.init();

install/ui/entity.js

@@ -112,7 +112,7 @@ IPA.facet = function (spec) {
     };
 
     that.show = function() {
-        that.container.css('display', 'inline');
+        that.container.css('display', 'block');
     };
 
     that.hide = function() {
@@ -130,15 +130,6 @@ IPA.facet = function (spec) {
         return $('.content', that.container);
     };
 
-    that.resize = function(){
-        var facet_content = $('.facet-content', that.container);
-        facet_content.css('overflow-y', 'auto');
-
-        var content_max_height = $(window).height() -
-            IPA.reserved_screen_size;
-        facet_content.css('height',content_max_height);
-    };
-
     that.on_error = function(xhr, text_status, error_thrown) {
         if (that.entity.redirect_facet) {
             var current_entity = that.entity;
@@ -202,10 +193,6 @@ IPA.table_facet = function(spec) {
         return that;
     };
 
-    that.resize = function(){
-        that.table.resize();
-    };
-
     var columns = spec.columns || [];
     for (var i=0; i<columns.length; i++) {
         var column_spec = columns[i];
@@ -557,7 +544,7 @@ IPA.entity_header = function(spec) {
         }
     };
 
-    that.facet_link = function(container, other_facet) {
+    that.create_facet_link = function(container, other_facet) {
 
         var li = $('<li/>', {
             title: other_facet.name,
@@ -579,13 +566,14 @@ IPA.entity_header = function(spec) {
         }).appendTo(li);
     };
 
-    that.facet_group = function(facet_group) {
+    that.create_facet_group = function(container, facet_group) {
 
         var section = $('<span/>', {
-            'class': 'facet-tab-group'
+            'class': 'facet-group'
-        }).appendTo(that.facet_tabs);
+        }).appendTo(container);
 
-        $('<label/>', {
+        $('<div/>', {
+            'class': 'facet-group-name',
             text: facet_group.label
         }).appendTo(section);
 
@@ -596,7 +584,7 @@ IPA.entity_header = function(spec) {
         var facets = facet_group.facets.values;
         for (var i=0; i<facets.length; i++) {
             var facet = facets[i];
-            that.facet_link(ul, facet);
+            that.create_facet_link(ul, facet);
         }
     };
 
@@ -617,7 +605,7 @@ IPA.entity_header = function(spec) {
             'class': 'entity-pkey'
         }));
 
-        var search_bar = $('<span/>', {
+        var search_bar = $('<div/>', {
             'class': 'entity-search'
         }).appendTo(container);
 
@@ -651,7 +639,7 @@ IPA.entity_header = function(spec) {
         for (var i=0; i<facet_groups.length; i++) {
             var facet_group = facet_groups[i];
             if (facet_group.facets.length) {
-                that.facet_group(facet_group);
+                that.create_facet_group(that.facet_tabs, facet_group);
             }
         }
     };

install/ui/index.html

@@ -46,22 +46,36 @@
     <link rel="icon" type="image/ico" href="favicon.ico">
 </head>
 
-<body> 
+<body>
-  <div class="center-container">
+
-    <div class="header" >
+    <div id="container">
-      <span class="header-logo">
+
-        <a href="#"><img src="ipalogo.png" /><img src="ipabanner.png" /></a>
+        <div id="background">
-      </span>
+            <div id="background-header"></div>
-      <span id="header-network-activity-indicator" class="network-activity-indicator">
+            <div id="background-navigation"></div>
-        <img src="spinner_header.gif" />
+            <div id="background-left"></div>
-      </span>
+            <div id="background-center"></div>
-      <span id="loggedinas" class="header-loggedinas">
+            <div id="background-right"></div>
-        <a href="#"><span id="login_header">Logged in as</span>: <strong>user@FREEIPA.ORG</strong></a>
+        </div>
-      </span>
+
+        <div id="header">
+            <span class="header-logo">
+                 <a href="#"><img src="ipalogo.png" /><img src="ipabanner.png" /></a>
+            </span>
+            <span id="header-network-activity-indicator" class="network-activity-indicator">
+                 <img src="spinner_header.gif" />
+            </span>
+            <span id="loggedinas" class="header-loggedinas">
+                 <a href="#"><span id="login_header">Logged in as</span>: <strong>user@FREEIPA.ORG</strong></a>
+            </span>
+        </div>
+
+        <div id="navigation"></div>
+
+        <div id="content"></div>
+
     </div>
-    <div id="navigation" class="tabs"></div>
+
-    <div id="content"></div>
-  </div>
 </body>
 
 </html>

install/ui/ipa.css

@@ -11,16 +11,22 @@
 @font-face {font-family: "FreeWay"; src:url("FreeWay.otf");}
 @font-face {font-family: "FreeWayBold"; src:url("FreeWay-Bold.otf");}
 
-body{
+html {
-    overflow:hidden;
+    height: 100%;
-    background-image:url("outer-bg.png");
+}
-    background-repeat:repeat-x;
+
-    background-position:left top;
+body {
-    background-color:#FFFFFF;
+    overflow: auto;
+    background: url("outer-bg.png");
+    background-repeat: repeat-x;
+    background-position: left top;
+    background-color: #FFFFFF;
     border-width: 0;
-    font-family:"Liberation Sans",Arial,Sans;
+    font-family: "Liberation Sans",Arial,Sans;
-    font-size:11px;
+    font-size: 11px;
     margin: 0;
+    padding: 0;
+    height: 100%;
 }
 
 .network-activity-indicator {
@@ -28,11 +34,66 @@ body{
     padding: 5px;
 }
 
-.center-container {
+/* ---- Container ---- */
-        margin-left: auto;
+
-        margin-right: auto;
+#container {
-        width: 960px;
+    position: absolute;
-    background: url("centered-bg.png") no-repeat scroll 0 12.2em transparent;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 960px;
+    margin: 0 auto 0;
+}
+
+/* ---- Background ---- */
+
+#background-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 34px;
+    background: url("top-bg.png") #0C3B00;
+}
+
+#background-navigation {
+    position: absolute;
+    top: 34px;
+    left: 0;
+    right: 0;
+    height: 72px;
+    background: url("Mainnav-background.png");
+}
+
+#background-left {
+    position: absolute;
+    top: 106px;
+    left: 0;
+    width: 10px;
+    bottom: 0;
+    background: url("background-left.png");
+    background-repeat: no-repeat;
+}
+
+#background-center {
+    position: absolute;
+    top: 106px;
+    left: 10px;
+    right: 10px;
+    bottom: 0;
+    background: url("background-center.png");
+    background-repeat: repeat-x;
+}
+
+#background-right {
+    position: absolute;
+    top: 106px;
+    right: 0;
+    width: 10px;
+    bottom: 0;
+    background: url("background-right.png");
+    background-repeat: no-repeat;
 }
 
 .ui-widget {
@@ -79,57 +140,456 @@ body{
 }
 
 /*  ----  Header  ----  */
-div.header {
+#header {
-    background: url("top-bg.png") #0C3B00;
+    position: absolute;
-    width: 100%;
+    top: 0;
-    height: 3.1em;
+    left: 6px;
+    right: 6px;
+    height: 34px;
+    background: transparent;
 }
 
-div.header a {
+#header a {
     text-decoration: none;
 }
 
-div.header a:link {
+#header a:link {
     text-decoration: none;
     color: white;
 }
 
-div.header a:visited {
+#header a:visited {
     text-decoration: none;
     color: white;
 }
 
-div.header span.header-logo {
+#header span.header-logo {
     padding-left: 2em;
 }
 
-div.header span.header-logo a img {
+#header span.header-logo a img {
     border: 0;
 }
 
-div.header span.header-loggedinas {
+/* ---- Logged-in As ---- */
-    width: 96em;
+#loggedinas {
+    float: right;
+    line-height: 34px;
+    margin-right: 10px;
     color: #fff;
-    display: block;
-    padding-left: 71em;
-    margin-top: -2.6em;
-    margin-left: auto;
-    margin-right: 27.6em;
-    width: 20em;
 }
 
 /* ---- Navigation ---- */
+#navigation {
+    position: absolute;
+    top: 34px;
+    left: 6px;
+    right: 6px;
+    height: 102px;
+}
+
+#navigation.tabs-3 {
+    height: 150px;
+}
+
 div.tabs {
     width: 100%;
-    height: 100%;
     min-height: 4em;
     background: transparent;
 }
 
-#content {
+/* ---- Tabs level 1 ---- */
-    min-height: 35em;
+
+.tabs1 > .ui-tabs-nav {
+    background: transparent;
 }
 
+.tabs1 > .ui-tabs-nav > .ui-state-hover {
+	background: url("hover-tab.png");
+}
+
+.tabs1 > .ui-tabs-nav {
+    padding: 33px 0 0;
+    margin: 0;
+    border: none;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+}
+
+.tabs1 > .ui-tabs-nav li {
+    -moz-border-radius: 0 !important;
+        -webkit-border-radius: 0 !important;
+    background-image: url("Mainnav-offtab.png");
+    margin: 0 0.4em 0 0;
+    border-width: 0;
+    text-align: center;
+    vertical-align:baseline;
+        border: 1px solid #A0A0A0;
+ }
+
+.tabs1 > .ui-tabs-nav > li.ui-tabs-selected {
+    padding: 0 0;
+    background-image: url("Mainnav-ontab.png");
+    text-align: center;
+}
+
+.tabs1 > .ui-tabs-nav > li > a {
+    -moz-border-radius: 0 !important;
+        -webkit-border-radius: 0 !important;
+    font-family: "FreeWayBold", "Liberation Sans", Arial, Sans;
+    width: 5em;
+    height: 20px;
+    color: #858585;
+    margin: 0 auto;
+    text-align:center;
+    font-size:1.5em;
+        text-shadow: 1px 1px 0 #FFFFFF;
+}
+
+.tabs1 .ui-tabs-nav li > a:link, span.main-nav-off >  a:visited{
+    color: #858585;
+}
+
+.tabs1 .ui-tabs-nav li.ui-tabs-selected a{
+    color: #1e5e05;
+}
+
+.tabs1 .ui-tabs-panel {
+    display: block;
+    border-width: 0;
+    padding: 0 0 0 0;
+    background-color: transparent;
+}
+
+/* ---- Tabs level 2 ---- */
+
+.tabs2 {
+}
+
+.tabs2 > .ui-tabs-nav {
+    padding: 4px 10px 1px;
+    margin: 0;
+    height: 25px;
+    border: none;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    background: transparent;
+}
+
+.tabs2 .ui-tabs-nav li {
+    width:auto;
+    margin: 0;
+    background: none repeat scroll 0 0 transparent !important;
+    color: white;
+        border: none;
+}
+
+.tabs2 .ui-tabs-nav li.ui-tabs-selected  {
+    background: url("nav-arrow.png") no-repeat scroll center 2.2em transparent !important;
+    height: 3.1em;
+        border: none;
+        margin: 0;
+}
+
+.tabs2 .ui-tabs-nav 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;
+}
+
+.tabs2 .ui-tabs-nav li > a:link, span.main-nav-off >  a:visited {
+    color: #333333;
+}
+
+.tabs2 .ui-tabs-nav li.ui-tabs-selected a,
+.tabs2 .ui-tabs-nav li a:hover {
+    background-color:#EEEEEE;
+    color: #164304;
+        text-shadow: 1px 1px 0 #FFFFFF;
+
+}
+
+/* ---- Tabs level 3 ---- */
+
+.tabs3 {
+    height: 28px;
+}
+
+.tabs3 > .ui-tabs-nav {
+    padding:  1em 2em 0.1em 2em;
+    border: none;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    background: transparent;
+}
+
+/* ---- Content ---- */
+#content {
+    position: absolute;
+    top: 136px;
+    left: 6px;
+    right: 6px;
+    bottom: 10px;
+}
+
+#content.tabs-3 {
+    top: 175px;
+}
+
+/* ---- Entity ---- */
+
+.entity {
+    height: 100%;
+    position: relative;
+}
+
+.entity h1{
+    margin: 0 0 10px;
+/*
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+
+    -moz-border-radius: 0.5em 0.5em 0 0;
+        -webkit-border-radius: 0.5em 0.5em 0 0;
+    background: -moz-linear-gradient(center top , #EEEEEE, #DFDFDF) repeat scroll 0 0 transparent;
+    background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#DFDFDF));
+*/
+}
+
+.entity-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 70px;
+    margin: 10px 10px 0;
+}
+
+.entity-title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: gray;
+    display: block;
+}
+
+.entity-title h3 {
+    margin: 0;
+}
+
+.entity-title span {
+    display: inline;
+}
+
+.entity-pkey {
+    color:black;
+}
+
+.entity-search {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+
+.back-link {
+    cursor: pointer;
+}
+
+.entity-tabs {
+    position: absolute;
+    height: 40px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1; /* need to be above facet header */
+}
+
+.facet-group {
+    float: left;
+/*    height: 3em; */
+    margin-right: 1em;
+    position: relative;
+    height: 100%;
+}
+
+.facet-group-name {
+    height: 15px;
+}
+
+.facet-tab {
+    height: 25px;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+}
+
+.facet-tab li {
+    display: inline-block;
+    height: 25px;
+    position: relative;
+}
+
+.facet-tab li a {
+    color: #42454a;
+    background-color: #dedbde;
+    border: 1px solid #c9c3ba;
+    border-bottom: none;
+    margin: 5px 0 0;
+    padding: 0 4px 0;
+    text-decoration: none;
+    display: inline-block;
+    line-height: 19px;
+}
+
+.facet-tab li a:hover {
+    background-color: #f1f0ee;
+}
+.facet-tab li a.selected {
+    color: #000;
+    background-color: #f1f0ee;
+    font-weight: bold;
+    margin: 0;
+    padding: 5px 4px 1px;
+}
+
+.facet-tab li.settings {
+    margin-left:1em;  margin-right:1em;
+}
+
+.entity-content {
+    position: absolute;
+    top: 80px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    font-size: 10px;
+    margin: 0 10px 0;
+}
+
+.entity-content div.content-buttons {
+    float: right;
+    margin-right: 1.5em;
+}
+
+.entity-content div.content-buttons img {
+    border: 0;
+}
+
+/* ---- Facet ---- */
+
+.facet {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.facet-header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 50px;
+
+    padding: 10px 10px 10px;
+
+    border-color: #C9C3BA;
+    border-style: solid;
+    border-width: 1px;
+
+    background: -moz-linear-gradient(top,  #eeeeee,  #dfdfdf);
+    background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dfdfdf));
+}
+
+.facet-content {
+    position: absolute;
+    top: 75px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0;
+}
+
+/* ---- Search ---- */
+
+.content-table {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.content-table tbody {
+    position: absolute;
+    top: 31px;
+    left: 3px;
+    right: 4px;
+    bottom: 32px;
+}
+
+.search-controls {
+    -moz-border-radius: .7em .7em 0 0;
+        -webkit-border-radius: .7em .7em 0 0;
+    height:2.5em;
+    background: -moz-linear-gradient(top,  #eeeeee,  #dfdfdf);
+        background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dfdfdf));
+    position: relative;
+    padding: 1em 1.5em;
+    margin-top: .8em;
+}
+
+.search-table {
+    padding: 0;
+    width: 100%;
+    border: none;
+}
+
+.search-table > a:link, a:visted {
+    color:black;
+}
+
+.search-table thead tr th {
+    padding-left: 0.5em;
+    background-color:#f6f6f6;
+    color:#333333;
+    text-align: left;
+    border: 1px solid #dfdfdf;
+    height: 25px;
+}
+
+.search-table tbody td {
+    padding-left: 0.5em;
+}
+
+.search-table tfoot td {
+    padding-left: 0.5em;
+    border-top: 1px solid #dfdfdf;
+    height: 25px;
+}
+
+.search-table span[name=summary] {
+    float: left;
+    line-height: 25px;
+}
+
+.search-table span[name=pagination] {
+    float: right;
+}
+
+.search-table span[name=pagination] a {
+    cursor:pointer;
+}
+
+.search-table span[name=pagination] input[name=current_page] {
+    width: 22px;
+}
 
 ul#viewtype {
     padding-left: 2em;
@@ -196,6 +656,29 @@ hr {
     margin-top: 1em;
 }
 
+/* ---- Details ---- */
+
+.details-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 32px;
+    overflow: auto;
+    border: none;
+}
+
+.details-summary {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 29px;
+    border-top: 1px solid #DFDFDF;
+    padding-left: 0.5em;
+    line-height: 25px;
+}
+
 .details-section {
     margin-left: 4.5em;
     margin-right: 1.5em;
@@ -335,24 +818,6 @@ span.attrhint {
 }
 
 
-/*Navigation */
-.tabs1 .ui-tabs-nav .ui-state-hover {
-	background: url("hover-tab.png");
-}
-
-
-
-.tabs1 .ui-tabs-nav {
-    padding-left: 4px;
-    padding-top: 3em;
-    margin: 0;
-    border: none;
-    background-image: url("Mainnav-background.png");
-    -moz-border-radius: 0;
-        -webkit-border-radius: 0;
-    height: 3.5em;
-}
-
 .ui-tabs {
     padding:0;
 }
@@ -455,116 +920,11 @@ span.ui-icon-search {
     padding: 0.4em 1em 0.4em 2em !important;
 }
 
-[title="details"] {
-        margin-top: -.7em !important;
-        overflow: scroll;
-}
-
-
 [title=">>"] {
     margin-top: 1em !important;
 }
 
 
-.tabs1 .ui-tabs-nav li {
-    -moz-border-radius: 0 !important;
-        -webkit-border-radius: 0 !important;
-    background-image: url("Mainnav-offtab.png");
-    margin: 0 0.2em;
-    border-width: 0;
-    text-align: center;
-    vertical-align:baseline;
-        border: 1px solid #A0A0A0;
- }
-
-.tabs1 .ui-tabs-nav li.ui-tabs-selected {
-    padding: 0 0;
-    background-image: url("Mainnav-ontab.png");
-    text-align: center;
-    margin: 0 0.2em;
-}
-
-.tabs1 .ui-tabs-nav li a {
-    -moz-border-radius: 0 !important;
-        -webkit-border-radius: 0 !important;
-    font-family: "FreeWayBold", "Liberation Sans", Arial, Sans;
-    width: 5em;
-    padding: none;
-    color: #858585;
-    margin: 0 auto;
-    text-align:center;
-    font-size:1.5em;
-        text-shadow: 1px 1px 0 #FFFFFF;
-}
-
-
-.tabs1 .ui-tabs-nav li > a:link, span.main-nav-off >  a:visited{
-    color: #858585;
-}
-
-.tabs1 .ui-tabs-nav li.ui-tabs-selected a{
-    color: #1e5e05;
-}
-
-.tabs1 .ui-tabs-panel {
-    display: block;
-    border-width: 0;
-    padding: 0 0 0 0;
-    background-color: transparent;
-}
-
-.tabs2 .ui-tabs-nav {
-    padding:  0.2em 6em 0.1em 2em;
-    margin-top: 0em;
-    height:  25px;
-    background-image: url("Subnav-background.png");
-}
-
-.tabs3 .ui-tabs-nav {
-    padding:  1em 2em 0.1em 2em;
-    background: transparent;
-}
-
-.tabs2 .ui-tabs-nav li {
-    width:auto;
-    margin: 0;
-    background: none repeat scroll 0 0 transparent !important;
-    color: white;
-        border: none;
-}
-
-.tabs2 .ui-tabs-nav li.ui-tabs-selected  {
-    background: url("nav-arrow.png") no-repeat scroll center 2.2em transparent !important;
-    height: 3.1em;
-        border: none;
-        margin: 0;
-}
-
-
-.tabs2 .ui-tabs-nav 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;
-}
-
-.tabs2 .ui-tabs-nav li > a:link, span.main-nav-off >  a:visited {
-    color: #333333;
-}
-
-.tabs2 .ui-tabs-nav li.ui-tabs-selected a,
-.tabs2 .ui-tabs-nav li a:hover {
-    background-color:#EEEEEE;
-    color: #164304;
-        text-shadow: 1px 1px 0 #FFFFFF;
-
-}
-
 span.sub-nav-off > a:link, span.sub-nav-off >  a:visited{
     color:white;
 }
@@ -578,23 +938,6 @@ span.main-separator{
     padding:0.1em;
 }
 
-/* Entity */
-
-
-.entity h1{
-    margin: 0 0 10px;
-/*
-    margin-left: 0.5em;
-    margin-right: 0.5em;
-
-    -moz-border-radius: 0.5em 0.5em 0 0;
-        -webkit-border-radius: 0.5em 0.5em 0 0;
-    background: -moz-linear-gradient(center top , #EEEEEE, #DFDFDF) repeat scroll 0 0 transparent;
-    background: -webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#DFDFDF));
-*/
-}
-
-
 .action-button {
     background: none;
     background-image:none;
@@ -608,64 +951,6 @@ a.action-button-disabled {
 }
 
 
-/* Search */
-
-.search-controls {
-    -moz-border-radius: .7em .7em 0 0;
-        -webkit-border-radius: .7em .7em 0 0;
-    height:2.5em;
-    background: -moz-linear-gradient(top,  #eeeeee,  #dfdfdf);
-        background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dfdfdf));
-    position: relative;
-    padding: 1em 1.5em;
-    margin-top: .8em;
-}
-
-.search-table > a:link,a:visted{
-    color:black;
-}
-
-.search-table{
-    padding: 0;
-    width:100%;
-    border: none;
-}
-
-.search-table td{
-    padding-left: 0.5em;
-}
-
-
-.search-table th{
-    padding-left: 0.5em;
-    background-color:#f6f6f6;
-    color:#333333;
-    text-align: left;
-    border: 1px solid #dfdfdf;
-}
-
-.search-table tfoot tr td {
-    border-top: 1px solid #dfdfdf;
-    margin-top: 1em;
-    padding: 0.9em 0 0 1em;
-}
-
-.search-table span[name=summary] {
-    float: left;
-}
-
-.search-table span[name=pagination] {
-    float: right;
-}
-
-.search-table span[name=pagination] a {
-    cursor:pointer;
-}
-
-.search-table span[name=pagination] input[name=current_page] {
-    width: 22px;
-}
-
 .aci-attribute-table {
 
 }
@@ -764,10 +1049,12 @@ dl.modal dd {
         margin: 0 1em 0 0.5em;
 }
 */
-.ui-widget-content, #content {
+.ui-widget-content {
-        border:0;
+    border:0;
 }
 
+/* ---- Table ---- */
+
 table.scrollable thead {
     display: block;
 }
@@ -843,105 +1130,3 @@ table.scrollable tbody {
     float: right;
     padding-right: 1.5em;
 }
-
-.entity-header {
-    padding: 0 20px 10px;
-}
-
-.entity-header .entity-title {
-    color:gray;
-    padding-right:5em;
-}
-
-
-.entity-header .entity-title span{
-    display: inline;
-}
-
-.entity-header .entity-title .entity-pkey {
-    color:black;
-}
-
-.entity-search{
-    float:right;
-}
-
-.entity-tabs {
-}
-
-.back-link {
-    cursor: pointer;
-}
-
-.facet-tab {
-    list-style-type: none;
-    margin: 0;
-    padding: 1em 0 0.3em 0;
-    cursor: pointer;
-}
-
-.facet-tab li {
-    display: inline;
-}
-
-.facet-tab li a {
-    color: #42454a;
-    background-color: #dedbde;
-    border: 1px solid #c9c3ba;
-    border-bottom: none;
-    padding: 0.3em;
-    text-decoration: none;
-}
-
-.facet-tab li a:hover {
-    background-color: #f1f0ee;
-}
-.facet-tab li a.selected {
-    color: #000;
-    background-color: #f1f0ee;
-    font-weight: bold;
-    padding: 0.7em 0.3em 0.38em 0.3em;
-}
-
-.facet-tab-group {
-    float: left;
-/*    height: 3em; */
-    display:inline;
-    margin-right:1em;
-}
-
-
-.facet-tab li.settings {
-    margin-left:1em;  margin-right:1em;
-}
-
-.entity-content {
-    clear: both;
-    font-size: 10px;
-    padding: 0 20px 10px;
-}
-
-.entity-content div.content-buttons {
-    float: right;
-    margin-right: 1.5em;
-
-}
-
-.entity-content div.content-buttons img {
-    border: 0;
-}
-
-.facet-header {
-    padding: 10px 10px 10px;
-
-    border-color: #C9C3BA;
-    border-style: solid;
-    border-width: 1px;
-
-    background: -moz-linear-gradient(top,  #eeeeee,  #dfdfdf);
-    background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dfdfdf));
-}
-
-.facet-content {
-    margin: 10px 0 0;
-}

install/ui/navigation.js

@@ -30,6 +30,7 @@ IPA.navigation = function(spec) {
     that.container = spec.container;
     that.content = spec.content;
     that.tab_class = spec.tab_class || 'tabs';
+    that.max_depth = spec.max_depth || 3;
 
     that.tabs = [];
     that.tabs_by_name = {};
@@ -129,9 +130,11 @@ IPA.navigation = function(spec) {
 
     that.create = function() {
 
-        that._create(that.tabs, that.container, 1);
+        var container = $('<div/>').appendTo(that.container);
 
-        var tabs = $('.' + that.tab_class);
+        that._create(that.tabs, container, 1);
+
+        var tabs = $('.' + that.tab_class, that.container);
         tabs.tabs({
             select: function(event, ui) {
                 var panel = $(ui.panel);
@@ -187,6 +190,10 @@ IPA.navigation = function(spec) {
     };
 
     that.update = function() {
+        for (var i=1; i<=that.max_depth; i++) {
+            that.container.removeClass(that.tab_class+'-'+i);
+            that.content.removeClass(that.tab_class+'-'+i);
+        }
         $('.entity', that.content).css('display', 'none');
         that._update(that.tabs, that.container, 1);
     };
@@ -208,6 +215,9 @@ IPA.navigation = function(spec) {
             that._update(tab.children, tab.container, depth+1);
 
         } else if (tab.entity) {
+            that.container.addClass(that.tab_class+'-'+depth);
+            that.content.addClass(that.tab_class+'-'+depth);
+
             var entity_container = $('.entity[name="'+tab.entity.name+'"]', that.content);
             if (!entity_container.length) {
                 tab.content = $('<div/>', {
@@ -218,7 +228,7 @@ IPA.navigation = function(spec) {
                 tab.entity.create(tab.content);
             }
 
-            entity_container.css('display', 'inline');
+            entity_container.css('display', 'block');
             tab.entity.setup(tab.content);
         }
     };

install/ui/search.js

@@ -24,10 +24,6 @@
 
 /* REQUIRES: ipa.js */
 
-/* For scrolling tables, we want to make sure we leave enough room for the 
-   header and footer. */
-IPA.reserved_screen_size = 400;
-
 IPA.search_facet = function(spec) {
 
     spec = spec || {};
@@ -40,8 +36,7 @@ IPA.search_facet = function(spec) {
 
     that.search_all = spec.search_all || false;
 
-
+    function get_values() {
-    function get_values (){
         return that.table.get_selected_values();
     }
 
@@ -76,12 +71,13 @@ IPA.search_facet = function(spec) {
         }
 
         that.table = IPA.table_widget({
-            scrollable: true,
             id: entity.name+'-search',
+            'class': 'content-table',
             name: 'search',
             label: IPA.metadata.objects[entity.name].label,
             entity_name: entity.name,
-            search_all: that.search_all
+            search_all: that.search_all,
+            scrollable: true
         });
 
         var columns = that.columns.values;
@@ -158,14 +154,8 @@ IPA.search_facet = function(spec) {
 
     that.create_content = function(container) {
 
-        var span = $('<span/>', { 'name': 'search' }).appendTo(container);
+        that.table.create(container);
-
+        that.table.setup(container);
-        that.table.create(span);
-        that.table.setup(span);
-    };
-
-    that.setup = function(container) {
-        that.facet_setup(container);
     };
 
     that.show = function() {

install/ui/test/functional/user-password-reset.html

@@ -53,12 +53,12 @@
 </tr>
 <tr>
 	<td>click</td>
-	<td>xpath=/html/body/div[3]//button[1]</td>
+	<td>css=.ui-dialog button:nth-child(1)</td>
 	<td></td>
 </tr>
 <tr>
 	<td>waitForElementNotPresent</td>
-	<td>xpath=/html/body/div[3]</td>
+	<td>css=.ui-dialog</td>
 	<td></td>
 </tr>
 <tr>

install/ui/test/navigation_tests.js

@@ -87,7 +87,9 @@ test("Testing IPA.navigation.create().", function() {
     ok(user_mock_called, "mock user setup was called");
     ok(!group_mock_called, "mock group setup was not called because the tab is inactive");
 
-    var level1_tabs = navigation_container.children('div');
+    var tabs_container = navigation_container.children('div');
+
+    var level1_tabs = tabs_container.children('div');
     same(level1_tabs.length, 1, "One level 1 tab");
 
     var identity_tab = level1_tabs.first();
@@ -140,13 +142,15 @@ test("Testing IPA.navigation.update() with valid index.", function() {
     navigation.push_state({'identity': 'two'});
     navigation.update();
 
+    var tabs_container = navigation_container.children('div');
+
     same(
-        navigation_container.tabs('option', 'selected'), 0,
+        tabs_container.tabs('option', 'selected'), 0,
         "Active tab at level 1"
     );
 
     same(
-        $('.tabs[name=identity]', navigation_container).tabs('option', 'selected'), 1,
+        $('.tabs[name=identity]', tabs_container).tabs('option', 'selected'), 1,
         "Active tab at level 2"
     );
 
@@ -190,13 +194,15 @@ test("Testing IPA.navigation.update() with out-of-range index.", function() {
     navigation.push_state({'identity': 'three'});
     navigation.update();
 
+    var tabs_container = navigation_container.children('div');
+
     same(
-        navigation_container.tabs('option', 'selected'), 0,
+        tabs_container.tabs('option', 'selected'), 0,
         "Active tab at level 1"
     );
 
     same(
-        $('.tabs[name=identity]', navigation_container).tabs('option', 'selected'), 0,
+        $('.tabs[name=identity]', tabs_container).tabs('option', 'selected'), 0,
         "Active tab at level 2"
     );
 

install/ui/webui.js

@@ -153,17 +153,6 @@ $(function() {
         IPA.nav.update();
 
         $('#login_header').html(IPA.messages.login.header);
-
-        function resizeFacet(){
-            var entity = IPA.current_entity;
-            if (entity){
-                var facet_name = IPA.current_facet(entity);
-                var facet = entity.get_facet(facet_name);
-                if (!facet) return;
-                facet.resize();
-            }
-        }
-        jQuery.event.add(window, "resize", resizeFacet);
     }
 
 

install/ui/widget.js

@@ -142,6 +142,7 @@ IPA.widget = function(spec) {
     };
 
     that.create = function(container) {
+        that.container = container;
     };
 
     that.setup = function(container) {
@@ -1056,6 +1057,7 @@ IPA.table_widget = function (spec) {
 
     that.scrollable = spec.scrollable;
     that.save_values = typeof spec.save_values == 'undefined' ? true : spec.save_values;
+    that['class'] = spec['class'];
 
     that.current_page = 1;
     that.total_pages = 1;
@@ -1103,10 +1105,14 @@ IPA.table_widget = function (spec) {
 
     that.create = function(container) {
 
+        that.widget_create(container);
+
         that.table = $('<table/>', {
             'class': 'search-table'
         }).appendTo(container);
 
+        if (that['class']) that.table.addClass(that['class']);
+
         if (that.scrollable) {
             that.table.addClass('scrollable');
         }
@@ -1142,13 +1148,13 @@ IPA.table_widget = function (spec) {
 
             th = $('<th/>').appendTo(tr);
 
-            if (that.scrollable ) {
+            if (that.scrollable) {
                 var width;
                 if (column.width) {
                     width = parseInt(
                         column.width.substring(0, column.width.length-2),10);
                     width += 16;
-                }else{
+                } else {
                     /* don't use the checkbox column as part of the overall
                        calculation for column widths.  It is so small
                        that it throws off the average. */
@@ -1281,7 +1287,6 @@ IPA.table_widget = function (spec) {
                 name: 'total_pages'
             }).appendTo(that.pagination);
         }
-        that.resize();
     };
 
     that.select_changed = function(){
@@ -1296,15 +1301,6 @@ IPA.table_widget = function (spec) {
         that.tbody.empty();
     };
 
-    that.resize = function(){
-        that.tbody.attr('overflow-y', 'auto');
-
-        var win = $(window);
-        var table_max_height = win.height() -
-            IPA.reserved_screen_size;
-        that.tbody.height(table_max_height);
-    };
-
     that.load = function(result) {
 
         that.empty();