From f605ff85ea4ae519a4d2d277ab510013e5e87a95 Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Wed, 23 Jan 2013 15:53:46 -0500
Subject: [PATCH] Prettier transition for notice, fix notice style. Fixes #438

---
 css/app.css        | 21 +++++++++++----------
 js/id/id.js        |  4 +---
 js/id/ui/notice.js | 39 +++++++++++++++++++++++++++++----------
 3 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/css/app.css b/css/app.css
index 7227e6d82..9e70092af 100644
--- a/css/app.css
+++ b/css/app.css
@@ -981,18 +981,19 @@ div.typeahead a:first-child {
 ------------------------------------------------------- */
 
 .notice {
-    position:absolute;
-    top:11px;
-    left:11px;
-    width:278px;
+    float:left;
+    width:33.333%;
+    padding-right: 10px;
+}
+
+.notice .notice-text {
+    height: 40px;
     text-align: center;
-    height:38px;
-    padding:10px 20px;
-    background:#fff;
-    color:#000;
     font-weight: normal;
-    line-height: 21px;
-    border-radius:5px;
+    border-radius: 5px;
+    line-height: 40px;
+    background: #fff;
+    color: #000;
     opacity: 0.9;
 }
 
diff --git a/js/id/id.js b/js/id/id.js
index 3646ba074..c0f64a415 100644
--- a/js/id/id.js
+++ b/js/id/id.js
@@ -50,9 +50,7 @@ window.iD = function(container) {
             }
         }
 
-        var notice = iD.ui.notice(limiter
-            .append('div')
-            .attr('class', 'notice'));
+        var notice = iD.ui.notice(limiter).message(null);
 
         map.on('move.disable-buttons', disableTooHigh)
             .on('move.contributors', _.debounce(function() {
diff --git a/js/id/ui/notice.js b/js/id/ui/notice.js
index 1c87c5553..67838c31e 100644
--- a/js/id/ui/notice.js
+++ b/js/id/ui/notice.js
@@ -2,21 +2,40 @@ iD.ui.notice = function(selection) {
     var message = '',
         notice = {};
 
+    var div = selection.append('div')
+        .attr('class', 'notice')
+        .style('display', 'none');
+
+    var txt = div.append('div')
+        .attr('class', 'notice-text');
+
+    function replace(a, b) {
+        a.style('opacity', 1)
+            .transition()
+            .each('end', function() {
+                a.style('display', 'none');
+                b.style('display', 'inline-block')
+                    .style('opacity', 0)
+                    .transition()
+                    .style('opacity', 1);
+            })
+            .style('opacity', 0);
+    }
+
     notice.message = function(_) {
-        selection.attr('class', 'notice inner');
+        div.attr('class', 'notice inner');
         if (!arguments.length) return _;
         if (!message && _) {
-            selection
-                .text(_)
-                .transition()
-                .style('display', '');
+            txt.text(_);
+            replace(selection.select('.button-wrap'), div);
         } else if (_ && message !== _) {
-            selection.text(_);
+            txt.text(_);
+            selection.select('.button-wrap').style('display', 'none');
         } else if (!_) {
-            selection
-                .text('')
-                .transition()
-                .style('display', 'none');
+            txt.text('');
+            if (message) {
+                replace(div, selection.select('.button-wrap'));
+            }
         }
         message = _;
         return notice;