Update features in styles and scripts

slapos/runner/static/css/jqueryTabs.css

-#tabContaier{
-	background: #e4e4e4;
+#tabContainer{
+    background: #D5D5D5;
     padding:3px;
     /*position:relative;*/
     width:930px;
@@ -7,24 +7,26 @@
     border-radius: 4px 4px 0 0;
 }
 
-#tabContaier textarea {
+#tabContainer textarea {
     width:702px;
 }
-#tabContaier textarea.slap{white-space: pre-wrap;word-wrap: break-word;overflow: hidden;color: #6F6F6F;width:616px; max-height:120px;
+#tabContainer textarea.slap{white-space: pre-wrap;word-wrap: break-word;overflow: hidden;color: #6F6F6F;width:616px; max-height:120px;
   resize: none; height:18px;padding:3px;min-height:18px;font-size: 13px;}
-#tabContaier textarea.mb_style{width:713px;}
-#tabContaier > ul{
+#tabContainer textarea.mb_style{width:713px;}
+#tabContainer > ul{
     overflow:hidden;
     height:34px;
     position:absolute;
     z-index:80;
+    margin: 0;
 }
-#tabContaier > ul > li{
+#tabContainer > ul > li{
     float:left;
     list-style:none;
+    font-family: Arial;
 }
-#tabContaier > ul > li a{
-	background:#e4e4e4;
+#tabContainer > ul > li a{
+    background:#D5D5D5;
     border-left:1px solid #fcfcfc;
     color:#666;
     cursor:pointer;
@@ -34,20 +36,20 @@
     padding:0 30px;
     text-decoration:none;
     color: #737373;
-	text-shadow: 0px 1px #FFF;
+    text-shadow: 0px 1px #ECECEC;
     font-size: 17px;
 }
-#tabContaier > ul > li a:hover{
-	background:#eee;
+#tabContainer > ul > li a:hover{
+    background:#E2E2E2;
 }
-#tabContaier > ul > li a.active{
+#tabContainer > ul > li a.active{
     background:#fbfbfb;
     border:1px solid #fff;
   border-top:0;
     border-right:0;
     color:#333;
 }
-#tabContaier > ul > li:first-child a{border-left:0}
+#tabContainer > ul > li:first-child a{border-left:0}
 .tabDetails{
     background:#fbfbfb;
     border-top: none;

slapos/runner/static/css/styles.css

@@ -181,6 +181,7 @@ body {
     color: #4c6172;
     font-weight: normal;
     font-size: 1.4em;
+    line-height: 25px;
 }
 .content h2 a{
     text-decoration:none;
@@ -432,24 +433,6 @@ padding: 10px;height: 80px;padding-bottom:15px;}
     margin: 5px;
 }
 
