From 3908da03cf748d1589715e74db7cddc607ab2f2a Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Fri, 17 Feb 2017 00:23:24 -0500 Subject: [PATCH] Fix styling of flash and footer and use absolutely positioned divs Also fix flash tests --- css/app.css | 71 ++++++++++++++++++----------------- modules/behavior/operation.js | 14 +++---- modules/ui/flash.js | 24 ++---------- modules/ui/init.js | 2 +- test/spec/ui/flash.js | 36 ++++++++++++------ 5 files changed, 73 insertions(+), 74 deletions(-) diff --git a/css/app.css b/css/app.css index 7b9f5ac00..a308ccc8d 100644 --- a/css/app.css +++ b/css/app.css @@ -2532,67 +2532,70 @@ img.tile-removing { } .source-image { - height:20px; + height: 20px; vertical-align:top; } #footer { pointer-events: all; - display: flex; - flex-flow: row nowrap; + display: block; + height: 30px; } -#flash { - display: none; +#flash-wrap { + display: flex; + flex: 0 0 100%; + flex-flow: row nowrap; + justify-content: space-between; + max-height: 30px; position: absolute; - left: 0; right: 0; - bottom: 0; - z-index: 1; - display: flex; - flex-flow: column wrap; + left: 0; } -#flash .content { - margin: 0 auto; - padding: 6px; - max-width: 50%; - border-radius: 3px; +#flash-wrap .content { display: flex; + flex: 1 0 auto; flex-flow: row nowrap; - justify-content: center; align-items: center; + padding: 2px; + height: 30px; } -#flash svg.operation-icon { - width: 36px; - height: 36px; +#flash-wrap svg.operation-icon { + flex: 0 0 auto; + width: 20px; + height: 20px; + margin: 0 8px; } -#flash div.operation-tip { - margin: 0 10px; +#flash-wrap div.operation-tip { + flex: 1 1 auto; } #footer-wrap { display: flex; + flex: 0 0 100%; flex-flow: row nowrap; justify-content: space-between; - flex: 1 1 auto; + max-height: 30px; + position: absolute; + right: 0; + left: 0; } .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; + bottom: 0px; + transition: bottom 75ms linear; + -moz-transition: bottom 75ms linear; + -webkit-transition: bottom 75ms 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; + bottom: -35px; + transition: bottom 75ms linear; + -moz-transition: bottom 75ms linear; + -webkit-transition: bottom 75ms linear; } @@ -2679,7 +2682,7 @@ img.tile-removing { text-align: right; padding: 0px 10px; color: #eee; - flex: 1 0 auto; + flex: 1 1 auto; } .api-status.offline, @@ -3768,7 +3771,7 @@ img.tile-removing { -ms-filter: "FlipH"; } -[dir='rtl'] #flash .content { +[dir='rtl'] #flash-wrap .content { display: flex; flex-direction: row-reverse; } diff --git a/modules/behavior/operation.js b/modules/behavior/operation.js index 19c5083cd..3c224656b 100644 --- a/modules/behavior/operation.js +++ b/modules/behavior/operation.js @@ -14,18 +14,18 @@ export function behaviorOperation(context) { .attr('class', 'operation-icon') .append('g') .attr('class', 'radial-menu-item radial-menu-item-' + which.id) - .attr('transform', 'translate(18,18)') + .attr('transform', 'translate(10,10)') .classed('disabled', which.disabled()); button .append('circle') - .attr('r', 15); + .attr('r', 9); button .append('use') - .attr('transform', 'translate(-10,-10)') - .attr('width', '20') - .attr('height', '20') + .attr('transform', 'translate(-7,-7)') + .attr('width', '14') + .attr('height', '14') .attr('xlink:href', '#operation-' + which.id); return selection; @@ -40,7 +40,7 @@ export function behaviorOperation(context) { var disabled = which.disabled(); if (disabled) { - uiFlash(2500, 500) + uiFlash(3000) .html('') .call(drawIcon) .append('div') @@ -48,7 +48,7 @@ export function behaviorOperation(context) { .text(which.tooltip); } else { - uiFlash(1500, 250) + uiFlash(1500) .html('') .call(drawIcon) .append('div') diff --git a/modules/ui/flash.js b/modules/ui/flash.js index 0be1eb3b4..45dcc0a09 100644 --- a/modules/ui/flash.js +++ b/modules/ui/flash.js @@ -2,12 +2,8 @@ import * as d3 from 'd3'; var timer; -export function uiFlash(showDuration, fadeDuration) { +export function uiFlash(showDuration) { showDuration = showDuration || 1500; - fadeDuration = fadeDuration || 250; - - // d3.select('#flash').selectAll('.content') - // .interrupt(); if (timer) { timer.stop(); @@ -15,10 +11,10 @@ export function uiFlash(showDuration, fadeDuration) { d3.select('#footer-wrap') .attr('class', 'footer-hide'); - d3.select('#flash') + d3.select('#flash-wrap') .attr('class', 'footer-show'); - var content = d3.select('#flash').selectAll('.content') + var content = d3.select('#flash-wrap').selectAll('.content') .data([0]); content = content.enter() @@ -30,22 +26,10 @@ export function uiFlash(showDuration, fadeDuration) { timer = null; d3.select('#footer-wrap') .attr('class', 'footer-show'); - d3.select('#flash') + d3.select('#flash-wrap') .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 bae73b3c8..2171c9b18 100644 --- a/modules/ui/init.js +++ b/modules/ui/init.js @@ -170,7 +170,7 @@ export function uiInit(context) { footer .append('div') - .attr('id', 'flash') + .attr('id', 'flash-wrap') .attr('class', 'footer-hide'); var footerWrap = footer diff --git a/test/spec/ui/flash.js b/test/spec/ui/flash.js index f797f12fc..ce5916d57 100644 --- a/test/spec/ui/flash.js +++ b/test/spec/ui/flash.js @@ -1,28 +1,40 @@ describe('iD.uiFlash', function () { - var elem; beforeEach(function() { - elem = d3.select('body') + d3.select('body') .append('div') - .attr('id', 'flash'); + .attr('id', 'flash-wrap') + .append('div') + .attr('id', 'footer-wrap'); }); afterEach(function () { - elem.remove(); + d3.select('body > div').remove(); }); - it('creates a flash', function () { - iD.uiFlash(); - expect(elem.selectAll('#flash .content').size()).to.eql(1); + it('returns a selection', function () { + var content = iD.uiFlash(200); + expect(content.size()).to.eql(1); + expect(content.classed('content')).to.be.ok; }); - it.skip('flash goes away', function (done) { - // test doesn't work on PhantomJS - iD.uiFlash(); + it('flash is shown', function () { + iD.uiFlash(200); + var flashWrap = d3.selectAll('#flash-wrap'); + var footerWrap = d3.selectAll('#footer-wrap'); + expect(flashWrap.classed('footer-show')).to.be.ok; + expect(footerWrap.classed('footer-hide')).to.be.ok; + }); + + it('flash goes away', function (done) { + iD.uiFlash(200); window.setTimeout(function() { - expect(elem.selectAll('#flash .content').size()).to.eql(0); + var flashWrap = d3.selectAll('#flash-wrap'); + var footerWrap = d3.selectAll('#footer-wrap'); + expect(flashWrap.classed('footer-hide')).to.be.ok; + expect(footerWrap.classed('footer-show')).to.be.ok; done(); - }, 1900); + }, 500); }); });