From 9d9be8fd260d3f4a66f3e84685f05128f09feaa5 Mon Sep 17 00:00:00 2001 From: vershwal Date: Sun, 18 Mar 2018 17:17:28 +0530 Subject: [PATCH 1/3] Added button to close Map controls. --- css/80_app.css | 4 ++-- modules/ui/background.js | 5 +++++ modules/ui/help.js | 5 +++++ modules/ui/map_data.js | 5 +++++ 4 files changed, 17 insertions(+), 2 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 0150828af..99354558e 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2727,12 +2727,12 @@ div.full-screen > button:hover { position: fixed; top: 60px; bottom: 30px; - padding: 20px 50px 20px 20px; + padding: 5px 35px 5px 5px; right: 0; overflow: auto; } [dir='rtl'] .map-overlay.content { - padding: 20px 20px 20px 50px; + padding: 5px 5px 5px 35px; left: 0; right: auto !important; } diff --git a/modules/ui/background.js b/modules/ui/background.js index 295c44530..e4da9c745 100644 --- a/modules/ui/background.js +++ b/modules/ui/background.js @@ -350,6 +350,11 @@ export function uiBackground(context) { .call(svgIcon('#icon-layers', 'light')) .call(paneTooltip); + pane + .append('button') + .on('click', function() { uiBackground.hidePane(); }) + .call(svgIcon('#icon-close')); + pane .append('h2') .text(t('background.title')); diff --git a/modules/ui/help.js b/modules/ui/help.js index 30d17833a..43f9d7b44 100644 --- a/modules/ui/help.js +++ b/modules/ui/help.js @@ -382,6 +382,11 @@ export function uiHelp(context) { .call(tooltipBehavior); var shown = false; + pane + .append('button') + .on('click', function() { uiHelp.hidePane(); }) + .call(svgIcon('#icon-close')); + var toc = pane .append('ul') diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js index 457a43be5..6b5c268c6 100644 --- a/modules/ui/map_data.js +++ b/modules/ui/map_data.js @@ -457,6 +457,11 @@ export function uiMapData(context) { .call(paneTooltip); + pane + .append('button') + .on('click', function() { uiMapData.hidePane(); }) + .call(svgIcon('#icon-close')); + pane .append('h2') .text(t('map_data.title')); From 64b90a6a92c41c5a283e1cf660f39e79f9fbb908 Mon Sep 17 00:00:00 2001 From: vershwal Date: Sun, 18 Mar 2018 19:36:46 +0530 Subject: [PATCH 2/3] Changed padding. --- css/80_app.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 99354558e..435437f53 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2727,12 +2727,12 @@ div.full-screen > button:hover { position: fixed; top: 60px; bottom: 30px; - padding: 5px 35px 5px 5px; + padding: 2px 50px 20px 20px; right: 0; overflow: auto; } [dir='rtl'] .map-overlay.content { - padding: 5px 5px 5px 35px; + padding: 2px 20px 20px 50px; left: 0; right: auto !important; } From 08ac17f49cad2c5521c9834aa0c9fa91300ff849 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Tue, 27 Mar 2018 18:34:09 -0400 Subject: [PATCH 3/3] Split pane content into header and content, move close button --- css/80_app.css | 115 ++++++++++++++++++++++++--------------- modules/ui/background.js | 28 +++++++--- modules/ui/help.js | 32 +++++++---- modules/ui/map_data.js | 24 +++++--- 4 files changed, 128 insertions(+), 71 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 435437f53..313700f21 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -1774,7 +1774,7 @@ input[type=number] { content: ""; display: block; position: absolute; - background:#ccc; + background: #ccc; height: 11px; width: 1px; left: 0; @@ -2384,7 +2384,7 @@ div.full-screen > button:hover { .map-controls { right: 0; - top: 70px; + top: 132px; width: 40px; position: fixed; z-index: 100; @@ -2410,27 +2410,46 @@ div.full-screen > button:hover { } /* Zoomer */ - -.zoombuttons button.zoom-in { +.zoombuttons > button.zoom-in { border-radius: 4px 0 0 0; } -[dir='rtl'] .zoombuttons button.zoom-in { +[dir='rtl'] .zoombuttons > button.zoom-in { border-radius: 0 4px 0 0; } -/* Background / Map Data Settings */ +/* Geolocator */ +.geolocate-control { + margin-bottom: 10px; +} +.geolocate-control > button { + border-radius: 0 0 0 4px; +} +[dir='rtl'] .geolocate-control > button { + border-radius: 0 0 4px 0; +} + +/* Pane Buttons */ +.help-control > button { + border-radius: 0 0 0 4px; +} +[dir='rtl'] .help-control > button { + border-radius: 0 0 4px 0; +} .map-data-control button { border-radius: 0; } -.background-control button { +.background-control > button { border-radius: 4px 0 0 0; } -[dir='rtl'] .background-control button { +[dir='rtl'] .background-control > button { border-radius: 0 4px 0 0; } + +/* Background / Map Data Settings */ + .map-data-control, .background-control { position: relative; @@ -2704,51 +2723,59 @@ div.full-screen > button:hover { border-radius: 3px 0 0 3px; } -.map-data-control .map-overlay, -.background-control .map-overlay, -.help-control .map-overlay { +/* Side panes */ + +.map-data-control .map-pane, +.background-control .map-pane, +.help-control .map-pane { z-index: -1; } -/* Geolocator */ - -.geolocate-control { - margin-bottom: 10px; -} - -.geolocate-control button { - border-radius: 0 0 0 4px; -} -[dir='rtl'] .geolocate-control button { - border-radius: 0 0 4px 0; -} - -.map-overlay.content { +.map-pane { position: fixed; top: 60px; bottom: 30px; - padding: 2px 50px 20px 20px; right: 0; - overflow: auto; + overflow: hidden; } -[dir='rtl'] .map-overlay.content { - padding: 2px 20px 20px 50px; +[dir='rtl'] .map-pane { left: 0; right: auto !important; } -.map-overlay.content > div { +.pane-heading { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + border-bottom: 1px solid #ccc; +} + +.pane-heading h2 { + margin: 15px 20px; +} + +.pane-heading button { + width: 40px; + height: 61px; + border-radius: 0; +} + +.pane-content { + height: 100%; + padding: 10px 50px 20px 20px; + overflow-x: hidden; + overflow-y: scroll; +} +[dir='rtl'] .pane-content { + padding: 10px 20px 20px 50px; +} + +.pane-content > div { padding-bottom: 15px; } /* Help */ -.help-control button { - border-radius: 0 0 0 4px; -} -[dir='rtl'] .help-control button { - border-radius: 0 0 4px 0; -} .help-wrap p { font-size: 15px; @@ -3878,7 +3905,7 @@ svg.mouseclick use.right { .tooltip { position: absolute; display: none; - color:#333; + color: #333; font-size: 12px; } @@ -4032,33 +4059,33 @@ svg.mouseclick use.right { /* Exceptions for tooltip layouts */ /* make tooltips in panels dark */ -.map-overlay .tooltip.top .tooltip-arrow, +.map-pane .tooltip.top .tooltip-arrow, .entity-editor-pane .tooltip.top .tooltip-arrow, .warning-section .tooltip.top .tooltip-arrow { border-top-color: #000; } -.map-overlay .tooltip.bottom .tooltip-arrow, +.map-pane .tooltip.bottom .tooltip-arrow, .entity-editor-pane .tooltip.bottom .tooltip-arrow, .warning-section .tooltip.bottom .tooltip-arrow { border-bottom-color: #000; } -.map-overlay .tooltip.left .tooltip-arrow, +.map-pane .tooltip.left .tooltip-arrow, .entity-editor-pane .tooltip.left .tooltip-arrow, .warning-section .tooltip.left .tooltip-arrow { border-left-color: #000; } -.map-overlay .tooltip.right .tooltip-arrow, +.map-pane .tooltip.right .tooltip-arrow, .entity-editor-pane .tooltip.right .tooltip-arrow, .warning-section .tooltip.right .tooltip-arrow { border-right-color: #000; } -.map-overlay .tooltip-inner, -.map-overlay .tooltip-heading, -.map-overlay .keyhint-wrap, +.map-pane .tooltip-inner, +.map-pane .tooltip-heading, +.map-pane .keyhint-wrap, .entity-editor-pane .tooltip-inner, .warning-section .tooltip-inner { background: #000; diff --git a/modules/ui/background.js b/modules/ui/background.js index b856ab76b..579108dc1 100644 --- a/modules/ui/background.js +++ b/modules/ui/background.js @@ -336,7 +336,7 @@ export function uiBackground(context) { var pane = selection .append('div') - .attr('class', 'fillL map-overlay col3 content hide'); + .attr('class', 'fillL map-pane col4 hide'); var paneTooltip = tooltip() .placement((textDirection === 'rtl') ? 'right' : 'left') @@ -350,17 +350,27 @@ export function uiBackground(context) { .call(svgIcon('#icon-layers', 'light')) .call(paneTooltip); - pane + + var heading = pane + .append('div') + .attr('class', 'pane-heading'); + + heading + .append('h2') + .text(t('background.title')); + + heading .append('button') .on('click', function() { uiBackground.hidePane(); }) .call(svgIcon('#icon-close')); - pane - .append('h2') - .text(t('background.title')); + + var content = pane + .append('div') + .attr('class', 'pane-content'); // background list - pane + content .append('div') .attr('class', 'background-background-list-container') .call(uiDisclosure(context, 'background_list', true) @@ -369,7 +379,7 @@ export function uiBackground(context) { ); // overlay list - pane + content .append('div') .attr('class', 'background-overlay-list-container') .call(uiDisclosure(context, 'overlay_list', true) @@ -378,12 +388,12 @@ export function uiBackground(context) { ); // display options - _displayOptionsContainer = pane + _displayOptionsContainer = content .append('div') .attr('class', 'background-display-options'); // offset controls - _offsetContainer = pane + _offsetContainer = content .append('div') .attr('class', 'background-offset'); diff --git a/modules/ui/help.js b/modules/ui/help.js index 63a78e694..ea5ca2696 100644 --- a/modules/ui/help.js +++ b/modules/ui/help.js @@ -369,25 +369,41 @@ export function uiHelp(context) { var pane = selection.append('div') - .attr('class', 'help-wrap map-overlay fillL col6 content hide'); + .attr('class', 'help-wrap map-pane fillL col6 hide'); + var tooltipBehavior = tooltip() .placement((textDirection === 'rtl') ? 'right' : 'left') .html(true) .title(uiTooltipHtml(t('help.title'), key)); + var button = selection.append('button') .attr('tabindex', -1) .on('click', togglePane) .call(svgIcon('#icon-help', 'light')) .call(tooltipBehavior); + var shown = false; - pane + + var heading = pane + .append('div') + .attr('class', 'pane-heading'); + + var doctitle = heading + .append('h2') + .text(t('help.title')); + + heading .append('button') .on('click', function() { uiHelp.hidePane(); }) .call(svgIcon('#icon-close')); - var toc = pane + var content = pane + .append('div') + .attr('class', 'pane-content'); + + var toc = content .append('ul') .attr('class', 'toc'); @@ -431,19 +447,15 @@ export function uiHelp(context) { .text(t('splash.walkthrough')); - var content = pane + var helpContent = content .append('div') .attr('class', 'left-content'); - var doctitle = content - .append('h2') - .text(t('help.title')); - - var body = content + var body = helpContent .append('div') .attr('class', 'body'); - var nav = content + var nav = helpContent .append('div') .attr('class', 'nav'); diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js index 6b5c268c6..578324952 100644 --- a/modules/ui/map_data.js +++ b/modules/ui/map_data.js @@ -442,7 +442,7 @@ export function uiMapData(context) { var pane = selection .append('div') - .attr('class', 'fillL map-overlay col3 content hide'); + .attr('class', 'fillL map-pane col4 hide'); var paneTooltip = tooltip() .placement((textDirection === 'rtl') ? 'right' : 'left') @@ -457,18 +457,26 @@ export function uiMapData(context) { .call(paneTooltip); - pane + var heading = pane + .append('div') + .attr('class', 'pane-heading'); + + heading + .append('h2') + .text(t('map_data.title')); + + heading .append('button') .on('click', function() { uiMapData.hidePane(); }) .call(svgIcon('#icon-close')); - pane - .append('h2') - .text(t('map_data.title')); + var content = pane + .append('div') + .attr('class', 'pane-content'); // data layers - pane + content .append('div') .attr('class', 'map-data-data-layers') .call(uiDisclosure(context, 'data_layers', true) @@ -477,7 +485,7 @@ export function uiMapData(context) { ); // area fills - pane + content .append('div') .attr('class', 'map-data-area-fills') .call(uiDisclosure(context, 'fill_area', false) @@ -486,7 +494,7 @@ export function uiMapData(context) { ); // feature filters - pane + content .append('div') .attr('class', 'map-data-feature-filters') .call(uiDisclosure(context, 'map_features', false)