Move external share saving to template

Signed-off-by: Julius Härtl <jus@bitgrid.net>

apps/files_sharing/js/public.js

@@ -263,15 +263,15 @@ OCA.Sharing.PublicApp = {
 
 			var remote = $(this).find('#remote_address').val();
 			var token = $('#sharingToken').val();
-			var owner = $('#save').data('owner');
-			var ownerDisplayName = $('#save').data('owner-display-name');
-			var name = $('#save').data('name');
-			var isProtected = $('#save').data('protected') ? 1 : 0;
+			var owner = $('#save-external-share').data('owner');
+			var ownerDisplayName = $('#save-external-share').data('owner-display-name');
+			var name = $('#save-external-share').data('name');
+			var isProtected = $('#save-external-share').data('protected') ? 1 : 0;
 			OCA.Sharing.PublicApp._createFederatedShare(remote, token, owner, ownerDisplayName, name, isProtected);
 		});
 
 		$('#remote_address').on("keyup paste", function() {
-			if ($(this).val() === '' || $('#save > .icon.icon-loading-small').length > 0) {
+			if ($(this).val() === '' || $('#save-external-share > .icon.icon-loading-small').length > 0) {
 				$('#save-button-confirm').prop('disabled', true);
 			} else {
 				$('#save-button-confirm').prop('disabled', false);
@@ -352,18 +352,18 @@ OCA.Sharing.PublicApp = {
 	},
 
 	_toggleLoading: function() {
-		var loading = $('#save > .icon.icon-loading-small').length === 0;
+		var loading = $('#save-external-share > .icon.icon-loading-small').length === 0;
 		if (loading) {
-			$('#save > .icon-external')
+			$('#save-external-share > .icon-external')
 				.removeClass("icon-external")
 				.addClass("icon-loading-small");
-			$('#save #save-button-confirm').prop("disabled", true);
+			$('#save-external-share #save-button-confirm').prop("disabled", true);
 
 		} else {
-			$('#save > .icon-loading-small')
+			$('#save-external-share > .icon-loading-small')
 				.addClass("icon-external")
 				.removeClass("icon-loading-small");
-			$('#save #save-button-confirm').prop("disabled", false);
+			$('#save-external-share #save-button-confirm').prop("disabled", false);
 
 		}
 	},

core/css/public.scss

@@ -17,11 +17,22 @@
 		#header-secondary-action {
 			margin-right: 13px;
 
-			input[type='text'] {
-				width: 200px;
+			ul li {
+				min-width: 270px;
+			}
+			#save-external-share {
+				form {
+					display: flex;
+					margin: 0;
+				}
+				.hidden {
+					display: none;
+				}
+				#save-button-confirm {
+					flex-grow: 0;
+				}
 			}
 		}
-
 	}
 
 	#content {

core/js/public/publicpage.js

@@ -25,6 +25,13 @@ $(document).ready(function () {
 	$('#body-public').find('.header-right .menutoggle').click(function() {
 		$(this).next('.popovermenu').toggleClass('open');
 	});
+
+	$('#save-external-share').find('label').click(function () {
+		$(this).toggleClass('hidden');
+		$('.save-form').toggleClass('hidden')
+		$('#remote_address').focus();
+	});
+
 });
 
 $(document).mouseup(function(e) {

lib/public/AppFramework/Http/Template/ExternalShareMenuAction.php

@@ -55,18 +55,14 @@ class ExternalShareMenuAction extends SimpleMenuAction {
 
 	public function render(): string {
 		return '<li>' .
-			'<a id="save" data-protected="false" data-owner-display-name="' . Util::sanitizeHTML($this->displayname) . '" data-owner="' . Util::sanitizeHTML($this->owner) . '" data-name="' . Util::sanitizeHTML($this->shareName) . '">' .
+			'<a id="save-external-share" data-protected="false" data-owner-display-name="' . Util::sanitizeHTML($this->displayname) . '" data-owner="' . Util::sanitizeHTML($this->owner) . '" data-name="' . Util::sanitizeHTML($this->shareName) . '">' .
 			'<span class="icon ' . Util::sanitizeHTML($this->getIcon()) . '"></span>' .
 			'<label for="remote_address">' . Util::sanitizeHTML($this->getLabel()) . '</label>' .
-			'</a>' .
-			'</li>' .
-			'<li>' .
-			'<span class="menuitem">' .
-			'<form class="save-form" action="#">' .
+			'<form class="save-form hidden" action="#">' .
 			'<input type="text" id="remote_address" placeholder="user@yourNextcloud.org">' .
 			'<input type="submit" value=" " id="save-button-confirm" class="icon-confirm" disabled="disabled"></button>' .
 			'</form>' .
-			'</span>' .
+			'</a>' .
 			'</li>';
 	}
 }