Prettier transition for notice, fix notice style. Fixes #438

This commit is contained in:
Tom MacWright
2013-01-23 15:53:46 -05:00
parent 671e138fcd
commit f605ff85ea
3 changed files with 41 additions and 23 deletions

View File

@@ -981,18 +981,19 @@ div.typeahead a:first-child {
------------------------------------------------------- */
.notice {
position:absolute;
top:11px;
left:11px;
width:278px;
float:left;
width:33.333%;
padding-right: 10px;
}
.notice .notice-text {
height: 40px;
text-align: center;
height:38px;
padding:10px 20px;
background:#fff;
color:#000;
font-weight: normal;
line-height: 21px;
border-radius:5px;
border-radius: 5px;
line-height: 40px;
background: #fff;
color: #000;
opacity: 0.9;
}

View File

@@ -50,9 +50,7 @@ window.iD = function(container) {
}
}
var notice = iD.ui.notice(limiter
.append('div')
.attr('class', 'notice'));
var notice = iD.ui.notice(limiter).message(null);
map.on('move.disable-buttons', disableTooHigh)
.on('move.contributors', _.debounce(function() {

View File

@@ -2,21 +2,40 @@ iD.ui.notice = function(selection) {
var message = '',
notice = {};
var div = selection.append('div')
.attr('class', 'notice')
.style('display', 'none');
var txt = div.append('div')
.attr('class', 'notice-text');
function replace(a, b) {
a.style('opacity', 1)
.transition()
.each('end', function() {
a.style('display', 'none');
b.style('display', 'inline-block')
.style('opacity', 0)
.transition()
.style('opacity', 1);
})
.style('opacity', 0);
}
notice.message = function(_) {
selection.attr('class', 'notice inner');
div.attr('class', 'notice inner');
if (!arguments.length) return _;
if (!message && _) {
selection
.text(_)
.transition()
.style('display', '');
txt.text(_);
replace(selection.select('.button-wrap'), div);
} else if (_ && message !== _) {
selection.text(_);
txt.text(_);
selection.select('.button-wrap').style('display', 'none');
} else if (!_) {
selection
.text('')
.transition()
.style('display', 'none');
txt.text('');
if (message) {
replace(div, selection.select('.button-wrap'));
}
}
message = _;
return notice;