diff --git a/apps/files/css/upload.css b/apps/files/css/upload.css index bdc258b5064102aca51164b7b5726033102cbbe4..98754b910ded8828c588b09876f562ddf0ad53ce 100644 --- a/apps/files/css/upload.css +++ b/apps/files/css/upload.css @@ -137,3 +137,27 @@ .oc-dialog .oc-dialog-buttonrow .cancel { 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); } +} diff --git a/apps/files/js/file-upload.js b/apps/files/js/file-upload.js index ff999bae4ff7edf1e5f53a0d2d07e0862fc873af..310799b9513fe20e1adf721261aec164341d8564 100644 --- a/apps/files/js/file-upload.js +++ b/apps/files/js/file-upload.js @@ -427,6 +427,14 @@ OC.Upload = { data.textStatus = 'servererror'; data.errorThrown = result[0].data.message; // error message has been translated on server 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); + } } }, /** diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index fd11a80248df7823a8a77c04d721aa41065ee9dc..037e04db21c42f7f2d9d2abb3b7e29c682d4ca19 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -1856,6 +1856,56 @@ 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); + } + } + + } + }); } };