From 9321a860ce244297c3a2ea6d3a2d8d472bc15024 Mon Sep 17 00:00:00 2001
From: Saman Bemel-Benrud <samanpwbb@gmail.com>
Date: Wed, 13 Mar 2013 14:41:01 -0400
Subject: [PATCH] adding controls for 'number' input type.

---
 css/app.css              | 234 ++++++++++++++++++++++++---------------
 js/id/ui/preset/input.js |   9 ++
 js/lib/d3.combobox.js    |   2 +-
 3 files changed, 152 insertions(+), 93 deletions(-)

diff --git a/css/app.css b/css/app.css
index 06fd064b5..81f5e211f 100644
--- a/css/app.css
+++ b/css/app.css
@@ -645,17 +645,17 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     margin: 5px;
 }
 
-/* preset form */
+/* preset form basics */
 
 .inspector-preset {
     border-bottom: 1px solid #ccc;
 }
 
-.preset-section.inspector-inner { 
+.preset-section.inspector-inner {
     padding-bottom: 0;
 }
 
-.preset-section.inspector-inner:last-child { 
+.preset-section.inspector-inner:last-of-type {
     padding-bottom: 20px;
 }
 
@@ -664,6 +664,11 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     border-bottom: 1px solid #ccc;
 }
 
+.name input.major {
+    padding-top: 35px;
+    height: 70px;
+}
+
 .inspector-body .name h4,
 .preset-section h4[for*="input-"] {
     border: 1px solid #cfcfcf;
@@ -688,15 +693,6 @@ h4 + .preset-input input:first-child {
     height: 100px;
 }
 
-.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%;
@@ -714,6 +710,139 @@ button.preset-add-field {
     padding: 0 10px;
 }
 
+/* preset form numbers */
+
+input[type=number] {
+    width: 50%;
+}
+
+.spin-control {
+    width: 60px;
+    border-left: 1px solid #CCC;
+    height: 30px;
+    display: inline-block;
+    margin-left: -60px;
+    margin-bottom: -11px;
+    position: relative;
+}
+
+.spin-control button {
+    position: relative;
+    float: left;
+    height: 100%;
+    width: 50%;
+    border: 1px solid #CCC;
+    border-radius: 0;
+    border-left: 0;
+}
+
+.spin-control button.descend {
+    border-bottom-right-radius: 4px;
+}
+
+.spin-control button.descend::after,
+.spin-control button.ascend::after {
+    content:"";
+    height: 0; width: 0;
+    position: absolute;
+    left: 0; right: 0; bottom: 0; top: 0;
+    margin: auto;
+}
+
+.spin-control button.descend::after {
+    border-top: 5px solid #CCC;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+}
+
+.spin-control button.ascend::after {
+    border-bottom: 5px solid #CCC;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+}
+
+/* preset form checkbox */
+
+.checkselect label {
+    display: block;
+    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: #f1f1f1;
+}
+
+.checkselect .set {
+    color: inherit;
+}
+
+.checkselect input[type="checkbox"] {
+    margin-right: 5px;
+    width: 20px;
+    vertical-align: middle;
+    opacity: 0.5;
+}
+.checkselect .set input[type="checkbox"] {
+    opacity: 1;
+}
+
+/* Preset form radio button */
+
+.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;
+}
+
+/* Preset form address */
+
+.preset-section .addr-housename {
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+}
+
+.preset-section .addr-number {
+    width: 20%;
+    border-right: none;
+    border-bottom: none;
+    border-radius: 0;
+}
+
+.preset-section .addr-street {
+    width: 80%;
+    border-radius: 0;
+    border-bottom: none;
+}
+
+.preset-section .addr-city {
+    border-radius: 0 0 4px 4px;
+}
+
+/* combobox dropdown styles */
+
 div.combobox {
     width:155px;
     z-index: 9999;
@@ -759,7 +888,6 @@ div.combobox {
     margin-left: -15px;
     margin-right: 5px;
     display:inline-block;
-    cursor: pointer;
     cursor: url(../img/cursor-pointer.png) 6 1, pointer;
     border-top: 5px solid #ccc;
     border-left: 5px solid transparent;
@@ -767,7 +895,7 @@ div.combobox {
 }
 
 .rowselect .item {
-    cursor: pointer;
+    cursor: url(../img/cursor-pointer.png) 6 1, pointer;
 }
 
 .rowselect .item label:hover{
@@ -786,84 +914,6 @@ div.combobox {
     text-align: center;
 }
 
-.checkselect label {
-    display: block;
-    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: #f1f1f1;
-}
-
-.checkselect .set {
-    color: inherit;
-}
-
-.checkselect input[type="checkbox"] {
-    margin-right: 5px;
-    width: 20px;
-    vertical-align: middle;
-    opacity: 0.5;
-}
-.checkselect .set input[type="checkbox"] {
-    opacity: 1;
-}
-
-/* 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 */
-
-.preset-section .addr-housename {
-    border-bottom: none;
-    border-radius: 4px 4px 0 0;
-}
-
-.preset-section .addr-number {
-    width: 20%;
-    border-right: none;
-    border-bottom: none;
-    border-radius: 0;
-}
-
-.preset-section .addr-street {
-    width: 80%;
-    border-radius: 0;
-    border-bottom: none;
-}
-
-.preset-section .addr-city {
-    border-radius: 0 0 4px 4px;
-}
-
 /* tag editor */
 
 .tag-list {
diff --git a/js/id/ui/preset/input.js b/js/id/ui/preset/input.js
index 4bbdc9290..67ffaef6a 100644
--- a/js/id/ui/preset/input.js
+++ b/js/id/ui/preset/input.js
@@ -14,6 +14,15 @@ iD.ui.preset.url = function(field) {
             .on('blur', change)
             .on('change', change)
             .call(iD.behavior.accept().on('accept', event.close));
+
+            if (form.type == 'number') {
+                var numbercontrols = selection.append('div')
+                    .attr('class','spin-control');
+
+                numbercontrols.append('button').attr('class','ascend');
+                numbercontrols.append('button').attr('class','descend');
+
+            };
     }
 
     function change() {
diff --git a/js/lib/d3.combobox.js b/js/lib/d3.combobox.js
index b8cecb491..f237c181e 100644
--- a/js/lib/d3.combobox.js
+++ b/js/lib/d3.combobox.js
@@ -16,7 +16,7 @@ d3.combobox = function() {
         var idx = -1;
         input = selection.select('input').classed('combobox-input', true);
 
-        selection.append('a', selection.select('input'))
+        selection.append('div', selection.select('input'))
             .attr('class', 'combobox-carat')
             .on('mousedown', stop)
             .on('mousedown', function() {