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 d2f2bcb12..000000000 Binary files a/dist/img/background-pattern-1.png and /dev/null differ diff --git a/dist/img/background-pattern-opacity.png b/dist/img/background-pattern-opacity.png deleted file mode 100644 index f24376283..000000000 Binary files a/dist/img/background-pattern-opacity.png and /dev/null differ 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('
') - .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)