From d24e2663f2a2e6d264feb914ac8b9b28a46c3971 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Wed, 29 Nov 2017 16:49:58 -0500
Subject: [PATCH] Replace confusing opacity buttons with opacity slider

---
 css/80_app.css                          |  40 +-------------
 data/core.yaml                          |   1 -
 dist/img/background-pattern-1.png       | Bin 89 -> 0 bytes
 dist/img/background-pattern-opacity.png | Bin 90 -> 0 bytes
 dist/locales/en.json                    |   1 -
 modules/ui/background.js                |  69 +++++++++++-------------
 6 files changed, 32 insertions(+), 79 deletions(-)
 delete mode 100644 dist/img/background-pattern-1.png
 delete mode 100644 dist/img/background-pattern-opacity.png

diff --git a/css/80_app.css b/css/80_app.css
index 76cb459c3..9c8045f4b 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -130,7 +130,6 @@ a, button, input, textarea {
 a,
 button,
 .checkselect label:hover,
-.opacity-options li,
 .radial-menu-item {
     cursor: pointer;
 }
@@ -2468,43 +2467,8 @@ div.full-screen > button:hover {
     padding: 10px;
 }
 
-.opacity-options {
-    background: url(img/background-pattern-opacity.png) 0 0 repeat;
-    height: 20px;
-    width: 82px;
-    border: 1px solid #ccc;
-}
-
-.opacity-options li {
-    height: 100%;
-    display: block;
-    float: left;
-}
-
-.opacity-options li .select-box{
-    position: absolute;
-    width: 20px;
-    height: 18px;
-    z-index: 9999;
-}
-
-.background-control li:hover .select-box,
-.background-control li.selected .select-box {
-    border: 2px solid #7092ff;
-    background: rgba(89, 123, 231, .5);
-    opacity: .5;
-}
-
-.background-control li.selected:hover .select-box,
-.background-control li.selected .select-box {
-    opacity: 1;
-}
-
-.background-control .opacity {
-    background: #222;
-    display: inline-block;
-    width: 20px;
-    height: 18px;
+.opacity-options-wrapper .opacity-value {
+    margin: 5px;
 }
 
 .map-data-control .layer-list button,
diff --git a/data/core.yaml b/data/core.yaml
index 1344b733a..3404c6454 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -384,7 +384,6 @@ en:
     reset: reset
     display_options: Display Options
     brightness: Brightness
-    percent_brightness: "{opacity}% brightness"
     minimap:
       description: Show Minimap
       tooltip: Show a zoomed out map to help locate the area currently displayed.
diff --git a/dist/img/background-pattern-1.png b/dist/img/background-pattern-1.png
deleted file mode 100644
index d2f2bcb125924fa13e23a9e4d657ef10198a6a5d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 89
zcmeAS@N?(olHy`uVBq!ia0vp^%plCc1|-8Yw(bW~3Z5>GAr-fBk8k8<VBlyuaKGO3
n*n*ngt*p}p7QCAJbUxz(d!@ZggciO7s%7wW^>bP0l+XkKz}Xtc

diff --git a/dist/img/background-pattern-opacity.png b/dist/img/background-pattern-opacity.png
deleted file mode 100644
index f24376283025091b6fbe5b8e64b2dd4a38d470d5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 90
zcmeAS@N?(olHy`uVBq!ia0vp^Y#_`5A|IT2?*XI~JzX3_DsIi~G6X6UX!`a4N&oJb
l2X-EC)Nzo{=MbCQR-mw<f<0#X7Biq?22WQ%mvv4FO#lLq8n*xd

diff --git a/dist/locales/en.json b/dist/locales/en.json
index c41d2f005..9d1872d60 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -472,7 +472,6 @@
             "reset": "reset",
             "display_options": "Display Options",
             "brightness": "Brightness",
-            "percent_brightness": "{opacity}% brightness",
             "minimap": {
                 "description": "Show Minimap",
                 "tooltip": "Show a zoomed out map to help locate the area currently displayed.",
diff --git a/modules/ui/background.js b/modules/ui/background.js
index 680775eca..e2ecfe678 100644
--- a/modules/ui/background.js
+++ b/modules/ui/background.js
@@ -29,9 +29,8 @@ import { tooltip } from '../util/tooltip';
 export function uiBackground(context) {
     var key = t('background.key');
     var detected = utilDetect();
-    var opacities = [1, 0.75, 0.5, 0.25];
 
-    var _opacityDefault = (context.storage('background-opacity') !== null) ?
+    var _opacity = (context.storage('background-opacity') !== null) ?
             (+context.storage('background-opacity')) : 1.0;
     var _customSource = context.background().findSource('custom');
     var _previousBackground;
@@ -45,24 +44,28 @@ export function uiBackground(context) {
     var backgroundOffset = uiBackgroundOffset(context);
 
 
-    // Can be 0 from <1.3.0 use or due to issue #1923.
-    if (_opacityDefault === 0) _opacityDefault = 1.0;
-
-
     function setOpacity(d) {
+        if (!d && d3_event && d3_event.target) {
+            d = d3_event.target.value;
+        }
+        // Can be 0 from <1.3.0 use or due to issue #1923.
+        if (!d) d = 1.0;
+
         var bg = context.container().selectAll('.layer-background')
-            .transition()
-            .style('opacity', d)
-            .attr('data-opacity', d);
+            .style('opacity', d);
 
         if (!detected.opera) {
             utilSetTransform(bg, 0, 0);
         }
 
-        _displayOptions.selectAll('opacity-options li')
-            .classed('active', function(_) { return _ === d; });
+        _displayOptions.selectAll('.opacity-input')
+            .property('value', d);
+
+        _displayOptions.selectAll('.opacity-value')
+            .text(Math.floor(d * 100) + '%');
 
         context.storage('background-opacity', d);
+        _opacity = d;
     }
 
 
@@ -247,36 +250,29 @@ export function uiBackground(context) {
             .append('div')
             .attr('class', 'display-options-container controls-list');
 
-        /* add opacity switcher */
+        // add opacity switcher
         var opacityDivEnter = containerEnter
             .append('div')
             .attr('class', 'opacity-options-wrapper');
 
         opacityDivEnter
             .append('h5')
-            .text(t('background.brightness'));
+            .text(t('background.brightness'))
+            .append('span')
+            .attr('class', 'opacity-value')
+            .text(Math.floor(_opacity * 100) + '%');
 
-        var opacityUlEnter = opacityDivEnter.append('ul')
-            .attr('class', 'opacity-options');
+        opacityDivEnter
+            .append('input')
+            .attr('class', 'opacity-input')
+            .attr('type', 'range')
+            .attr('min', '0.25')
+            .attr('max', '1')
+            .attr('step', '0.05')
+            .property('value', _opacity)
+            .on('input.set-opacity', setOpacity);
 
-        opacityUlEnter.selectAll('div.opacity')
-            .data(opacities)
-            .enter()
-            .append('li')
-            .attr('data-original-title', function(d) {
-                return t('background.percent_brightness', { opacity: (d * 100) });
-            })
-            .on('click.set-opacity', setOpacity)
-            .html('<div class="select-box"></div>')
-            .call(tooltip()
-                .placement((textDirection === 'rtl') ? 'right' : 'left')
-            )
-            .append('div')
-            .attr('class', 'opacity')
-            .style('opacity', function(d) { return 1.25 - d; });
-
-
-        /* add minimap toggle */
+        // add minimap toggle
         var minimapEnter = containerEnter
             .append('div')
             .attr('class', 'minimap-toggle-wrap');
@@ -403,11 +399,6 @@ export function uiBackground(context) {
                 .content(renderBackgroundList)
             );
 
-        // _backgroundList = pane
-        //     .append('ul')
-        //     .attr('class', 'layer-list')
-        //     .attr('dir', 'auto');
-
             // "Where does this imagery come from?"
         // pane
         //     .append('div')
@@ -454,7 +445,7 @@ export function uiBackground(context) {
 
 
         update();
-        setOpacity(_opacityDefault);
+        setOpacity(_opacity);
 
         var keybinding = d3_keybinding('background')
             .on(key, togglePane)