added popup message support

diff --git a/doc/todo.txt b/doc/todo.txt
index 4219faad3e6e54239c5d5103ad848433fe2cce45..97b6a0b91becd5724cbfaa6eaaaf81a66d488d13 100644 (file)
--- 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 ecf038546487670c5148615c674b596294de838c..260b1e2ae7736d6f50e1f2c62121752171fc1888 100644 (file)
--- 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 1b7ffc63661296d3f834bcfd1aacd744ad11fedf..a0f8a420480b55e79c66cb7c1ba1008254ba1d55 100644 (file)
--- 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 21e7f56ff98b4b220233d5e390dfc584bc8b9a27..045e653187fd0ff3d509bf1390a1e647fb3091ac 100644 (file)
--- a/templates/main.html
+++ b/templates/main.html
@@ -422,6 +422,7 @@
             copyright © Calin Crisan 2013
         </div> 
     </div>
+    <div class="popup-message-container"></div>
     <div class="modal-glass"></div>
     <div class="modal-container"></div>
 {% endblock %}