Download action in share link header split in two

[jancborchardt]

In the header of sharing, on the top right there’s the download actions:

Now the design for this (and as it worked before) is:

• Both text and 3-dot menu toggle are one element. The text is merely a label for the icon as the actions are all "related" to download (and Download shows in the menu).
• The text "Download" is not displayed on mobile to save space for the title of the file, only the 3-dot-menu remains.

As it currently is:

• It’s split into "header-primary-action" and "header-secondary-action" which is confusing.
• The "Download" text does not vanish on mobile.

Now we could do the following to mix the approaches:

• On mobile, only have the 3-dot icon and all actions in the 3-dot menu (primary action first) like in the intended design
• On bigger sizes, having the primary action outside of the menu (like in the current way)
• To make it less confusing, on desktop we need to make obvious that there’s a primary button, so we should probably add a white border (a la button style) around the text.

What do you think @juliushaertl @skjnldsv @nextcloud/designers?

[skjnldsv]

Is this causing issues actually? Or is it just a nitpick to improve the design?

[juliusknorr]

On mobile, only have the 3-dot icon and all actions in the 3-dot menu (primary action first) like in the intended design

👍

To make it less confusing, on desktop we need to make obvious that there’s a primary button, so we should probably add a white border (a la button style) around the text.

That sounds like a good approach. @nextcloud/designers

[skjnldsv]

Ah yes, I did not understand the issue like that!
I'm all in as well :)

[jancborchardt]

@juliushaertl yep, like that! :) But on bigger widths, the "Download" action then does not need to be in the 3-dot menu too when it’s already shown outside of it. Otherwise, want to open a pull request for it?

[MorrisJobke]

@jancborchardt @skjnldsv Moved to 15

[skjnldsv]

@MorrisJobke no, it's in #10838
At least the download being hidden on small width