Highlight every uploaded files and scroll down to the last one

This commit is contained in:
pdessauw 2014-06-19 14:11:57 -04:00
parent 373d1c5e9f
commit 0d078e48ce
3 changed files with 82 additions and 0 deletions

View File

@ -137,3 +137,27 @@
.oc-dialog .oc-dialog-buttonrow .cancel { .oc-dialog .oc-dialog-buttonrow .cancel {
float:left; float:left;
} }
.highlightUploaded {
-webkit-animation: highlightAnimation 2s 1;
-moz-animation: highlightAnimation 2s 1;
-o-animation: highlightAnimation 2s 1;
animation: highlightAnimation 2s 1;
}
@-webkit-keyframes highlightAnimation {
0% { background-color: rgba(255, 255, 140, 1); }
100% { background-color: rgba(0, 0, 0, 0); }
}
@-moz-keyframes highlightAnimation {
0% { background-color: rgba(255, 255, 140, 1); }
100% { background-color: rgba(0, 0, 0, 0); }
}
@-o-keyframes highlightAnimation {
0% { background-color: rgba(255, 255, 140, 1); }
100% { background-color: rgba(0, 0, 0, 0); }
}
@keyframes highlightAnimation {
0% { background-color: rgba(255, 255, 140, 1); }
100% { background-color: rgba(0, 0, 0, 0); }
}

View File

@ -427,6 +427,14 @@ OC.Upload = {
data.textStatus = 'servererror'; data.textStatus = 'servererror';
data.errorThrown = result[0].data.message; // error message has been translated on server data.errorThrown = result[0].data.message; // error message has been translated on server
fu._trigger('fail', e, data); fu._trigger('fail', e, data);
} else { // Successful upload
// Checking that the uploaded file is the last one and contained in the current directory
if (data.files[0] === data.originalFiles[data.originalFiles.length - 1] &&
result[0].directory === FileList.getCurrentDirectory()) {
// Scroll to the last uploaded file and highlight all of them
var fileList = _.pluck(data.originalFiles, 'name');
FileList.highlightFiles(fileList);
}
} }
}, },
/** /**

View File

@ -1856,6 +1856,56 @@
self.updateStorageStatistics(); self.updateStorageStatistics();
}); });
},
/**
* Scroll to the last file of the given list
* Highlight the list of files
* @param files array of filenames
*/
highlightFiles: function(files) {
// Detection of the uploaded element
var filename = files[files.length - 1];
var $fileRow = this.findFileEl(filename);
while(!$fileRow.exists() && this._nextPage(false) !== false) { // Checking element existence
$fileRow = this.findFileEl(filename);
}
if (!$fileRow.exists()) { // Element not present in the file list
return;
}
var currentOffset = this.$container.scrollTop();
var additionalOffset = this.$el.find("#controls").height()+this.$el.find("#controls").offset().top;
// Animation
var _this = this;
this.$container.animate({
// Scrolling to the top of the new element
scrollTop: currentOffset + $fileRow.offset().top - $fileRow.height() * 2 - additionalOffset
}, {
duration: 500,
complete: function() {
// Highlighting function
var highlightRow = function($fileRow) {
$fileRow.addClass("highlightUploaded");
setTimeout(function() {
$fileRow.removeClass("highlightUploaded");
}, 2500);
};
// Loop over uploaded files
for(var i=0; i<files.length; i++) {
var $fileRow = _this.findFileEl(files[i]);
if($fileRow.length !== 0) { // Checking element existence
highlightRow($fileRow);
}
}
}
});
} }
}; };