From 4d261d9e15f454d3b768282255c3d004db4ea132 Mon Sep 17 00:00:00 2001
From: Vincent Petry <pvince81@owncloud.com>
Date: Thu, 25 Sep 2014 19:46:30 +0200
Subject: [PATCH] Added spinners in share dropdown

Added spinners for the following actions:
- adding user
- removing user
- changing password
- toggling allowing upload
- setting a password
---
 core/css/share.css |  14 ++++++
 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 f1652370d35..363c1c341a2 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}));
@@ -807,6 +824,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);
@@ -819,6 +848,7 @@ $(document).ready(function() {
 				$('#expiration').hide('blind');
 			}
 		});
+
 		return false;
 	});
 
@@ -860,9 +890,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 = '';
@@ -877,7 +915,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);
@@ -894,7 +936,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);
@@ -915,15 +961,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) {
@@ -933,7 +987,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);
 		});
 	});
 
@@ -945,6 +1005,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) {
@@ -953,8 +1014,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();
 		}
@@ -970,6 +1033,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) {
@@ -978,7 +1042,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'));
 
-- 
2.39.5