mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix hidden files handling 

Hidden files (dot files) are now always rendered in the DOM to make
sure that all file operations and selection still work as expected.

Their visibility is now toggled on CSS level.
This commit is contained in:
Vincent Petry 2016-08-17 17:34:15 +02:00 committed by Marius Blüm
parent d2afda0f04
commit a1f1d2c9e8
4 changed files with 82 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/files/css/files.css
View File

@ -348,6 +348,21 @@ table td.filename .nametext {
margin-right: 50px;
}
.hide-hidden-files #fileList tr.hidden-file,
.hide-hidden-files #fileList tr.hidden-file.dragging {
display: none;
}
#fileList tr.animate-opacity {
-webkit-transition:opacity 250ms;
-moz-transition:opacity 250ms;
-o-transition:opacity 250ms;
transition:opacity 250ms;
}
#fileList tr.dragging {
opacity: 0.2;
}
table td.filename .nametext .innernametext {
text-overflow: ellipsis;
overflow: hidden;

53
apps/files/js/filelist.js
View File

@ -209,12 +209,6 @@
this._filesConfig = OCA.Files.App.getFilesConfig();
}
if (!_.isUndefined(this._filesConfig)) {
this._filesConfig.on('change:showhidden', function() {
self.setFiles(self.files);
});
}
if (options.dragOptions) {
this._dragOptions = options.dragOptions;
}
@ -236,6 +230,21 @@
this.$table = $el.find('table:first');
this.$fileList = $el.find('#fileList');
if (!_.isUndefined(this._filesConfig)) {
this._filesConfig.on('change:showhidden', function() {
var showHidden = this.get('showhidden');
self.$el.toggleClass('hide-hidden-files', !showHidden);
if (!showHidden) {
// hiding files could make the page too small, need to try rendering next page
self._onScroll();
}
});
this.$el.toggleClass('hide-hidden-files', !this._filesConfig.get('showhidden'));
}
if (_.isUndefined(options.detailsViewEnabled) || options.detailsViewEnabled) {
this._detailsView = new OCA.Files.DetailsView();
this._detailsView.$el.insertBefore(this.$el);
@ -876,10 +885,6 @@
* @return array of DOM elements of the newly added files
*/
_nextPage: function(animate) {
// Save full files list while rendering
var allFiles = this.files;
this.files = this._filterHiddenFiles(this.files);
var index = this.$fileList.children().length,
count = this.pageSize(),
hidden,
@ -927,9 +932,6 @@
}, 0);
}
// Restore full files list after rendering
this.files = allFiles;
return newTrs;
},
@ -968,8 +970,6 @@
this.$el.find('.select-all').prop('checked', false);
// Save full files list while rendering
var allFiles = this.files;
this.files = this._filterHiddenFiles(this.files);
this.isEmpty = this.files.length === 0;
this._nextPage();
@ -983,9 +983,6 @@
this.updateSelectionSummary();
$(window).scrollTop(0);
// Restore full files list after rendering
this.files = allFiles;
this.$fileList.trigger(jQuery.Event('updated'));
_.defer(function() {
self.$el.closest('#app-content').trigger(jQuery.Event('apprendered'));
@ -993,18 +990,14 @@
},
/**
* Filter hidden files of the given filesArray (dot-files)
* Returns whether the given file info must be hidden
*
* @param filesArray files to be filtered
* @returns {array}
* @param {OC.Files.FileInfo} fileInfo file info
*
* @return {boolean} true if the file is a hidden file, false otherwise
*/
_filterHiddenFiles: function(files) {
if (_.isUndefined(this._filesConfig) || this._filesConfig.get('showhidden')) {
return files;
}
return _.filter(files, function(file) {
return file.name.indexOf('.') !== 0;
});
_isHiddenFile: function(file) {
return file.name && file.name.charAt(0) === '.';
},
/**
@ -1329,6 +1322,10 @@
tr.addClass('hidden');
}
if (this._isHiddenFile(fileData)) {
tr.addClass('hidden-file');
}
// display actions
this.fileActions.display(filenameTd, !options.silent, this);

8
apps/files/js/files.js
View File

@ -391,14 +391,18 @@ var dragOptions={
if (!$selectedFiles.length) {
$selectedFiles = $(this);
}
$selectedFiles.closest('tr').fadeTo(250, 0.2).addClass('dragging');
$selectedFiles.closest('tr').addClass('animate-opacity dragging');
},
stop: function(event, ui) {
var $selectedFiles = $('td.filename input:checkbox:checked');
if (!$selectedFiles.length) {
$selectedFiles = $(this);
}
$selectedFiles.closest('tr').fadeTo(250, 1).removeClass('dragging');
var $tr = $selectedFiles.closest('tr');
$tr.removeClass('dragging');
setTimeout(function() {
$tr.removeClass('animate-opacity');
}, 300);
},
drag: function(event, ui) {
var scrollingArea = FileList.$container;

37
apps/files/tests/js/filelistSpec.js
View File

@ -24,6 +24,7 @@ describe('OCA.Files.FileList tests', function() {
var testFiles, testRoot, notificationStub, fileList, pageSizeStub;
var bcResizeStub;
var filesClient;
var filesConfig;
var redirectStub;
/**
@ -54,6 +55,10 @@ describe('OCA.Files.FileList tests', function() {
}
beforeEach(function() {
filesConfig = new OC.Backbone.Model({
showhidden: true
});
filesClient = new OC.Files.Client({
host: 'localhost',
port: 80,
@ -153,7 +158,8 @@ describe('OCA.Files.FileList tests', function() {
})];
pageSizeStub = sinon.stub(OCA.Files.FileList.prototype, 'pageSize').returns(20);
fileList = new OCA.Files.FileList($('#app-content-files'), {
filesClient: filesClient
filesClient: filesClient,
config: filesConfig
});
});
afterEach(function() {
@ -407,6 +413,35 @@ describe('OCA.Files.FileList tests', function() {
}
});
});
describe('Hidden files', function() {
it('sets the class hidden-file for hidden files', function() {
var fileData = {
type: 'dir',
name: '.testFolder'
};
var $tr = fileList.add(fileData);
expect($tr).toBeDefined();
expect($tr.hasClass('hidden-file')).toEqual(true);
});
it('does not set the class hidden-file for visible files', function() {
var fileData = {
type: 'dir',
name: 'testFolder'
};
var $tr = fileList.add(fileData);
expect($tr).toBeDefined();
expect($tr.hasClass('hidden-file')).toEqual(false);
});
it('toggles the list\'s class when toggling hidden files', function() {
expect(fileList.$el.hasClass('hide-hidden-files')).toEqual(false);
filesConfig.set('showhidden', false);
expect(fileList.$el.hasClass('hide-hidden-files')).toEqual(true);
filesConfig.set('showhidden', true);
expect(fileList.$el.hasClass('hide-hidden-files')).toEqual(false);
});
});
describe('Removing files from the list', function() {
it('Removes file from list when calling remove() and updates summary', function() {
var $summary;