From: Calin Crisan <ccrisan@gmail.com>
Date: Sun, 6 Oct 2013 15:13:15 +0000 (+0300)
Subject: added popup message support
X-Git-Url: http://www.vanbest.org/gitweb/?a=commitdiff_plain;h=bca0ad0edba4f8a334480ea0a63eebb5b332df72;p=motioneye-debian

added popup message support
---

diff --git a/doc/todo.txt b/doc/todo.txt
index 4219faa..97b6a0b 100644
--- a/doc/todo.txt
+++ b/doc/todo.txt
@@ -1,7 +1,5 @@
--> add a motion running status indicator (and maybe a start/stop button)
 
 -> better ajax error handling
--> add a messaging mechanism
 
 -> authentication
 
@@ -29,4 +27,5 @@
 -> browser compatibility test
 -> requirements test
 
+-> add a motion running status indicator (and maybe a start/stop button)
 -> other todos
diff --git a/static/css/ui.css b/static/css/ui.css
index ecf0385..260b1e2 100644
--- a/static/css/ui.css
+++ b/static/css/ui.css
@@ -347,6 +347,33 @@ span.dialog-item-label {
     font-size: 0.9em;    
 }
 
+   
+    /* popup message */
+
+div.popup-message-container {
+    position: fixed;
+    display: none;
+    z-index: 9999;
+    background-color: #313131;
+    border-radius: 3px;
+    opacity: 0;
+    padding: 5px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+    top: 60px;
+}
+
+span.popup-message {
+    
+}
+
+span.popup-message.info {
+    color: white;
+}
+
+span.popup-message.error {
+    color: #FF6D55;
+}
+
 
     /* misc */
 
diff --git a/static/js/ui.js b/static/js/ui.js
index 1b7ffc6..a0f8a42 100644
--- a/static/js/ui.js
+++ b/static/js/ui.js
@@ -735,3 +735,34 @@ function runModalDialog(options) {
         content.find('div.button.default').focus();
     }
 }
+
+
+    /* popup message */
+
+function showPopupMessage(message, type) {
+    var container = $('div.popup-message-container');
+    var content = $('<span class="popup-message"></span>');
+    
+    if (window._popupMessageTimeout) {
+        clearTimeout(window._popupMessageTimeout);
+    }
+    
+    content.html(message);
+    content.addClass(type);
+    container.html(content);
+    
+    var windowWidth = $(window).width();
+    var messageWidth = container.width();
+    
+    container.css('display', 'block');
+    container.css('left', (windowWidth - messageWidth) / 2);
+
+    container.animate({'opacity': '1'}, 200);
+    
+    window._popupMessageTimeout = setTimeout(function () {
+        window._popupMessageTimeout = null;
+        container.animate({'opacity': '0'}, 200, function () {
+            container.css('display', 'none');
+        });
+    }, 5000);
+}
diff --git a/templates/main.html b/templates/main.html
index 21e7f56..045e653 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -422,6 +422,7 @@
             copyright &copy; Calin Crisan 2013
         </div> 
     </div>
+    <div class="popup-message-container"></div>
     <div class="modal-glass"></div>
     <div class="modal-container"></div>
 {% endblock %}