runner: Merge -> add tabs and file upload (Alain T)

Merge branch 'slaprunner-layout' into slaprunner-paas

slapos/runner/static/css/editor.css

+.editor {
+    margin: 0;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+.box_header{
+  background: #E4E4E4;
+  width: 100%;
+  height: 30px;
+  color: #737373;
+  border-bottom: 4px solid #7FAED3;
+  min-width: 936px;
+}
+.box_header ul{float: left; padding-top: 2px; text-shadow: 0px 1px #F1F1F1;}
+.box_header li{float: left;border: 1px solid #AAB8C2;padding: 1px 5px 1px 0;margin-left: 5px; text-indent: 5px;}
+/*.box_header li:last-child{border:none}*/
+.box_header li > span{cursor: pointer; height: 20px; display: block;line-height: 20px;font-weight: bold;padding: 1px;}
+.box_header li:hover{border: 1px solid #57A1D6;background-color: #C7C7C7;}
+.box_header li:last-child{margin-right: 5px;}
+.box_header li>a{font-weight: bold; font-size:1em;display: block;padding: 2px;}
+.save_btn{background: url(../images/icon_save.png) center right no-repeat;width: 25px;}
+.expand_editor{background: url(../images/fullscreen.png) center right no-repeat;width: 23px;}
+.e_expanded{background: url(../images/fullscreen_exit.png) center right no-repeat;}
+.swith_btn{background: url(../images/gnome-session-switch.png) center right no-repeat;width: 105px;}
+.flist_btn{background: url(../images/list2_down.png) center right no-repeat;width: 26px;}
+.fmenu_btn{background: url(../images/ui_menu_blue.png) center right no-repeat;width: 58px;}
+
+#tabControl{overflow: hidden;}
+#tabControl .item{float:left; min-width: 60px; background: #D5D5D5; height: 22px; padding-top: 8px; font-size:1em;
+border-left:1px #E4E4E4 solid; cursor:pointer; color: #5C7077; text-shadow: 0px 1px #E6E6E6; position: relative;}
+#tabControl .item:hover{background: #C7C7C7;}
+#tabControl.item:last-child{margin-right:none; overflow: hidden}
+#tabControl .active{background: #7FAED3; color: #fff; text-shadow: none;}
+#tabControl .active:hover{background: #7FAED3;}
+#tabControl .item span{padding: 0 4px; display: block; float: left; text-overflow:clip; max-width: 126px; white-space:nowrap; overflow: hidden;}
+#tabControl .active span.bt_close{color: #DBDBDB;}
+#tabControl .active span.bt_close:hover{color: #fff;}
+#tabContent pre {display: none;}
+#tabContent pre.active {display: block;}
+.item-hide{display:none;}
+
+

slapos/runner/static/css/jquery.contextMenu.css

@@ -68,4 +68,5 @@
 .contextMenu LI.rename A { background-image: url(images/mfile.png); }
 .contextMenu LI.md5sum A { background-image: url(images/selection-select.png); }
 .contextMenu LI.refresh A { background-image: url(images/refresh.png); }
-.contextMenu LI.favorite A { background-image: url(images/knewstuff.png); }
+.contextMenu LI.favorite A { background-image: url(images/knewstuff.png); }
\ No newline at end of file
+.contextMenu LI.uploadfile A { background-image: url(images/upload_folder.png); }
\ No newline at end of file

slapos/runner/static/css/styles.css

@@ -8,7 +8,7 @@ img{border:0}
 /*YAHOO RESET FONT*/
 html{color:#000;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small}select,input,textarea,button{font:99% arial,helvetica,clean,sans-serif}table{font-size:inherit;font:100%}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}
 body{
-  background: #A2BDC5;
+  background: #8DABB4;/* #A2BDC5;*/
   height:100%;
 }
 
@@ -48,7 +48,7 @@ th{
 }
 table.small th{padding: 4px;font-size: 16px;}
 textarea {
-	width:932px;
+  width:932px;
   font-family: 'Arial,Helvetica Neue',Tahoma,Helvetica,sans-serif;
 }
 
@@ -125,15 +125,6 @@ body {
      margin-left:5px
 }
 
-#editor, #editorViewer {
-    margin: 0;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
 #wmenu{
   margin: 1px 11px 1px 10px;
 }
@@ -164,7 +155,7 @@ body {
 }
 
 .main_head{
-    height: 15px;
+    height: 14px;
     background: url(../images/main_top.png) no-repeat;
     width: 966px;
 }
@@ -419,7 +410,7 @@ padding: 10px;height: 80px;padding-bottom:15px;}
 }
 #code{
     float: right;
-    width: 680px;
+    width: 692px;
 }
 #details_head{margin-bottom: 10px;}
 
@@ -555,12 +546,10 @@ padding: 10px;height: 80px;padding-bottom:15px;}
 }
 
 .file_info{
-    margin-top:10px;
+    margin-top:5px;
     background: #e4e4e4;
     padding: 5px 10px 5px;
     box-shadow: 1px 1px 1px #888888;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
     color: #737373;
     font-weight: bold;
     text-shadow: 0px 1px #FFF;
@@ -600,7 +589,6 @@ label.header {
     font-weight: normal;
 }
 select {
-  -webkit-appearance: button;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
@@ -644,26 +632,15 @@ a.no-right-border:focus{border-right:none}
 a.lshare img{
     margin: 5px;
 }
-.box_header{
-  background: #E4E4E4;
-  width: 100%;
-  height: 30px;
-  padding-top: 2px;
-  text-indent: 5px;
-  color: #737373;
-  text-shadow: 0px 1px #F1F1F1;
-  border-bottom: 3px solid #6DB9DD;
-}
-.box_header li{float: left;border: 1px solid #AAB8C2;padding: 1px 5px 1px 0;margin-left: 5px;}
-.box_header li:last-child{border:none}
-.box_header li > span{cursor: pointer; height: 22px; display: block;line-height: 22px;font-weight: bold;padding: 1px;}
-.box_header li:hover{border: 1px solid #57A1D6;background: #C7C7C7;}
-.box_header li:last-child:hover{background:none; border: none}
-.box_header li>a{font-weight: bold; font-size:15px;display: block;padding: 2px;}
-.save_btn{background: url(../images/icon_save.png) center right no-repeat;width: 60px;}
-.swith_btn{background: url(../images/gnome-session-switch.png) center right no-repeat;width: 105px;}
-.flist_btn{background: url(../images/list2_down.png) center right no-repeat;width: 26px;}
-.fmenu_btn{background: url(../images/ui_menu_blue.png) center right no-repeat;width: 58px;}
+
+#editor, #editorViewer {
+    margin: 0;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
 
 #error{
     padding: 0px;
@@ -794,11 +771,17 @@ padding:10px; font-size:14px; color:#03406A}
 .information{display:block; float:left; height:16px; margin-top:10px; margin-left:10px; font-weight:bold}
 .account{margin-left:60px;}
 
+/*-------------------------ACE UPDATE------------------------*/
+.ace_search{
+  width: 350px;
+  max-width: 350px;
+}
+
 .bt_close {
     text-decoration: none;
     color: #999;
     font-weight: bold;
-    font-size: 16px;
+    font-size: 1em;
     padding: 0 4px;
     -webkit-border-radius: .2em;
     -moz-border-radius: .2em;
@@ -806,17 +789,11 @@ padding:10px; font-size:14px; color:#03406A}
     cursor: pointer;
 }
 .bt_close:hover {
-    background: #D6D6D6;
     color: #333;
 }
 
-/*-------------------------ACE UPDATE------------------------*/
-.ace_search{
-  width: 350px;
-  max-width: 350px;
-}
-
-.fullScreen .fullScreen-editor{
+.fullScreen{
+  background: #fff;
   height: auto!important;
   width: auto!important;
   border: 0;
@@ -826,7 +803,26 @@ padding:10px; font-size:14px; color:#03406A}
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 10000;
+  z-index: 140;
+}
+.fullScreen-editor{
+  height: auto!important;
+  width: auto!important;
+  position: fixed !important;
+  top: 35px;
+  bottom: 0;
+  left: 244px;
+  right: 0;
+}
+
+.fullScreen-tree{
+  height: auto!important;
+  width: 238px;
+  position: fixed !important;
+  top: 37px;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 .fullScreen {

slapos/runner/static/js/scripts/common.js

@@ -20,6 +20,20 @@ String.prototype.trim = function () {
     return this.replace(/^\s*/, "").replace(/\s*$/, "");
 };
 
+String.prototype.hashCode = function(){
+    if (Array.prototype.reduce){
+        return this.split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0);
+    }
+    var hash = 0;
+    if (this.length === 0) return hash;
+    for (var i = 0; i < this.length; i++) {
+        var character  = this.charCodeAt(i);
+        hash  = ((hash<<5)-hash)+character;
+        hash = hash & hash; // Convert to 32bit integer
+    }
+    return hash;
+}
+
 /****************************************/
 function setInput($elt) {
     "use strict";

slapos/runner/static/js/scripts/process.js

@@ -156,7 +156,7 @@ function updateStatus(elt, val) {
   $(src).addClass(value);
   switch (val) {
     case "waiting":
-      $(src).children('p').text("Waiting for starting");
+      $(src).children('p').text("Queue");
       break;
     case "stopped":
       $(src).children('p').text("Stopped by user");
@@ -201,13 +201,13 @@ function setRunningState(data) {
                   $("#softrun").addClass('slapos_stop');
                   $("#running img").before('<p id="running_info" class="instance">Running instance...</p>');
                 }
-		if (processType === "Software") {
-                  running = false;
-                  $("#running_info").remove();
-                  $("#softrun").addClass('slapos_run');
-                  $("#softrun").removeClass('slapos_stop');
-                  $("#instrun").click();
-		}
+            		if (processType === "Software") {
+                    running = false;
+                    $("#running_info").remove();
+                    $("#softrun").addClass('slapos_run');
+                    $("#softrun").removeClass('slapos_stop');
+                    $("#instrun").click();
+            		}
                 processType = "Instance";
             }
         }

slapos/runner/static/js/scripts/viewlog.js

@@ -113,7 +113,11 @@ $(document).ready(function () {
         })
         .always(function() {
           sending = false;
-          $("#logheader").html(info);
+          if (processState === "Stopped" || processState === "Checking" || $("#manual").is(":checked")) {
+              $("#logheader").html(info);
+          } else {
+              $("#logheader").html("Inspecting slapgrid log - Click for more options");
+          }
         });
     }
 

slapos/runner/templates/softwareFolder.html

@@ -4,6 +4,7 @@
   {{ super() }}
   <link href="{{ url_for('static', filename='css/ui.fancytree.css', _external=False) }}" rel="stylesheet" type="text/css" media="screen" />
   <link href="{{ url_for('static', filename='css/jquery.contextMenu.css', _external=False) }}" rel="stylesheet" type="text/css" media="screen" />
+  <link href="{{ url_for('static', filename='css/editor.css', _external=False) }}" rel="stylesheet" type="text/css" media="screen" />
   <script src="{{ url_for('static', filename='js/jquery/jquery.contextMenu-custom.js') }}" type="text/javascript" charset="utf-8"></script>
   <script src="{{ url_for('static', filename='js/jquery/jquery.fancytree.min.js') }}" type="text/javascript" charset="utf-8"></script>
   <link href="{{ url_for('static', filename='css/colorbox.css', _external=False) }}" rel="stylesheet" type="text/css" media="screen" />
@@ -28,8 +29,7 @@
 <!-- Definition of context menu -->
 <ul id="fileTreeMenu" class="contextMenu">
   <li class="edit"><a href="#edit">Edit</a></li>
-  <li class="edit"><a href="#editfull">Open in new editor</a></li>
-  <li class="view"><a href="#view">Open in viewer</a></li>
+  <li class="view"><a href="#view">Open in popup</a></li>
   <li class="rename separator"><a href="#rename">Rename</a></li>
   <li class="delete "><a href="#delete">Delete</a></li>
   <li class="refresh separator"><a href="#refresh">Refresh</a></li>
@@ -40,28 +40,21 @@
   <li class="paste"><a href="#paste">Paste</a></li>
   <li class="newfile separator"><a href="#nfile">New File</a></li>
   <li class="newdir"><a href="#nfolder">New Folder</a></li>
+  <li class="uploadfile"><a href="#ufile">Upload File</a></li>
 </ul>
-
 <div id="software_folder">
-  <div>
-    <ul class='box_header'>
+  <div class='box_header'>
+    <ul>
       <li id="switch"><span class="swith_btn" title="Switch between differents file source">This project</span></li>
-      <li id="option"><span class="fmenu_btn" title='Show more option' rel='tooltip'>Menu</span></li>
-      <li id="filelist"><span class="flist_btn" title="Recently opened files and favourites" rel='tooltip'>&nbsp;</span></li>
-      <li id="save"><span class="save_btn" title="Save current file. Hint: Use Ctrl+S">Save</span></li>
-      <li id="fullscreen"><span class="fullscreen" title="Show Editor in Fullscreen. Hint: Use Ctrl+E">⤧</span></li>
-      <li>
-        <h2>
-          <span id="edit_info">No file in editor</span>
-          <span id="edit_status"></span>
-        </h2>
-      </li>
+      <li id="filelist"><span class="flist_btn" title="Favourites files list" rel='tooltip'>&nbsp;</span></li>
+      <li id="fullscreen"><span class="expand_editor" title="Show Editor in Full window. Hint: Use Ctrl+E">&nbsp;</span></li>
+      <li id="save"><span class="save_btn" title="Save current file. Hint: Use Ctrl+S">&nbsp;</span></li>
+      <li id="option"><span class="fmenu_btn" title='Show more options' rel='tooltip'>Menu</span></li>
     </ul>
-
-    <!--<a href="#"  id="clearselect" class="lshare no-right-border" style="float:left">Clean</a>-->
-
+    <div id="tabControl"></div>
     <div class="clear"></div>
   </div>
+  <div class="clear"></div>
   <div class="software_details">
     <div id="details_box">
   	  <div id="fileTree" class="file_tree_short"></div>
@@ -69,16 +62,12 @@
     </div>
   </div>
   <div id="code">
-  <div class="main_content">
-<pre id="editor">
-
-</pre>
-      </div>
-	    <!--<input type=submit value="Save" id="save" class="button">-->
+    <div class="main_content">
+      <div id="tabContent"></div>
+    </div>
 	</div>
-
+  <div class="clear"></div>
 </div>
-<div class="clear"></div>
 <div id="file_info" class="file_info"><span id="info"></span></div>
 </form>
 
@@ -88,6 +77,9 @@
   <ul class="inline">
     <li><a id='getmd5' href="#">Get or Update md5sum</a></li>
     <li><a id='addflist' href="#">Add to favourites</a></li>
+    <li><a id='expand' title="Show or Hide file tree view area." href="#">
+      Show or Hide FileTree</a>
+    </li>
     <li><a id='find' href="#">Find in file &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Ctrl+F]</a></li>
     <li><a id='replace' href="#">Replace in file &nbsp;&nbsp;[Ctrl+H]</a></li>
   </ul>
@@ -118,4 +110,23 @@
 
   </div>
 </div>
+
+<a id='inlineUpload' style='display:none' href="#uploadContent">Inline HTML</a>
+<div style='display:none'>
+  <div id="uploadContent" style="padding:10px; background:#fff;">
+    <h2 style="color: #4c6172; font: 18px \'Helvetica Neue\', Helvetica, Arial, sans-serif;">
+    Upload local file to your workspace</h2>
+    <p id="uploadlog" class="message"><br/></p>
+    <br/>
+    <form action="{{ url_for('fileBrowser') }}" id="uploadForm" enctype="multipart/form-data">
+      <div class="fileinputs">
+        <input type="file" name="filename" size="30" id="choosefiles" />
+        <input type="hidden" name="opt" value="11" />
+        <input type="hidden" name="dir" value="" />
+        <br/>
+        <input type=submit value="Upload" id="submitUpload" class="button" />
+      </div>
+    </form>
+  </div>
+</div>
 {% endblock %}

slapos/runner/templates/viewLog.html

@@ -11,7 +11,7 @@
 {% block body %}
 
 
-<h2 class="hight hide" id="logheader">Inspecting current slapgrid log - Click for more options</h2>
+<h2 class="hight hide" id="logheader">Inspecting slapgrid log - Click for more options</h2>
 <div class="log_btn" id="logconfigbox" style="display:none">
 <span style="margin-left:15px; font-size: 18px;"> Update parameters </span>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;