Update webrunner UI, fix JavaScript error

slapos/runner/static/css/jqueryTabs.css

@@ -12,6 +12,7 @@
 }
 #tabContaier textarea.slap{white-space: pre-wrap;word-wrap: break-word;overflow: hidden;color: #6F6F6F;width:430px; max-height:120px;
   resize: none; height:18px;padding:3px;min-height:18px;font-size: 13px;}
+#tabContaier textarea.mb_style{width:560px;}
 #tabContaier > ul{
 	overflow:hidden;
 	height:34px;

slapos/runner/static/css/styles.css

@@ -544,7 +544,6 @@ h2.hight:hover{
     overflow: auto;
     height: 95px;
     padding: 5px;
-    width: 604px;
     background:#fff;
     margin-bottom: 10px;
     color: #3A494F;

slapos/runner/static/js/jquery/popup.js

@@ -3,13 +3,24 @@
 //
 
 (function ($, document, window) {
+  var isShow = null;
+  var showDelayTimer = null;
   $.extend($.fn, {
     Popup: function(msg, option) {
+      var h;
       if (option.type == undefined) option.type = "info";
       if (option.closebtn == undefined) option.closebtn = false;
       if (option.duration == undefined) option.duration = 0;
       if (option.load == undefined) option.load = false;
       $box = $(this);
+      if(showDelayTimer){clearTimeout(showDelayTimer);}
+      if(isShow){
+        $box.fadeOut('normal', function() {
+          setupBox();
+        });
+      }
+      else{setupBox();}
+      function setupBox(){
         $box.empty();
         $box.css('top','-1000px');
         $box.show();
@@ -20,28 +31,37 @@
         $(window).scroll(function(){
   	      $box.animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
         });
-      var h = $("#bcontent").height()+5;
+        h = $("#bcontent").height()+5;
         $("#pClose").bind("click", function() {
   	      close();
         });
+        showBox();
+        if(option.duration != 0){
+        	showDelayTimer = setTimeout(function(){
+            showDelayTimer = null;
+        	  close();
+        	}, option.duration);
+        }
+      }
+      function showBox(){
         if(option.load){
           $(window).load(function(){
             $box.css('top', + ($(window).scrollTop() - h) +'px');
         	  $box.animate({ top:"+=" + h + "px" }, "slow");
+            isShow = true;
         	});
         }
         else{
         	$box.css('top', + ($(window).scrollTop() - h) +'px');
         	$box.animate({ top:"+=" + h + "px" }, "slow");
+          isShow = true;
         }
-      if(option.duration != 0){
-	setTimeout(function(){
-	  close();
-	}, option.duration);
       }
       function close(){
       	$box.animate({ top:"-=" + h + "px" }, "slow", function(){
-	  $box.fadeOut("normal");
+      	  $box.fadeOut("normal", function() {
+            isShow = false;
+          });
       	});
       }
     }

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

@@ -13,7 +13,8 @@ $(document).ready( function() {
   	  configRadio();
 	  });
   });
-  lastli.css("border-bottom", "none");
+  if(lastli){lastli.css("border-bottom", "none");}
+
   $("#parameterkw").slideBox("show");
   setupSlappart();
   $("#softwareType").slideBox();

slapos/runner/templates/cloneRepository.html

@@ -3,28 +3,37 @@
 {% block head %}
   {{ super() }}
   <link href="{{ url_for('static', filename='css/jqueryFileTree.css', _external=False) }}" rel="stylesheet" type="text/css" media="screen" />
+  <link href="{{ url_for('static', filename='css/jqueryTabs.css', _external=False) }}" rel="stylesheet" type="text/css" media="screen" />
   <script src="{{ url_for('static', filename='js/jquery/jqueryFileTree.js') }}" type="text/javascript" charset="utf-8"></script>
   <script src="{{ url_for('static', filename='js/scripts/folder.js') }}" type="text/javascript" charset="utf-8"></script>
+  <script src="{{ url_for('static', filename='js/jquery/jqueryTabs.js') }}" type="text/javascript" charset="utf-8"></script>
 {% endblock %}
 {% block body %}
-
-<h2 class='title'>Clone your repository into the workspace</h2><br/>
-<div id="repository" style="margin-left:40px;">
-<label for='name'>Project name*: </label>
-<input type="text" name="name" id="name" size='20' value="Enter the project name..." />
-<label for='repo'>&nbsp;url*: &nbsp;&nbsp;</label>
-<input type="text" name="repo" id="repo" size='25' value="Enter the url of your repository..." /><br/>
-<label for='user'>Your name: &nbsp;&nbsp;&nbsp;&nbsp;</label>
-<input type="text" name="user" id="user" size='20' value="{{name}}" />
-<label for='email'>Email: </label>
-<input type="text" name="email" id="email" size='25' value="{% if not email %}Enter your email adress...{% else %}{{email}}{%endif%}" />
-<input type="hidden" name="workdir" id="workdir" value="{{workDir}}" />
-<button class="button" id="clone">clone</button>
-<img class="waitting" id="imgwaitting" src="{{ url_for('static', filename='images/waiting.gif') }}" alt="" />
-<br/><br/>
-</div>
-<h2>Set your Security Mode</h2>
-<div class="menu-box-right">
+<h2>Clone a repository into your workspace</h2><br/>
+<div id="tabContaier">
+  <ul>
+    <li><a href="#tab1" class="active">Clone your repository</a></li>
+    <li><a href="#tab2">Manage your project folder</a></li>
+  </ul><!-- //Tab buttons -->
+  <div class="tabDetails">
+    <div id="tab1" class="tabContents">
+      <div id="repository" style="margin-left:40px;">
+      <label for='name'>Project name*: </label>
+      <input type="text" name="name" id="name" size='20' value="Enter the project name..." />
+      <label for='repo'>&nbsp;url*: &nbsp;&nbsp;</label>
+      <input type="text" name="repo" id="repo" size='25' value="Enter the url of your repository..." /><br/>
+      <label for='user'>Your name: &nbsp;&nbsp;&nbsp;&nbsp;</label>
+      <input type="text" name="user" id="user" size='20' value="{{name}}" />
+      <label for='email'>Email: </label>
+      <input type="text" name="email" id="email" size='25' value="{% if not email %}Enter your email adress...{% else %}{{email}}{%endif%}" />
+      <input type="hidden" name="workdir" id="workdir" value="{{workDir}}" />
+      <button class="button" id="clone">clone</button>
+      <img class="waitting" id="imgwaitting" src="{{ url_for('static', filename='images/waiting.gif') }}" alt="" />
+      <br/><br/>
+      </div>
+      <br/>
+      <h2>Set your Security Mode</h2>
+      <div class="menu-box-right" style="width: 592px;">
         <div style="background:#fff; padding:10px; min-height:100px; font-size:14px;">
         <div id="box0">
       	<h2>Clone Repository without using HTTPS and SSH</h2><br/>
@@ -35,7 +44,7 @@
       	</div>
       	<div id="box1" style="display:none">
       		<h2>You can use this public key to setup your repository</h2><br/>
-		<textarea class="public_key" readonly>
+      		<textarea class="mb_style public_key" readonly>
       		{{public_key}}
       		</textarea>
       	</div>
@@ -50,17 +59,21 @@
       	<p></p>
       	</div>
       	</div>
-</div>
-<div class="menu-box-left">
+      </div>
+      <div class="menu-box-left"  style="width: 115px;">
       	<ul id="modelist">
       		<li class="checked"><input type="radio" name="security" id="nothing" value="nothing" /><label for="nothing">ReadOnly</label></li>
       		<li><input type="radio" name="security" id="ssh" value="SSH" checked /><label for="ssh">SSH Mode</label></li>
       		<li style="border-bottom:none"><input type="radio" name="security" id="https" value="HTTPS" /><label for="https">Https Mode</label></li>
       	</ul>
-</div>
-<div class="clear"></div><br/>
-<div id="file_navigation">
-	<h2 class='title'>Your project folder</h2><br/>
-	<div id="fileTree" class="file_tree"></div>
+      </div>
+      <div class="clear"></div><br/>
+<!--Fin tab1-->
+    </div>
+    <div id="tab2" class="tabContents">
+      <h2>Content of your cloned project</h2><br/>
+      <div id="fileTree" class="file_tree_tabs"></div>
+    </div>
+  </div>
 </div>
 {% endblock %}