fix fileTreeView in slaprunner editor

slapos/runner/fileBrowser.py

@@ -58,7 +58,7 @@ class FileBrowser(object):
         html += 'gsdirs.push(new gsItem("2", "%s", "%s", "0", "%s", "dir", "%s"));' % (f, ff, md5sum, mdate)
     return html
 
-  def fancylistDirs(self, dir, key, all=False):
+  def fancylistDirs(self, dir, key, listfiles, all=False):
     dir = urllib.unquote(dir)
     realdir = realpath(self.config, dir)
     if not realdir:
@@ -73,18 +73,18 @@ class FileBrowser(object):
       ff = os.path.join(dir, f)
       realfile = os.path.join(realdir, f)
       identity = "%s%s" % (key, i)
-      if not os.path.isdir(realfile):
+      if os.path.isdir(realfile):        
+        dirList.append({"title": f, "key": identity,
+                        "folder":True, "lazy":True, "path": ff})
+      elif listfiles:
         regex = re.compile("(^.*)\.(.*)", re.VERBOSE)
         ext = regex.sub(r'\2', f)
         if ext == f:
           ext = ""
-        dirList.append({"title": f, "key": identity,
-                        "extraClasses": "ext_"+ext, "path": ff})
-      else:
         fileList.append({"title": f, "key": identity,
-                        "folder":True, "lazy":True, "path": ff})
+                        "extraClasses": "ext_"+ext, "path": ff})
       i+=1
-    return (fileList + dirList)
+    return (dirList + fileList)
 
   def makeDirectory(self, dir, filename):
     """Create a directory"""

slapos/runner/static/css/ui.fancytree.css

@@ -65,6 +65,13 @@ ul.fancytree-no-connector > li
 	background-color: silver;
 }
 
+span.fancytree-node
+{
+  display: inline-block;
+	width: 100%;
+	border: 1px solid transparent;
+}
+
 
 /*******************************************************************************
  * Common icon definitions
@@ -207,6 +214,7 @@ span.fancytree-checkbox:hover { background-position: -16px -32px; }
 span.fancytree-icon /* Default icon */
 {
 	margin-left: 3px;
+  margin-top: 1px;
 	background-position: 0px 0px;
 }
 .fancytree-ico-cf span.fancytree-icon { background: url(images/directory.min.png) left top no-repeat; width: 22px;}/*background-position: 0px -16px; } /* Collapsed Folder */
@@ -294,21 +302,39 @@ span.ext_zip span.fancytree-icon { background: url(images/zip.png) left top no-r
 }
 span.fancytree-focused .fancytree-title {
 	/*outline: 1px dotted black;*/
-	color: white;
+	/*color: white;*/
 }
 span.fancytree-selected .fancytree-title,
 span.fancytree-active .fancytree-title {
-	background-color: #D4D4D4; /*gray*/
+	/*background-color: #D4D4D4; /*gray*/
 }
 span.fancytree-selected .fancytree-title {
 	font-style: italic;
 }
 .fancytree-focused span.fancytree-selected .fancytree-title,
 .fancytree-focused span.fancytree-active .fancytree-title {
-	color: white;
+	/*color: white;
 	background-color: #3875D7; /*blue*/
 }
 
+span.fancytree-node:hover
+{
+  background-color: #BDF;
+	border-color: #70C0E7;
+  cursor: pointer;
+}
+.fancytree-container.fancytree-focused span.fancytree-node.fancytree-focused
+{
+	border-color: #3399FF;
+/*	outline: 1px solid #3399FF; */
+}
+span.fancytree-node.fancytree-active,
+span.fancytree-node.fancytree-selected
+{ /* active/selcted nodes inside inactive tree */
+	background-color: #F7F7F7;
+	border-color: #DEDEDE;
+}
+
 /*******************************************************************************
  * 'table' extension
  */

slapos/runner/static/js/scripts/softwareFolder.js

