From 37e7b2542c7e618a98cdea24e5cbe9ab072b010e Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Tue, 18 Dec 2012 18:05:37 -0500
Subject: [PATCH] basic commit message UI styling.

---
 css/app.css         | 81 +++++++++++++++++++++++++++------------------
 js/id/id.js         |  2 +-
 js/id/ui/commit.js  | 27 ++++++++++-----
 js/id/ui/confirm.js |  7 ++--
 4 files changed, 72 insertions(+), 45 deletions(-)

diff --git a/css/app.css b/css/app.css
index 987e4674c..917a86129 100644
--- a/css/app.css
+++ b/css/app.css
@@ -2,7 +2,7 @@
 ------------------------------------------------------- */
 
 body {
-    font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
+    font:normal 12px/1.6666 'Helvetica Neue', Arial, sans-serif;
     margin:0;
     padding:0;
     color:#222;
@@ -18,21 +18,22 @@ body {
 
 h2 {
     font-size: 24px;
+    line-height: 1.3333;
     font-weight: bold;
-    line-height:40px;
+    margin-bottom: 10px;
 }
 
 h3 {
     font-size: 18px;
+    line-height: 1.3333;
     font-weight: bold;
-    line-height:30px;
+    margin-bottom: 10px;
 }
 
 h4 {
     font-size: 12px;
     font-weight: normal;
     font-style: italic;
-    line-height: 20px;
     padding-bottom: 10px;
 }
 
@@ -179,8 +180,10 @@ form.hide {
     border: 1px solid #ccc;
 }
 
-.pad1 {
-padding: 10px;}
+.pad1    {padding: 10px;}
+.pad2    {padding: 20px;}
+.margin1 {margin: 10px;}
+.margin2 {margin: 20px;}
 
 /* Buttons */
 
@@ -245,6 +248,12 @@ button.minor:hover {
     background: white;
 }
 
+button.centered {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 .buttons-joined {
     display: inline-block;
     margin:10px;
@@ -291,8 +300,7 @@ button.save {
 }
 
 button.save:hover {
-    color: #59ac33;
-    background-color: #6bc641;
+    background-color: #59ac33;
 }
 
 button.close {
@@ -436,7 +444,7 @@ button.Browse .label {
     border-bottom: 1px solid #ccc;
     background:#fff;
     height:80px;
-    z-index:99;
+    z-index:1;
     position:relative;
 }
 
@@ -650,7 +658,10 @@ img.tile {
 #user-list {
     border-radius:3px 3px 0 0;
     right: 330px;
-    max-width: 300px;
+    max-width: 400px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 #user-list a:not(:last-child):after {
@@ -701,23 +712,22 @@ div.typeahead a:first-child {
 ------------------------------------------------------- */
 
 .modal {
-    width:640px;
-    height:550px;
-    padding:10px;
+    display: inline-block;
     position:absolute;
-    background:#f0f0f0;
+    width: 50%;
+    left: 25%;
     top:50px;
-    left:50%;
-    margin-left:-330px;
-    box-shadow:0 0 5px #000;
+    z-index: 3;
 }
 
-.modal.modal-alert {
-    width:320px;
-    height:100px;
-    margin-left:-160px;
+.modal .description {
+    text-align: center;
 }
 
+.shaded {
+    z-index: 2;
+    position: relative;
+}
 .shaded:before {
     content:'';
     background:rgba(0,0,0,0.5);
@@ -725,36 +735,43 @@ div.typeahead a:first-child {
     left:0px; right:0px; top:0px; bottom:0px;
 }
 
+.commit-modal { padding: 10px;}
+
 .commit-modal h3 small.count {
+    margin-right: 10px;
+    float: left;
+    height: 24px;
+    width: 24px;
     font-size:12px;
-    font-weight: normal;
-    line-height:40px;
-    border-radius:20px;
+    border-radius:50%;
     padding:5px;
     background:#7092ff;
-    margin-left:10px;
     color:#fff;
 }
 
-.commit-modal ul {
-    border-bottom:1px solid #ccc;
+.commit-modal .changeset-list {
+    overflow: auto;
+    border:1px solid #ccc;
     background:#fff;
+    max-height: 200px;
 }
 
-.commit-modal li {
+.changeset-list li {
     border-top:1px solid #ccc;
-    padding:2px 10px;
+    padding:5px 10px;
 }
 
+.changeset-list li:first-child { border-top: 0;}
+
 .commit-modal .changeset-comment {
-    width:630px;
+    height: 60px;
+    width:100%;
     /* firefox uses monospace in textareas */
     font:normal 12px/20px 'Helvetica Neue', Arial, sans-serif;
 }
 
+.commit-modal .buttons button { margin-top: 0;}
 .commit-section {
-    max-height:250px;
-    overflow:auto;
 }
 
 /* Notices
diff --git a/js/id/id.js b/js/id/id.js
index 6e9a89990..9dfac9223 100644
--- a/js/id/id.js
+++ b/js/id/id.js
@@ -137,7 +137,7 @@ window.iD = function(container) {
                     });
                 } else {
                     iD.confirm().select('.description')
-                        .text('You don\'t have any changes to save.');
+                        .append('h3').text('You don\'t have any changes to save.');
                 }
             });
 
diff --git a/js/id/ui/commit.js b/js/id/ui/commit.js
index 40a6a2e98..5800ffe9e 100644
--- a/js/id/ui/commit.js
+++ b/js/id/ui/commit.js
@@ -3,7 +3,7 @@ iD.commit = function() {
 
     function commit(selection) {
         var changes = selection.datum(),
-            header = selection.append('div').attr('class', 'header'),
+            header = selection.append('div').attr('class', 'header pad1'),
             body = selection.append('div').attr('class', 'body');
 
         header.append('h2').text('Upload Changes to OpenStreetMap');
@@ -14,7 +14,7 @@ iD.commit = function() {
                 return changes[d].length;
             }))
             .enter()
-            .append('div').attr('class', 'commit-section');
+            .append('div').attr('class', 'commit-section pad1');
 
         section.append('h3').text(String)
             .append('small')
@@ -22,6 +22,7 @@ iD.commit = function() {
             .text(function(d) { return changes[d].length; });
 
         var li = section.append('ul')
+            .attr('class','changeset-list')
             .selectAll('li')
             .data(function(d) { return changes[d]; })
             .enter()
@@ -34,22 +35,30 @@ iD.commit = function() {
             })
             .attr('title', iD.util.tagText);
 
-        body.append('textarea')
-            .attr('class', 'changeset-comment')
-            .attr('placeholder', 'Brief Description');
+        body.append('div').attr('class','pad1')
+                .append('textarea')
+                .attr('class', 'changeset-comment pad1')
+                .attr('placeholder', 'Brief Description');
 
-        body.append('button').text('Save')
-            .attr('class', 'save')
+        var buttonwrap = body.append('div')
+                            .attr('class', 'buttons');
+
+        var savebutton = buttonwrap.append('button')
+            .attr('class', 'action wide')
             .on('click.save', function() {
                 event.save({
                     comment: d3.select('textarea.changeset-comment').node().value
                 });
             });
-        body.append('button').text('Cancel')
-            .attr('class', 'cancel')
+            savebutton.append('span').attr('class','icon save icon-pre-text')
+            savebutton.append('span').attr('class','label').text('Save')
+        var cancelbutton = buttonwrap.append('button')
+            .attr('class', 'cancel wide')
             .on('click.cancel', function() {
                 event.cancel();
             });
+            cancelbutton.append('span').attr('class','icon close icon-pre-text')
+            cancelbutton.append('span').attr('class','label').text('Cancel')
     }
 
     return d3.rebind(commit, event, 'on');
diff --git a/js/id/ui/confirm.js b/js/id/ui/confirm.js
index dbddae9db..e5d85856b 100644
--- a/js/id/ui/confirm.js
+++ b/js/id/ui/confirm.js
@@ -2,13 +2,14 @@ iD.confirm = function(message) {
     var modal = iD.modal();
     modal.select('.modal').classed('modal-alert', true);
     modal.select('.content')
-        .append('p').attr('class', 'description');
-    modal.select('.content')
+        .append('div').attr('class', 'description pad1');
+    var nochanges = modal.select('.content')
         .append('button')
-        .text('OK')
+        .attr('class','wide action centered')
         .on('click.confirm', function() {
             modal.remove();
         });
+        nochanges.append('span').attr('class','label').text('Okay');
 
     return modal;
 };