Split the menu entry for external shares in two

The external shares entry showed a "button" that, when pressed, replaced
the button with the input to set the remote share address. The "button"
was actually a label for the input, so when the label was focused it
transferred the focus to the input and thus pressing enter or space did
not show the input. Moreover, inputs inside links are not valid HTML,
and once shown there was no way to hide the input again.

Due to all this, and for consistency with the direct link input, the
external share input was moved to a different menu item that is shown
and hidden when the button, which nows is also a real button, is
clicked.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

3 files changed, 9 insertions, 10 deletions

diff --git a/core/css/public.scss b/core/css/public.scss
index 6ec22cbc6d2..b171dd4970d 100644
--- a/core/css/public.scss
+++ b/core/css/public.scss
@@ -21,10 +21,9 @@ $footer-height: 65px;
 					opacity: 1;
 				}
 			}
-			#save-external-share {
+			#external-share-menu-item {
 				form {
 					display: flex;
-					margin: 0;
 				}
 				.hidden {
 					display: none;
diff --git a/core/js/public/publicpage.js b/core/js/public/publicpage.js
index e71bdff12ae..4fb9c67bfee 100644
--- a/core/js/public/publicpage.js
+++ b/core/js/public/publicpage.js
@@ -26,9 +26,8 @@ $(document).ready(function () {
 		$(this).next('.popovermenu').toggleClass('open');
 	});
 
-	$('#save-external-share').find('label').click(function () {
-		$(this).toggleClass('hidden');
-		$('.save-form').toggleClass('hidden')
+	$('#save-external-share').click(function () {
+		$('#external-share-menu-item').toggleClass('hidden')
 		$('#remote_address').focus();
 	});
 
diff --git a/lib/public/AppFramework/Http/Template/ExternalShareMenuAction.php b/lib/public/AppFramework/Http/Template/ExternalShareMenuAction.php
index 47f62d9f8fd..33ca3be94aa 100644
--- a/lib/public/AppFramework/Http/Template/ExternalShareMenuAction.php
+++ b/lib/public/AppFramework/Http/Template/ExternalShareMenuAction.php
@@ -67,14 +67,15 @@ class ExternalShareMenuAction extends SimpleMenuAction {
 	 */
 	public function render(): string {
 		return '<li>' .
-			'    <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>' .
-			'        <form class="save-form hidden" action="#">' .
+			'    <button id="save-external-share" class="icon ' . Util::sanitizeHTML($this->getIcon()) . '" data-protected="false" data-owner-display-name="' . Util::sanitizeHTML($this->displayname) . '" data-owner="' . Util::sanitizeHTML($this->owner) . '" data-name="' . Util::sanitizeHTML($this->shareName) . '">' . Util::sanitizeHTML($this->getLabel()) . '</button>' .
+			'</li>' .
+			'<li id="external-share-menu-item" class="hidden">' .
+			'    <span class="menuitem">' .
+			'        <form class="save-form" 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>' .
-			'    </a>' .
+			'    </span>' .
 			'</li>';
 	}
 }