Sort File list, Add the possibility to edit any project files

slapos/runner/static/css/styles.css

@@ -313,7 +313,7 @@ body {
 }
 
 #home_box a{
-    color: #193440;
+    color: #475F73;
     cursor: pointer;
     text-decoration: none;
 }
@@ -330,7 +330,7 @@ body {
 
 #home_box p{
     font-size: 13px;
-    color: #193440;
+    color: #475F73;
     float: left;
 }
 
@@ -422,7 +422,7 @@ body {
 
 .file_tree_short{
     width: 352px;
-    height: 100px;
+    height: 170px;
     border: solid 1px #678dad;
     background: #fff;
     overflow: auto;
@@ -431,12 +431,15 @@ body {
 }
 
 .box_software{
-    width: 382px;
+    width: 362px;
     height: 100px;
     background: #fff;
     padding: 5px;
     float:right;
 }
+#details_box{
+    display:none;
+}
 
 #contentInfo{
     width: 756px;
@@ -451,6 +454,31 @@ body {
     margin: 5px;
 }
 
+#contentInfo h2, .hight{    
+    width: 100%;
+    height: 25px;
+    padding-top:2px;
+    text-indent: 5px;
+    color: #737373;
+    text-shadow: 0px 1px #FFF;
+}
+
+#contentInfo h2, .show{
+    background: #e4e4e4 url(../images/arrow_up.png) 97% 50% no-repeat;
+}
+
+#contentInfo h2, .hide{
+    background: #e4e4e4 url(../images/arrow_down.png) 97% 50% no-repeat;
+}
+
+h2.hight:hover{
+    cursor: pointer;
+}
+
+.software_details{
+    padding: 10px;
+}
+
 .log_content{    
     border: solid 1px #4c6172;
     padding: 2px;
@@ -485,16 +513,6 @@ body {
     cursor:default;
 }
 
-#contentInfo h2{
-    background: #e4e4e4;
-    width: 100%;
-    height: 25px;
-    padding-top:2px;
-    text-indent: 5px;
-    color: #737373;
-    text-shadow: 0px 1px #FFF;
-}
-
 #check{
     margin-right:5px;
     margin-top:2px;
@@ -539,3 +557,28 @@ select {
   padding: 4px;
   text-overflow: ellipsis;
   white-space: nowrap;}
+
+a.lshare{
+    background: #D9D9D9;
+    padding: 4px 7px 4px 7px;
+    height: 18px;
+    font-size: 15px;
+    border: solid 1px #678dad;
+    color: #000;
+    margin-right: 10px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+}
+
+a.lshare:hover{
+    background:#EFF5FF;
+    color: #000;
+    border:solid 1px #73A6FF;
+}
+a.lshare:focus{
+    border:solid 1px #73A6FF;
+}
+
+a.lshare img{
+    margin: 5px;
+}
\ No newline at end of file

slapos/runner/static/scripts/softwareFolder.js

