package ui improvements

5 files changed, 40 insertions, 9 deletions

diff --git a/module/web/templates/default/collector.html b/module/web/templates/default/collector.html
index e207ba99a..1a7a4aa0c 100644
--- a/module/web/templates/default/collector.html
+++ b/module/web/templates/default/collector.html
@@ -37,7 +37,9 @@ document.addEvent("domready", function(){
 </li>{% endblock %}

 

 {% block content %}

-<div id="load-indicator" style="opacity: 0; float: right">

+<div id="load-success" style="opacity: 0; float: right; color: white; background-color: #90ee90; padding: 4px; -moz-border-radius: 5px; border-radius: 5px; font-weight: bold; margin-left: -100%; margin-top: -10px;">{% trans "success" %}</div>

+<div id="load-failure" style="opacity: 0; float: right; color: white; background-color: #f08080; padding: 4px; -moz-border-radius: 5px; border-radius: 5px; font-weight: bold; margin-left: -100%; margin-top: -10px;">{% trans "failure" %}</div>

+<div id="load-indicator" style="opacity: 0; float: right; margin-top: -10px;">

     <img src="{{ MEDIA_URL }}img/ajax-loader.gif" alt="" style="padding-right: 5px"/>

     {% trans "loading" %}

 </div>

diff --git a/module/web/templates/default/downloads.html b/module/web/templates/default/downloads.html
index 9ab5a2ea4..eeb73e151 100644
--- a/module/web/templates/default/downloads.html
+++ b/module/web/templates/default/downloads.html
@@ -30,7 +30,7 @@
 
 {% block content %}
 
-{% trans "It's recommend not to download Files bigger than ~10MB from here." %}
+{% trans "Do not transfer downloaded files more than 10Mb in size via webinterface to external location, because it can result in high system load." %}
 
 <ul>
     {% for folder in files.folder %}
diff --git a/module/web/templates/default/edit_package.html b/module/web/templates/default/edit_package.html
index 9938eb17b..caa8a02cd 100644
--- a/module/web/templates/default/edit_package.html
+++ b/module/web/templates/default/edit_package.html
@@ -28,7 +28,7 @@
     </select>

 

 <label for="pack_pws">{% trans "Password" %}

-<span class="small">{% trans "List of password used for unrar." %}</span>

+<span class="small">{% trans "List of passwords used for unrar." %}</span>

 </label>

 <textarea rows="3" name="pack_pws" id="pack_pws"></textarea>

 

diff --git a/module/web/templates/default/package_ui.js b/module/web/templates/default/package_ui.js
index 1c9505bc9..751780180 100644
--- a/module/web/templates/default/package_ui.js
+++ b/module/web/templates/default/package_ui.js
@@ -1,8 +1,15 @@
 //{% load i18n %}
-var load, pack_box;
+var load, success, fail, pack_box;
 
 document.addEvent("domready", function(){
     load = new Fx.Tween($("load-indicator"), {link: "cancel"});
+    success = new Fx.Tween($("load-success"), {link: "chain"});
+    fail = new Fx.Tween($("load-failure"), {link: "chain"});
+
+    [load,success,fail].each(function(fx){
+        fx.set("opacity", 0)
+    });
+
     pack_box = new Fx.Tween($('pack_box'));
     $('pack_reset').addEvent('click', function(){
         hide_pack()
@@ -18,6 +25,25 @@ function indicateFinish() {
     load.start("opacity", 0)
 }
 
+function indicateSuccess(){
+    indicateFinish();
+    success.start("opacity", 1).chain(function(){
+        (function(){
+            success.start("opacity", 0);
+        }).delay(100);
+    });
+
+}
+
+function indicateFail(){
+    indicateFinish();
+    fail.start("opacity", 1).chain(function(){
+        (function(){
+            fail.start("opacity", 0);
+        }).delay(100);
+    });
+}
+
 function show_pack(){
     bg_show();
     $("pack_box").setStyle('display', 'block');
@@ -69,6 +95,7 @@ var PackageUI = new Class({
             if (li == ele && ele.retrieve("order") != pos){
                 order.push(ele.retrieve("pid")+"|"+pos)
             }
+            li.store("order", pos)
         });
         if (order.length > 0){
             indicateLoad();
@@ -76,7 +103,7 @@ var PackageUI = new Class({
                 method: 'get',
                 url: '/json/package_order/' + order[0],
                 onSuccess: indicateFinish,
-                onFailure: indicateFinish
+                onFailure: indicateFail
             }).send();
         }
     }
@@ -258,7 +285,7 @@ var Package = new Class({
                 ul.erase("html");
                 this.linksLoaded = false;
                     
-                indicateFinish();
+                indicateSuccess();
             }.bind(this)
         }).send();
         event.stop();
@@ -277,7 +304,6 @@ var Package = new Class({
         event.stop();
     },
 
-
     editPackage: function(event){
         $("pack_form").removeEvents("submit");
         $("pack_form").addEvent("submit", this.savePackage.bind(this));
@@ -317,6 +343,7 @@ var Package = new Class({
             if (li == ele && ele.retrieve("order") != pos){
                 order.push(ele.retrieve("lid")+"|"+pos)
             }
+            li.store("order", pos)
         });
         if (order.length > 0){
             indicateLoad();
@@ -324,7 +351,7 @@ var Package = new Class({
                 method: 'get',
                 url: '/json/link_order/' + order[0],
                 onSuccess: indicateFinish,
-                onFailure: indicateFinish
+                onFailure: indicateFail
             }).send();
         }
     }
diff --git a/module/web/templates/default/queue.html b/module/web/templates/default/queue.html
index e69edd2ad..cd16cf1c4 100644
--- a/module/web/templates/default/queue.html
+++ b/module/web/templates/default/queue.html
@@ -39,7 +39,9 @@ document.addEvent("domready", function(){
 

 

 {% block content %}

-<div id="load-indicator" style="opacity: 0; float: right">

+<div id="load-success" style="opacity: 0; float: right; color: white; background-color: #90ee90; padding: 4px; -moz-border-radius: 5px; border-radius: 5px; font-weight: bold; margin-left: -100%; margin-top: -10px;">{% trans "success" %}</div>

+<div id="load-failure" style="opacity: 0; float: right; color: white; background-color: #f08080; padding: 4px; -moz-border-radius: 5px; border-radius: 5px; font-weight: bold; margin-left: -100%; margin-top: -10px;">{% trans "failure" %}</div>

+<div id="load-indicator" style="opacity: 0; float: right; margin-top: -10px;">

     <img src="{{ MEDIA_URL }}img/ajax-loader.gif" alt="" style="padding-right: 5px"/>

     {% trans "loading" %}

 </div>