Added spinners in share dropdown

Added spinners for the following actions:
- adding user
- removing user
- changing password
- toggling allowing upload
- setting a password
This commit is contained in:
Vincent Petry 2014-09-25 19:46:30 +02:00 committed by Lukas Reschke
parent e5a111b80e
commit 16cad5862a
2 changed files with 102 additions and 22 deletions

View File

@ -16,6 +16,20 @@
padding:16px;
}
#dropdown.shareDropDown .unshare.icon-loading-small {
margin-top: 1px;
}
#dropdown.shareDropDown .shareWithLoading,
#dropdown.shareDropDown .linkShare .icon-loading-small {
display: inline-block !important;
padding-left: 10px;
}
#dropdown.shareDropDown .icon-loading-small.hidden {
display: none !important;
}
#shareWithList {
list-style-type:none;
padding:8px;

View File

@ -304,7 +304,7 @@ OC.Share={
);
}
$.post(OC.filePath('core', 'ajax', 'share.php'),
return $.post(OC.filePath('core', 'ajax', 'share.php'),
{
action: 'share',
itemType: itemType,
@ -351,7 +351,7 @@ OC.Share={
showDropDown:function(itemType, itemSource, appendTo, link, possiblePermissions, filename) {
var data = OC.Share.loadItem(itemType, itemSource);
var dropDownEl;
var html = '<div id="dropdown" class="drop" data-item-type="'+itemType+'" data-item-source="'+itemSource+'">';
var html = '<div id="dropdown" class="drop shareDropDown" data-item-type="'+itemType+'" data-item-source="'+itemSource+'">';
if (data !== false && data.reshare !== false && data.reshare.uid_owner !== undefined) {
if (data.reshare.share_type == OC.Share.SHARE_TYPE_GROUP) {
html += '<span class="reshare">'+t('core', 'Shared with you and the group {group} by {owner}', {group: escapeHTML(data.reshare.share_with), owner: escapeHTML(data.reshare.displayname_owner)})+'</span>';
@ -381,11 +381,13 @@ OC.Share={
});
html += '<input id="shareWith" type="text" placeholder="'+t('core', 'Share with user or group …')+'" />';
html += '<span class="shareWithLoading icon-loading-small hidden"></span>';
html += '<ul id="shareWithList">';
html += '</ul>';
var linksAllowed = $('#allowShareWithLink').val() === 'yes';
if (link && linksAllowed) {
html += '<div id="link">';
html += '<div id="link" class="linkShare">';
html += '<span class="icon-loading-small hidden"></span>';
html += '<input type="checkbox" name="linkCheckbox" id="linkCheckbox" value="1" /><label for="linkCheckbox">'+t('core', 'Share link')+'</label>';
html += '<br />';
@ -398,10 +400,12 @@ OC.Share={
html += '<input type="checkbox" name="showPassword" id="showPassword" value="1" style="display:none;" /><label for="showPassword" style="display:none;">'+t('core', 'Password protect')+'</label>';
html += '<div id="linkPass">';
html += '<input id="linkPassText" type="password" placeholder="'+t('core', 'Choose a password for the public link')+'" />';
html += '<span class="icon-loading-small hidden"></span>';
html += '</div>';
if (itemType === 'folder' && (possiblePermissions & OC.PERMISSION_CREATE) && publicUploadEnabled === 'yes') {
html += '<div id="allowPublicUploadWrapper" style="display:none;">';
html += '<span class="icon-loading-small hidden"></span>';
html += '<input type="checkbox" value="1" name="allowPublicUpload" id="sharingDialogAllowPublicUpload"' + ((allowPublicUploadStatus) ? 'checked="checked"' : '') + ' />';
html += '<label for="sharingDialogAllowPublicUpload">' + t('core', 'Allow Public Upload') + '</label>';
html += '</div>';
@ -441,23 +445,27 @@ OC.Share={
});
}
$('#shareWith').autocomplete({minLength: 1, source: function(search, response) {
$.get(OC.filePath('core', 'ajax', 'share.php'), { fetch: 'getShareWith', search: search.term, itemShares: OC.Share.itemShares }, function(result) {
if (result.status == 'success' && result.data.length > 0) {
$( "#shareWith" ).autocomplete( "option", "autoFocus", true );
response(result.data);
} else {
response();
}
});
var $loading = $('#dropdown .shareWithLoading');
$loading.removeClass('hidden');
$.get(OC.filePath('core', 'ajax', 'share.php'), { fetch: 'getShareWith', search: search.term, itemShares: OC.Share.itemShares }, function(result) {
$loading.addClass('hidden');
if (result.status == 'success' && result.data.length > 0) {
$( "#shareWith" ).autocomplete( "option", "autoFocus", true );
response(result.data);
} else {
response();
}
});
},
focus: function(event, focused) {
event.preventDefault();
},
select: function(event, selected) {
event.stopPropagation();
var itemType = $('#dropdown').data('item-type');
var itemSource = $('#dropdown').data('item-source');
var itemSourceName = $('#dropdown').data('item-source-name');
var $dropDown = $('#dropdown');
var itemType = $dropDown.data('item-type');
var itemSource = $dropDown.data('item-source');
var itemSourceName = $dropDown.data('item-source-name');
var expirationDate = '';
if ( $('#expirationCheckbox').is(':checked') === true ) {
expirationDate = $( "#expirationDate" ).val();
@ -481,7 +489,16 @@ OC.Share={
permissions = permissions | OC.PERMISSION_SHARE;
}
var $input = $(this);
var $loading = $dropDown.find('.shareWithLoading');
$loading.removeClass('hidden');
$input.val(t('core', 'Adding user...'));
$input.prop('disabled', true);
OC.Share.share(itemType, itemSource, shareType, shareWith, permissions, itemSourceName, expirationDate, function() {
$input.prop('disabled', false);
$loading.addClass('hidden');
OC.Share.addShareWith(shareType, shareWith, selected.item.label, permissions, possiblePermissions);
$('#shareWith').val('');
$('#dropdown').trigger(new $.Event('sharesChanged', {shares: OC.Share.currentShares}));
@ -810,6 +827,18 @@ $(document).ready(function() {
var itemSource = $('#dropdown').data('item-source');
var shareType = $li.data('share-type');
var shareWith = $li.attr('data-share-with');
var $button = $(this);
if (!$button.is('a')) {
$button = $button.closest('a');
}
if ($button.hasClass('icon-loading-small')) {
// deletion in progress
return false;
}
$button.empty().addClass('icon-loading-small');
OC.Share.unshare(itemType, itemSource, shareType, shareWith, function() {
$li.remove();
var index = OC.Share.itemShares[shareType].indexOf(shareWith);
@ -822,6 +851,7 @@ $(document).ready(function() {
$('#expiration').hide('blind');
}
});
return false;
});
@ -863,9 +893,17 @@ $(document).ready(function() {
});
$(document).on('change', '#dropdown #linkCheckbox', function() {
var itemType = $('#dropdown').data('item-type');
var itemSource = $('#dropdown').data('item-source');
var itemSourceName = $('#dropdown').data('item-source-name');
var $dropDown = $('#dropdown');
var itemType = $dropDown.data('item-type');
var itemSource = $dropDown.data('item-source');
var itemSourceName = $dropDown.data('item-source-name');
var $loading = $dropDown.find('#link .icon-loading-small');
var $button = $(this);
if (!$loading.hasClass('hidden')) {
// already in progress
return false;
}
if (this.checked) {
var expireDateString = '';
@ -880,7 +918,11 @@ $(document).ready(function() {
}
// Create a link
if (oc_appconfig.core.enforcePasswordForPublicLink === false) {
$loading.removeClass('hidden');
$button.addClass('hidden');
OC.Share.share(itemType, itemSource, OC.Share.SHARE_TYPE_LINK, '', OC.PERMISSION_READ, itemSourceName, expireDateString, function(data) {
$loading.addClass('hidden');
$button.removeClass('hidden');
OC.Share.showLink(data.token, null, itemSource);
$('#dropdown').trigger(new $.Event('sharesChanged', {shares: OC.Share.currentShares}));
OC.Share.updateIcon(itemType, itemSource);
@ -897,7 +939,11 @@ $(document).ready(function() {
OC.Share.hideLink();
$('#expiration').hide('blind');
if ($('#linkText').val() !== '') {
$loading.removeClass('hidden');
$button.addClass('hidden');
OC.Share.unshare(itemType, itemSource, OC.Share.SHARE_TYPE_LINK, '', function() {
$loading.addClass('hidden');
$button.removeClass('hidden');
OC.Share.itemShares[OC.Share.SHARE_TYPE_LINK] = false;
$('#dropdown').trigger(new $.Event('sharesChanged', {shares: OC.Share.currentShares}));
OC.Share.updateIcon(itemType, itemSource);
@ -918,15 +964,23 @@ $(document).ready(function() {
$(document).on('click', '#sharingDialogAllowPublicUpload', function() {
// Gather data
var $dropDown = $('#dropdown');
var allowPublicUpload = $(this).is(':checked');
var itemType = $('#dropdown').data('item-type');
var itemSource = $('#dropdown').data('item-source');
var itemSourceName = $('#dropdown').data('item-source-name');
var itemType = $dropDown.data('item-type');
var itemSource = $dropDown.data('item-source');
var itemSourceName = $dropDown.data('item-source-name');
var expirationDate = '';
if ($('#expirationCheckbox').is(':checked') === true) {
expirationDate = $( "#expirationDate" ).val();
}
var permissions = 0;
var $button = $(this);
var $loading = $dropDown.find('#allowPublicUploadWrapper .icon-loading-small');
if (!$loading.hasClass('hidden')) {
// already in progress
return false;
}
// Calculate permissions
if (allowPublicUpload) {
@ -936,7 +990,13 @@ $(document).ready(function() {
}
// Update the share information
$button.addClass('hidden');
$button.prop('disabled', true);
$loading.removeClass('hidden');
OC.Share.share(itemType, itemSource, OC.Share.SHARE_TYPE_LINK, '', permissions, itemSourceName, expirationDate, function(data) {
$loading.addClass('hidden');
$button.removeClass('hidden');
$button.prop('disabled', false);
});
});
@ -948,6 +1008,7 @@ $(document).ready(function() {
var itemSourceName = $('#dropdown').data('item-source-name');
var allowPublicUpload = $('#sharingDialogAllowPublicUpload').is(':checked');
var permissions = 0;
var $loading = $('#showPassword .icon-loading-small');
// Calculate permissions
if (allowPublicUpload) {
@ -956,8 +1017,10 @@ $(document).ready(function() {
permissions = OC.PERMISSION_READ;
}
OC.Share.share(itemType, itemSource, OC.Share.SHARE_TYPE_LINK, '', permissions, itemSourceName);
$loading.removeClass('hidden');
OC.Share.share(itemType, itemSource, OC.Share.SHARE_TYPE_LINK, '', permissions, itemSourceName).then(function() {
$loading.addClass('hidden');
});
} else {
$('#linkPassText').focus();
}
@ -973,6 +1036,7 @@ $(document).ready(function() {
var itemSource = dropDown.data('item-source');
var itemSourceName = $('#dropdown').data('item-source-name');
var permissions = 0;
var $loading = dropDown.find('#linkPass .icon-loading-small');
// Calculate permissions
if (allowPublicUpload) {
@ -981,7 +1045,9 @@ $(document).ready(function() {
permissions = OC.PERMISSION_READ;
}
$loading.removeClass('hidden');
OC.Share.share(itemType, itemSource, OC.Share.SHARE_TYPE_LINK, $('#linkPassText').val(), permissions, itemSourceName, function(data) {
$loading.addClass('hidden');
linkPassText.val('');
linkPassText.attr('placeholder', t('core', 'Password protected'));