diff --git a/css/app.css b/css/app.css index 0c71c09ad..82dac0161 100644 --- a/css/app.css +++ b/css/app.css @@ -491,7 +491,6 @@ button[disabled] .label { .icon.plus { background-position: -240px 0px;} .icon.search { background-position: -280px 0px;} .icon.geocode { background-position: -280px 0px;} -.icon.help { background-position: -460px 0px;} .icon.layers { background-position: -300px 0px;} .icon.avatar { background-position: -320px 0px;} .icon.nearby { background-position: -340px 0px;} @@ -499,8 +498,11 @@ button[disabled] .label { .icon.warning { background-position: -380px 0px;} .icon.back { background-position: -420px 0px;} .icon.forward { background-position: -440px 0px;} +.icon.help { background-position: -460px 0px;} +.icon.inspect.light { background-position: -220px -20px;} .icon.geocode.light { background-position: -280px -20px;} +.icon.help.light { background-position: -460px -20px;} .fillD .icon.avatar { background-position: -320px -20px;} .fillD .icon.nearby { background-position: -340px -20px;} @@ -512,7 +514,6 @@ button[disabled] .icon.add-area { background-position: -60px -40px;} button.disabled .icon.undo { background-position: -80px -40px;} button.disabled .icon.redo { background-position: -100px -40px;} button[disabled] .apply.icon { background-position: -120px -40px;} -button[disabled] .save.icon { background-position: -140px -40px;} button[disabled] .close.icon { background-position: -160px -40px;} button[disabled] .delete.icon { background-position: -180px -40px;} button[disabled] .icon.remove { background-position: -200px -40px;} @@ -705,25 +706,6 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} background: #ececec; } -.grid-entry:hover .tag-reference-button { - display: block; - border-radius: 0; -} - -.grid-entry .tag-reference-button { - display: none; - position: absolute; - bottom: 0; - right: 0; - height: 30px; - width: 30px; - background: rgba(0,0,0,.5); -} - -.grid-entry .tag-reference-button:hover { - background: rgba(0,0,0,.9); -} - .grid-entry > .icon { position: absolute; top: 30px;left: 0px; right: 0px; @@ -852,6 +834,25 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} color: #222; } +.grid-entry:hover .tag-reference-button { + opacity: 1; + border-radius: 0; +} + +.grid-entry .tag-reference-button { + opacity: 0; + position: absolute; + bottom: 0; + right: 0; + width: 20px; + height: 30px; + background: rgba(0,0,0,.5); +} + +.grid-entry .tag-reference-button:hover { + background: rgba(0,0,0,.9); +} + /* Preset icon colors */ .inspector-body-line .icon.feature-marker-stroked { @@ -910,7 +911,7 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} } .tag-wrap .preset-icon-wrap div { - height: 90px; + height: 80px; width: 33.3333%; width: -webkit-calc(33.3333% - 10px); width: calc(33.3333% - 10px); @@ -937,29 +938,38 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} padding-right: 20px; } -.form-field .modified-icon { - opacity: 0.2; - display: none; - pointer-events: all; -} - -.form-field .modified-icon:hover { - opacity: 0.5; -} - -.form-field.modified .modified-icon { - display: inline-block; -} - .form-label { + position: relative; font-weight: bold; border: 1px solid #cfcfcf; - padding: 5px 10px; + padding: 5px 0px 5px 10px; background: #f6f6f6; display: block; border-radius: 4px 4px 0 0; } +.form-label button { + pointer-events: all; + height: 29px; + margin-top: -5px; + border-left: 1px solid #CCC; + border-radius: 0; + opacity: .5; +} + +.form-label .modified-icon { + border-right: 0; + opacity: 0; +} + +.modified .form-label .modified-icon { + opacity: .5; +} + +.form-label button.tag-reference-button { + border-top-right-radius: 3px; +} + .form-field > input, .form-field > textarea, .form-field .preset-input-wrap { diff --git a/img/source/sprite.svg b/img/source/sprite.svg index 0852ffb8e..51dfac05e 100644 --- a/img/source/sprite.svg +++ b/img/source/sprite.svg @@ -38,9 +38,9 @@ borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" - inkscape:zoom="7.858048" - inkscape:cx="497.26876" - inkscape:cy="307.47415" + inkscape:zoom="11.079848" + inkscape:cx="223.17822" + inkscape:cy="307.03685" inkscape:document-units="px" inkscape:current-layer="layer12" showgrid="true" @@ -53,7 +53,7 @@ fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" - showguides="false" + showguides="true" inkscape:guide-bbox="true" inkscape:snap-bbox="true" inkscape:snap-nodes="true" @@ -364,14 +364,9 @@ id="path3769" inkscape:connector-curvature="0" sodipodi:nodetypes="ccccccccc" /> - + transform="translate(0,50)" + style="fill:#1a1a1a;fill-opacity:1"> + + + + + + + diff --git a/img/sprite.png b/img/sprite.png index 781926dcb..a82be2edf 100644 Binary files a/img/sprite.png and b/img/sprite.png differ diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js index c755e0202..076a35d4a 100644 --- a/js/id/ui/preset.js +++ b/js/id/ui/preset.js @@ -113,18 +113,22 @@ iD.ui.preset = function(context, entity, preset) { .attr('for', function(field) { return 'preset-input-' + field.id; }) .text(function(field) { return field.label(); }); - label.append('button') - .attr('class', 'fr icon undo modified-icon') - .attr('tabindex', -1) - .on('click', revert); + label.append('button') - .attr('class', 'tag-reference-button') + .attr('class', 'tag-reference-button fr') .attr('tabindex', -1) .on('click', toggleReference) .append('span') .attr('class', 'icon inspect'); + label.append('button') + .attr('class', 'fr modified-icon') + .attr('tabindex', -1) + .on('click', revert) + .append('div') + .attr('class','icon undo'); + enter.each(function(field) { d3.select(this).call(field.input); }); diff --git a/js/id/ui/preset_grid.js b/js/id/ui/preset_grid.js index eb83c3a8b..c1d73a3a4 100644 --- a/js/id/ui/preset_grid.js +++ b/js/id/ui/preset_grid.js @@ -268,7 +268,7 @@ iD.ui.PresetGrid = function(context, entity) { .attr('class', 'tag-reference-button') .on('click', helpClick, selection) .append('span') - .attr('class', 'icon inspect'); + .attr('class', 'icon inspect light'); entries.order(); } diff --git a/js/id/ui/taglist.js b/js/id/ui/taglist.js index a295e9d76..c0a3bcfab 100644 --- a/js/id/ui/taglist.js +++ b/js/id/ui/taglist.js @@ -101,7 +101,7 @@ iD.ui.Taglist = function(context, entity) { .call(iD.ui.TagReference(entity, {key: tag.key})); }) .append('span') - .attr('class', 'icon inspect'); + .attr('class', 'icon inspect light'); row.append('div') .attr('class', 'tag-help');