Merge pull request #22846 from owncloud/fileactions-downloadspinnerfix

Fix download spinner to work with CSS styles
This commit is contained in:
Thomas Müller 2016-03-04 11:50:49 +01:00
commit 533896bd66
3 changed files with 42 additions and 10 deletions

View file

@ -793,6 +793,19 @@ html.ie8 #controls .button.new {
background-size: 16px 16px;
}
#filestable .filename .action .icon.hidden,
#filestable .selectedActions a .icon.hidden,
#controls .actions .button .icon.hidden {
display: none;
}
#filestable .filename .action .icon.loading,
#filestable .selectedActions a .icon.loading,
#controls .actions .button .icon.loading {
width: 15px;
height: 15px;
}
.app-files .actions .button.new .icon {
margin-bottom: 2px;
}

View file

@ -659,19 +659,18 @@
* Replaces the download icon with a loading spinner and vice versa
* - also adds the class disabled to the passed in element
*
* @param downloadButtonElement download fileaction
* @param {jQuery} $downloadButtonElement download fileaction
* @param {boolean} showIt whether to show the spinner(true) or to hide it(false)
*/
OCA.Files.FileActions.updateFileActionSpinner = function(downloadButtonElement, showIt) {
var icon = downloadButtonElement.find('img'),
sourceImage = icon.attr('src');
if(showIt) {
downloadButtonElement.addClass('disabled');
icon.attr('src', sourceImage.replace('actions/download.svg', 'loading-small.gif'));
OCA.Files.FileActions.updateFileActionSpinner = function($downloadButtonElement, showIt) {
var $icon = $downloadButtonElement.find('.icon');
if (showIt) {
var $loadingIcon = $('<span class="icon loading"></span>');
$icon.after($loadingIcon);
$icon.addClass('hidden');
} else {
downloadButtonElement.removeClass('disabled');
icon.attr('src', sourceImage.replace('loading-small.gif', 'actions/download.svg'));
$downloadButtonElement.find('.loading').remove();
$downloadButtonElement.find('.icon').removeClass('hidden');
}
};

View file

@ -656,4 +656,24 @@ describe('OCA.Files.FileActions tests', function() {
});
});
});
describe('download spinner', function() {
var FileActions = OCA.Files.FileActions;
var $el;
beforeEach(function() {
$el = $('<a href="#"><span class="icon icon-download"></span><span>Download</span></a>');
});
it('replaces download icon with spinner', function() {
FileActions.updateFileActionSpinner($el, true);
expect($el.find('.icon.loading').length).toEqual(1);
expect($el.find('.icon.icon-download').hasClass('hidden')).toEqual(true);
});
it('replaces spinner back with download icon with spinner', function() {
FileActions.updateFileActionSpinner($el, true);
FileActions.updateFileActionSpinner($el, false);
expect($el.find('.icon.loading').length).toEqual(0);
expect($el.find('.icon.icon-download').hasClass('hidden')).toEqual(false);
});
});
});