Update popup box to display more than one msg at a time

slapos/runner/static/css/styles.css

@@ -683,22 +683,25 @@ a.lshare img{
 #error{
     padding: 0px;
     position: absolute;
-    top: -2px;
+    top: 0px;
     left:0;
-    right: 0;
+    right: 70px;
 }
 
-#error > div{
-    background: none repeat scroll 0 0 #afcee4;
-    border: 1px solid #FFF;
-    width:500px;
-    margin: 0 auto;
-    border-top:none;
-    border-radius: 0 0 4px 4px;
+#error div{
+    background: none repeat scroll 0 0 #FFC8F4;
+    border: 1px solid #A70073;
+    padding: 5px;
+    margin: 5px 0;
+    min-width: 300px;
+    max-width: 500px;
+    float: right;
+    border-radius: 4px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-    text-align: center;
+    text-align: left;
     position: relative;
     z-index: 170;
+    clear: both;
 }
 
 #error table{
@@ -723,7 +726,7 @@ a.lshare img{
     width: 30px;
     height:22px;
 }
-#error p{white-space: pre-wrap; word-wrap: break-word; width: 430px; padding-bottom: 5px;}
+#error p{white-space: pre-wrap; word-wrap: break-word; width: 95%; padding-bottom: 5px;}
 .noscroll {
     overflow: hidden;
 }
@@ -735,13 +738,15 @@ a.lshare img{
 .list{display: block;padding: 5px;background: #E7E7E7; margin-bottom:7px;}
 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;}
+.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;}
 .menu-box-left{float:left; width: 135px; font-size:14px; background: #e4e4e4; padding:5px 0 5px 5px; margin-top:10px;

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

+/*jslint undef: true */
+/*global $, window, document */
+/* vim: set et sts=4: */
+
 // jQuery Message Popup
 // Display a message on the top of page, with floating
 //
 
 (function ($, document, window) {
-  var isShow = null;
-  var showDelayTimer = null;
+  var isShow = null,
+      top = 0,
+      boxCount = 0,
+      showDelayTimer = null;
+
   $.extend($.fn, {
     Popup: function(msg, option) {
-      var h;
+      var h,
+          $box = $(this),
+          currentBox = 'bcontent' + boxCount;
       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;
-      var $box = $(this);
-      if(showDelayTimer){clearTimeout(showDelayTimer);}
-      if(isShow){
-        $box.fadeOut('normal', function() {
-          setupBox();
-        });
-      }
-      else{setupBox();}
+
+      setupBox();
+
       function setupBox(){
         if (msg === undefined){
           msg = "Cannot execute your request. Please make sure you are logged in!!";
           option.type = "error";
         }
-        $box.empty();
-        $box.css('top','-1000px');
         $box.show();
-        $box.append('<div><table id="bcontent"><tr>' +
+        $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>' +
         '<td valign="middle"><p>' + msg + '</p></td>' +
-        '<td valign="middle" class="b_close"><span id="pClose"></span></td></tr></table></div>');
+        '<td valign="middle" class="b_close"><span id="pClose'+boxCount+'" class="pClose"></span></td></tr></table></div>');
+
+        $("#pClose"+boxCount).bind("click", function() {
+          close($("#"+currentBox));
+        });
+        $("#"+currentBox).fadeIn();
+        boxCount++;
         $(window).scroll(function(){
           $box.animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
         });
-        h = $("#bcontent").height()+5;
-        $("#pClose").bind("click", function() {
-          close();
-        });
-        showBox();
         if(option.duration !== 0){
           showDelayTimer = setTimeout(function(){
             showDelayTimer = null;
-            close();
+            close($("#"+currentBox));
           }, 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;
-        }
       }
-      function close(){
-        $box.animate({ top:"-=" + h + "px" }, "slow", function(){
-          $box.fadeOut("normal", function() {
-            isShow = false;
-          });
-        });
+      function close($elt){
+        $elt.unbind('click');
+        $elt.fadeOut();
+        $elt.remove();
       }
     }
   });

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

@@ -55,9 +55,9 @@ $(document).ready(function () {
                     if (data.code === 1) {
                         $("#edit_info").empty();
                         name = file.split('/');
-                        if (file.length > 80) {
+                        if (file.length > 75) {
                             //substring title.
-                            start = file.length - 80;
+                            start = file.length - 75;
                             path = "..." + file.substring(file.indexOf("/", (start + 1)));
                         }
                         $("#edit_info").append(" " + path);

slapos/runner/templates/layout.html

@@ -18,7 +18,7 @@
         <script src="{{ url_for('static', filename='js/jquery/jquery-1.10.2.min.js') }}" type="text/javascript" charset="utf-8"></script>
         <script src="{{ url_for('static', filename='js/jquery/jquery-ui-1.10.3.custom.min.js') }}" type="text/javascript" charset="utf-8"></script>
         <script src="{{ url_for('static', filename='js/jquery/jquery.form.js') }}" type="text/javascript" charset="utf-8"></script>
-      	<script src="{{ url_for('static', filename='js/jquery/popup.js') }}" type="text/javascript" charset="utf-8"></script>
+      	<script src="{{ url_for('static', filename='js/jquery/popupBox.js') }}" type="text/javascript" charset="utf-8"></script>
       	<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>