From c53ccb1bb5800d4ae24cf5bc2ae4eb07b36b1063 Mon Sep 17 00:00:00 2001
From: saman bb <samanpwbb@gmail.com>
Date: Tue, 12 Mar 2013 18:35:44 -0400
Subject: [PATCH 1/4] initial commit of form revamp

---
 css/app.css              | 111 +++++++++++++++++++++++++--------------
 css/reset.css            |   6 +++
 js/id/ui/preset.js       |  11 ++--
 js/id/ui/preset/combo.js |   6 +--
 js/id/ui/tag_editor.js   |   7 +--
 js/id/ui/taglist.js      |   4 +-
 6 files changed, 88 insertions(+), 57 deletions(-)

diff --git a/css/app.css b/css/app.css
index 8ccac2b72..40fa971fc 100644
--- a/css/app.css
+++ b/css/app.css
@@ -549,6 +549,7 @@ a:hover .toggle.icon           { background-position: -20px -180px;}
 .selected .toggle.icon,
 a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 
+
 /* ToolBar / Persistent UI Elements
 ------------------------------------------------------- */
 
@@ -579,8 +580,9 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 }
 
 .inspector-inner {
-    padding: 20px;
+    padding: 20px 20px 0px 20px;
     position: relative;
+    border-left: 1px solid #ccc;
 }
 
 .inspector-inner.message {
@@ -601,21 +603,10 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     border: 0;
 }
 
-/* preset form */
+/* Presets
+------------------------------------------------------- */
 
-.preset-section.inspector-inner:last-child { 
-    border-bottom: 1px solid #ccc;
-}
-
-.inspector-body .name-help,
-.inspector-body .type-help {
-  position: absolute;
-  right: -10px;
-}
-
-.inspector-body .name {
-    height: 120px;
-}
+/* Preset grid  */
 
 .preset-grid-search-wrap {
     height: 60px;
@@ -650,20 +641,60 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     margin: 5px;
 }
 
