mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-26 23:43:46 +00:00
Prettier transition for notice, fix notice style. Fixes #438
This commit is contained in:
21
css/app.css
21
css/app.css
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user