From 150b9fb7dc165a3dd8f8b594c09f78b69b5d35d3 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Thu, 16 Feb 2017 17:13:22 -0500 Subject: [PATCH] WIP: move flash to footer area, transition in/out Also took this opportunity to use flexbox for the footer layout --- css/app.css | 101 ++++++++++++++++++++++++++------------------ modules/ui/flash.js | 45 ++++++++++++++------ modules/ui/init.js | 25 +++++++---- 3 files changed, 111 insertions(+), 60 deletions(-) diff --git a/css/app.css b/css/app.css index 0472f1732..7b9f5ac00 100644 --- a/css/app.css +++ b/css/app.css @@ -564,34 +564,6 @@ button.save.has-count .count::before { min-width: 768px; } -#flash { - position: absolute; - top: 65px; - z-index: 1; - width: 100%; - display: flex; - flex-flow: column wrap; -} - -#flash .content { - margin: 0 auto; - padding: 6px; - max-width: 50%; - border-radius: 3px; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; -} - -#flash svg.operation-icon { - width: 36px; - height: 36px; -} - -#flash div.operation-tip { - margin: 0 10px; -} /* Header for modals / panes ------------------------------------------------------- */ @@ -2528,14 +2500,14 @@ img.tile-removing { bottom:0; border-radius: 0; pointer-events: none; + display: flex; + flex-direction: column; } #attrib { width: 100%; height: 20px; margin-bottom: 5px; - float: left; - clear: both; } #attrib * { pointer-events: all; } @@ -2565,19 +2537,70 @@ img.tile-removing { } #footer { - width: 100%; - float: left; - clear: both; pointer-events: all; + display: flex; + flex-flow: row nowrap; } +#flash { + display: none; + position: absolute; + left: 0; + right: 0; + bottom: 0; + z-index: 1; + display: flex; + flex-flow: column wrap; +} + +#flash .content { + margin: 0 auto; + padding: 6px; + max-width: 50%; + border-radius: 3px; + display: flex; + flex-flow: row nowrap; + justify-content: center; + align-items: center; +} + +#flash svg.operation-icon { + width: 36px; + height: 36px; +} + +#flash div.operation-tip { + margin: 0 10px; +} + +#footer-wrap { + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + flex: 1 1 auto; +} + +.footer-show { + margin-top: 0px; + margin-bottom: 0px; + transition: margin-bottom 100ms linear, margin-top 100ms linear; + -moz-transition: margin-bottom 100ms linear, margin-top 100ms linear; + -webkit-transition: margin-bottom 100ms linear, margin-top 100ms linear; +} +.footer-hide { + margin-top: 30px; + margin-bottom: -30px; + transition: margin-bottom 100ms linear, margin-top 100ms linear; + -moz-transition: margin-bottom 100ms linear, margin-top 100ms linear; + -webkit-transition: margin-bottom 100ms linear, margin-top 100ms linear; +} + + #scale-block { - display: table-cell; vertical-align: bottom; width: 250px; max-height: 30px; - float: left; - clear: left; + flex: 0 0 250px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; @@ -2586,7 +2609,7 @@ img.tile-removing { #info-block { max-height: 30px; - clear: right; + flex: 1 1 auto; } #scale { @@ -2653,12 +2676,10 @@ img.tile-removing { } .api-status { - float: right; - clear: both; text-align: right; - width: 100%; padding: 0px 10px; color: #eee; + flex: 1 0 auto; } .api-status.offline, diff --git a/modules/ui/flash.js b/modules/ui/flash.js index 4c908d206..0be1eb3b4 100644 --- a/modules/ui/flash.js +++ b/modules/ui/flash.js @@ -1,30 +1,51 @@ import * as d3 from 'd3'; +var timer; export function uiFlash(showDuration, fadeDuration) { showDuration = showDuration || 1500; fadeDuration = fadeDuration || 250; - d3.select('#flash').selectAll('.content') - .interrupt(); + // d3.select('#flash').selectAll('.content') + // .interrupt(); + + if (timer) { + timer.stop(); + } + + d3.select('#footer-wrap') + .attr('class', 'footer-hide'); + d3.select('#flash') + .attr('class', 'footer-show'); var content = d3.select('#flash').selectAll('.content') .data([0]); content = content.enter() .append('div') - .attr('class', 'content fillD') + .attr('class', 'content') .merge(content); - content - .transition() - .delay(showDuration) - .duration(fadeDuration) - .style('opacity', 0) - .style('transform', 'scaleY(.1)') - .on('interrupt end', function() { - content.remove(); - }); + timer = d3.timeout(function() { + timer = null; + d3.select('#footer-wrap') + .attr('class', 'footer-show'); + d3.select('#flash') + .attr('class', 'footer-hide'); + }, showDuration); + + + // content + // .transition() + // .delay(showDuration) + // .duration(fadeDuration) + // .style('opacity', 0) + // .style('transform', 'scaleY(.1)') + // .on('interrupt end', function() { + // content.remove(); + // d3.select('#footer-wrap') + // .attr('class', 'footer-show'); + // }); return content; } diff --git a/modules/ui/init.js b/modules/ui/init.js index db5d47678..bae73b3c8 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -71,10 +71,6 @@ export function uiInit(context) { .attr('id', 'bar') .attr('class', 'fillD'); - content - .append('div') - .attr('id', 'flash'); - content .append('div') .attr('id', 'map') @@ -120,6 +116,7 @@ export function uiInit(context) { .attr('class', 'spinner') .call(uiSpinner(context)); + var controls = bar .append('div') .attr('class', 'map-controls'); @@ -149,6 +146,7 @@ export function uiInit(context) { .attr('class', 'map-control help-control') .call(uiHelp(context)); + var about = content .append('div') .attr('id', 'about'); @@ -159,6 +157,12 @@ export function uiInit(context) { .attr('dir', 'ltr') .call(uiAttribution(context)); + about + .append('div') + .attr('class', 'api-status') + .call(uiStatus(context)); + + var footer = about .append('div') .attr('id', 'footer') @@ -166,15 +170,20 @@ export function uiInit(context) { footer .append('div') - .attr('class', 'api-status') - .call(uiStatus(context)); + .attr('id', 'flash') + .attr('class', 'footer-hide'); - footer + var footerWrap = footer + .append('div') + .attr('id', 'footer-wrap') + .attr('class', 'footer-show'); + + footerWrap .append('div') .attr('id', 'scale-block') .call(uiScale(context)); - var aboutList = footer + var aboutList = footerWrap .append('div') .attr('id', 'info-block') .append('ul')