Replace information icon with confirmation button in share input

The confirmation button right now is just an icon; its behaviour will be
added in the following commits.

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

3 files changed, 19 insertions, 62 deletions

diff --git a/apps/files_sharing/css/sharetabview.scss b/apps/files_sharing/css/sharetabview.scss
index f3bbd952c2d..b4b64daff2b 100644
--- a/apps/files_sharing/css/sharetabview.scss
+++ b/apps/files_sharing/css/sharetabview.scss
@@ -13,15 +13,23 @@
 	top: 0px;
 }
 
-.shareTabView .shareWithRemoteInfo,
+.shareTabView .shareWithConfirm,
 .shareTabView .clipboardButton,
 .shareTabView .linkPass .icon-loading-small {
 	position: absolute;
 	right: -7px;
-	top: -4px;
+	top: -2px;
 	padding: 14px;
 }
 
+.shareTabView .shareWithConfirm {
+	opacity: .5;
+}
+
+.shareTabView .shareWithField:focus ~ .shareWithConfirm {
+	opacity: 1;
+}
+
 .shareTabView .linkMore {
 	position: absolute;
 	right: -7px;
diff --git a/core/js/sharedialogview.js b/core/js/sharedialogview.js
index d2c63490141..f8f3efce2c5 100644
--- a/core/js/sharedialogview.js
+++ b/core/js/sharedialogview.js
@@ -22,7 +22,7 @@
 		'<div class="oneline">' +
 		'    <input id="shareWith-{{cid}}" class="shareWithField" type="text" placeholder="{{sharePlaceholder}}" />' +
 		'    <span class="shareWithLoading icon-loading-small hidden"></span>'+
-		'{{{shareInfo}}}' +
+		'    <span class="shareWithConfirm icon icon-confirm"></span>' +
 		'</div>' +
 		'{{/if}}' +
 		'<div class="shareeListView subView"></div>' +
@@ -30,10 +30,6 @@
 		'<div class="expirationView subView"></div>' +
 		'<div class="loading hidden" style="height: 50px"></div>';
 
-	var TEMPLATE_SHARE_INFO =
-		'<span class="icon icon-info shareWithRemoteInfo hasTooltip" ' +
-		'title="{{tooltip}}"></span>';
-
 	/**
 	 * @class OCA.Share.ShareDialogView
 	 * @member {OC.Share.ShareItemModel} model
@@ -142,7 +138,7 @@
 			var $shareWithField = $('.shareWithField'),
 				view = this,
 				$loading = this.$el.find('.shareWithLoading'),
-				$shareInfo = this.$el.find('.shareWithRemoteInfo');
+				$confirm = this.$el.find('.shareWithConfirm');
 
 			var count = oc_config['sharing.minSearchStringLength'];
 			if (search.term.trim().length < count) {
@@ -167,7 +163,7 @@
 
 			$loading.removeClass('hidden');
 			$loading.addClass('inlineblock');
-			$shareInfo.addClass('hidden');
+			$confirm.addClass('hidden');
 
 			$shareWithField.removeClass('error')
 				.tooltip('hide');
@@ -184,7 +180,7 @@
 				function (result) {
 					$loading.addClass('hidden');
 					$loading.removeClass('inlineblock');
-					$shareInfo.removeClass('hidden');
+					$confirm.removeClass('hidden');
 					if (result.ocs.meta.statuscode === 100) {
 						var users   = result.ocs.data.exact.users.concat(result.ocs.data.users);
 						var groups  = result.ocs.data.exact.groups.concat(result.ocs.data.groups);
@@ -318,7 +314,7 @@
 			).fail(function() {
 				$loading.addClass('hidden');
 				$loading.removeClass('inlineblock');
-				$shareInfo.removeClass('hidden');
+				$confirm.removeClass('hidden');
 				OC.Notification.show(t('core', 'An error occurred. Please try again'));
 				window.setTimeout(OC.Notification.hide, 5000);
 			});
@@ -363,22 +359,22 @@
 			var $loading = this.$el.find('.shareWithLoading');
 			$loading.removeClass('hidden')
 				.addClass('inlineblock');
-			var $shareInfo = this.$el.find('.shareWithRemoteInfo');
-			$shareInfo.addClass('hidden');
+			var $confirm = this.$el.find('.shareWithConfirm');
+			$confirm.addClass('hidden');
 
 			this.model.addShare(s.item.value, {success: function() {
 				$(e.target).val('')
 					.attr('disabled', false);
 				$loading.addClass('hidden')
 					.removeClass('inlineblock');
-				$shareInfo.removeClass('hidden');
+				$confirm.removeClass('hidden');
 			}, error: function(obj, msg) {
 				OC.Notification.showTemporary(msg);
 				$(e.target).attr('disabled', false)
 					.autocomplete('search', $(e.target).val());
 				$loading.addClass('hidden')
 					.removeClass('inlineblock');
-				$shareInfo.removeClass('hidden');
+				$confirm.removeClass('hidden');
 			}});
 		},
 
@@ -416,7 +412,6 @@
 				cid: this.cid,
 				shareLabel: t('core', 'Share'),
 				sharePlaceholder: this._renderSharePlaceholderPart(),
-				shareInfo: this._renderShareInfoPart(),
 				isSharingAllowed: this.model.sharePermissionPossible()
 			}));
 
@@ -461,27 +456,6 @@
 			this.linkShareView.showLink = this._showLink;
 		},
 
-		_renderShareInfoPart: function() {
-			var shareInfo = '';
-			var infoTemplate = this._getShareInfoTemplate();
-
-			if(this.configModel.get('isMailShareAllowed') && this.configModel.get('isRemoteShareAllowed')) {
-				shareInfo = infoTemplate({
-					tooltip: t('core', 'Share with other people by entering a user or group, a federated cloud ID or an email address.')
-				});
-			} else if(this.configModel.get('isRemoteShareAllowed')) {
-				shareInfo = infoTemplate({
-					tooltip: t('core', 'Share with other people by entering a user or group or a federated cloud ID.')
-				});
-			} else if(this.configModel.get('isMailShareAllowed')) {
-				shareInfo = infoTemplate({
-					tooltip: t('core', 'Share with other people by entering a user or group or an email address.')
-				});
-			}
-
-			return shareInfo;
-		},
-
 		_renderSharePlaceholderPart: function () {
 			var allowRemoteSharing = this.configModel.get('isRemoteShareAllowed');
 			var allowMailSharing = this.configModel.get('isMailShareAllowed');
@@ -513,15 +487,6 @@
 			return this._templates[key];
 		},
 
-		/**
-		 * returns the info template for remote sharing
-		 *
-		 * @returns {Function}
-		 * @private
-		 */
-		_getShareInfoTemplate: function() {
-			return this._getTemplate('shareInfo', TEMPLATE_SHARE_INFO);
-		}
 	});
 
 	OC.Share.ShareDialogView = ShareDialogView;
diff --git a/core/js/tests/specs/sharedialogviewSpec.js b/core/js/tests/specs/sharedialogviewSpec.js
index c6d5793623c..6fd8fa7031f 100644
--- a/core/js/tests/specs/sharedialogviewSpec.js
+++ b/core/js/tests/specs/sharedialogviewSpec.js
@@ -472,22 +472,6 @@ describe('OC.Share.ShareDialogView', function() {
 			});
 		});
 	});
-	describe('remote sharing', function() {
-		it('shows remote share info when allowed', function() {
-			configModel.set({
-				isRemoteShareAllowed: true
-			});
-			dialog.render();
-			expect(dialog.$el.find('.shareWithRemoteInfo').length).toEqual(1);
-		});
-		it('does not show remote share info when not allowed', function() {
-			configModel.set({
-				isRemoteShareAllowed: false
-			});
-			dialog.render();
-			expect(dialog.$el.find('.shareWithRemoteInfo').length).toEqual(0);
-		});
-	});
 	describe('autocompletion of users', function() {
 		it('triggers autocomplete display and focus with data when ajax search succeeds', function () {
 			dialog.render();