Fix imagery offset +/-, adjust text and style

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;

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.

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."

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