@@ -9,6 +9,7 @@ $(document).ready( function() {
 	editor.renderer.setHScrollBarAlwaysVisible(false);
 	    
 	var script = "/readFolder";
+	var softwareDisplay = true;
 	var Mode = function(name, desc, clazz, extensions) {
 		this.name = name;
 		this.desc = desc;
@@ -24,14 +25,16 @@ $(document).ready( function() {
 		new Mode("buildout", "Python Buildout config", require("ace/mode/buildout").Mode, ["cfg"])
 	    ];
 	var projectDir = $("input#project").val();
+	var workdir = $("input#workdir").val();
+	var currentProject = workdir + "/" + projectDir.replace(workdir, "").split('/')[1];
 	var send = false;
 	var edit = false;	
-	var workdir = $("input#workdir").val();
 	$('#fileTree').fileTree({ root: projectDir, script: $SCRIPT_ROOT + script, folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, multiFolder: false, selectFolder: true }, function(file) { 
 		selectFile(file);
 	});
+	setDetailBox();
 	$("#add").click(function(){
-		var path = $("input#project").val();
+		var path = (softwareDisplay)? projectDir:currentProject;
 		if (send) return false;
 		if($("input#file").val() == "" || 
 			$("input#file").val() == "Enter name here..."){
@@ -49,14 +52,12 @@ $(document).ready( function() {
 			data: "file=" + path + "&type=" + $("#type").val(),
 			success: function(data){				
 				if(data.code == 1){
-					$('#fileTree').fileTree({ root: projectDir, script: $SCRIPT_ROOT + script, folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, multiFolder: false, selectFolder: true }, function(file) { 
-					selectFile(file);
-					});
+					switchContent();
 					$("input#file").val("");
 					$("#flash").fadeOut('normal');
 					$("#flash").empty();
 					$("#info").empty();
-					$("#info").append("Please select your file or folder into the box...");
+					$("#info").append("Select parent directory or nothing for root...");
 					$("input#subfolder").val("");					
 				}
 				else{
@@ -92,6 +93,56 @@ $(document).ready( function() {
 		return false;
 	});
 	
+	$("#details_head").click(function(){
+	    setDetailBox();
+	});
+	
+	$("#switch").click(function(){
+	    softwareDisplay = !softwareDisplay;
+	    switchContent();
+	    return false;
+	});
+	
+	$("#clearselect").click(function(){
+	    $("#info").empty();
+	    $("#info").append("Select parent directory or nothing for root...");
+	    $("input#subfolder").val("");
+	    return false;
+	});
+	
+	function switchContent(){
+	    var root = projectDir;
+	    if(!softwareDisplay){
+		$("#switch").empty();
+		$("#switch").append("Switch to Software files");
+		root = currentProject;
+	    }
+	    else{
+		$("#switch").empty();
+		$("#switch").append("Switch to Project files");		
+	    }
+	    $('#fileTree').fileTree({ root: root, script: $SCRIPT_ROOT + script, folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, multiFolder: false, selectFolder: true }, function(file) { 
+	        selectFile(file);
+	    });
+	    $("#info").empty();
+	    $("#info").append("Select parent directory or nothing for root...");
+	    $("input#subfolder").val("");
+	}
+	
+	function setDetailBox(){
+	    var state = $("#details_box").css("display");
+	    if (state == "none"){
+		$("#details_box").slideDown("normal");
+		$("#details_head").removeClass("hide");
+		$("#details_head").addClass("show");
+	    }
+	    else{
+		$("#details_box").slideUp("normal");
+		$("#details_head").removeClass("show");
+		$("#details_head").addClass("hide");
+	    }
+	}
+	
 	function error(msg){
 		$("#flash").fadeOut('normal');
 		$("#flash").empty();
@@ -99,7 +150,7 @@ $(document).ready( function() {
 		$("#flash").append("<ul class='flashes'><li>" + msg + "</li></ul>");
 	}
 	function selectFile(file){
-		relativeFile = file.replace(projectDir, "");
+		relativeFile = file.replace(workdir, "");
 		$("#info").empty();
 		$("#info").append(relativeFile);
 		$("input#subfolder").val(file);
@@ -117,8 +168,8 @@ $(document).ready( function() {
 					$("#flash").empty();
 					$("#edit_info").empty();
 					var name = file.split('/');
-					$("#edit_info").append("Edit selected file (" +
-						name[name.length - 1] + ")");
+					$("#edit_info").append("Edit selected file: " +
+						relativeFile);
 					editor.getSession().setValue(data.result);
 					setEditMode(name[name.length - 1]);
 					edit = true;

slapos/runner/templates/runResult.html

@@ -16,7 +16,7 @@
 {%endfor%}
 </select>
 &nbsp;&nbsp;<button id ="delete" class="button" title="Remove this software">Remove</button>
-&nbsp;&nbsp;<button id ="open" class="button" title="Set this software as current software">Open</button>
+&nbsp;&nbsp;<button id ="open" class="button" title="Set this software as current software release">Open</button>
 <br/><br/>
 <p><strong><u>Notes:</u> </strong> You can open any software release in the list by cliking on the "Open" button. Now compiling this software will take a very short time</p>
 <br/>

slapos/runner/templates/softwareFolder.html

@@ -17,20 +17,25 @@
 <input type="hidden" name="project" id="project" value="{{project}}" />
 <input type="hidden" name="workdir" id="workdir" value="{{workDir}}" />
 <input type="hidden" name="subfolder" id="subfolder" value="" />
-<div id="file_navigation">
-	<h2>Current software file content</h2>
+<div id="software_folder">
+    <h2 class="hight show" id="details_head">Current software file content</h2>
+    <div class="software_details" id="details_box">
 	<div id="fileTree" class="file_tree_short"></div>	
 	<div class="box_software">
 	    <h2>Add new file or folder</h2>
-	    <input type="text" name="file" id="file" size='25' value="Enter name here..." />
-	    &nbsp;&nbsp;<select name="type" id="type">
+	    <input type="text" name="file" id="file" size='22' value="Enter name here..." />
+	    &nbsp;&nbsp;&nbsp;<select name="type" id="type">
 	    <option value="file">file</option>
 	    <option value="folder">folder</option>
 	    </select>
-	    &nbsp;&nbsp;<input type="submit" name="add" id ="add" value="Add" class="button"/>
-	    <div id="file_info" class="file_info"><span id="info">Please select your file or folder into the box...</span></div>
+	    &nbsp;&nbsp;&nbsp;<input type="submit" name="add" id ="add" value="Add" class="button"/>
+	    <br/><br/>
+	    <a href="#" id="switch" class="lshare">Switch to Project files</a>
+	    <a href=""  id="clearselect" class="lshare">Clear selection</a><br/><br/>
+	    <div id="file_info" class="file_info"><span id="info">Select parent directory or nothing for root...</span></div>
 	</div>
 	<div class="clear"></div>
+    </div>
     <div id="code" style="margin-top:10px">
     <h2 id="edit_info">Edit your selected file</h2>
     <div class="main_content">