From eb31de365101f900f64e482faed30501687799a8 Mon Sep 17 00:00:00 2001
From: Azhagu Selvan SP <tamizhgeek@gmail.com>
Date: Thu, 8 Aug 2013 11:50:19 +0530
Subject: [PATCH] Added a global error bar at the top

Global error bar used to display all error messages
instead of a javasript alert. Fixes #201.
---
 public/css/style.css                       | 36 ++++++++++++++++++++++
 public/js/selfoss-base.js                  |  4 +--
 public/js/selfoss-events-entries.js        |  2 +-
 public/js/selfoss-events-entriestoolbar.js |  4 +--
 public/js/selfoss-events-navigation.js     |  6 ++--
 public/js/selfoss-events-sources.js        |  6 ++--
 public/js/selfoss-events.js                | 21 +++++++++++--
 templates/home.phtml                       |  9 ++++++
 8 files changed, 75 insertions(+), 13 deletions(-)
 mode change 100644 => 100755 public/js/selfoss-events-entries.js

diff --git a/public/css/style.css b/public/css/style.css
index a3a1f33a0e..816dd93efa 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -22,6 +22,42 @@ input {
     padding:6px;
 }
 
+/* error bar */
+
+#error-bar {
+    text-align:center;
+    background-color: #f9edbe;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    -khtml-border-radius: 4px;
+    border-color: #f0c36d;
+    border-radius: 4px;
+    width: 100%;
+    padding: 10px 0 10px 0;
+    display: none;
+}
+    #error-bar-inner {
+        position:relative;
+        diplay: inline-block;
+    }
+
+    #error-close {
+        float:right;
+        margin-right:10px;
+        text-decoration:none;
+        font-size:0.8em;
+        color:#aaa;
+        cursor: pointer;
+    }
+
+.sticky {  
+    position: fixed;  
+    top: 0;  
+    z-index: 100;  
+    border-top: 0;  
+}
+
+
 
 /* navigation */
 
diff --git a/public/js/selfoss-base.js b/public/js/selfoss-base.js
index 2cab1e0b73..b3361bd5bb 100644
--- a/public/js/selfoss-base.js
+++ b/public/js/selfoss-base.js
@@ -179,7 +179,7 @@ var selfoss = {
                 else if (textStatus == "parsererror")
                     location.reload();
                 else if (errorThrown)
-                    alert('Load list error: ' + errorThrown);
+                    selfoss.events.showErrorBar('Load list error: '+errorThrown);
             }
         });
     },
@@ -202,7 +202,7 @@ var selfoss = {
                 selfoss.events.navigation();
             },
             error: function(jqXHR, textStatus, errorThrown) {
-                alert('Load tags error: '+errorThrown);
+                selfoss.events.showErrorBar('Load tags error: '+errorThrown);
             },
             complete: function(jqXHR, textStatus) {
                 $('#nav-tags').removeClass('loading');
diff --git a/public/js/selfoss-events-entries.js b/public/js/selfoss-events-entries.js
old mode 100644
new mode 100755
index ad63ff5807..2d3069e5d1
--- a/public/js/selfoss-events-entries.js
+++ b/public/js/selfoss-events-entries.js
@@ -127,7 +127,7 @@ selfoss.events.entries = function(e) {
             },
             error: function(jqXHR, textStatus, errorThrown) {
                 streamMore.removeClass('loading');
-                alert('Load more error: '+errorThrown);
+                selfoss.events.showErrorBar('Load more error: '+errorThrown);
             }
         });
     });
diff --git a/public/js/selfoss-events-entriestoolbar.js b/public/js/selfoss-events-entriestoolbar.js
index 16e224a5c8..fcda29d55b 100644
--- a/public/js/selfoss-events-entriestoolbar.js
+++ b/public/js/selfoss-events-entriestoolbar.js
@@ -117,7 +117,7 @@ selfoss.events.entriesToolbar = function(parent) {
                     // rollback ui changes
                     setButton(!starr);
                     updateStats(!starr);
-                    alert('Can not starr/unstarr item: '+errorThrown);
+                    selfoss.events.showErrorBar('Can not star/unstar item: '+errorThrown); 
                 }
             });
             
@@ -208,7 +208,7 @@ selfoss.events.entriesToolbar = function(parent) {
                     // rollback ui changes
                     updateStats(!unread);
                     setButton(!unread);
-                    alert('Can not mark/unmark item: '+errorThrown);
+                    selfoss.events.showErrorBar('Can not mark/unmark item: '+errorThrown); 
                 }
             });
             
