Use jQuery accordion to display options selected

Signed-off-by: Madhura Jayaratne <madhura.cj@gmail.com>

4 files changed, 23 insertions, 76 deletions

diff --git a/js/pmd/history.js b/js/pmd/history.js
index 317cc3b2c6..82f04119cd 100644
--- a/js/pmd/history.js
+++ b/js/pmd/history.js
@@ -13,22 +13,6 @@ var g_index;
 var vqb_editor = null;
 
 /**
- * function for panel, hides and shows toggle_container <div>,which is for history elements uses {@link JQuery}.
- *
- * @param index has value 1 or 0,decides wheter to hide toggle_container on load.
-**/
-
-function panel(index)
-{
-    if (!index) {
-        $(".toggle_container").hide();
-    }
-    $("h2.tiger").click(function () {
-        $(this).toggleClass("active").next().slideToggle("slow");
-    });
-}
-
-/**
  * To display details of objects(where,rename,Having,aggregate,groupby,orderby,having)
  *
  * @param index index of history_array where change is to be made
@@ -98,7 +82,7 @@ function display(init, finit)
     str = ''; // string to store Html code for history tab
     for (i = 0; i < history_array.length; i++) {
         temp = history_array[i].get_tab(); //+ '.' + history_array[i].get_obj_no(); for Self JOIN
-        str += '<h2 class="tiger"><a href="#">' + temp + '</a></h2>';
+        str += '<h3 class="tiger"><a href="#">' + temp + '</a></h3>';
         str += '<div class="toggle_container">\n';
         while ((history_array[i].get_tab()) == temp) { //+ '.' + history_array[i].get_obj_no()) == temp) {
             str += '<div class="block"> <table width ="250">';
@@ -118,10 +102,10 @@ function display(init, finit)
             if (i >= history_array.length) {
                 break;
             }
-            str += '</table></div><br/>';
+            str += '</table></div>';
         }
         i--;
-        str += '</div><br/>';
+        str += '</div>';
     }
     return str;
 }
@@ -143,7 +127,7 @@ function and_or(index)
     }
     var existingDiv = document.getElementById('ab');
     existingDiv.innerHTML = display(0, 0);
-    panel(1);
+    $('#ab').accordion("refresh");
 }
 
 /**
@@ -164,7 +148,7 @@ function history_delete(index)
     history_array.splice(index, 1);
     var existingDiv = document.getElementById('ab');
     existingDiv.innerHTML = display(0, 0);
-    panel(1);
+    $('#ab').accordion("refresh");
 }
 
 /**
@@ -257,7 +241,7 @@ function edit(type)
     }
     var existingDiv = document.getElementById('ab');
     existingDiv.innerHTML = display(0, 0);
-    panel(1);
+    $('#ab').accordion("refresh");
 }
 
 /**
@@ -820,4 +804,5 @@ AJAX.registerOnload('pmd/history.js', function () {
     $("#ok_edit_where").click(function() {
         edit('Where');
     });
+    $('#ab').accordion({collapsible : true, active : 'none'});
 });
\ No newline at end of file
diff --git a/js/pmd/init.js b/js/pmd/init.js
index 2719353716..871d49e915 100644
--- a/js/pmd/init.js
+++ b/js/pmd/init.js
@@ -13,6 +13,7 @@ AJAX.registerOnload('pmd/init.js', function () {
     $(".trigger").click(function () {
         $(".panel").toggle("fast");
         $(this).toggleClass("active");
+        $('#ab').accordion("refresh");
         return false;
     });
     var tables_data = $.parseJSON($("#script_tables").html());
diff --git a/js/pmd/move.js b/js/pmd/move.js
index d8a75b927c..eef4ae8c5f 100644
--- a/js/pmd/move.js
+++ b/js/pmd/move.js
@@ -1787,7 +1787,7 @@ function add_object()
     var existingDiv = document.getElementById('ab');
     existingDiv.innerHTML = display(init, history_array.length);
     Close_option();
-    panel(0);
+    $('#ab').accordion("refresh");
 }
 
 AJAX.registerTeardown('pmd/move.js', function () {
diff --git a/themes/pmahomme/css/pmd.css.php b/themes/pmahomme/css/pmd.css.php
index a931facbc8..2e81bd6953 100644
--- a/themes/pmahomme/css/pmd.css.php
+++ b/themes/pmahomme/css/pmd.css.php
@@ -398,15 +398,11 @@ a.M_butt:hover {
     position: fixed;
     top: 60px;
     <?php echo $right; ?>: 0;
-    display: none;
-    background: #FFF;
-    border: 1px solid gray;
-    width: 350 px;
+    width: 350px;
     max-height: 500px;
-    overflow:scroll;
-    padding: 30px;
-    padding-<?php echo $left; ?>: 30px;
-    color: #FFF;
+    display: none;
+    overflow: auto;
+    padding-top: 34px;
     z-index: 102;
 }
 
@@ -438,53 +434,10 @@ a.active.trigger:hover {
     background: #fff696 url(<?php echo $minusImg; ?>) 85% 55% no-repeat;
 }
 
-h2.tiger {
-    background-repeat: repeat-x;
-    padding: 1px;
-    font-weight: bold;
-    padding: 50px 20px 50px;
-    margin: 0 0 5px 0;
-    width: 250px;
-    float: <?php echo $left; ?>;
-    color : #333;
-    text-align: center;
-}
-
-h2.tiger a {
-    background-image: url(<?php echo $headerImg; ?>);
-    text-align: center;
-    text-decoration: none;
-    color : #333;
-    display: block;
-}
-
-h2.tiger a:hover {
-    color: #000;
-    background-image: url(<?php echo $headerLinkedImg; ?>);
-}
-
-h2.active {
-    background-image: url(<?php echo $headerImg ?>);
-    background-repeat: repeat-x;
-    padding: 1px;
-    background-position: left bottom;
-}
-
-.toggle_container {
-    margin: 0 0 5px;
-    padding: 0;
-    border-top: 1px solid #d6d6d6;
-    background: #FFF;
-    overflow: hidden;
-    font-size: 1.2em;
-    clear: both;
-}
-
 .toggle_container .block {
     background-color: #DBE4E8;
-    padding: 40px 15px 40px 15px; /*--Padding of Container--*/
-    border:1px solid #999;
-    color: #000;
+    border-top: 1px solid #999;
+    cursor: pointer;
 }
 
 .history_table {
@@ -497,6 +450,14 @@ h2.active {
     background-color: #DBE4E8;
 }
 
+#ab {
+    min-width: 300px;
+}
+
+#ab .ui-accordion-content {
+    padding: 0;
+}
+
 #box {
     display: none;
 }