mirror of
https://github.com/FoggedLens/iD.git
synced 2026-05-15 13:38:26 +02:00
WIP: move flash to footer area, transition in/out
Also took this opportunity to use flexbox for the footer layout
This commit is contained in:
Bryan Housel
+61
-40
@@ -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,
|
||||
|
||||
+33
-12
@@ -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;
|
||||
}
|
||||
|
||||
+17
-8
@@ -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')
|
||||
|
||||
Reference in New Issue
Block a user