From 77b14a4d32a9498fa61f7ede8196b03e8971c7df Mon Sep 17 00:00:00 2001
From: Anon Ray <rayanon004@gmail.com>
Date: Sun, 6 Oct 2013 04:45:24 +0530
Subject: [PATCH] Add white overlay while saving

  Fix UI issues like displaying a overlay while saving etc.
---
 mouchak/static/css/editor.css |   11 +++++++++++
 mouchak/static/js/editor.js   |   17 +++++++++++++++++
 mouchak/templates/editor.html |    7 +++----
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/mouchak/static/css/editor.css b/mouchak/static/css/editor.css
index 0d96270..ebb970f 100644
--- a/mouchak/static/css/editor.css
+++ b/mouchak/static/css/editor.css
@@ -57,6 +57,9 @@
   width: 500px;
   z-index: 100;
   margin: 5px auto;
+  position: absolute;
+  left: 33%;
+  top: 0px;
 }
 #code-edit {
   position: absolute;
@@ -66,3 +69,11 @@
   left: 125px;
   width: 70%;
 }
+#editor-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #FFFFFF;
+  opacity: 0.7;
+  display: none;
+}
diff --git a/mouchak/static/js/editor.js b/mouchak/static/js/editor.js
index c4940d2..6bb5557 100644
--- a/mouchak/static/js/editor.js
+++ b/mouchak/static/js/editor.js
@@ -59,6 +59,7 @@
       //console.log('remove', id);
       M.pages.get(id).destroy({
         success: function(model, response) {
+          M.editor.hideOverlay();
           //console.log('deleted', model, response);
           M.pages.remove(id);
           M.pagelistview.render();
@@ -71,6 +72,7 @@
           }));
         },
         error: function(model, xhr) {
+          M.editor.hideOverlay();
           console.log('failed', model, xhr);
           $('#notifications').html(fail_template({
             title: 'Error',
@@ -78,6 +80,7 @@
           }));
         }
       });
+      M.editor.showOverlay();
     },
     showMenu: function(event) {
       this.menuconfigview.render();
@@ -240,6 +243,7 @@
       this.model.save({}, {
         success: function(model, response) {
           //console.log('saved', model, response);
+          M.editor.hideOverlay();
           model.set(response.page);
           model.id = response.page.id;
           M.pagelistview.render();
@@ -249,6 +253,8 @@
           }));
         },
         error: function(model, xhr) {
+          M.editor.hideOverlay();
+          model.set(response.page);
           console.log('failed', model, xhr);
           $('#notifications').html(fail_template({
             title: 'Error!',
@@ -256,6 +262,7 @@
           }));
         }
       });
+      M.editor.showOverlay();
       return false;
     }
   });
@@ -455,6 +462,7 @@
       this.model.save({}, {
         success: function(model, response) {
           //console.log(model, response);
+          M.editor.hideOverlay();
           $('#notifications').html(success_template({
             title: 'Saved',
             msg: ''
@@ -462,6 +470,7 @@
 
         },
         error: function(xhr, response) {
+          M.editor.hideOverlay();
           $('#notifications').html(fail_template({
             title: 'Error!',
             msg: 'Something went wrong, and the page could not be updated'
@@ -469,9 +478,11 @@
         }
       });
       //alert('end of save menu');
+      M.editor.showOverlay();
     }
   });
 
+
   M.editor = {
     init: function() {
       M.pages = new Pages(M.site_content.content);
@@ -529,6 +540,12 @@
       },
       cleanUp: function(id) {
       }
+    },
+    showOverlay: function() {
+      $('#editor-overlay').show();
+    },
+    hideOverlay: function() {
+      $('#editor-overlay').hide();
     }
   };
 
diff --git a/mouchak/templates/editor.html b/mouchak/templates/editor.html
index ed5edb1..3e2b633 100644
--- a/mouchak/templates/editor.html
+++ b/mouchak/templates/editor.html
@@ -13,11 +13,10 @@
       </div>
       <div id="notifications"></div>
     </div>
-    <div id="content-container">
-    </div>
-    <div id="footer">
-    </div>
+    <div id="content-container"></div>
+    <div id="footer"></div>
   </div>
+  <div id="editor-overlay"></div>
 
   <script>
     // initialize editor
-- 
1.7.10.4