tree: It is now in a side panel

css/extensions.css

@@ -771,71 +771,8 @@ html body .ui-controlbar .ui-controlgroup .ui-controlgroup-controls > .ui-select
 }
 
 /* For trees */
-html div.ui-collapsible-set li.ui-collapsible a.tab_action.ui-btn {
-  background: none repeat scroll 0 0 transparent;
-  margin: 0 -1px;
-  border-radius: 0;
-  border-color: transparent;
-  -webkit-border-radius: 0;
-  box-shadow: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  position: absolute;
-  height: 3.5em;
-  width: 2em;
-  right: 2em;
-  top: 0.6em;
-}
-
-html div.ui-collapsible-set.tree li li.ui-collapsible a.tab_action.ui-btn {
-  background: none repeat scroll 0 0 transparent;
-  margin: 0 -1px;
-  border-radius: 0;
-  border-color: transparent;
-  -webkit-border-radius: 0;
-  box-shadow: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  position: absolute;
-  right: 1em;
-  height: 3.5em;
-  top: 0;
-  width: 2em;
-}
-
-html div.ui-collapsible-set li.ui-collapsible li.leaf a.tab_action.ui-btn {
-  height: 2em;
-  right: 0.6em;
-}
-
-html div.ui-collapsible-set.tree li.ui-collapsible {
-  border-width: 0px 0px 0px 0px;  
-  border-radius: 0em/0em;
-}
-
-html div.ui-collapsible-set li.ui-collapsible li.leaf{
-  border-style: solid;
-  border-width: 0px 0px 1px 0px;
-  border-color: rgb(221, 221, 221);
-}
-
-html div.ui-collapsible-set.tree li h3 {
-  margin: 0;
-  border-radius: 0em/0em;
-}
-
-html div.ui-collapsible-set.tree li h4 {
-  margin: 0.45em 0.45em;
-}
-
-
-html div.ui-collapsible-set.tree div.ui-collapsible-content li.ui-collapsible {
-  //margin: 0em 0em 0em 1em;
-  padding: 0em 0em 0em 1em;
-}
-
-html div.tree div.ui-collapsible-content {
-//  padding: 0em 0em 0em 1em;
+div.panel.ui-panel {
+  background-color: whitesmoke;
 }
 
 /* side-by-side */

data/computer_overview.json

@@ -62,7 +62,7 @@
     "generate": "widget",
     "type": "controlbar",
     "property_dict": {"slot": 1},
-    "children": [{"type": "a", "direct": {"className": "action ui-btn ui-btn-icon-left ui-icon-sitemap ui-shadow ui-corner-all","href":"#global-popup"},"attributes": {"data-rel":"popup", "data-action": "show_tree"},"logic": {"text":"Group"}}]
+    "children": [{"type": "button", "direct": {"className": "action ui-btn ui-btn-icon-left ui-icon-sitemap ui-shadow ui-corner-all","href":"#search-panel"},"attributes": {"data-rel":"popup", "data-action": "show_tree"},"logic": {"text":"Group"}}]
   }, {
     "generate": "widget",
     "type": "table",

data/servers.json

 {
   "generate": "gadget",
   "type": "pageIndex",
-  "property_dict": {},
+  "property_dict": {
+    "check": true
+  },
   "children": [
     {
       "generate": "widget",
@@ -15,6 +17,20 @@
             "generate": "gadget",
             "type": "listbox",
             "href": "computer_overview"
+          },{
+            "generate": "widget",
+            "type": "panel",
+            "id": "search-panel",
+            "theme": "slapos-white",
+            "property_dict": {
+              "close": null
+            },
+            "children": [{
+              "type": "p",
+              "direct": {},
+              "attributes": {},
+              "logic": {"text": "Hello Cedric"}
+            }]
           }
         ],
         "new": [

js/erp5_loader.js

@@ -5722,7 +5722,6 @@
       }
       $.extend(path, category);
     }
-    console.log(category_tree)
     return category_tree.sub_category.region;
   };
 
@@ -5730,7 +5729,10 @@
   factory.util.setTreeHTML = function (tree, form_reference, path) {
     var tree_html, path_length = 0, path_list = [], node = {},
     i = 0, node_html, children_list = [], children_list_length = 0;
-    tree_html = $('<div data-theme="b" data-content-theme="b" class="tree"><ul data-role="listview" data-inset="true" data-split-icon="search" data-inset="true"></ul><div>');
+    tree_html = $(
+      '<div data-theme="b" data-content-theme="b" class="tree">' +
+        '<ul data-role="listview" data-inset="true" data-split-icon="search" data-inset="true">' +
+        '</ul><div>');
     path_list = path.split('/');
     path_length = path_list.length;
     node = tree;
@@ -5797,7 +5799,7 @@
     category_tree = factory.util.buildTree(category_list);
     tree_html = factory.util.setTreeHTML(category_tree, form_reference, tree_path);
     tree_element.empty().append(tree_html).enhanceWithin();
-    tree_element.popup("reposition", {positionTo: 'origin'});
+    tree_element.panel('open');
   };
 
 
@@ -8417,7 +8419,6 @@
    * @param {object} config Action Object
    */
   app.filter = function (config) {
-    console.log(config);
     if (config.element.target !== '') {
       // update gadget state
       config.state.query = app.generateQueryObject(
@@ -8445,7 +8446,7 @@
       false
     )
       .then(function (reply) {
-        $('#global-popup').popup("close");
+        $('#' + config.state.tree_element_id).panel("close");
         factory.util.updatePageSection(config.id, reply);
       })
       .fail(util.error);
@@ -10536,7 +10537,6 @@
           last,
           element = e.target,
           type = element.type;
-
         // delay all input field actions allowing user to type/select
         if (element.tagName === "INPUT") {
           switch (type) {