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>

diff --git a/core/css/public.scss b/core/css/public.scss
index 6ec22cbc6d2f9a9ef869da65a0e49a7bd3ade05f..b171dd4970d8ad6cb5e4334f37f11fa6e0322754 100644 (file)
--- 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 e71bdff12ae3752950537d59de671381ab1637ba..4fb9c67bfee4ec0becdbdb2c189e5eac8222d919 100644 (file)
--- 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 47f62d9f8fdb0bd372825ee2311be985e26e256d..33ca3be94aa9a82233114cd4265a6a40d7211fd3 100644 (file)
--- 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>';
        }
 }