Fix colorBox, Ace, message popup box and layout

Conflicts:
	slapos/runner/static/css/styles.css

slapos/runner/static/css/colorbox.css

@@ -20,24 +20,24 @@
 */
 #cboxOverlay{background:#000;}
 #colorbox{}
-    #cboxTopLeft{width:14px; height:14px; background:url(images/controls.png) no-repeat 0 0;}
-    #cboxTopCenter{height:14px; background:url(images/border.png) repeat-x top left;}
-    #cboxTopRight{width:14px; height:14px; background:url(images/controls.png) no-repeat -36px 0;}
-    #cboxBottomLeft{width:14px; height:43px; background:url(images/controls.png) no-repeat 0 -32px;}
-    #cboxBottomCenter{height:43px; background:url(images/border.png) repeat-x bottom left;}
-    #cboxBottomRight{width:14px; height:43px; background:url(images/controls.png) no-repeat -36px -32px;}
-    #cboxMiddleLeft{width:14px; background:url(images/controls.png) repeat-y -175px 0;}
-    #cboxMiddleRight{width:14px; background:url(images/controls.png) repeat-y -211px 0;}
+    #cboxTopLeft{/*width:7px; height:7px; background:#000; opacity:0.6;*/}
+    #cboxTopCenter{/*height:7px; background:#000; opacity:0.6;*/}
+    #cboxTopRight{/*width:7px; height:7px; background:#000; opacity:0.6;*/}
+    #cboxBottomLeft{/*width:7px; height:43px; background:#000; opacity:0.6;*/}
+    #cboxBottomCenter{height:36px; background: #E7E6E6; /*border-bottom: 7px solid rgba(0,0,0,0.8);*/}
+    #cboxBottomRight{/*width:7px; height:43px; background:#000; opacity:0.6;*/}
+    #cboxMiddleLeft{/*width:7px; background:#000; opacity:0.6;*/}
+    #cboxMiddleRight{/*width:7px; background:#000; opacity:0.6;*/}
     #cboxContent{background:#fff; overflow:visible;}
         .cboxIframe{background:#fff;}
         #cboxError{padding:50px; border:1px solid #ccc;}
         #cboxLoadedContent{margin-bottom:5px;}
         #cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
         #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
-        #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
+        #cboxTitle{position:absolute; bottom:-27px; left:0; text-align:left; width:100%; font-weight:bold; color:#7C7C7C; font-size:16px; margin-left: 12px;}
         #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
 
-        #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; border: none; bottom:-29px; background:url(images/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
+        #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; border: none; bottom:-29px; margin-right:8px; background:url(images/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
         #cboxPrevious{left:0px; background-position: -51px -25px;}
         #cboxPrevious:hover{background-position:-51px 0px;}
         #cboxNext{left:27px; background-position:-75px -25px;}

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: #1E73BD;
+  background: #A2BDC5;
   height:100%;
 }
 
@@ -44,6 +44,7 @@ th{
     color: #fff;
     font-weight: normal;
     font-size: 18px;
+    border-right: 1px solid #2281C1;
 }
 table.small th{padding: 4px;font-size: 16px;}
 textarea {
@@ -158,7 +159,7 @@ body {
     /*width: 99.6%;*/
     height: 430px;
     margin-top:2px;
-    border:1px solid #678DAD;
+    border:1px solid #519ADA;
     overflow:auto;
 }
 
@@ -388,7 +389,6 @@ padding: 10px;height: 80px;padding-bottom:15px;}
     height: 250px;
     border: solid 1px #678dad;
     background: #fff;
-    overflow: auto;
     padding: 5px;
 }
 
@@ -397,7 +397,6 @@ padding: 10px;height: 80px;padding-bottom:15px;}
     height: 250px;
     border: solid 1px #678dad;
     background: #fff;
-    overflow: auto;
     padding: 5px;
 }
 
@@ -406,7 +405,6 @@ padding: 10px;height: 80px;padding-bottom:15px;}
     height: 429px;
     border: solid 1px #678dad;
     background: #fff;