-.preset-label {
-    padding: 25px 20px 20px 20px;
-    position: absolute;
-    height: 100%;
-    left: 0px;
-    top: 0;
-    border-right: 1px solid #CCC;
-    text-align: right;
+/* preset form */
+
+.inspector-body { 
+
 }
 
-.preset-input {
-    margin-left: 25%;
-    padding-left: 10px;
+.inspector-preset {
+    border-bottom: 1px solid #ccc;
 }
+
+.preset-section.inspector-inner:first-child { 
+    padding-top: 0;
+}
+
+.preset-section.inspector-inner:last-child { 
+    padding-bottom: 20px;
+}
+
+.inspector-body .name {
+    height: 120px;
+}
+
+.inspector-body .name h4,
+.preset-section h4[for*="input-"] {
+    border: 1px solid #cfcfcf;
+    padding: 5px 10px;
+    background: #f6f6f6;
+    position: absolute;
+    left: 20px;
+    border-radius: 4px 4px 0 0;
+    right: 20px;
+    pointer-events: none;
+}
+
+.preset-section h4 + input,
+h4 + .input-wrap-position input {
+    padding-top: 35px;
+    height: 60px;
+}
+
+.name input.major {
+    padding-top: 35px;
+    height: 70px;
+}
+
+input[type=number] {
+    width: 50%;
+}
+
+.preset-section h4[for="input-building:levels"],
+.preset-section.checkselect h4 {
+    right: 50%;
+}
+
 .preset-fav button.fav {
     height: 30px;
     margin: 5px;
@@ -685,7 +716,7 @@ div.combobox {
 .combobox a {
     height: 25px;
     line-height: 25px;
-    cursor: pointer;
+    cursor: url(../img/cursor-pointer.png) 6 1, pointer;
     display: block;
     border-top:1px solid #ccc;
     background-color: #fff;
@@ -705,7 +736,7 @@ div.combobox {
 }
 
 .combobox-input {
-    cursor: pointer;
+    cursor: url(../img/cursor-pointer.png) 6 1, pointer;
 }
 
 .combobox-carat {
@@ -741,15 +772,17 @@ div.combobox {
 
 .checkselect label {
     display: block;
-    padding: 5px;
-    width: 100%;
+    padding: 35px 5px 5px 5px;
+    border-radius: 4px;
+    width: 50%;
     box-sizing: border-box;
     color: #999;
+    border: 1px solid #CCC;
 }
 
 .checkselect label:hover {
     cursor: pointer;
-    background: #eee;
+    background: #f1f1f1;
 }
 
 .checkselect .set {
@@ -774,30 +807,34 @@ div.combobox {
 
 /* Address input */
 
-.preset-input .addr-housename {
+.preset-section .addr-housename {
     border-bottom: none;
     border-radius: 4px 4px 0 0;
 }
 
-.preset-input .addr-number {
+.preset-section .addr-number {
     width: 20%;
     border-right: none;
     border-bottom: none;
     border-radius: 0;
 }
 
-.preset-input .addr-street {
+.preset-section .addr-street {
     width: 80%;
     border-radius: 0;
     border-bottom: none;
 }
 
-.preset-input .addr-city {
+.preset-section .addr-city {
     border-radius: 0 0 4px 4px;
 }
 
 /* tag editor */
 
+.tag-wrap .grid-entry { 
+    border-right: 0;
+}
+
 .tag-list {
     margin-top: 10px;
 }
@@ -813,10 +850,6 @@ div.combobox {
     margin-top: -1px;
     }
 
-.input-wrap-position {
-    position: relative;
-}
-
 .tag-row input {
     width: 50%;
     border-left: 0;
diff --git a/css/reset.css b/css/reset.css
index d8c4036a9..5d98c807d 100644
--- a/css/reset.css
+++ b/css/reset.css
@@ -73,6 +73,12 @@ input {
     line-height: normal;
 }
 
+/* Hide default number spinner controls in Chrome */
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button { 
+display: none;
+}
+
 /*
  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
  *    and `video` controls.
diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js
index 2a000d703..e26d07dcd 100644
--- a/js/id/ui/preset.js
+++ b/js/id/ui/preset.js
@@ -30,21 +30,16 @@ iD.ui.preset = function(context) {
             .data(preset.form)
             .enter()
             .append('div')
-            .attr('class', 'preset-section fillL inspector-inner col12');
+            .attr('class', 'fr preset-section fillL inspector-inner col9');
 
         sections.each(function(d) {
             var s = d3.select(this);
-            var wrap = s.append('div')
-                .attr('class', 'preset-section-input');
 
-           wrap.append('div')
-                .attr('class', 'col3 preset-label')
-                .append('h4')
+           s.append('h4')
                 .attr('for', 'input-' + d.key)
                 .text(function(d) { return d.label(); });
 
-            input.call(wrap.append('div')
-                .attr('class', 'col9 preset-input'), d);
+            input.call(s, d);
         });
         if (tags) event.setTags(tags);
     }
diff --git a/js/id/ui/preset/combo.js b/js/id/ui/preset/combo.js
index 851b993a9..d7a11eb01 100644
--- a/js/id/ui/preset/combo.js
+++ b/js/id/ui/preset/combo.js
@@ -1,20 +1,18 @@
 iD.ui.preset.combo = function(form) {
 
     var event = d3.dispatch('change', 'close'),
-        wrap,
         input;
 
     function combo(selection) {
 
-        wrap = this.append('span').attr('class', 'input-wrap-position');
 
-        input = wrap.append('input')
+        input = this.append('input')
             .attr('type', 'text')
             .on('change', change)
             .on('blur', change);
 
         var combobox = d3.combobox();
-        wrap.call(combobox);
+        input.call(combobox);
 
         if (form.options) {
             options(form.options);
diff --git a/js/id/ui/tag_editor.js b/js/id/ui/tag_editor.js
index 94fbb12f9..db65d3190 100644
--- a/js/id/ui/tag_editor.js
+++ b/js/id/ui/tag_editor.js
@@ -57,13 +57,14 @@ iD.ui.TagEditor = function(context) {
         typebutton.node().focus();
 
          var namewrap = headerwrap.append('div')
-             .attr('class', 'name preset-section fillL inspector-inner col9');
+             .attr('class', 'name fillL inspector-inner col9');
 
         typebutton.append('span')
             .attr('class','label')
             .text(preset.name);
 
-        namewrap.append('h4').text(t('inspector.name'));
+        namewrap.append('h4')
+            .text(t('inspector.name'));
 
         name = namewrap.append('input')
             .attr('placeholder', 'unknown')
@@ -83,7 +84,7 @@ iD.ui.TagEditor = function(context) {
             .on('change', changeTags);
 
         var tageditorpreset = editorwrap.append('div')
-            .attr('class', 'inspector-preset');
+            .attr('class', 'inspector-preset cf fillL');
 
         if (preset) {
             tageditorpreset.call(presetUI
diff --git a/js/id/ui/taglist.js b/js/id/ui/taglist.js
index 25cd7c847..2d3f4ed64 100644
--- a/js/id/ui/taglist.js
+++ b/js/id/ui/taglist.js
@@ -75,9 +75,7 @@ iD.ui.Taglist = function(context) {
                 event.change(taglist.tags());
             });
 
-        inputs.append('span')
-            .attr('class', 'input-wrap-position')
-            .append('input')
+        inputs.append('input')
             .property('type', 'text')
             .attr('class', 'value')
             .attr('maxlength', 255)

From a17a7227585230b1b86342af34e4fb1c90c5a8d5 Mon Sep 17 00:00:00 2001
From: saman bb <samanpwbb@gmail.com>
Date: Tue, 12 Mar 2013 18:52:45 -0400
Subject: [PATCH 2/4] more progress on new layout.

---
 css/app.css | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/css/app.css b/css/app.css
index 40fa971fc..5cd0e1454 100644
--- a/css/app.css
+++ b/css/app.css
@@ -576,11 +576,11 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 .inspector-body {
     overflow: auto;
     max-height: 480px;
-    min-height: 360px;
+    min-height: 330px;
 }
 
 .inspector-inner {
-    padding: 20px 20px 0px 20px;
+    padding: 20px;
     position: relative;
     border-left: 1px solid #ccc;
 }
@@ -643,16 +643,12 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 
 /* preset form */
 
-.inspector-body { 
-
-}
-
 .inspector-preset {
     border-bottom: 1px solid #ccc;
 }
 
-.preset-section.inspector-inner:first-child { 
-    padding-top: 0;
+.preset-section.inspector-inner { 
+    padding-bottom: 0;
 }
 
 .preset-section.inspector-inner:last-child { 
@@ -660,7 +656,8 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 }
 
 .inspector-body .name {
-    height: 120px;
+    height: 110px;
+    border-bottom: 1px solid #ccc;
 }
 
 .inspector-body .name h4,
@@ -800,6 +797,7 @@ div.combobox {
 }
 
 .preset-radio button {
+    margin-top: 40px;
     font-weight: normal;
     padding: 2px 10px;
     height: 30px;
@@ -925,7 +923,7 @@ div.combobox {
 /* Preset grid */
 
 .grid-entry {
-    height: 120px;
+    height: 110px;
     position: relative;
     border-right: 1px solid #ccc;
     border-bottom: 1px solid #ccc;

From 35d26c64aadc93c23b75d9fe1f25254d5268d207 Mon Sep 17 00:00:00 2001
From: saman bb <samanpwbb@gmail.com>
Date: Tue, 12 Mar 2013 19:18:37 -0400
Subject: [PATCH 3/4] clean up overflow in combobox.

---
 css/app.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/css/app.css b/css/app.css
index 5cd0e1454..5b5170f88 100644
--- a/css/app.css
+++ b/css/app.css
@@ -706,7 +706,8 @@ div.combobox {
     margin-top: -1px;
     background: white;
     max-height: 180px;
-    overflow: auto;
+    overflow-y: auto;
+    overflow-x: hidden;
     border: 1px solid #ccc;
 }
 
@@ -718,7 +719,9 @@ div.combobox {
     border-top:1px solid #ccc;
     background-color: #fff;
     padding:1px 4px;
+    text-overflow: ellipsis;
     white-space: nowrap;
+    overflow: hidden;
     height: 30px;
 }
 
@@ -973,7 +976,7 @@ div.combobox {
 
 .grid-entry > .icon {
     position: absolute;
-    top: 40px;left: 0; right: 0;
+    top: 30px;left: 0; right: 0;
     margin: auto;
 }
 

From 3228e1fcdaaec69daeac1111053900745cf24d70 Mon Sep 17 00:00:00 2001
From: saman bb <samanpwbb@gmail.com>
Date: Tue, 12 Mar 2013 20:25:35 -0400
Subject: [PATCH 4/4] more work on new preset layout.

---
 css/app.css              | 27 ++++++++++++++++++++-------
 js/id/ui/preset.js       |  2 +-
 js/id/ui/preset/combo.js |  6 ++++--
 js/id/ui/preset/radio.js |  6 ++++--
 js/id/ui/tag_editor.js   |  2 +-
 js/id/ui/taglist.js      |  4 +++-
 6 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/css/app.css b/css/app.css
index 5b5170f88..bc37e41a3 100644
--- a/css/app.css
+++ b/css/app.css
@@ -582,7 +582,6 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 .inspector-inner {
     padding: 20px;
     position: relative;
-    border-left: 1px solid #ccc;
 }
 
 .inspector-inner.message {
@@ -799,11 +798,29 @@ div.combobox {
     opacity: 1;
 }
 
-.preset-radio button {
-    margin-top: 40px;
+/* Radio buttons */
+
+.radio-wrap { 
+    display: block;
+    padding: 30px 0 0 0;
+    border-radius: 4px;
+    box-sizing: border-box;
+    color: #999;
+    border: 1px solid #CCC;
+    overflow: hidden;
+}
+
+.radio-wrap button {
     font-weight: normal;
     padding: 2px 10px;
     height: 30px;
+    border-radius: 0;
+    border-right: 1px solid #CCC;
+    width: 20%;
+}
+
+.radio-wrap button:last-child { 
+    border-right: 0;
 }
 
 /* Address input */
@@ -832,10 +849,6 @@ div.combobox {
 
 /* tag editor */
 
-.tag-wrap .grid-entry { 
-    border-right: 0;
-}
-
 .tag-list {
     margin-top: 10px;
 }
diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js
index e26d07dcd..ac4249141 100644
--- a/js/id/ui/preset.js
+++ b/js/id/ui/preset.js
@@ -30,7 +30,7 @@ iD.ui.preset = function(context) {
             .data(preset.form)
             .enter()
             .append('div')
-            .attr('class', 'fr preset-section fillL inspector-inner col9');
+            .attr('class', 'preset-section fillL inspector-inner col12');
 
         sections.each(function(d) {
             var s = d3.select(this);
diff --git a/js/id/ui/preset/combo.js b/js/id/ui/preset/combo.js
index d7a11eb01..851b993a9 100644
--- a/js/id/ui/preset/combo.js
+++ b/js/id/ui/preset/combo.js
@@ -1,18 +1,20 @@
 iD.ui.preset.combo = function(form) {
 
     var event = d3.dispatch('change', 'close'),
+        wrap,
         input;
 
     function combo(selection) {
 
+        wrap = this.append('span').attr('class', 'input-wrap-position');
 
-        input = this.append('input')
+        input = wrap.append('input')
             .attr('type', 'text')
             .on('change', change)
             .on('blur', change);
 
         var combobox = d3.combobox();
-        input.call(combobox);
+        wrap.call(combobox);
 
         if (form.options) {
             options(form.options);
diff --git a/js/id/ui/preset/radio.js b/js/id/ui/preset/radio.js
index a13dd9159..2b7a190bd 100644
--- a/js/id/ui/preset/radio.js
+++ b/js/id/ui/preset/radio.js
@@ -8,7 +8,9 @@ iD.ui.preset.radio = function(form) {
 
         selection.classed('preset-radio', true);
 
-        buttons = selection.selectAll('button')
+        var buttonwrap = selection.append('div').attr('class','radio-wrap');
+
+        buttons = buttonwrap.selectAll('button')
             .data(form.options)
             .enter()
             .append('button')
@@ -18,7 +20,7 @@ iD.ui.preset.radio = function(form) {
                     d3.select(this).classed('active', true);
                     change();
                 });
-        selection.append('button')
+        buttonwrap.append('button')
             .on('click', function() {
                 buttons.classed('active', false);
                 change();
diff --git a/js/id/ui/tag_editor.js b/js/id/ui/tag_editor.js
index db65d3190..66655b002 100644
--- a/js/id/ui/tag_editor.js
+++ b/js/id/ui/tag_editor.js
@@ -84,7 +84,7 @@ iD.ui.TagEditor = function(context) {
             .on('change', changeTags);
 
         var tageditorpreset = editorwrap.append('div')
-            .attr('class', 'inspector-preset cf fillL');
+            .attr('class', 'inspector-preset cf fillL col12');
 
         if (preset) {
             tageditorpreset.call(presetUI
diff --git a/js/id/ui/taglist.js b/js/id/ui/taglist.js
index 2d3f4ed64..25cd7c847 100644
--- a/js/id/ui/taglist.js
+++ b/js/id/ui/taglist.js
@@ -75,7 +75,9 @@ iD.ui.Taglist = function(context) {
                 event.change(taglist.tags());
             });
 
-        inputs.append('input')
+        inputs.append('span')
+            .attr('class', 'input-wrap-position')
+            .append('input')
             .property('type', 'text')
             .attr('class', 'value')
             .attr('maxlength', 255)