-#contentInfo h2, .hight{
-    background: #e4e4e4;
-    width: 100%;
-    height: 25px;
-    padding-top:2px;
-    text-indent: 5px;
-    color: #737373;
-    text-shadow: 0px 1px #FFF;
-}
-
-.show{
-    background: #e4e4e4 url(../images/arrow_up.png) 97% 50% no-repeat;
-}
-
-.hide{
-    background: #e4e4e4 url(../images/arrow_down.png) 97% 50% no-repeat;
-}
-
 .gradient{background-color:#f4f4f4;background:-moz-linear-gradient(#f4f4f4,#ececec);background:-webkit-linear-gradient(#f4f4f4,#ececec);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4',endColorstr='#ececec')";background:linear-gradient(#f4f4f4,#ececec);}
 
 h2.hight:hover{
@@ -668,13 +651,13 @@ a.lshare img{
 }
 .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 h2{padding-top: 2px;}
 .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;}
 
 #error{
     padding: 0px;
@@ -699,6 +682,8 @@ a.lshare img{
     z-index: 170;
     clear: both;
 }
+#error div.alert{background: lightYellow; border: 1px solid #E6DB55;}
+#error div.confirm, #error div.info{background: none repeat scroll 0 0 #CBECF7; border: 1px solid #2599A3;}
 
 #error table{
     background: none;
@@ -722,7 +707,7 @@ a.lshare img{
     width: 30px;
     height:22px;
 }
-#error p{white-space: pre-wrap; word-wrap: break-word; width: 95%; padding-bottom: 5px;}
+#error p{white-space: pre-wrap; word-wrap: break-word;padding: 0 5px; line-height: 18px; color: #67767C;max-width: 430px;}
 .noscroll {
     overflow: hidden;
 }
@@ -735,16 +720,17 @@ a.lshare img{
 div.sep{display:block; height:7px;}
 .slidebox{padding:10px; }
 
-.alert_message{ background: url(../images/alert.png) center no-repeat; height: 26px;}
-.error_message{ background: url(../images/exit.png) center no-repeat; height: 26px;}
-.confirm_message{ background: url(../images/confirm.png) center no-repeat; height: 26px;}
-.info_message{ background: url(../images/info.png) center no-repeat; height: 26px;}
-#error p{ font-size: 13px; color: #4A131F;}
 .pClose, .close{background:url(../images/close.png) no-repeat 0px 0px; display:block; width:22px; height:22px; cursor:pointer}
 .pClose:hover, .close:hover{background:url(../images/close_hover.png) no-repeat 0px 0px;}
 
 .md5sum {margin:10px; font-size:15px;}
-.title{background: #e4e4e4; width: 100%; height: 26px; padding-top:2px; text-indent: 5px; color: #737373; text-shadow: 0px 1px #FFF;}
+
+#contentInfo h2, .hight, .title{background: #D5D5D5; width: 100%; height: 26px; padding-top:2px; text-indent: 5px; color: #737373;
+    text-shadow: 0px 1px #ECECEC;}
+.hight, .title{border-bottom: 3px solid #6DB9DD;}
+.show{background: #e4e4e4 url(../images/arrow_up.png) 97% 50% no-repeat;}
+.hide{background: #e4e4e4 url(../images/arrow_down.png) 97% 50% no-repeat;}
+
 .menu-box-left{float:left; width: 135px; font-size:14px; background: #e4e4e4; padding:5px 0 5px 5px; margin-top:10px;
     font-size:14px; border-radius: 4px 0 0 4px;}
 .menu-box-right{background: #e4e4e4; padding: 5px; float:right; width: 745px; margin-left: -5px;
@@ -772,11 +758,11 @@ div.sep{display:block; height:7px;}
 .popup a{display: block; font-weight:bold;  color: #4DA0C6; padding-left: 5px; padding-bottom: 5px;}
 .popup a:hover{color: #666666;}
 .popup ul{margin:0; margin-bottom:10px; padding:0; list-style:none;}
-.popup li{border-bottom: 1px dashed #666666; padding:0;}
-.popup ul li:last-child{border-bottom:none}
+.popup li{border-bottom: 1px solid #E4E4E4; padding:3px 0; margin: 0 5px;}
 .popup ul li a{padding-bottom:0}
 ul.menu li {padding-top:5px; padding-bottom:5px;}
 ul.menu{margin-bottom:0;}
+.inline a, .inline{display: inline;}
 .popup-value{display:none;}
 textarea.parameter {border: solid 1px #678dad; color: #666666; height:110px;}
 .link{color:#fff; font-weight:bold; text-decoration:none}
@@ -801,3 +787,19 @@ padding:10px; font-size:14px; color:#03406A}
 .login-input{width:220px;}
 .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;
+}
\ No newline at end of file

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%; /* issue 263 */
 }
 
 ul.fancytree-container ul

slapos/runner/static/js/jquery/jqueryTabs.js

@@ -4,7 +4,7 @@ $(document).ready(function(){
   var fromheight = 0;
   var previoustab = null;
   if (hashes.length == 2 && hashes[1] !== ''){
-    $("#tabContaier>ul li").each(function() {
+    $("#tabContainer>ul li").each(function() {
       var $tab = $(this).find("a");
       if($tab.hasClass("active")){
         $tab.removeClass("active");
@@ -18,26 +18,26 @@ $(document).ready(function(){
     });
   }
   else{$(".tabContents:first").show(); previoustab = ".tabContents:first";} // Show the first div of tab content by default
-  $("#tabContaier ul li a").click(function(){ //Fire the click event
+  $("#tabContainer ul li a").click(function(){ //Fire the click event
     if($(this).hasClass('active')){
         return false;
     }
     fromheight = $(previoustab).height();
     var activeTab = $(this).attr("href"); // Catch the click link
-    $("#tabContaier .tabDetails").css("height", $("#tabContaier .tabDetails").height());
-    $("#tabContaier ul li a").removeClass("active"); // Remove pre-highlighted link
+    $("#tabContainer .tabDetails").css("height", $("#tabContainer .tabDetails").height());
+    $("#tabContainer ul li a").removeClass("active"); // Remove pre-highlighted link
     $(this).addClass("active"); // set clicked link to highlight state
     $(".tabContents").hide(); // hide currently visible tab content div
     $(activeTab).fadeIn(); // show the target tab content div by matching clicked link.
     var diff = fromheight - $(activeTab).height();
-    if (diff > 0){$("#tabContaier .tabDetails").animate({height: '-=' + diff + 'px'}, 850, 'swing', function() {
-      $("#tabContaier .tabDetails").css("height", "");
+    if (diff > 0){$("#tabContainer .tabDetails").animate({height: '-=' + diff + 'px'}, 850, 'swing', function() {
+      $("#tabContainer .tabDetails").css("height", "");
     });}
-    else{diff = -1*diff; $("#tabContaier .tabDetails").animate({height: '+=' + diff + 'px'}, 850, 'swing', function() {
-      $("#tabContaier .tabDetails").css("height", "");
+    else{diff = -1*diff; $("#tabContainer .tabDetails").animate({height: '+=' + diff + 'px'}, 850, 'swing', function() {
+      $("#tabContainer .tabDetails").css("height", "");
     });}
     previoustab = activeTab;
-    $("#tabContaier .tabDetails").css("height", $("#tabContaier .tabDetails").height());
+    $("#tabContainer .tabDetails").css("height", $("#tabContainer .tabDetails").height());
     return false;//this reinitialize tab index when reload page
   });
 });
\ No newline at end of file

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

@@ -5,8 +5,22 @@ $(function () {
     var hideDelayTimer = null;
     var beingShown = false;
     var shown = false;
+    var canShow = false;
     $('.popup').css('opacity', 0);
-    $('a[rel=tooltip], a[rel=tooltip-min], .popup').mouseover(function () {
+    $('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){
+        return false;
+      }
       var height = $(this).height();
       var top = $(this).offset().top + height;
       var left = $(this).offset().left +($(this).width()/2)-30;
@@ -34,7 +48,8 @@ $(function () {
         });
       }
       return false;
-    }).mouseout(function () {
+    });
+    $('a[rel=tooltip], span[rel=tooltip], .popup').mouseout(function () {
       if (hideDelayTimer) clearTimeout(hideDelayTimer);
       hideDelayTimer = setTimeout(function () {
           hideDelayTimer = null;
@@ -44,6 +59,7 @@ $(function () {
           }, time, 'swing', function () {
               $('.popup').css('display', 'none');
               shown = false;
+              canShow = false;
           });
       }, hideDelay);
       return false;

slapos/runner/static/js/jquery/popupBox.js

@@ -31,10 +31,9 @@
         }
         $box.show();
         $box.css('top', + ($(window).scrollTop()) +'px');
-        $box.append('<div id="' + currentBox + '" style="display:none"><table><tr>' +
-        '<td valign="middle" class="logo ' + option.type + '_message"></td>' +
+        $box.append('<div id="' + currentBox + '" style="display:none" class="'+option.type+'"><table><tr>' +
         '<td valign="middle"><p>' + msg + '</p></td>' +
-        '<td valign="middle" class="b_close"><span id="pClose'+boxCount+'" class="pClose"></span></td></tr></table></div>');
+        '<td valign="top" class="b_close"><span id="pClose'+boxCount+'" class="pClose"></span></td></tr></table></div>');
 
         $("#pClose"+boxCount).bind("click", function() {
           close($("#"+currentBox));
@@ -58,8 +57,9 @@
       }
       function close($elt){
         $elt.unbind('click');
-        $elt.fadeOut();
+        $elt.fadeOut("slow", function() {
           $elt.remove();
+        });
       }
     }
   });

slapos/runner/templates/account.html

@@ -8,7 +8,7 @@
 {% endblock %}
 {% block body %}
 <h2>Web runner parameters</h2><br/>
-<div id="tabContaier">
+<div id="tabContainer">
   <ul>
     <li><a href="#tab1" class="active">Your personal information</a></li>
     <!--<li><a href="#tab2">Configurations</a></li>-->

slapos/runner/templates/instanceInspect.html

@@ -16,7 +16,7 @@
 <input type='hidden' name='root' id='root' value='{%if file_path != "" %}{{file_path}}{%endif%}' />
 <input type="hidden" name="partition_amount" id="partitionAmount" value="{{ partition_amount }}" />
 <h2>Instance inspection</h2><br/>
-<div id="tabContaier">
+<div id="tabContainer">
     <ul>
       <li><a href="#tab1" class="active">Process</a></li>
       <li><a href="#tab2">Connection Information</a></li>

slapos/runner/templates/manageRepository.html

@@ -13,7 +13,7 @@
   <script src="{{ url_for('static', filename='js/ace/ace.js') }}" type="text/javascript" charset="utf-8"></script>
 {% endblock %}
 {% block body %}
-<div id="tabContaier">
+<div id="tabContainer">
   <ul>
     <li><a href="#tab1" class="active" id="cloneTab">Clone repository</a></li>
     <li><a href="#tab2" id="gitTab">Manage (GIT)</a></li>