diff --git a/public/js/selfoss-events-navigation.js b/public/js/selfoss-events-navigation.js
index 0d4be666b3..a1cdeb1c0c 100644
--- a/public/js/selfoss-events-navigation.js
+++ b/public/js/selfoss-events-navigation.js
@@ -24,7 +24,7 @@ selfoss.events.navigation = function() {
                     selfoss.reloadList();
                 },
                 error: function(jqXHR, textStatus, errorThrown) {
-                    alert('Can not save new color: ' + errorThrown);
+                    selfoss.events.showErrorBar('Can not save new color: '+errorThrown);
                 }
             });
             
@@ -169,7 +169,7 @@ selfoss.events.navigation = function() {
                 error: function(jqXHR, textStatus, errorThrown) {
                     content.html(articleList);
                     $('#content').removeClass('loading');
-                    alert('Can not mark all visible item: ' + errorThrown);
+                    selfoss.events.showErrorBar('Can not mark all visible item:'+errorThrown);
                 }
             });
         });
@@ -188,4 +188,4 @@ selfoss.events.navigation = function() {
             window.location.href = $('base').attr('href')+"?logout=1";
         });
     }
-};
\ No newline at end of file
+};
diff --git a/public/js/selfoss-events-sources.js b/public/js/selfoss-events-sources.js
index 82a6944e36..ab9f9e8c28 100644
--- a/public/js/selfoss-events-sources.js
+++ b/public/js/selfoss-events-sources.js
@@ -26,8 +26,8 @@ selfoss.events.sources = function() {
                 selfoss.events.sources();
             },
             error: function(jqXHR, textStatus, errorThrown) {
-                parent.find('.source-edit-delete').removeClass('loading');
-                alert('Error deleting source: '+errorThrown);
+                parent.find('.source-edit-delete').removeClass('loading');                     
+                selfoss.events.showErrorBar('Error adding source: '+errorThrown); 
             }
         });
     });
@@ -130,7 +130,7 @@ selfoss.events.sources = function() {
             },
             error: function(jqXHR, textStatus, errorThrown) {
                 parent.find('.source-edit-delete').removeClass('loading');
-                alert('Error deleting source: '+errorThrown);
+                selfoss.events.showErrorBar('Error deleting source: '+errorThrown); 
             }
         }); 
     });
diff --git a/public/js/selfoss-events.js b/public/js/selfoss-events.js
index 097dc69a35..c231b8c737 100644
--- a/public/js/selfoss-events.js
+++ b/public/js/selfoss-events.js
@@ -33,6 +33,13 @@ selfoss.events = {
         // remove given hash (we just use it for history support)
         if(location.hash.trim().length!=0)
             location.hash = "";
+
+        // bind error bar close/dimiss link
+        $('#error-close').unbind('click').click(function() {
+            $('#error-bar-inner').html('');
+            $('#error-bar').hide();
+        });
+
     },
     
     
@@ -75,7 +82,7 @@ selfoss.events = {
                     if (textStatus == "abort")
                         return;
                     else if (errorThrown)
-                        alert('Load list error: ' + errorThrown);
+                        selfoss.events.showErrorBar('Load list error: '+errorThrown); 
                 },
                 complete: function(jqXHR, textStatus) {
                     $('#content').removeClass('loading');
@@ -102,5 +109,15 @@ selfoss.events = {
             $('#nav-tags-wrapper').height("auto");
             $("#nav-tags-wrapper").mCustomScrollbar("disable",selfoss.isSmartphone());
         }
-    }    
+    },
+
+
+    // Show error bar
+    showErrorBar: function(message) {
+        if(typeof(message) == 'undefined') {
+            var message = "Oops! Something went wrong";
+        }
+        $('#error-bar-inner').html(message);
+        $('#error-bar').show();
+    }
 };
diff --git a/templates/home.phtml b/templates/home.phtml
index 14b655b5da..427dba51f5 100644
--- a/templates/home.phtml
+++ b/templates/home.phtml
@@ -34,6 +34,15 @@
     <?PHP echo $this->loggedin===true ? "loggedin" : "notloggedin"; ?> 
     <?PHP echo \F3::get('auto_mark_as_read')==1 ? "auto_mark_as_read" : ""; ?>
 ">
+  
+    <!-- error bar -->
+    <div id="error-bar" class="sticky">
+      <span id="error-bar-inner">
+      </span>
+      <span id="error-close">
+        dismiss
+      </span>
+    </div>
     
     <!-- language settings for jQuery -->
     <span id="lang"