From 10d0fa7631aba07d7f1971316dc0fc03e8e3b886 Mon Sep 17 00:00:00 2001
From: Chris Houseknecht <chouse@ansible.com>
Date: Wed, 30 Jul 2014 17:06:20 -0400
Subject: [PATCH] Socket connection help Revised help text, adding status
 icons. Added clear overlay under the modal dialog. Rotated the network icon
 left by 45 deg.

---
 awx/ui/static/js/help/ChromeSocketHelp.js  | 5 ++---
 awx/ui/static/js/help/FirefoxSocketHelp.js | 5 ++---
 awx/ui/static/js/help/SafariSocketHelp.js  | 5 ++---
 awx/ui/static/less/ansible-ui.less         | 4 ++++
 awx/ui/static/lib/ansible/Utilities.js     | 7 +++++++
 5 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/awx/ui/static/js/help/ChromeSocketHelp.js b/awx/ui/static/js/help/ChromeSocketHelp.js
index 8134828c00..8e59f4752c 100644
--- a/awx/ui/static/js/help/ChromeSocketHelp.js
+++ b/awx/ui/static/js/help/ChromeSocketHelp.js
@@ -21,9 +21,8 @@ angular.module('ChromeSocketHelpDefinition', [])
                     src: 'socket_indicator.png',
                     maxWidth: 360
                 },
-                box: "<p>When live events are streaming the connection status indicator will be green. Red or orange indicates the " +
-                    "browser is having difficulty connecting to the server, and live events are no longer being received.</p><p>If the indicator " +
-                    "appears red or orange, click next for troubleshooting help.</p>"
+                box: "<p><i class=\"fa icon-socket-ok\"></i> indicates live events are streaming and the browser is connected to the live events server.</p><p>If the indicator continually shows <i class=\"fa icon-socket-error\"></i> " +
+                    "or <i class=\"fa icon-socket-connecting\"></i>, then live events are not streaming, and the browser is having difficulty connecting to the live events server. In this case click Next for troubleshooting help.</p>"
             }, {
                 intro: 'Live events connection:',
                 icon: {
diff --git a/awx/ui/static/js/help/FirefoxSocketHelp.js b/awx/ui/static/js/help/FirefoxSocketHelp.js
index 823f660d28..4e3c5941d2 100644
--- a/awx/ui/static/js/help/FirefoxSocketHelp.js
+++ b/awx/ui/static/js/help/FirefoxSocketHelp.js
@@ -21,9 +21,8 @@ angular.module('FFSocketHelpDefinition', [])
                     src: 'socket_indicator.png',
                     maxWidth: 360
                 },
-                box: "<p>When live events are streaming the connection status indicator will be green. Red or orange indicates the " +
-                    "browser is having difficulty connecting to the server, and live events are no longer being received.</p><p>If the indicator " +
-                    "appears red or orange, click Next for troubleshooting help.</p>"
+                box: "<p><i class=\"fa icon-socket-ok\"></i> indicates live events are streaming and the browser is connected to the live events server.</p><p>If the indicator continually shows <i class=\"fa icon-socket-error\"></i> " +
+                    "or <i class=\"fa icon-socket-connecting\"></i>, then live events are not streaming, and the browser is having difficulty connecting to the live events server. In this case click Next for troubleshooting help.</p>"
             }, {
                 intro: 'Live events connection:',
                 icon: {
diff --git a/awx/ui/static/js/help/SafariSocketHelp.js b/awx/ui/static/js/help/SafariSocketHelp.js
index 9cb5e644e8..b7509ed23a 100644
--- a/awx/ui/static/js/help/SafariSocketHelp.js
+++ b/awx/ui/static/js/help/SafariSocketHelp.js
@@ -21,9 +21,8 @@ angular.module('SafariSocketHelpDefinition', [])
                     src: 'socket_indicator.png',
                     maxWidth: 360
                 },
-                box: "<p>When live events are streaming the connection status indicator will be green. Red or orange indicates the " +
-                    "browser is having difficulty connecting to the server, and live events are no longer being received.</p><p>If the indicator " +
-                    "appears red or orange, click next for troubleshooting help.</p>"
+                box: "<p><i class=\"fa icon-socket-ok\"></i> indicates live events are streaming and the browser is connected to the live events server.</p><p>If the indicator continually shows <i class=\"fa icon-socket-error\"></i> " +
+                    "or <i class=\"fa icon-socket-connecting\"></i>, then live events are not streaming, and the browser is having difficulty connecting to the live events server. In this case click Next for troubleshooting help.</p>"
             }, {
                 intro: 'Live events connection:',
                 icon: {
diff --git a/awx/ui/static/less/ansible-ui.less b/awx/ui/static/less/ansible-ui.less
index 5c5e13c3d6..c3e81562e1 100644
--- a/awx/ui/static/less/ansible-ui.less
+++ b/awx/ui/static/less/ansible-ui.less
@@ -1549,6 +1549,10 @@ tr td button i {
       color: @grey-txt;
       font-size: 14px;
   }
+
+  .fa-rss {
+      transform:rotate(-45deg);
+  }
 }
 
 /* Activity Stream Widget */
diff --git a/awx/ui/static/lib/ansible/Utilities.js b/awx/ui/static/lib/ansible/Utilities.js
index f89305fe73..9425fcb72b 100644
--- a/awx/ui/static/lib/ansible/Utilities.js
+++ b/awx/ui/static/lib/ansible/Utilities.js
@@ -408,6 +408,12 @@ angular.module('Utilities', ['RestServices', 'Utilities'])
                             $('#help-modal-dialog').dialog('close');
                         }
                     });
+
+                    $('.overlay').css({
+                        width: $(document).width(),
+                        height: $(document).height()
+                    }).fadeIn();
+
                     // Show the dialog
                     $('#help-modal-dialog').dialog({
                         position: {
@@ -424,6 +430,7 @@ angular.module('Utilities', ['RestServices', 'Utilities'])
                         hide: 500,
                         resizable: false,
                         close: function () {
+                            $('.overlay').hide();
                             $('#help-modal-dialog').empty();
                         }
                     });