diff --git a/css/app.css b/css/app.css index d2c8779f5..3ac3c3c1a 100644 --- a/css/app.css +++ b/css/app.css @@ -365,7 +365,7 @@ button:hover { button[disabled], button.disabled { background-color: rgba(255,255,255,.25); - color: rgba(0,0,0,.5); + color: rgba(0,0,0,.4); cursor: auto; } @@ -1891,6 +1891,10 @@ div.full-screen > button:hover { padding: 10px; } +.nudge-container .nudge-instructions { + padding-bottom: 15px; +} + .nudge-container .nudge-outer-rect { background-color: #eee; border: 1px solid #ccc; @@ -1902,7 +1906,7 @@ div.full-screen > button:hover { align-items: center; margin: 0 auto; margin-top: 20px; - cursor: pointer; + cursor: move; } .nudge-container .nudge-inner-rect { @@ -1945,38 +1949,39 @@ div.full-screen > button:hover { display: block; width: 20%; position: relative; -} - -.nudge-container button.left { - top: -50px; - right: -85%; background-color: transparent; } .nudge-container button.right { + top: -50px; + right: -85%; +} + +.nudge-container button.left { top: -50px; right: 45%; - background-color: transparent; } .nudge-container button.top { left: 20%; - top: -100px; - background-color: transparent; + top: -104px; } .nudge-container button.bottom { left: -20%; - background-color: transparent; } -.background-control .nudge.left::after { +.nudge-container button.nudge-reset { + right: -10px; +} + +.background-control .nudge.right::after { border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #222; } -.background-control .nudge.right::after { +.background-control .nudge.left::after { border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #222; diff --git a/data/core.yaml b/data/core.yaml index f80534e10..40b90ce91 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -274,10 +274,10 @@ en: custom: Custom custom_button: Edit custom background custom_prompt: "Enter a tile URL template. Valid tokens are {z}, {x}, {y} for Z/X/Y scheme and {u} for quadtile scheme." - fix_misalignment: Fix alignment + fix_misalignment: Adjust imagery offset imagery_source_faq: Where does this imagery come from? reset: reset - offset: Type or drag to adjust offset + offset: "Drag anywhere in the gray area below to adjust the imagery offset, or enter the offset values in meters." minimap: description: Minimap tooltip: Show a zoomed out map to help locate the area currently displayed. diff --git a/dist/locales/en.json b/dist/locales/en.json index 2b585d309..cd4eef459 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -330,10 +330,10 @@ "custom": "Custom", "custom_button": "Edit custom background", "custom_prompt": "Enter a tile URL template. Valid tokens are {z}, {x}, {y} for Z/X/Y scheme and {u} for quadtile scheme.", - "fix_misalignment": "Fix alignment", + "fix_misalignment": "Adjust imagery offset", "imagery_source_faq": "Where does this imagery come from?", "reset": "reset", - "offset": "Type or drag to adjust offset", + "offset": "Drag anywhere in the gray area below to adjust the imagery offset, or enter the offset values in meters.", "minimap": { "description": "Minimap", "tooltip": "Show a zoomed out map to help locate the area currently displayed." diff --git a/js/id/ui/background.js b/js/id/ui/background.js index b0258a058..4bcb72d0d 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -2,10 +2,10 @@ iD.ui.Background = function(context) { var key = 'B', opacities = [1, 0.75, 0.5, 0.25], directions = [ - ['left', [1, 0]], - ['top', [0, -1]], - ['right', [-1, 0]], - ['bottom', [0, 1]]], + ['right', [0.5, 0]], + ['top', [0, -0.5]], + ['left', [-0.5, 0]], + ['bottom', [0, 0.5]]], opacityDefault = (context.storage('background-opacity') !== null) ? (+context.storage('background-opacity')) : 1.0, customTemplate = context.storage('background-custom-template') || ''; @@ -147,7 +147,7 @@ iD.ui.Background = function(context) { return [ offset[0] * 2 * Math.PI * equatRadius / tileSize, - offset[1] * 2 * Math.PI * polarRadius / tileSize + -offset[1] * 2 * Math.PI * polarRadius / tileSize ]; } @@ -158,7 +158,7 @@ iD.ui.Background = function(context) { return [ meters[0] * tileSize / (2 * Math.PI * equatRadius), - meters[1] * tileSize / (2 * Math.PI * polarRadius) + -meters[1] * tileSize / (2 * Math.PI * polarRadius) ]; } @@ -209,7 +209,7 @@ iD.ui.Background = function(context) { if (d === '') return resetOffset(); - d = d.split(',').map(function(n) { + d = d.replace(/;/g, ',').split(',').map(function(n) { // if n is NaN, it will always get mapped to false. return !isNaN(n) && n; }); @@ -228,24 +228,22 @@ iD.ui.Background = function(context) { d3.select(window) .on('mousemove.offset', function() { - drag(); + var latest = [d3.event.clientX, d3.event.clientY]; + var d = [ + -(origin[0] - latest[0]) / 4, + -(origin[1] - latest[1]) / 4 + ]; + + origin = latest; + nudge(d); }) - .on('mouseup', function() { + .on('mouseup.offset', function() { d3.select(window) .on('mousemove.offset', null) .on('mouseup.offset', null); }); - function drag() { - var latest = [d3.event.clientX, d3.event.clientY]; - var d = [ - (origin[0] - latest[0]) / 4, - (origin[1] - latest[1]) / 4 - ]; - - origin = latest; - nudge(d); - } + d3.event.preventDefault(); } function hide() { @@ -437,7 +435,8 @@ iD.ui.Background = function(context) { d3.event.stopPropagation(); }); - nudgeContainer.append('div').selectAll('button') + nudgeContainer.append('div') + .selectAll('button') .data(directions).enter() .append('button') .attr('class', function(d) { return d[0] + ' nudge'; }) @@ -445,8 +444,8 @@ iD.ui.Background = function(context) { buttonOffset(d[1]); }); - var resetButton = nudgeContainer - .append('button') + nudgeContainer.append('button') + .attr('title', t('background.reset')) .attr('class', 'nudge-reset disabled') .on('click', resetOffset) .call(iD.svg.Icon('#icon-undo')); @@ -458,7 +457,6 @@ iD.ui.Background = function(context) { .on('change.background-update', update); - update(); setOpacity(opacityDefault);