From 542f3c523ec329defc71bccad9e2e983a4e1a2c4 Mon Sep 17 00:00:00 2001 From: vershwal Date: Sun, 5 Aug 2018 17:46:48 +0530 Subject: [PATCH 1/2] Custom background --- css/80_app.css | 21 +++++++++++ modules/ui/background.js | 10 +++-- modules/ui/custom.js | 81 ++++++++++++++++++++++++++++++++++++++++ modules/ui/index.js | 1 + 4 files changed, 110 insertions(+), 3 deletions(-) create mode 100644 modules/ui/custom.js diff --git a/css/80_app.css b/css/80_app.css index 6558bb99c..aa788d190 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -4602,3 +4602,24 @@ li.hide + li.version .badge .tooltip .tooltip-arrow { width: 100px; color: #7092ff; } + +.button-ok { + background-color: #6f92ff; /* Green */ + border: none; + color: white; + padding: 15px 15px; + text-align: center; + font-size: 16px; + +} +.button-ok:focus { + background-color: #c1d0ff; +} +.button-cancel { + background-color: #cccccc; /* Green */ + border: none; + color: white; + padding: 15px 15px; + text-align: center; + font-size: 16px; +} diff --git a/modules/ui/background.js b/modules/ui/background.js index 4dac81036..e51768097 100644 --- a/modules/ui/background.js +++ b/modules/ui/background.js @@ -17,10 +17,12 @@ import { svgIcon } from '../svg'; import { uiBackgroundDisplayOptions } from './background_display_options'; import { uiBackgroundOffset } from './background_offset'; import { uiCmd } from './cmd'; +import { uiCustom } from './custom'; import { uiDisclosure } from './disclosure'; import { uiHelp } from './help'; import { uiMapData } from './map_data'; import { uiMapInMap } from './map_in_map'; +import { uiModal } from './modal'; import { uiTooltipHtml } from './tooltipHtml'; import { utilCallWhenIdle } from '../util'; import { tooltip } from '../util/tooltip'; @@ -102,8 +104,8 @@ export function uiBackground(context) { function editCustom() { d3_event.preventDefault(); - var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png'; - var template = window.prompt( + //var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png'; + /*var template = window.prompt( t('background.custom_prompt', { example: example }), _customSource.template() || example ); @@ -114,7 +116,9 @@ export function uiBackground(context) { chooseBackground(_customSource); } else { _backgroundList.call(updateLayerSelections); - } + }*/ + context.container() + .call(uiCustom(context)); } diff --git a/modules/ui/custom.js b/modules/ui/custom.js new file mode 100644 index 000000000..5ccaa6c62 --- /dev/null +++ b/modules/ui/custom.js @@ -0,0 +1,81 @@ +import { t } from '../util/locale'; +import { uiIntro } from './intro'; +import { uiModal } from './modal'; + + +export function uiCustom(context) { + + return function(selection) { + + /*if (context.storage('sawCustom')) + return; + + context.storage('sawCustom', true);*/ + + var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png'; + var modalSelection = uiModal(selection); + + modalSelection.select('.modal') + .attr('class', 'modal-splash modal col6'); + + var introModal = modalSelection.select('.content') + .append('div') + .attr('class', 'fillL'); + + introModal + .append('div') + .attr('class','modal-section cf') + .append('h3').text(t('background.custom_heading')); + + introModal + .append('div') + .attr('class','modal-section') + .append('p').text(t('background.custom_prompt')) + /*.append('p').text(t('background.custom_token1')) + .append('p').text(t('background.custom_token2')) + .append('p').text(t('background.custom_token3')) + .append('p').text(t('background.custom_token4')) + .append('p').text(t('background.custom_example', { example: example }))*/ + .append('textarea'); + + + /*var textAreaWrap = introModal + .append('div') + .attr('class', 'modal-section'); + + var urlArea = textAreaWrap + .append('textarea');*/ + + var buttonWrap = introModal + .append('div') + .attr('class', 'modal-section'); + + + var startEditing = buttonWrap + .append('button') + .attr('class', 'button-cancel') + .on('click', modalSelection.close); + + startEditing + .append('div') + .text('Cancel'); + + var walkthrough = buttonWrap + .append('button') + .attr('class', 'button-ok') + .on('click', function() { + context.container().call(uiIntro(context)); + modalSelection.close(); + }); + + walkthrough + .append('div') + .text('OK'); + + + modalSelection.select('button.close') + .attr('class','hide'); + + + }; +} diff --git a/modules/ui/index.js b/modules/ui/index.js index 35d9a8517..d82ddeca1 100644 --- a/modules/ui/index.js +++ b/modules/ui/index.js @@ -11,6 +11,7 @@ export { uiCommitChanges } from './commit_changes'; export { uiCommitWarnings } from './commit_warnings'; export { uiConfirm } from './confirm'; export { uiConflicts } from './conflicts'; +export { uiCustom } from './custom'; export { uiContributors } from './contributors'; export { uiCurtain } from './curtain'; export { uiDisclosure } from './disclosure'; From 2d058c770cd9d2efcb65c6f13c7955b09ff3ba0f Mon Sep 17 00:00:00 2001 From: vershwal Date: Mon, 6 Aug 2018 02:02:30 +0530 Subject: [PATCH 2/2] Improved UI for custom background. --- modules/ui/background.js | 19 +++++++++---------- modules/ui/custom.js | 25 ++++++++----------------- 2 files changed, 17 insertions(+), 27 deletions(-) diff --git a/modules/ui/background.js b/modules/ui/background.js index e51768097..00e2a9b01 100644 --- a/modules/ui/background.js +++ b/modules/ui/background.js @@ -90,6 +90,7 @@ export function uiBackground(context) { function chooseBackground(d) { if (d.id === 'custom' && !d.template()) { return editCustom(); + } d3_event.preventDefault(); @@ -101,22 +102,19 @@ export function uiBackground(context) { document.activeElement.blur(); } - - function editCustom() { - d3_event.preventDefault(); - //var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png'; - /*var template = window.prompt( - t('background.custom_prompt', { example: example }), - _customSource.template() || example - ); - + function edit(a, template) { if (template) { context.storage('background-custom-template', template); _customSource.template(template); chooseBackground(_customSource); } else { _backgroundList.call(updateLayerSelections); - }*/ + } + } + + function editCustom() { + d3_event.preventDefault(); + context.container() .call(uiCustom(context)); } @@ -423,6 +421,7 @@ export function uiBackground(context) { uiBackground.hidePane = hidePane; uiBackground.togglePane = togglePane; uiBackground.setVisible = setVisible; + uiBackground.edit = edit; } return background; diff --git a/modules/ui/custom.js b/modules/ui/custom.js index 5ccaa6c62..e85e5b92f 100644 --- a/modules/ui/custom.js +++ b/modules/ui/custom.js @@ -1,5 +1,5 @@ import { t } from '../util/locale'; -import { uiIntro } from './intro'; +import { uiBackground } from './background'; import { uiModal } from './modal'; @@ -7,11 +7,6 @@ export function uiCustom(context) { return function(selection) { - /*if (context.storage('sawCustom')) - return; - - context.storage('sawCustom', true);*/ - var example = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png'; var modalSelection = uiModal(selection); @@ -30,12 +25,7 @@ export function uiCustom(context) { introModal .append('div') .attr('class','modal-section') - .append('p').text(t('background.custom_prompt')) - /*.append('p').text(t('background.custom_token1')) - .append('p').text(t('background.custom_token2')) - .append('p').text(t('background.custom_token3')) - .append('p').text(t('background.custom_token4')) - .append('p').text(t('background.custom_example', { example: example }))*/ + .append('p').text(t('background.custom_prompt', { example: example })) .append('textarea'); @@ -51,24 +41,25 @@ export function uiCustom(context) { .attr('class', 'modal-section'); - var startEditing = buttonWrap + var cancelButton = buttonWrap .append('button') .attr('class', 'button-cancel') .on('click', modalSelection.close); - startEditing + cancelButton .append('div') .text('Cancel'); - var walkthrough = buttonWrap + var okButton = buttonWrap .append('button') .attr('class', 'button-ok') .on('click', function() { - context.container().call(uiIntro(context)); + var template = 'https://{switch:a,b,c}.tile.openstreetmap.org/{zoom}/{x}/{y}.png'; + context.container().call(uiBackground.edit, template); modalSelection.close(); }); - walkthrough + okButton .append('div') .text('OK');