From d0ad79c3181b5c95fb80f1557163e24d27f68c83 Mon Sep 17 00:00:00 2001
From: Nicolas Le Goff <legoff.n@gmail.com>
Date: Fri, 19 Oct 2012 14:16:34 +0200
Subject: [PATCH] Add loader

---
 .../web/prod/actions/Property/index.html.twig |  9 ++++-
 .../web/prod/actions/Property/type.html.twig  | 37 +++++++++++--------
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/templates/web/prod/actions/Property/index.html.twig b/templates/web/prod/actions/Property/index.html.twig
index e03fbf2f11..c8c85b4926 100644
--- a/templates/web/prod/actions/Property/index.html.twig
+++ b/templates/web/prod/actions/Property/index.html.twig
@@ -114,9 +114,12 @@
                     </tfoot>
                 </table>
             {% endfor %}
-            <div class="form-actions">
+            <div class="form-actions" style="background:transparent">
                 <button type="button" class="btn btn-primary submiter">{% trans "Apply changes" %}</button>
                 <button type="button" class="btn cancel">{% trans "Cancel" %}</button>
+                <span class="form-action-loader" style="display:none;">
+                    <img src="../skins/icons/loader414141.gif" />
+                </span>
             </div>
         </form>
     </div>
@@ -139,6 +142,7 @@
         $("button.submiter", $dialogBox).bind("click", function(){
             var $this = $(this);
             var form = $(this).closest("form");
+            var loader = form.find("form-action-loader");
 
             $.ajax({
                 type: form.attr("method"),
@@ -147,13 +151,14 @@
                 dataType: 'json',
                 beforeSend:function(){
                     $this.attr("disabled", true);
-                    //@todo add loader
+                    loader.show();
                 },
                 success: function(data){
                     $dialog.Close();
                 },
                 complete: function(){
                     $this.attr("disabled", false);
+                    loader.hide();
                 }
             });
         });
diff --git a/templates/web/prod/actions/Property/type.html.twig b/templates/web/prod/actions/Property/type.html.twig
index 4de2073e07..46fb859d69 100644
--- a/templates/web/prod/actions/Property/type.html.twig
+++ b/templates/web/prod/actions/Property/type.html.twig
@@ -1,18 +1,18 @@
-{% import 'common/thumbnail.html.twig' as thumbnail %}
+{% import "common/thumbnail.html.twig" as thumbnail %}
 
 {% set typesEnum = [
-        constant('\\Alchemy\\Phrasea\\Media\\Type\\Type::TYPE_AUDIO'),
-        constant('\\Alchemy\\Phrasea\\Media\\Type\\Type::TYPE_VIDEO'),
-        constant('\\Alchemy\\Phrasea\\Media\\Type\\Type::TYPE_DOCUMENT'),
-        constant('\\Alchemy\\Phrasea\\Media\\Type\\Type::TYPE_FLASH'),
-        constant('\\Alchemy\\Phrasea\\Media\\Type\\Type::TYPE_IMAGE')
+        constant("\\Alchemy\\Phrasea\\Media\\Type\\Type::TYPE_AUDIO"),
+        constant("\\Alchemy\\Phrasea\\Media\\Type\\Type::TYPE_VIDEO"),
+        constant("\\Alchemy\\Phrasea\\Media\\Type\\Type::TYPE_DOCUMENT"),
+        constant("\\Alchemy\\Phrasea\\Media\\Type\\Type::TYPE_FLASH"),
+        constant("\\Alchemy\\Phrasea\\Media\\Type\\Type::TYPE_IMAGE")
     ]
 %}
 
-<form style='padding:15px;' name="change-records-type" action="/prod/records/property/type/" method="POST">
-    <div class='well-small 'style="text-align:center;">
-        <select name='force_types' style="width:250px">
-            <option value="">{% trans 'Apply to all selected documents' %}</option>
+<form style="padding:15px;" name="change-records-type" action="/prod/records/property/type/" method="POST">
+    <div class="well-small" style="text-align:center;">
+        <select name="force_types" style="width:250px">
+            <option value="">{% trans "Apply to all selected documents" %}</option>
             {% for option in typesEnum %}
                 <option value="{{ option }}">{{ option }}</option>
             {% endfor %}
@@ -25,12 +25,12 @@
             <ul class="thumbnails" style="margin:20px auto;">
                 {% for record in recordsByType %}
                     <li class="span2">
-                        <div class="thumbnail" style='min-height:205px'>
-                            {{ thumbnail.format(record.get_thumbnail(), 160, 120, '', false, false) }}
+                        <div class="thumbnail" style="min-height:205px">
+                            {{ thumbnail.format(record.get_thumbnail(), 160, 120, "", false, false) }}
                             <div class="caption">
                                 <h5>{{ record.get_title() }}</h5>
                                 <p>
-                                    <select name="types[{{record.get_serialize_key()}}]" style='width:100%'>
+                                    <select name="types[{{record.get_serialize_key()}}]" style="width:100%">
                                         {% for option in typesEnum %}
                                             <option value="{{ option }}" {{ record.is_grouping() ? "disabled='disabled'": "" }} {{ option == record.get_type() ? "selected='selected'" : '' }}>{{ option }}</option>
                                         {% endfor %}
@@ -44,9 +44,12 @@
         {% endfor %}
     {% endfor %}
 
-    <div class="form-actions">
+    <div class="form-actions" style="background-color:transparent;">
         <button type="button" class="btn btn-primary submiter">{% trans "Apply changes" %}</button>
         <button type="button" class="btn cancel">{% trans "Cancel" %}</button>
+        <span class="form-action-loader" style="display:none;">
+            <img src="../skins/icons/loader414141.gif" />
+        </span>
     </div>
  </form>
 
@@ -57,21 +60,23 @@
     $("button.submiter", $dialogBox).bind("click", function(){
         var $this = $(this);
         var form = $(this).closest("form");
+        var loader = form.find("form-action-loader");
 
         $.ajax({
             type: form.attr("method"),
             url: form.attr("action"),
             data: form.serializeArray(),
-            dataType: 'json',
+            dataType: "json",
             beforeSend:function(){
                 $this.attr("disabled", true);
-                //@todo add loader
+                loader.show();
             },
             success: function(data){
                 $dialog.Close();
             },
             complete: function(){
                 $this.attr("disabled", false);
+                loader.hide();
             }
         });
     });