CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-15 21:48:20 +02:00
Code Issues Packages Projects Releases Wiki Activity

Use d3.interpolateRgb to make save button warning colors

Browse Source 
(closes #2749)
This commit is contained in:
Bryan Housel
2016-05-18 11:24:33 -04:00
parent 6d64fce9f3
commit 636ef82bc4
2 changed files with 25 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/app.css
+7 -3
View File
@@ -461,7 +461,9 @@ button.save.has-count .count {
display: block;
position: absolute;
top: 5px;
background: rgba(255, 255, 255, .5);
background: #fff;
border-color: #fff;
opacity: 0.5;
color: #333;
padding: 10px;
height: 30px;
@@ -482,7 +484,9 @@ button.save.has-count .count::before {
bottom: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 6px solid rgba(255,255,255,.9);
border-right-width: 6px;
border-right-style: solid;
border-right-color: inherit;
}
/* Icons */
@@ -3228,4 +3232,4 @@ div.full-screen > button:hover {
width: 100px;
background: rgba(0, 0, 0, 0) url(img/iD-sprite.svg) no-repeat -300px -460px;
margin: auto;
}
}
js/id/ui/save.js
+18 -36
View File
@@ -1,11 +1,7 @@
iD.ui.Save = function(context) {
var history = context.history(),
key = iD.ui.cmd('⌘S'),
prevNumchange = 0 ,
color = 255 ,
saveBtnBackground = '';
key = iD.ui.cmd('⌘S');
function saving() {
return context.mode().id === 'save';
@@ -19,32 +15,16 @@ iD.ui.Save = function(context) {
}
function getBackground(numChanges) {
var step = parseInt(255 / 50);
var background = '';
if(numChanges < 50) {
prevNumchange = numChanges;
return 'rgba(255,255,255)';
}
else if(numChanges === 50) {
prevNumchange = numChanges;
return 'rgb(255 , 255 , 136)';
var step;
if (numChanges === 0) {
return null;
} else if (numChanges <= 50) {
step = numChanges / 50;
return d3.interpolateRgb('#fff', '#ff8')(step); // white -> yellow
} else {
step = Math.min((numChanges - 50) / 50, 1.0);
return d3.interpolateRgb('#ff8', '#f88')(step); // yellow -> red
}
else if(numChanges > 50 && numChanges < 100) {
if(prevNumchange < numChanges) {
color = color - step;
background = 'rgb(255, ' + color + ' , 0)';
}
else if(prevNumchange > numChanges) {
color = color + step;
background = 'rgb(255 , '+ color + ' , 0)';
}
prevNumchange = numChanges;
return background;
}
else {
prevNumchange = numChanges;
return 'rgb(255 , 0 , 0 )';
}
}
return function(selection) {
@@ -83,16 +63,18 @@ iD.ui.Save = function(context) {
tooltip.title(iD.ui.tooltipHtml(t(numChanges > 0 ?
'save.help' : 'save.no_changes'), key));
saveBtnBackground = getBackground(numChanges);
var background = getBackground(numChanges);
button
.classed('disabled', numChanges === 0)
.classed('has-count', numChanges > 0)
.style('background' , saveBtnBackground);
.style('background', background);
button.select('span.count')
.text(numChanges)
.style('background' , saveBtnBackground)
.style('opacity' , '0.5' );
.style('background', background)
.style('border-color', background);
});
context.on('enter.save', function() {