-    overflow: auto;
     padding: 0px;
 }
 .box_software{
@@ -543,6 +541,7 @@ padding: 10px;height: 80px;padding-bottom:15px;}
   border-bottom: 3px solid #D6D6D6;
   width: 100%
 }
+.space{height: 5px;width: 100%;}
 
 .waitting{
     margin-left: 10px;
@@ -804,5 +803,11 @@ padding:10px; font-size:14px; color:#03406A}
     color: #333;
 }
 
+/*-------------------------ACE UPDATE------------------------*/
+.ace_search{
+  width: 350px;
+  max-width: 350px;
+}
+
 /*  ********************/
 #shellinabox{width:100%; min-height:530px;}

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

@@ -20,7 +20,7 @@
 	margin: 0; /* issue 201 */
 	background-color: white;
 	overflow: auto;
-	/*height: 98%; /* issue 263 */
+	height: 98.5%; /* issue 263 */
 }
 
 ul.fancytree-container ul

slapos/runner/static/js/jquery/gsFileManager.js

@@ -755,16 +755,14 @@ if (jQuery) (function(jQuery){
             };
             sendAndRefresh(o, dataForSend, false, function(data) {
                 $("#sfile_content").empty();
-              	$("#sfile_content").append('<h2 style="color: #4c6172; font: 18px \'Helvetica Neue\', Helvetica, Arial, sans-serif;">Content of file: ' +
-          				gsitem.name +'</h2>');
-          			$("#sfile_content").append('<br/><div class="main_content"><pre id="editor"></pre></div>');
+          			$("#sfile_content").append('<div class="main_content"><pre id="editor"></pre></div>');
                 setupEditor();
                 var mode = modelist.getModeForPath(gsitem.name);
                 editor.getSession().modeName = mode.name;
                 editor.getSession().setMode(mode.mode);
           			$("#showfile").colorbox({inline:true, width: "847px", onComplete:function(){
           				editor.getSession().setValue(data);
-          			}});
+          			}, title: "Content of file: " + gsitem.name});
     			      $("#showfile").click();
             });
         }

slapos/runner/static/js/jquery/jqueryToolTip.js

