diff --git a/css/app.css b/css/app.css index f13e2c1b4..d329116b3 100644 --- a/css/app.css +++ b/css/app.css @@ -564,6 +564,17 @@ button.save.has-count .count::before { min-width: 768px; } +#flash { + position: absolute; + left: 300px; + top: 65px; + z-index: 1; +} + +#flash .content { + padding: 10px; +} + /* Header for modals / panes ------------------------------------------------------- */ diff --git a/modules/behavior/operation.js b/modules/behavior/operation.js index 0e2741dd8..57c0e8d46 100644 --- a/modules/behavior/operation.js +++ b/modules/behavior/operation.js @@ -1,5 +1,6 @@ import * as d3 from 'd3'; import { d3keybinding } from '../lib/d3.keybinding.js'; +import { uiFlash } from '../ui/index'; /* Creates a keybinding behavior for an operation */ @@ -15,6 +16,7 @@ export function behaviorOperation(context) { if (which.available() && !which.disabled() && !context.inIntro()) { which(); } + uiFlash().text('you did ' + which.title); }); d3.select(document).call(keybinding); } diff --git a/modules/renderer/map.js b/modules/renderer/map.js index 5ee4fad16..d9c93bd27 100644 --- a/modules/renderer/map.js +++ b/modules/renderer/map.js @@ -285,9 +285,7 @@ export function rendererMap(context) { if (ktoz(eventTransform.k * 2 * Math.PI) < minzoom) { surface.interrupt(); - uiFlash(context.container()) - .select('.content') - .text(t('cannot_zoom')); + uiFlash().text(t('cannot_zoom')); setZoom(context.minEditableZoom(), true); queueRedraw(); dispatch.call('move', this, map); @@ -569,9 +567,7 @@ export function rendererMap(context) { if (z2 < minzoom) { surface.interrupt(); - uiFlash(context.container()) - .select('.content') - .text(t('cannot_zoom')); + uiFlash().text(t('cannot_zoom')); z2 = context.minEditableZoom(); } diff --git a/modules/ui/flash.js b/modules/ui/flash.js index 6abcf4a98..37ae1c66b 100644 --- a/modules/ui/flash.js +++ b/modules/ui/flash.js @@ -1,26 +1,36 @@ +import * as d3 from 'd3'; import { uiModal } from './modal'; +var timeout; -export function uiFlash(selection) { - var modalSelection = uiModal(selection); - modalSelection.select('.modal') - .classed('modal-flash', true); +export function uiFlash() { + var content = d3.select('#flash').selectAll('.content') + .data([0]); - modalSelection.select('.content') - .classed('modal-section', true) + content = content.enter() .append('div') - .attr('class', 'description'); + .attr('class', 'content') + .merge(content); - modalSelection.on('click.flash', function() { - modalSelection.remove(); - }); + if (timeout) { + window.clearTimeout(timeout); + } + + timeout = window.setTimeout(function() { + content + .transition() + .duration(250) + .style('opacity', 0) + .style('transform', 'scaleY(.25)') + .on('end', function() { + content.remove(); + timeout = null; + }); - setTimeout(function() { - modalSelection.remove(); return true; }, 1500); - return modalSelection; + return content; } diff --git a/modules/ui/init.js b/modules/ui/init.js index d9114614a..0fa1b6fcb 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -71,6 +71,11 @@ export function uiInit(context) { .attr('id', 'bar') .attr('class', 'fillD'); + content + .append('div') + .attr('id', 'flash') + .attr('class', 'fillD'); + content .append('div') .attr('id', 'map')