From 5913198dddfb789a8384d72f199e5da7140fb405 Mon Sep 17 00:00:00 2001
From: Simon MacMullen <simon@rabbitmq.com>
Date: Thu, 28 Feb 2013 13:23:53 +0000
Subject: [PATCH] Usability: highlight the link that the currently-shown chart
 config popup relates to, and make a second click close the popup.

---
 .../rabbitmq_management/priv/www/css/main.css |  2 ++
 .../priv/www/js/formatters.js                 |  4 ++--
 deps/rabbitmq_management/priv/www/js/main.js  | 20 ++++++++++++++++---
 .../priv/www/js/tmpl/channel.ejs              |  5 ++++-
 .../priv/www/js/tmpl/connection.ejs           |  4 +++-
 .../priv/www/js/tmpl/exchange.ejs             |  6 ++++--
 .../priv/www/js/tmpl/overview.ejs             |  4 +++-
 .../priv/www/js/tmpl/queue.ejs                |  4 +++-
 8 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/deps/rabbitmq_management/priv/www/css/main.css b/deps/rabbitmq_management/priv/www/css/main.css
index 5da7ec384c..5401d87cb6 100644
--- a/deps/rabbitmq_management/priv/www/css/main.css
+++ b/deps/rabbitmq_management/priv/www/css/main.css
@@ -130,6 +130,8 @@ div.form-popup-rate-options {
     z-index: 1; position: absolute; right: 35px; padding: 15px; background: white; border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px;
 }
 
