diff --git a/css/app.css b/css/app.css
index 2e0d190f8..c9d23e6dd 100644
--- a/css/app.css
+++ b/css/app.css
@@ -287,6 +287,10 @@ form.hide {
display:none;
}
+.deemphasize {
+ color: #a9a9a9;
+}
+
.content {
border-radius: 4px;
box-shadow: 0 0 30px 0px rgba(0, 0, 0, 0.7);
@@ -546,6 +550,7 @@ button[disabled] .icon.nearby { background-position: -340px -40px;}
.icon-operation-rotate { background-position: -180px -140px;}
.icon-operation-simplify { background-position: -200px -140px;}
+.icon.add-form { background-position: -85px -180px;}
/* Toggle icon is special */
@@ -579,7 +584,8 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
}
.inspector-body {
- overflow: auto;
+ overflow-y: auto;
+ overflow-x: hidden;
max-height: 480px;
min-height: 330px;
}
@@ -589,6 +595,17 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
position: relative;
}
+.inspector-wrap .message {
+ height: 60px;
+ border-bottom: 1px solid #ccc;
+ box-shadow: 0 0 20px 5px rgba(0, 0, 0, .05);
+ z-index: 100;
+ position: relative;
+ -webkit-transition: box-shadow 100ms;
+ -moz-transition: box-shadow 100ms;
+ transition: box-shadow 100ms;
+}
+
.inspector-wrap .message button.preset-reset {
height: 100%;
border-radius: 0;
@@ -596,11 +613,6 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;}
width: 12.5%;
}
-.inspector-wrap .message {
- height: 60px;
- border-bottom: 1px solid #ccc;
-}
-
.inspector-wrap .message h3 {
display: block;
line-height: 20px;
@@ -701,10 +713,21 @@ h4 + .preset-input input:first-child {
}
.preset-section h4[for="input-building:levels"],
+.preset-section h4[for="input-ele"],
.preset-section.checkselect h4 {
right: 50%;
}
+/* adding additional preset fields */
+
+.icon.add-form {
+ width: 55px;
+}
+
+.more-buttons {
+ border-top: 1px solid #ccc;
+}
+
button.preset-add-field {
width: 40px;
height: 40px;
@@ -721,12 +744,13 @@ button.preset-add-field {
input[type=number] {
width: 50%;
+ padding-right: 65px;
}
.spin-control {
width: 60px;
- border-left: 1px solid #CCC;
height: 30px;
+ border-left: 1px solid #CCC;
display: inline-block;
margin-left: -60px;
margin-bottom: -11px;
@@ -736,12 +760,11 @@ input[type=number] {
.spin-control button {
position: relative;
float: left;
- height: 29px;
+ height: 100%;
width: 50%;
border: 1px solid #CCC;
border-radius: 0;
border-left: 0;
- border-bottom: 0;
}
.spin-control button.descend {
@@ -775,7 +798,7 @@ input[type=number] {
display: block;
padding: 35px 5px 5px 5px;
border-radius: 4px;
- width: 50%;
+ margin-right: 50%;
box-sizing: border-box;
color: #999;
border: 1px solid #CCC;
@@ -849,7 +872,7 @@ input[type=number] {
border-radius: 0 0 4px 4px;
}
-/* combobox dropdown styles */
+/* combobox dropdown */
div.combobox {
width:155px;
diff --git a/img/source/sprite.svg b/img/source/sprite.svg
index bd1eb8b04..66aad17b0 100644
--- a/img/source/sprite.svg
+++ b/img/source/sprite.svg
@@ -10,7 +10,7 @@
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="440"
- height="200"
+ height="220"
id="svg12393"
version="1.1"
inkscape:version="0.48.2 r9819"
@@ -39,21 +39,21 @@
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
- inkscape:cx="318.18348"
- inkscape:cy="95.476233"
+ inkscape:cx="269.07592"
+ inkscape:cy="14.857461"
inkscape:document-units="px"
inkscape:current-layer="layer12"
showgrid="false"
inkscape:window-width="1280"
inkscape:window-height="700"
- inkscape:window-x="48"
- inkscape:window-y="0"
+ inkscape:window-x="361"
+ inkscape:window-y="86"
inkscape:window-maximized="0"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
- showguides="true"
+ showguides="false"
inkscape:guide-bbox="true"
inkscape:snap-bbox="true"
inkscape:snap-nodes="true">
@@ -66,120 +66,128 @@
snapvisiblegridlinesonly="true" />
+
+
@@ -1289,5 +1297,131 @@
id="path25361-5"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccc" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/img/sprite.png b/img/sprite.png
index 300c5dfe6..ed8428ef6 100644
Binary files a/img/sprite.png and b/img/sprite.png differ
diff --git a/js/id/svg/surface.js b/js/id/svg/surface.js
index a7333dbba..d5a1bf05c 100644
--- a/js/id/svg/surface.js
+++ b/js/id/svg/surface.js
@@ -93,7 +93,7 @@ iD.svg.Surface = function() {
.attr({
id: 'sprite',
width: 440,
- height: 200,
+ height: 220,
'xlink:href': 'img/sprite.png'
});
diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js
index 9eb118126..d6d2c22f2 100644
--- a/js/id/ui/preset.js
+++ b/js/id/ui/preset.js
@@ -32,9 +32,16 @@ iD.ui.preset = function(context) {
draw(formwrap, preset.fields);
var wrap = selection.append('div')
- .attr('class', 'col12 inspector-inner');
+ .attr('class', 'col12 more-buttons inspector-inner');
- formbuttonwrap = wrap.append('div')
+ wraplabel = wrap.append('h4');
+
+ wraplabel.append('div').attr('class','icon add-form');
+ wraplabel.append('span')
+ .attr('class','deemphasize')
+ .text('Add additional forms');
+
+ formbuttonwrap = wrap.append('div')
.attr('class', 'col9 preset-input');
formbuttonwrap.selectAll('button')