diff --git a/css/app.css b/css/app.css index 6dbcd45a5..6e2772cdd 100644 --- a/css/app.css +++ b/css/app.css @@ -171,8 +171,8 @@ div.buttons-joined { } #bar button.active:not([disabled]) { - background:#eee; - color:#000; + background:#7392ff; + color:#fff; } #bar button.save { @@ -216,13 +216,18 @@ div.buttons-joined { } .inspector-wrap { + border-radius:3px; + border:1px solid #ccc; position:absolute; - top:45px; - right:0px; + top:50px; + left:50%; + margin-left:-175px; overflow:auto; padding:10px; background:#fff; width:350px; + opacity:0; + display:none; } .inspector-wrap a.permalink { diff --git a/js/id/modes/add_area.js b/js/id/modes/add_area.js index 572224cf2..ae7acf6af 100644 --- a/js/id/modes/add_area.js +++ b/js/id/modes/add_area.js @@ -6,6 +6,7 @@ iD.modes.AddArea = function() { mode.enter = function() { mode.map.dblclickEnable(false); + mode.map.hint('Click on the map to start drawing an area, like a park, lake, or building.'); mode.map.surface.on('click.addarea', function() { var datum = d3.select(d3.event.target).datum() || {}, @@ -34,6 +35,7 @@ iD.modes.AddArea = function() { window.setTimeout(function() { mode.map.dblclickEnable(true); }, 1000); + mode.map.hint(false); mode.map.surface.on('click.addarea', null); mode.map.keybinding().on('⎋.addarea', null); }; diff --git a/js/id/modes/add_place.js b/js/id/modes/add_place.js index 488df1cbe..87978647a 100644 --- a/js/id/modes/add_place.js +++ b/js/id/modes/add_place.js @@ -5,6 +5,8 @@ iD.modes.AddPlace = function() { }; mode.enter = function() { + mode.map.hint('Click on the map to add a place.'); + mode.map.surface.on('click.addplace', function() { var node = iD.Node({loc: mode.map.mouseCoordinates(), _poi: true}); mode.history.perform(iD.actions.addNode(node)); @@ -17,6 +19,7 @@ iD.modes.AddPlace = function() { }; mode.exit = function() { + mode.map.hint(false); mode.map.surface.on('click.addplace', null); mode.map.keybinding().on('⎋.addplace', null); }; diff --git a/js/id/modes/add_road.js b/js/id/modes/add_road.js index 8bfb93647..32a6a7f4e 100644 --- a/js/id/modes/add_road.js +++ b/js/id/modes/add_road.js @@ -7,6 +7,8 @@ iD.modes.AddRoad = function() { mode.enter = function() { mode.map.dblclickEnable(false); + mode.map.hint('Click on the map to start drawing an road, path, or route.'); + mode.map.surface.on('click.addroad', function() { var datum = d3.select(d3.event.target).datum() || {}, node, @@ -57,6 +59,7 @@ iD.modes.AddRoad = function() { mode.exit = function() { mode.map.dblclickEnable(true); + mode.map.hint(false); mode.map.surface.on('click.addroad', null); mode.map.keybinding().on('⎋.addroad', null); }; diff --git a/js/id/modes/draw_area.js b/js/id/modes/draw_area.js index 42140e5bc..31c121162 100644 --- a/js/id/modes/draw_area.js +++ b/js/id/modes/draw_area.js @@ -2,6 +2,9 @@ iD.modes.DrawArea = function(way_id) { var mode = {}; mode.enter = function() { + + mode.map.hint('Click on the map to add points to your area. Finish the ' + + 'area by clicking on your first point'); mode.map.dblclickEnable(false); var way = mode.history.graph().entity(way_id), @@ -47,6 +50,7 @@ iD.modes.DrawArea = function(way_id) { }; mode.exit = function() { + mode.map.hint(false); mode.map.surface .on('mousemove.drawarea', null) .on('click.drawarea', null); diff --git a/js/id/modes/draw_road.js b/js/id/modes/draw_road.js index 2996122b6..ec7e942fa 100644 --- a/js/id/modes/draw_road.js +++ b/js/id/modes/draw_road.js @@ -3,6 +3,9 @@ iD.modes.DrawRoad = function(way_id, direction) { mode.enter = function() { mode.map.dblclickEnable(false); + mode.map.hint('Click to add more points to the road. ' + + 'Click on other roads to connect to them, and double-click to ' + + 'end the road.'); mode.map.dragEnable(false); var index = (direction === 'forward') ? undefined : -1, @@ -64,6 +67,7 @@ iD.modes.DrawRoad = function(way_id, direction) { }; mode.exit = function() { + mode.map.hint(false); mode.map.surface .on('mousemove.drawroad', null) .on('click.drawroad', null); diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index 802d90d87..b8cd33ab2 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -419,6 +419,20 @@ iD.Map = function() { return map; }; + map.hint = function (_) { + if (_ === false) { + d3.select('div.inspector-wrap') + .style('opacity', 0) + .style('display', 'none'); + } else { + d3.select('div.inspector-wrap') + .style('display', 'block') + .transition() + .style('opacity', 1) + .text(_); + } + }; + map.history = function (_) { if (!arguments.length) return history; history = _;