-$(function () {
-    var distance = 10;
-    var time = 250;
-    var hideDelay = 200;
-    var hideDelayTimer = null;
-    var beingShown = false;
-    var shown = false;
-    var canShow = false;
-    $('.popup').css('opacity', 0);
-    $('a[rel=tooltip], span[rel=tooltip]').click(function(){
-      if (!canShow){
-        canShow = true;
-        $(this).mouseover();
-      }
-      else{
-        $(this).mouseout();
-      }
-      return false;
-    });
-    $('a[rel=tooltip], span[rel=tooltip], .popup').mouseover(function () {
-      if (!canShow){
+
+(function ($, document, window) {
+
+  $.extend($.fn, {
+    Tooltip: function(msg, option) {
+      var distance = 10;
+      var time = 250;
+      var hideDelay = 100;
+      var hideDelayTimer = null;
+      var beingShown = false;
+      var shown = false;
+      var canShow = false;
+      var content,
+          idbox = "tbox-" + $(this).attr('id'),
+          idcontent = "tcontent-" + $(this).attr('id'),
+          innerContent = '#tooltip-' + $(this).attr('id');
+
+      content = '<div class="popup" id="'+ idbox +'">' +
+          '<table id="dpop" cellpadding="0" border="0">' +
+          '<tbody><tr>' +
+          '<td id="topleft" class="corner"></td>' +
+          '<td class="top"><img width="30" height="29" alt="" src="/static/images/bubble-tail2.png"/></td>' +
+          '<td id="topright" class="corner"></td></tr><tr>' +
+          '<td class="left"></td>' +
+          '<td><div class="popup-contents" id="'+ idcontent +'"></div></td>' +
+          '<td class="right"></td>' +
+          '</tr><tr>' +
+          '<td class="corner" id="bottomleft"></td>' +
+          '<td class="bottom" valign="left"></td>' +
+          '<td id="bottomright" class="corner"></td></tr>' +
+          '</tbody></table>' +
+          '</div>';
+      $('body').append(content);
+      var popupContent = $(innerContent).detach();
+      popupContent.appendTo("#"+idcontent);
+      $(idbox).css('opacity', 0);
+      $(innerContent).show();
+
+      function showUP($this) {
+        if (!canShow){
+          return false;
+        }
+        var height = $this.height();
+        var top = $this.offset().top + height + 5;
+        var left = $this.offset().left +($this.width()/2)-30;
+        if (hideDelayTimer) clearTimeout(hideDelayTimer);
+        if (beingShown || shown) {
+          return;
+        } else {
+          // reset position of info box
+          beingShown = true;
+          $('#'+idbox).css({
+              top: top,
+              left: left,
+              display: 'block'
+          }).animate({
+              top: '-=' + distance + 'px',
+              opacity: 1
+          }, time, 'swing', function() {
+              beingShown = false;
+              shown = true;
+          });
+        }
         return false;
       }
-      var height = $(this).height();
-      var top = $(this).offset().top + height;
-      var left = $(this).offset().left +($(this).width()/2)-30;
-      var content = "#tooltip-" + $(this).attr('id');
-      if (hideDelayTimer) clearTimeout(hideDelayTimer);
-      if (beingShown || shown) {
-        return;
-      } else {
-        $('#jqtooltip').empty();
-        var contentValue = $(content).clone(true, true);
-        $(contentValue).appendTo('#jqtooltip');
-        $('#jqtooltip ' + content).show();
-        // reset position of info box
-        beingShown = true;
-        $('.popup').css({
-            top: top,
-            left: left,
-            display: 'block'
-        }).animate({
-            top: '-=' + distance + 'px',
-            opacity: 1
-        }, time, 'swing', function() {
-            beingShown = false;
-            shown = true;
-        });
+
+      function close(){
+        if (hideDelayTimer) clearTimeout(hideDelayTimer);
+        if (!shown) return false;
+        hideDelayTimer = setTimeout(function () {
+            hideDelayTimer = null;
+            $('#'+idbox).animate({
+                top: '-=' + distance + 'px',
+                opacity: 0
+            }, time, 'swing', function () {
+                $('.popup').css('display', 'none');
+                shown = false;
+                canShow = false;
+            });
+        }, hideDelay);
       }
-      return false;
-    });
-    $('a[rel=tooltip], span[rel=tooltip], .popup').mouseout(function () {
-      if (hideDelayTimer) clearTimeout(hideDelayTimer);
-      hideDelayTimer = setTimeout(function () {
-          hideDelayTimer = null;
-          $('.popup').animate({
-              top: '-=' + distance + 'px',
-              opacity: 0
-          }, time, 'swing', function () {
-              $('.popup').css('display', 'none');
-              shown = false;
-              canShow = false;
-          });
-      }, hideDelay);
-      return false;
-    });
-});
+
+      $(this).click(function(){
+        if (!canShow){
+          canShow = true;
+          showUP($(this));
+        }
+        else{
+          close();
+        }
+        return false;
+      });
+
+      $("body").click(function(){
+        close();
+      });
+      $('#'+idbox).click(function(e){
+        e.stopPropagation();
+      });
\ No newline at end of file
+    }
+  });
+
+}(jQuery, document, this));
\ No newline at end of file

slapos/runner/static/js/scripts/account.js

@@ -5,6 +5,8 @@
 $(document).ready(function () {
     "use strict";
     var send = false;
+    $("#information").Tooltip();
+
     $("#update").click(function () {
         var haspwd = false,
             hasAccount = ($("input#hasAccount").val() !== "");

slapos/runner/static/js/scripts/editor.js

@@ -6,7 +6,9 @@
 $(document).ready(function () {
     "use strict";
 
-    var editor, CurrentMode, file, workdir, edit, send;
+    var editor, CurrentMode, file, workdir, edit, send,
+        modelist,
+        config;
 
     function selectFile(file) {
         edit = false;
@@ -83,20 +85,22 @@ $(document).ready(function () {
         editor.insert("\n");
     }
 
-
-    editor = ace.edit("editor");
-    CurrentMode = require("ace/mode/buildout").Mode;
     file = $("input#profile").val();
     workdir = $("input#workdir").val();
     edit = false;
     send = false;
 
-    editor.setTheme("ace/theme/crimson_editor");
+    editor = ace.edit("editor");
+    modelist = require("ace/ext/modelist");
+    config = require("ace/config");
 
-    editor.getSession().setMode(new CurrentMode());
+    editor.getSession().setMode("ace/mode/text");
     editor.getSession().setTabSize(2);
     editor.getSession().setUseSoftTabs(true);
     editor.renderer.setHScrollBarAlwaysVisible(false);
+    var mode = modelist.getModeForPath(file);
+    editor.getSession().modeName = mode.name;
+    editor.getSession().setMode(mode.mode);
 
     selectFile(file);
 
@@ -126,6 +130,8 @@ $(document).ready(function () {
         return false;
     });
 
+    $("#editOption").Tooltip();
+
     $("#getmd5").click(function () {
         getmd5sum();
         return false;

slapos/runner/static/js/scripts/inspectInstance.js

@@ -215,9 +215,7 @@ $(document).ready(function () {
         return false;
     });
     $('#xmlview').click(function () {
-        var content = '<h2 style="color: #4c6172; font: 18px \'Helvetica Neue\', Helvetica, Arial, sans-serif;">' +
-            'INSTANCE PARAMETERS: Load XML file</h2><p id="xmllog" class="message"><br/></p>';
-        content += '<div class="main_content" style="height:230px"><pre id="editor"></pre></div>' +
+        var content = '<div class="main_content" style="height:230px"><pre id="editor"></pre></div>' +
             '<input type=submit value="Load" id="loadxml" class="button">';
         $.ajax({
             type: 'GET',
@@ -233,10 +231,10 @@ $(document).ready(function () {
                         {
                             inline: true,
                             width: "600px",
-                            height: "410px",
                             onComplete: function () {
                                 editor.getSession().setValue(data.result);
-                            }
+                            },
+                            title: 'INSTANCE PARAMETERS: Load XML file'
                         }
                     );
 

slapos/runner/static/js/scripts/repo.js

@@ -13,7 +13,8 @@ $(document).ready(function () {
     "use strict";
 
     var send = false,
-        getStatus;
+        getStatus,
+        viewer;
 
     function loadBranch(branch) {
         var i, selected;
@@ -57,9 +58,13 @@ $(document).ready(function () {
                         $("#commit").show();
                         $("#status").append("<br/><h2>Display Diff for current Project</h2>");
                         $("#status").append("<p style='font-size:15px;'>You have changes in your project." +
-                            " <a href='" + $SCRIPT_ROOT + "/getProjectDiff/"
-                            + encodeURI(project) + "'>Watch the diff</a></p>");
+                            " <a href='#' id='viewdiff'"
+                            + ">Watch the diff file</a></p>");
                     }
+                    $("#viewdiff").click(function () {
+                      viewDiff();
+                      return false;
+                    });
                     loadBranch(data.branch);
                 } else {
                     $("#error").Popup(data.result, {type: 'error', duration: 5000});
@@ -69,6 +74,42 @@ $(document).ready(function () {
         });
     }
 
+    function viewDiff(){
+      var project = $("#project").val(),
+            urldata = $("input#workdir").val() + "/" + $("#project").val();
+      if (send){
+        return;
+      }
+      send = true;
+      $.colorbox.remove();
+      $.ajax({
+        type: "POST",
+        url: $SCRIPT_ROOT + '/getProjectDiff',
+        data: {project: urldata},
+        success: function (data) {
+          if (data.code === 1) {
+            $("#inline_content").empty();
+        		$("#inline_content").append('<div class="main_content"><pre id="editorViewer"></pre></div>');
+            viewer = ace.edit("editorViewer");
+            viewer.setTheme("ace/theme/crimson_editor");
+
+            viewer.getSession().setMode("ace/mode/diff");
+            viewer.getSession().setTabSize(2);
+            viewer.getSession().setUseSoftTabs(true);
+            viewer.renderer.setHScrollBarAlwaysVisible(false);
+            viewer.setReadOnly(true);
+      			$("#inlineViewer").colorbox({inline:true, width: "847px", onComplete:function(){
+      				viewer.getSession().setValue(data.result);
+      			}, title: 'Git diff for project ' + project});
+  		      $("#inlineViewer").click();
+            send = false;
+          } else {
+            $("#error").Popup(data.result, {type: 'error'});
+          }
+        }
+      });
+    }
+
     function checkout(mode) {
         if ($("input#branchname").val() === "" ||
                 $("input#branchname").val() === "Enter the branch name...") {

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

@@ -9,11 +9,8 @@ $(document).ready(function () {
     var viewer,
         editor,
         modelist,
-        CurrentMode,
-        script = "/readFolder",
+        config,
         softwareDisplay = true,
-        Mode,
-        modes,
         projectDir = $("input#project").val(),
         workdir = $("input#workdir").val(),
         currentProject = workdir + "/" + projectDir.replace(workdir, "").split('/')[1],
@@ -37,6 +34,7 @@ $(document).ready(function () {
         edit = false;
         $("a#option").hide();
         if (file.substr(-1) !== "/") {
+          var info = $("#edit_info").html();
           $("#edit_info").empty();
           $("#edit_info").append("LOADING FILE... <img src='"+$SCRIPT_ROOT+"/static/images/loading.gif' />");
           $.ajax({
@@ -66,14 +64,12 @@ $(document).ready(function () {
                     setCookie("EDIT_CURRENT_FILE", file);
                 } else {
                     $("#error").Popup(data.result, {type: 'error', duration: 5000});
+                    $("#edit_info").html(info);
+                    $("a#option").show();
                 }
                 send = false;
             }
           });
-        } else {
-            $("#edit_info").empty();
-            $("#edit_info").append("No file in editor");
-            editor.getSession().setValue("");
         }
         return;
     }
@@ -152,6 +148,8 @@ $(document).ready(function () {
             .error(function () {})
             .complete(function () {});
         editor.insert("\n");
+        //Close popup
+        $("#option").click();
     }
 
     // --- Implement Cut/Copy/Paste --------------------------------------------
@@ -270,9 +268,7 @@ $(document).ready(function () {
                 data: {opt: 9, filename: node.title, dir: directory},
                 success: function (data) {
                   $("#inline_content").empty();
-                  $("#inline_content").append('<h2 style="color: #4c6172; font: 18px \'Helvetica Neue\', Helvetica, Arial, sans-serif;">Content of file: ' +
-                  	node.title +'</h2>');
-            			$("#inline_content").append('<br/><div class="main_content"><pre id="editorViewer"></pre></div>');
+            			$("#inline_content").append('<div class="main_content"><pre id="editorViewer"></pre></div>');
                   viewer = ace.edit("editorViewer");
                   viewer.setTheme("ace/theme/crimson_editor");
 
@@ -285,7 +281,7 @@ $(document).ready(function () {
                   viewer.setReadOnly(true);
             			$("#inlineViewer").colorbox({inline:true, width: "847px", onComplete:function(){
             				viewer.getSession().setValue(data);
-            			}});
+            			}, title: "Content of file: " + node.title});
       			      $("#inlineViewer").click();
                 }
             });
@@ -451,7 +447,7 @@ $(document).ready(function () {
       var index = parseInt($elt.attr('rel')),
           file = favourite_list[index];
       openFile(file);
-      $('a[rel=tooltip], span[rel=tooltip], .popup').mouseout();
+      $("#filelist").click();
     }
 
     function removeFavourite($elt){
@@ -462,6 +458,17 @@ $(document).ready(function () {
       if (favourite_list.length === 0){
         $("#tooltip-filelist ul").append("<li>Your favourites files list is <br/>empty for the moment!</li>");
       }
+      else{
+        var i = 0;
+        $("#tooltip-filelist ul li").each(function(){
+          $(this).attr('rel', i);
+          //Change attribute rel of all children!!
+          $(this).children().each(function(){
+            $(this).attr('rel', i);
+          });
+          i++;
+        });
+      }
       deleteCookie("FAV_FILE_LIST");
       setCookie("FAV_FILE_LIST", favourite_list.join('#'));
     }
@@ -501,6 +508,7 @@ $(document).ready(function () {
 
     editor = ace.edit("editor");
     modelist = require("ace/ext/modelist");
+    config = require("ace/config");
 
     editor.setTheme("ace/theme/crimson_editor");
     editor.getSession().setMode("ace/mode/text");
@@ -514,6 +522,9 @@ $(document).ready(function () {
 
     initEditor();
 
+    $("#option").Tooltip();
+    $("#filelist").Tooltip();
+
     editor.on("change", function (e) {
         if (edit_status === "" && edit) {
             $("span#edit_status").html("*");
@@ -568,6 +579,7 @@ $(document).ready(function () {
     });
     $("#getmd5").click(function () {
         getmd5sum(current_file);
+        $("#option").click();
         return false;
     });
 
@@ -622,10 +634,23 @@ $(document).ready(function () {
           removeFavourite($(this));
           return false;
         });
+        $("#option").click();
         $("#error").Popup("<b>Item added!</b><br/>"+filename+" has been added to your favourite list.", {type: 'confirm', duration: 3000});
       }
       return false;
     });
 
+    $("a#find").click(function(){
+      config.loadModule("ace/ext/searchbox", function(e) {e.Search(editor)});
+      $("#option").click();
+      return false;
+    });
+
+    $("a#replace").click(function(){
+      config.loadModule("ace/ext/searchbox", function(e) {e.Search(editor, true)});
+      $("#option").click();
+      return false;
+    });
+
 
 });

slapos/runner/templates/account.html

@@ -35,7 +35,7 @@
           <br/>
           <label for="rcode">Password Recover code:</label>
           <input type='password' name='rcode' id='rcode' value=''/>
-          <span class="information"><a href="#" id="information" rel="tooltip">help?</a></span>
+          <span class="information"><a href="#" id="information" rel="tooltip">help ?</a></span>
           <div class='clear'></div>
           <br/>
           <label></label>
@@ -53,7 +53,7 @@
   </div><br/>{%endif%}
 <div id="tooltip-information" style="display:none; float:left">
   <p style="font-size:12px;">
-  Please find this information in your slaprunner<br/> instance parameters.
+  Please find this information in your slaprunner<br/> connection informations.
   </p>
 </div>
 {% endblock %}

slapos/runner/templates/layout.html

@@ -22,8 +22,6 @@
   	<script src="{{ url_for('static', filename='js/jquery/jqueryToolTip.js') }}" type="text/javascript" charset="utf-8"></script>
     <script src="{{ url_for('static', filename='js/jquery/superfish.min.js') }}" type="text/javascript" charset="utf-8"></script>
     <script src="{{ url_for('static', filename='js/jquery/hoverIntent.js') }}" type="text/javascript" charset="utf-8"></script>
-    <script src="{{ url_for('static', filename='js/ace/ace.js') }}" type="text/javascript" charset="utf-8"></script>
-    <script src="{{ url_for('static', filename='js/ace/ext-modelist.js') }}" type="text/javascript" charset="utf-8"></script>
     <script type=text/javascript>
       $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
     </script>
@@ -36,6 +34,8 @@
     	});
     </script>
     {% if request.path != '/login' %}
+    <script src="{{ url_for('static', filename='js/ace/ace.js') }}" type="text/javascript" charset="utf-8"></script>
+    <script src="{{ url_for('static', filename='js/ace/ext-modelist.js') }}" type="text/javascript" charset="utf-8"></script>
     <script src="{{ url_for('static', filename='js/scripts/process.js') }}" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript">
   		$(document).ready(function() {
@@ -131,23 +131,5 @@
     {%endif%}
     </div>
 
-
-    <div class="popup">
-      <table id="dpop" cellpadding="0" border="0">
-      <tbody><tr>
-        <td id="topleft" class="corner"></td>
-        <td class="top"><img width="30" height="29" alt="" src="{{ url_for('static', filename='images/bubble-tail2.png') }}"/></td>
-        <td id="topright" class="corner"></td>
-      </tr><tr>
-        <td class="left"></td>
-        <td><div class="popup-contents" id="jqtooltip"></div></td>
-        <td class="right"></td>
-      </tr><tr>
-        <td class="corner" id="bottomleft"></td>
-        <td class="bottom" valign="left"></td>
-        <td id="bottomright" class="corner"></td>
-      </tr>
-      </tbody></table>
-    </div>
   </body>
 </html>

slapos/runner/templates/projectFolder.html

@@ -14,10 +14,11 @@
 <input type="hidden" name="method" id="method" value="{{method}}" />
 {% if method == "new" %}
 <div id="addsoftware">
-<h2 class="title">Create your software release</h2><br/>
-<label for='software'>Name: </label>
+<h2 class="hight">Create your software release</h2>
+<div class='space'></div><div class='space'></div>
+<label for='software'></label>
 <input type="text" name="software" id="software" size='30' value="Enter software name..." />
-<br/><br/>
+<br/>
 <div id="file_navigation">
 	<h2>Select the parent directory</h2>
 	<div id="fileTree" class="file_tree"></div>
@@ -27,7 +28,8 @@
 </div>
 {% elif method == "open" %}
 <div id="openSoftware">
-	<h2 class="title">Select the folder of your software release into the box</h2><br/>
+	<h2 class="hight">Select the folder of your software release into the box</h2>
+  <div class='space'></div>
 	<div id="fileTree" class="file_tree"></div>
 	<div id="file_info" class="file_info">
 	<img src="{{ url_for('static', filename='images/check.png') }}" class="check" id="check" alt=""/>

slapos/runner/templates/softwareFolder.html

@@ -8,10 +8,18 @@
   <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" />
   <script src="{{ url_for('static', filename='js/jquery/jquery.colorbox-min.js') }}" type="text/javascript" charset="utf-8"></script>
-  <script src="{{ url_for('static', filename='js/scripts/softwareFolder.js') }}" type="text/javascript" charset="utf-8"></script>  
+  <script src="{{ url_for('static', filename='js/scripts/softwareFolder.js') }}" type="text/javascript" charset="utf-8"></script>
 {% endblock %}
 {% block body %}
-
+<style>
+  .ace_search{
+    max-width: 350px;
+    width: 350px;
+  }
+  .ace_searchbtn:hover{background-color: #F8F8F8;}
+  .ace_replacebtn{padding: 5px;}
+  .ace_replacebtn:hover{background: #F8F8F8;}
+</style>
 <form action="" method=post>
 <input type="hidden" name="project" id="project" value="{{project}}" />
 <input type="hidden" name="workdir" id="workdir" value="{{workDir}}" />
@@ -72,10 +80,14 @@
 </form>
 
 
-<div id="tooltip-option" style="display:none">
+<div id="tooltip-option" style="display:none;min-width: 190px;">
   <span class="list first-list">Current file Menu</span>
-  <a id='getmd5' href="#">Get or Update md5sum</a>
-  <a id='addflist' href="#">Add to favourites</a>
+  <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='find' href="#">Find in file &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Ctl+F]</a></li>
+    <li><a id='replace' href="#">Replace in file &nbsp;&nbsp;[Ctl+H]</a></li></li>
+  </ul>
   <div class="sep"></div>
   <span class="list">Add project development</span>
   <ul id="plist">

slapos/runner/templates/viewLog.html

@@ -17,8 +17,7 @@
 <input type="radio" name="liveupdate" id="slow" value="slow" />
 <label for="slow">From time to time</label>
 </div>
-<br/>
-
+<div class='space'></div>
 <div class="log_content">
   <div class="log" id="salpgridLog"></div>
   <textarea class="log" readonly id="manualLog" style="display:none">{{result}}</textarea>