From 9e4f9ce464d1eab4b275e43b591441db158bfd00 Mon Sep 17 00:00:00 2001
From: Tom MacWright <tom@macwright.org>
Date: Wed, 5 Dec 2012 14:05:34 -0500
Subject: [PATCH] Bring in a few ui elements from mockups

---
 css/app.css | 51 ++++++++++++++++++++++++++++++++++++++++-----------
 js/id/id.js | 12 +++++++++---
 2 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/css/app.css b/css/app.css
index fbb8de027..6dbcd45a5 100644
--- a/css/app.css
+++ b/css/app.css
@@ -78,7 +78,7 @@ table th {
 #map {
     display:block;
     position:absolute;
-    top:40px;
+    top:45px;
     left:0;
     right:0;
     bottom:0;
@@ -98,7 +98,7 @@ table th {
     position:absolute;
     left:0px;
     top:0px;
-    height:40px;
+    height:45px;
     right:0;
 }
 
@@ -118,13 +118,32 @@ input#geocode-location {
     font-weight:bold;
     font-size:14px;
     line-height:19px;
-    border:0;
-    border-right:1px solid #eee;
+    border:1px solid #ccc;
+    border-radius:3px;
     padding:0 10px;
-    height:40px;
+    height:35px;
     margin:0;
 }
 
+div.buttons-joined {
+    padding:5px;
+    display:inline-block;
+}
+
+#bar div.buttons-joined button:first-child {
+    border-radius:3px 0 0 3px;
+    border-right:0;
+}
+#bar div.buttons-joined button:last-child {
+    border-right:1px solid #ccc;
+    border-radius:0 3px 3px 0;
+}
+
+#bar div.buttons-joined button {
+    border-right:0;
+    border-radius:0;
+}
+
 #bar .messages {
     position:absolute;
     right:200px;
@@ -160,8 +179,6 @@ input#geocode-location {
     position:absolute;
     top:0;
     right:100px;
-    background:#7092ff;
-    color:#fff;
 }
 
 #bar button.mini,
@@ -179,16 +196,28 @@ input#geocode-location {
 
 .zoombuttons {
     position:absolute;
-    right:0;
-    top:0;
+    left:10px;
+    top:50px;
+    width:40px;
 }
+
 #bar .zoombuttons button {
-    width:50px;
+    width:40px;
+    border:1px solid #ccc;
+}
+
+#bar .zoombuttons button.zoom-in {
+    border-bottom:0;
+    border-radius:5px 5px 0 0;
+}
+
+#bar .zoombuttons button.zoom-out {
+    border-radius:0 0 5px 5px;
 }
 
 .inspector-wrap {
     position:absolute;
-    top:40px;
+    top:45px;
     right:0px;
     overflow:auto;
     padding:10px;
diff --git a/js/id/id.js b/js/id/id.js
index f857e7325..9c1f8196a 100644
--- a/js/id/id.js
+++ b/js/id/id.js
@@ -25,7 +25,10 @@ window.iD = function(container) {
         var bar = this.append('div')
             .attr('id', 'bar');
 
-        var buttons = bar.selectAll('button.add-button')
+        var buttons_joined = bar.append('div')
+            .attr('class', 'buttons-joined');
+
+        var buttons = buttons_joined.selectAll('button.add-button')
             .data([iD.modes.AddPlace(), iD.modes.AddRoad(), iD.modes.AddArea()])
             .enter().append('button')
                 .attr('class', 'add-button')
@@ -36,13 +39,16 @@ window.iD = function(container) {
             buttons.classed('active', function (mode) { return entered === mode; });
         });
 
-        bar.append('button')
+        var undo_buttons = bar.append('div')
+            .attr('class', 'buttons-joined');
+
+        undo_buttons.append('button')
             .attr({ id: 'undo', 'class': 'mini' })
             .property('disabled', true)
             .html('&larr;<small></small>')
             .on('click', history.undo);
 
-        bar.append('button')
+        undo_buttons.append('button')
             .attr({ id: 'redo', 'class': 'mini' })
             .property('disabled', true)
             .html('&rarr;<small></small>')