+.popup-owner { background: #eee; padding: 5px; border-radius: 3px; -moz-border-radius: 3px; }
+
 p.status-error, p.warning { margin: 20px; padding: 15px; border-radius: 10px; -moz-border-radius: 10px; text-align: center; font-weight: bold; }
 
 .highlight { min-width: 120px; font-size: 120%; text-align:center; padding:10px; background-color: #ddd; margin: 0 20px 0 0; color: #888; border-radius: 10px; -moz-border-radius: 10px; }
diff --git a/deps/rabbitmq_management/priv/www/js/formatters.js b/deps/rabbitmq_management/priv/www/js/formatters.js
index 243fedbb74..34d151f258 100644
--- a/deps/rabbitmq_management/priv/www/js/formatters.js
+++ b/deps/rabbitmq_management/priv/www/js/formatters.js
@@ -613,7 +613,7 @@ function rates_chart_or_text(id, stats, items, chart_fmt, text_fmt, chart_rates,
     var mode = get_pref('rate-mode-' + id);
     var range = get_pref('chart-range-' + id);
     var prefix = '<h3>' + heading +
-        ' <span class="rate-options" for="'
+        ' <span class="rate-options" title="Click to change" for="'
         + id + '">(' + prefix_title(mode, range) + ')</span>' +
         (heading_help == undefined ? '' :
          ' <span class="help" id="' + heading_help + '"></span>') +
@@ -632,7 +632,7 @@ function rates_chart_or_text(id, stats, items, chart_fmt, text_fmt, chart_rates,
     else {
         res = '<p>Currently idle</p>';
     }
-    return prefix + res;
+    return prefix + '<div class="updatable">' + res + '</div>';
 }
 
 function prefix_title(mode, range) {
diff --git a/deps/rabbitmq_management/priv/www/js/main.js b/deps/rabbitmq_management/priv/www/js/main.js
index df5b9b82bc..71f5d09bad 100644
--- a/deps/rabbitmq_management/priv/www/js/main.js
+++ b/deps/rabbitmq_management/priv/www/js/main.js
@@ -415,7 +415,10 @@ function show_popup(type, text, mode) {
     else {
         $(cssClass).center().slideDown(200);
     }
-    $(cssClass + ' span').click(hide);
+    $(cssClass + ' span').click(function () {
+        $('.popup-owner').removeClass('popup-owner');
+        hide();
+    });
 }
 
 function postprocess() {
@@ -465,8 +468,19 @@ function postprocess() {
         help($(this).attr('id'))
     });
     $('.rate-options').die().live('click', function() {
-        show_popup('rate-options', format('rate-options', {span: $(this)}),
-                   'fade');
+        var remove = $('.popup-owner').length == 1 &&
+                     $('.popup-owner').get(0) == $(this).get(0);
+        $('.popup-owner').removeClass('popup-owner');
+        if (remove) {
+            $('.form-popup-rate-options').fadeOut(200, function() {
+                $(this).remove();
+            });
+        }
+        else {
+            $(this).addClass('popup-owner');
+            show_popup('rate-options', format('rate-options', {span: $(this)}),
+                       'fade');
+        }
     });
     $('input, select').live('focus', function() {
         update_counter = 0; // If there's interaction, reset the counter.
diff --git a/deps/rabbitmq_management/priv/www/js/tmpl/channel.ejs b/deps/rabbitmq_management/priv/www/js/tmpl/channel.ejs
index e2afff0869..489d6dd62d 100644
--- a/deps/rabbitmq_management/priv/www/js/tmpl/channel.ejs
+++ b/deps/rabbitmq_management/priv/www/js/tmpl/channel.ejs
@@ -2,11 +2,12 @@
 
 <div class="section">
 <h2>Overview</h2>
-<div class="hider updatable">
+<div class="hider">
 <% if (statistics_level == 'fine') { %>
     <%= message_rates('msg-rates-ch', channel.message_stats) %>
 <% } %>
 
+<div class="updatable">
 <h3>Details</h3>
 <table class="facts">
   <tr>
@@ -68,6 +69,8 @@
     <td><%= fmt_idle_long(channel) %></td>
   </tr>
 </table>
+</div>
+
 </div>
 </div>
 
diff --git a/deps/rabbitmq_management/priv/www/js/tmpl/connection.ejs b/deps/rabbitmq_management/priv/www/js/tmpl/connection.ejs
index 90c9b65e61..047d495e80 100644
--- a/deps/rabbitmq_management/priv/www/js/tmpl/connection.ejs
+++ b/deps/rabbitmq_management/priv/www/js/tmpl/connection.ejs
@@ -2,9 +2,10 @@
 
 <div class="section">
 <h2>Overview</h2>
-<div class="hider updatable">
+<div class="hider">
   <%= data_rates('data-rates-conn', connection, 'Data rates') %>
 
+<div class="updatable">
 <h3>Details</h3>
 <table class="facts">
 <% if (nodes_interesting) { %>
@@ -59,6 +60,7 @@
 </tr>
 </table>
 <% } %>
+</div>
 
 </div>
 </div>
diff --git a/deps/rabbitmq_management/priv/www/js/tmpl/exchange.ejs b/deps/rabbitmq_management/priv/www/js/tmpl/exchange.ejs
index 29b0e0964d..6bb81c9887 100644
--- a/deps/rabbitmq_management/priv/www/js/tmpl/exchange.ejs
+++ b/deps/rabbitmq_management/priv/www/js/tmpl/exchange.ejs
@@ -1,13 +1,14 @@
 <h1>Exchange: <b><%= fmt_exchange(exchange.name) %></b></h1>
 
 <div class="section">
-  <div class="hider updatable">
+  <div class="hider">
   <h2>Overview</h2>
 <% if (statistics_level == 'fine') { %>
     <%= message_rates('msg-rates-x', exchange.message_stats) %>
 <% } %>
 
-<h3>Details</h3>
+    <div class="updatable">
+    <h3>Details</h3>
     <table class="facts">
       <tr>
         <th>Type</th>
@@ -28,6 +29,7 @@
       </tr>
 <% } %>
     </table>
+    </div>
   </div>
 </div>
 
diff --git a/deps/rabbitmq_management/priv/www/js/tmpl/overview.ejs b/deps/rabbitmq_management/priv/www/js/tmpl/overview.ejs
index 8572928c06..114e9e6657 100644
--- a/deps/rabbitmq_management/priv/www/js/tmpl/overview.ejs
+++ b/deps/rabbitmq_management/priv/www/js/tmpl/overview.ejs
@@ -4,7 +4,7 @@
 <% } %>
 <div class="section">
 <h2>Totals</h2>
-<div class="hider updatable">
+<div class="hider">
 <% if (overview.statistics_db_node != 'not_running') { %>
   <%= queue_lengths('lengths-over', overview.queue_totals) %>
 <% if (statistics_level == 'fine') { %>
@@ -14,6 +14,7 @@
     Totals not available
 <% } %>
 
+<div class="updatable">
   <h3>Global counts <span class="help" id="resource-counts"></span></h3>
 
   <div class="box">
@@ -43,6 +44,7 @@
     </div>
 <% } %>
   </div>
+ </div>
 
 </div>
 </div>
diff --git a/deps/rabbitmq_management/priv/www/js/tmpl/queue.ejs b/deps/rabbitmq_management/priv/www/js/tmpl/queue.ejs
index 530b53bb24..fa4067c191 100644
--- a/deps/rabbitmq_management/priv/www/js/tmpl/queue.ejs
+++ b/deps/rabbitmq_management/priv/www/js/tmpl/queue.ejs
@@ -2,12 +2,13 @@
 
 <div class="section">
   <h2>Overview</h2>
-  <div class="hider updatable">
+  <div class="hider">
     <%= queue_lengths('lengths-q', queue) %>
 <% if (statistics_level == 'fine') { %>
     <%= message_rates('msg-rates-q', queue.message_stats) %>
 <% } %>
 
+    <div class="updatable">
     <h3>Details</h3>
     <table class="facts">
       <tr>
@@ -103,6 +104,7 @@
       </tr>
 <% } %>
     </table>
+    </div>
   </div>
 </div>