diff options
author | Vincent Petry <pvince81@owncloud.com> | 2014-09-25 19:46:30 +0200 |
---|---|---|
committer | Lukas Reschke <lukas@owncloud.com> | 2014-09-26 13:46:22 +0200 |
commit | 16cad5862abc83bd8c8071c25dfd78b8768b8138 (patch) | |
tree | ee58b51e38edee8b8d08c3e45b2efbd0291beabe /core | |
parent | e5a111b80e20b188efe782c8245d2379596f893c (diff) | |
download | nextcloud-server-16cad5862abc83bd8c8071c25dfd78b8768b8138.tar.gz nextcloud-server-16cad5862abc83bd8c8071c25dfd78b8768b8138.zip |
Added spinners in share dropdown
Added spinners for the following actions:
- adding user
- removing user
- changing password
- toggling allowing upload
- setting a password
Diffstat (limited to 'core')
-rw-r--r-- | core/css/share.css | 14 | ||||
-rw-r--r-- | core/js/share.js | 110 |
2 files changed, 102 insertions, 22 deletions
diff --git a/core/css/share.css b/core/css/share.css index aeabbbc5912..de909219b76 100644 --- a/core/css/share.css +++ b/core/css/share.css @@ -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; diff --git a/core/js/share.js b/core/js/share.js index 67ddd9c4870..4c4542daf84 100644 --- a/core/js/share.js +++ b/core/js/share.js @@ -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')); |