Fix styling of flash and footer and use absolutely positioned divs

Also fix flash tests

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;
 }

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')

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;
 }

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

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);
     });
 
 });