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')