From 46ebe025555fe82930f5d27fa9866e19759f1cfc Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Wed, 3 Jan 2018 14:35:27 -0500 Subject: [PATCH] Clean up styles, move minimap toggle below background imagery list --- css/80_app.css | 45 +++++++++++++++--------- modules/ui/background.js | 42 +++++++++++++++++++--- modules/ui/background_display_options.js | 41 ++++----------------- modules/ui/map_in_map.js | 7 ++-- 4 files changed, 76 insertions(+), 59 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index e0c851e13..a7e430fe3 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2319,20 +2319,38 @@ div.full-screen > button:hover { text-overflow: ellipsis; } -.minimap-toggle { - display: block; - padding: 5px 10px; - cursor: pointer; - color: #7092ff; - border-top: 1px solid #ccc; + +/* Background Display Options */ + +.display-options-container { + padding: 10px; } -.minimap-toggle.active { - background: #e8ebff; +.display-control h5 { + padding-bottom: 0; + padding-top: 10px; } -.minimap-toggle:hover { - background-color: #ececec; +.display-control h5 span { + margin: 5px; +} + +.display-control .display-option-input { + height: 20px; + width: 160px; +} + +.display-control button { + height: 30px; + width: 30px; + margin-left: 5px; + margin-right: 0px; + vertical-align: text-bottom; + border-radius: 4px; +} +[dir='rtl'] .display-control button { + margin-left: 0px; + margin-right: 5px; } @@ -2463,13 +2481,6 @@ div.full-screen > button:hover { border-top: 5px solid #222; } -.display-options-container { - padding: 10px; -} - -.display-options-container h5 span { - margin: 5px; -} .map-data-control .layer-list button, .background-control .layer-list button { diff --git a/modules/ui/background.js b/modules/ui/background.js index 3fd003d3f..cbd5bfa15 100644 --- a/modules/ui/background.js +++ b/modules/ui/background.js @@ -20,6 +20,7 @@ import { uiCmd } from './cmd'; import { uiDisclosure } from './disclosure'; import { uiHelp } from './help'; import { uiMapData } from './map_data'; +import { uiMapInMap } from './map_in_map'; import { uiTooltipHtml } from './tooltipHtml'; import { utilCallWhenIdle } from '../util'; import { tooltip } from '../util/tooltip'; @@ -43,11 +44,11 @@ export function uiBackground(context) { function setTooltips(selection) { selection.each(function(d, i, nodes) { - var item = d3_select(this).select('label'), - span = item.select('span'), - placement = (i < nodes.length / 2) ? 'bottom' : 'top', - description = d.description(), - isOverflowing = (span.property('clientWidth') !== span.property('scrollWidth')); + var item = d3_select(this).select('label'); + var span = item.select('span'); + var placement = (i < nodes.length / 2) ? 'bottom' : 'top'; + var description = d.description(); + var isOverflowing = (span.property('clientWidth') !== span.property('scrollWidth')); if (d === _previousBackground) { item.call(tooltip() @@ -194,11 +195,42 @@ export function uiBackground(context) { var container = selection.selectAll('layer-background-list') .data([0]); + // the background list _backgroundList = container.enter() .append('ul') .attr('class', 'layer-list layer-background-list') .attr('dir', 'auto') .merge(container); + + + // add minimap toggle below list + var minimapEnter = selection.selectAll('minimap-toggle-list') + .data([0]) + .enter() + .append('ul') + .attr('class', 'layer-list minimap-toggle-list') + .append('li') + .attr('class', 'layer minimap-toggle-item'); + + var minimapLabelEnter = minimapEnter + .append('label') + .call(tooltip() + .html(true) + .title(uiTooltipHtml(t('background.minimap.tooltip'), t('background.minimap.key'))) + .placement('top') + ); + + minimapLabelEnter + .append('input') + .attr('type', 'checkbox') + .on('change', function() { + d3_event.preventDefault(); + uiMapInMap.toggle(); + }); + + minimapLabelEnter + .append('span') + .text(t('background.minimap.description')); } diff --git a/modules/ui/background_display_options.js b/modules/ui/background_display_options.js index ecfa8fdda..9dfbfc80c 100644 --- a/modules/ui/background_display_options.js +++ b/modules/ui/background_display_options.js @@ -7,18 +7,15 @@ import { import { t, textDirection } from '../util/locale'; import { svgIcon } from '../svg'; import { uiDisclosure } from './disclosure'; -import { uiMapInMap } from './map_in_map'; -import { uiTooltipHtml } from './tooltipHtml'; -import { tooltip } from '../util/tooltip'; export function uiBackgroundDisplayOptions(context) { var _selection = d3_select(null); var sliders = ['brightness', 'contrast', 'saturation', 'sharpness']; + var storedOpacity = context.storage('background-opacity'); var _options = { - brightness: (context.storage('background-opacity') !== null) ? - (+context.storage('background-opacity')) : 1.0, + brightness: (storedOpacity !== null ? (+storedOpacity) : 1), contrast: 1, saturation: 1, sharpness: 1 @@ -93,33 +90,6 @@ export function uiBackgroundDisplayOptions(context) { .call(svgIcon('#icon-' + (textDirection === 'rtl' ? 'redo' : 'undo'))); - // add minimap toggle - var minimapEnter = containerEnter - .append('div') - .attr('class', 'minimap-toggle-wrap'); - - var minimapLabelEnter = minimapEnter - .append('label') - .call(tooltip() - .html(true) - .title(uiTooltipHtml(t('background.minimap.tooltip'), t('background.minimap.key'))) - .placement('top') - ); - - minimapLabelEnter - .classed('minimap-toggle', true) - .append('input') - .attr('type', 'checkbox') - .on('change', function() { - uiMapInMap.toggle(); - d3_event.preventDefault(); - }); - - minimapLabelEnter - .append('span') - .text(t('background.minimap.description')); - - // update container = containerEnter .merge(container); @@ -132,6 +102,11 @@ export function uiBackgroundDisplayOptions(context) { container.selectAll('.display-option-reset') .classed('disabled', function(d) { return _options[d] === 1; }); + + // first time only, set brightness if needed + if (containerEnter.size() && _options.brightness !== 1) { + context.background().brightness(_options.brightness); + } } @@ -145,8 +120,6 @@ export function uiBackgroundDisplayOptions(context) { ); } - // setDisplayOption('brightness', _options.brightness); - return backgroundDisplayOptions; } diff --git a/modules/ui/map_in_map.js b/modules/ui/map_in_map.js index 4a6609c98..e7b70ec5e 100644 --- a/modules/ui/map_in_map.js +++ b/modules/ui/map_in_map.js @@ -285,9 +285,10 @@ export function uiMapInMap(context) { isHidden = !isHidden; - var label = d3_select('.minimap-toggle'); - label.classed('active', !isHidden) - .select('input').property('checked', !isHidden); + d3_select('.minimap-toggle-item') + .classed('active', !isHidden) + .select('input') + .property('checked', !isHidden); if (isHidden) { wrap