launchpad-reviewers team mailing list archive

[Benji York <benji@xxxxxxxxxxxxx>]

Benji York has proposed merging lp:~benji/launchpad/click-to-close-boxes into lp:launchpad.

Requested reviews:
  Launchpad code reviewers (launchpad-reviewers)

For more details, see:
https://code.launchpad.net/~benji/launchpad/click-to-close-boxes/+merge/59818

I recently used the "informational message" classes when building user
action feedback boxes.  When reviewing the branch Gary suggested that it
would be nice if the boxes would go away when clicked.  This branch is
the result of that request.

CSS is used to add a "(Click to close)" message to the bottom right of
the box.  If the text in the message would otherwise occupy the bottom
right the message will be pushed down.

A small JS snippet was added to react to a click event on any message
box by hiding the box.

The make lint report is clean.

To view this in action, start a dev instance and visit
https://bugs.launchpad.dev/redfish/+bug/15/+subscribe.

I've attached two screen shots of the change.  One with a message short
enough that the click-to-close message is on the same line as the last
line of text (ss1.png), and another that has longer text that forces the
click-to-close text down (ss2.png).

-- 
https://code.launchpad.net/~benji/launchpad/click-to-close-boxes/+merge/59818
Your team Launchpad code reviewers is requested to review the proposed merge of lp:~benji/launchpad/click-to-close-boxes into lp:launchpad.

=== modified file 'lib/canonical/launchpad/icing/style-3-0.css'
--- lib/canonical/launchpad/icing/style-3-0.css	2011-04-20 09:31:31 +0000
+++ lib/canonical/launchpad/icing/style-3-0.css	2011-05-03 19:08:01 +0000
@@ -994,7 +994,7 @@
     border-width: 1px 2px 2px 1px;
     color: black;
     margin: 1em auto 1em auto;
-    padding: 0 1em 1em 2em;
+    padding: 0.3em 1em 1.6em 2em;
     width: 30em;
     }
 .error.message::before, .warning.message::before,
@@ -1017,6 +1017,17 @@
 .warning.message::before {
     content: url(/@@/warning-large);
     }
+.error.message::after, .warning.message::after,
+.informational.message::after {
+    content: '(Click to close)';
+    float: right;
+    display: block;
+    margin-top: -0.1em;
+}
+.error.message::after, .warning.message::after,
+.informational.message::after {
+    clear: both;
+}
 .informational {
     /* Informational messages are blue-to-grey, alerts have an info icon. */
 

=== modified file 'lib/lp/app/templates/base-layout-macros.pt'
--- lib/lp/app/templates/base-layout-macros.pt	2011-04-04 13:56:08 +0000
+++ lib/lp/app/templates/base-layout-macros.pt	2011-05-03 19:08:01 +0000
@@ -111,7 +111,7 @@
   <metal:load-lavascript use-macro="context/@@+base-layout-macros/load-javascript" />
 
   <script id="base-layout-load-scripts" type="text/javascript">
-    LPS.use('node', 'lp', 'lp.app.links', function(Y) {
+    LPS.use('node', 'event-delegate', 'lp', 'lp.app.links', function(Y) {
         Y.on('load', function(e) {
             sortables_init();
             initInlineHelp();
@@ -125,6 +125,12 @@
         // anywhere outside of it.
         Y.on('click', handleClickOnPage, window);
 
+        // Hook up an event hanlder that will close any message boxes when they
+        // are clicked.
+        Y.delegate('click', function(e) {
+            this.setStyle('display', 'none');
+        }, 'body', '.message');
+
         Y.on('lp:context:web_link:changed', function(e) {
             window.location = e.new_value;
         });