Improving slaprunner editor with tab support

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;
+}
+.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;}
+.bt_close {
+    text-decoration: none;
+    color: #999;
+    font-weight: bold;
+    font-size: 1em;
+    padding: 0 4px;
+    -webkit-border-radius: .2em;
+    -moz-border-radius: .2em;
+    border-radius: .2em;
+    cursor: pointer;
+}
+.bt_close:hover {
+    color: #333;
+}
+

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%;
 }
 
@@ -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;
 }
@@ -551,12 +542,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;
@@ -640,26 +629,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;
@@ -790,22 +768,6 @@ 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;}
 
-.bt_close {
-    text-decoration: none;
-    color: #999;
-    font-weight: bold;
-    font-size: 16px;
-    padding: 0 4px;
-    -webkit-border-radius: .2em;
-    -moz-border-radius: .2em;
-    border-radius: .2em;
-    cursor: pointer;
-}
-.bt_close:hover {
-    background: #D6D6D6;
-    color: #333;
-}
-
 /*-------------------------ACE UPDATE------------------------*/
 .ace_search{
   width: 350px;

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/viewlog.js

@@ -102,7 +102,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">View this file</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>
@@ -41,26 +41,19 @@
   <li class="newfile separator"><a href="#nfile">New File</a></li>
   <li class="newdir"><a href="#nfolder">New Folder</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="save"><span class="save_btn" title="Save current file. Hint: Use Ctrl+S">Save</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">&nbsp;</span></li>
+      <li id="expand"><span class="expand_editor" title="Expand or reduce the editor area">&nbsp;</span></li>
+      <li id="filelist"><span class="flist_btn" title="Favourites files list" rel='tooltip'>&nbsp;</span></li>
       <li id="option"><span class="fmenu_btn" title='Show more option' rel='tooltip'>Menu</span></li>
-      <li>
-        <h2>
-          <span id="edit_info">No file in editor</span>
-          <span id="edit_status"></span>
-        </h2>
-      </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>
@@ -68,16 +61,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>
 
@@ -87,6 +76,7 @@
   <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='addflist' href="#">Full screen</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>

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;