@@ -11,7 +11,6 @@ $(document).ready(function () {
         CurrentMode,
         script = "/readFolder",
         softwareDisplay = true,
-        fileTree,
         Mode,
         modes,
         projectDir = $("input#project").val(),
@@ -86,7 +85,7 @@ $(document).ready(function () {
 
     function selectFile(file) {
         $("#info").empty();
-        $("#info").append("Selection: " + file);
+        $("#info").append("Current work tree: " + file);
         selection = file;
         return;
     }
@@ -117,7 +116,7 @@ $(document).ready(function () {
             $('#fileTreeFull').hide();
         }
         $("#info").empty();
-        $("#info").append("Selection: " + base_path());
+        $("#info").append("Current work tree: " + base_path());
         selection = "";
     }
 
@@ -390,8 +389,11 @@ $(document).ready(function () {
     };
 
     // --- Init fancytree during startup ----------------------------------------
-    $(function(){
-      $("#fileTree").fancytree({
+    function initTree(tree, path, key){
+      if (!key){
+        key = '0';
+      }
+      $(tree).fancytree({
         activate: function(event, data) {
           var node = data.node;
         },
@@ -404,14 +406,14 @@ $(document).ready(function () {
         },
         source: {
           url: $SCRIPT_ROOT + "/fileBrowser",
-          data:{opt: 20, dir: currentProject, key: 0},
+          data:{opt: 20, dir: path, key: key, listfiles: 'yes'},
           cache: false
         },
         lazyload: function(event, data) {
           var node = data.node;
           data.result = {
             url: $SCRIPT_ROOT + "/fileBrowser",
-            data: {opt: 20, dir: node.data.path , key: node.key}
+            data: {opt: 20, dir: node.data.path , key: node.key, listfiles: 'yes'}
           }
         },
         keydown: function(event, data) {
@@ -461,7 +463,7 @@ $(document).ready(function () {
           bindContextMenu(data.node.span, !data.node.isFolder());
         }
       });
-    });
+    }
 
 
     editor.setTheme("ace/theme/crimson_editor");
@@ -494,7 +496,9 @@ $(document).ready(function () {
     /*$('#fileTreeFull').fileTree({ root: currentProject, script: $SCRIPT_ROOT + script, folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, multiFolder: false, selectFolder: true }, function (file) {
         selectFile(file);
     }, function (file) { openFile(file); });*/
-    $("#info").append("Selection: " + base_path());
+    initTree('#fileTree', projectDir, 'pfolder');
+    initTree('#fileTreeFull', currentProject);
+    $("#info").append("Current work tree: " + base_path());
     /*setDetailBox();*/
 
     editor.on("change", function (e) {
@@ -549,7 +553,7 @@ $(document).ready(function () {
     $("#clearselect").click(function () {
         edit = false;
         $("#info").empty();
-        $("#info").append("Selection: " + base_path());
+        $("#info").append("Current work tree: " + base_path());
         $("input#subfolder").val("");
         $("#edit_info").empty();
         $("#edit_info").append("No file in editor");

slapos/runner/templates/softwareFolder.html

@@ -48,7 +48,7 @@
     </div>
     <div id="details_box">
   	  <div id="fileTree" class="file_tree_short"></div>
-      <div id="fileTreeFull" style='display:none' class="file_tree_short" title="Double click to edit selected file..."></div>
+      <div id="fileTreeFull" style='display:none' class="file_tree_short"></div>
     </div>
   </div>
   <div id="code">

slapos/runner/views.py

@@ -637,7 +637,7 @@ def fileBrowser():
   else:
     opt = int(request.args.get('opt'))
 
-#  try:
+  try:
     if opt == 1:
       #list files and directories
       result = file_request.listDirs(dir)
@@ -683,14 +683,15 @@ def fileBrowser():
       result = file_request.unzipFile(dir, filename, newfilename)
     elif opt == 20:
       #Fancy Load folder
-    key = int(request.args.get('key'))
+      key = request.args.get('key')
       dir = request.args.get('dir').encode('utf-8')
-    data = file_request.fancylistDirs(dir, key)
+      listfiles = request.args.get('listfiles', '')
+      data = file_request.fancylistDirs(dir, key, listfiles)
       result = json.dumps(data)
     else:
       result = "ARGS PARSE ERROR: Bad option..."
-#  except Exception as e:
-#    return str(e)
+  except Exception as e:
+    return str(e)
   return result