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>

Author: danxuliu

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;

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();
 	});
 

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

@@ -67,14 +67,15 @@ public function __construct(string $label, string $icon, string $owner, string $
 	 */
 	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>';
 	}
 }