Updated popover rules to allow form inputs and added input submit for…

[skjnldsv]

… new File
Fixes #1904

Also new standard for the popovermenu

<div class="popovermenu">
    <ul>
        <li>
            <a href="#" class="menuitem active">
                <span class="icon icon-folder"></span>
                <input id="input-folder" type="text" value="New folder">
            </a>
        </li>
        <li>
            <a href="#" class="menuitem active">
                <span class="icon icon-folder"></span>
                <input id="input-folder" type="text" value="New folder">
                <input type="submit" value=" " class="primary icon-checkmark-white">
            </a>
        </li>
        <li>
            <a href="#" class="menuitem active">
                <span class="icon icon-folder"></span>
                <input id="input-folder" type="text" value="New folder">
                <input type="submit" value=" " class="primary icon-checkmark-white">
                <input type="reset" value=" " class="icon-close">
            </a>
        </li>
        <li>
            <a href="#" class="menuitem active">
                <span class="icon icon-folder"></span>
                <form>
                        <input id="input-folder" type="text" value="New folder">
                        <input type="submit" value=" " class="primary icon-checkmark-white">
                </form>
            </a>
        </li>
    </ul>
</div>

[jancborchardt]

Instead of a separate button, it should just be an icon-confirm element on the right inside the input field. :)

Just like we do in the "Add to your Nextcloud" on the sharing page.

[skjnldsv]

Oh yes it could!! :)

[skjnldsv]

Okay, I tried to add the standard I was talking you about @jancborchardt :)
The only downside I found is the focus on the confirm button itself which is impossible to get rid of since we can't select previous sibling in css. Nonetheless I don't find it very problematic!

@nextcloud/designers

[juliusknorr]

Looks nice @skjnldsv I'd just say the icon confirm button should have a default opacity, to match the text color of the form field.

[skjnldsv]

@juliushaertl Yes, I'm fixing all of this :)
There was indeed some unwanted behavior ;)

[codecov]

Codecov Report

Merging #8575 into master will decrease coverage by 0.48%.
The diff coverage is 0%.

@@             Coverage Diff              @@
##             master    #8575      +/-   ##
============================================
- Coverage     51.87%   51.38%   -0.49%     
- Complexity    25367    25368       +1     
============================================
  Files          1607     1541      -66     
  Lines         95154    87340    -7814     
  Branches       1379        0    -1379     
============================================
- Hits          49362    44883    -4479     
+ Misses        45792    42457    -3335

Impacted Files	Coverage Δ	Complexity Δ
...s_sharing/lib/Template/ExternalShareMenuAction.php	25% <0%> (-6.25%)	2 <0> (ø)
lib/private/Template/JSCombiner.php	87.5% <0%> (-1.61%)	31% <0%> (+1%)
lib/private/Files/Cache/Propagator.php	94.93% <0%> (-1.27%)	16% <0%> (ø)
...mments/js/vendor/At.js/dist/js/jquery.atwho.min.js
core/js/js.js
core/js/octemplate.js
core/js/sharedialogresharerinfoview.js
apps/files_sharing/js/sharetabview.js
apps/files_versions/js/versionstabview.js
core/js/sharesocialmanager.js
... and 58 more

[MorrisJobke]

@MorrisJobke there is only the bottom margin to fix, but it's kind of annoying because it does looks good on inputs, but not on texts popovers:

In the first image it looks at least better than before. The last image you posted the little folder icon and the text in the last input are not aligned anymore. Could you revert to #8575 (comment) ?

[skjnldsv]

@MorrisJobke yes, there's a fix incoming! :)

EDIT: okay, still not some fixes

[skjnldsv]

Okay alignment is good now!
@MorrisJobke please review :)

Fixed

[MorrisJobke]

Looks a lot better now 👍

[MorrisJobke]

Just noticed one issue:

• clicking that button causes a page reload in Safari, @skjnldsv does this also happen in your instance? I couldn't reproduce in Chrome :/

[skjnldsv]

@MorrisJobke oups forgot about that! Sorry, only the new folder button?

I don't have this behavior on chrome, let me check

edit: nope, and I did not changed the bahavior, the submit function is still executed with a stopPropagation :/

server/apps/files/js/newfilemenu.js

Lines 188 to 189 in 5dbd09f

	event.stopPropagation();
	event.preventDefault();

[MorrisJobke]

@MorrisJobke oups forgot about that! Sorry, only the new folder button?

New folder and new file.

[MorrisJobke]

I don't have this behavior on chrome, let me check

Me neither - only in Safari :/

[MorrisJobke]

clicking that button causes a page reload in Safari, @skjnldsv does this also happen in your instance? I couldn't reproduce in Chrome :/

Also pressing enter causes a reload of the page in Safari (nevertheless master and this branch work totally fine in Chrome :()

[MorrisJobke]

Maybe stop here as well?

[skjnldsv]

Can you try again with the last commit? @MorrisJobke :)

[MorrisJobke]

clicking that button causes a page reload in Safari, @skjnldsv does this also happen in your instance? I couldn't reproduce in Chrome :/

Tested and works now 👍

[rullzer]

JS tests fail https://drone.nextcloud.com/nextcloud/server/5588/221

[skjnldsv]

@rullzer js tests passed

[rullzer]

lets do this