🤝 Improvement to sharing design and flow

[jancborchardt]

Currently we have several issues with sharing, across platforms:

• It looks a bit cluttered, especially the 3-dot dropdown menu with all the actions is too much
• It’s not clear to people when the share will be set & sent, leading to possible access control issues, and also 2 separate mails when you set a note
• Names are often cut off because of the "can edit" with checkbox
• It could be more consistent across platforms

Here’s a proposal to fix these issues which came out of a design discussion @FlexW and I had about improving the sharing flow for the Desktop client. We should of course make sure to keep this the same across all platforms. (It is to be seen as a mockup – of course the inputs and buttons should be the native elements of the platform.)

Share overview	Share details	Share details advanced

Mockup with slight interactivity at https://design.penpot.app/#/view/b83aa940-a28e-11eb-bb49-81aaa3a367f9/b83aa941-a28e-11eb-bb49-81aaa3a367f9?token=9eUwuY6LzqqZ34pWFWSUnQ&index=0 https://design.penpot.app/#/view/b83aa940-a28e-11eb-bb49-81aaa3a367f9?page-id=b83aa941-a28e-11eb-bb49-81aaa3a367f9&index=0

Share overview

• We add a subline to the entries where info on "View only" or "Can edit" or "File drop" is shown – this makes name and subline area actionable
  • For external shares of single files where there’s no editing, the "Can edit" function needs to be not shown (anything except txt, md, or office probably)
  • Even if there is only one option, we should still show the subline for feedback
• The avatar needs to stay a separate actionable area for the contact options
• Another direct action in the list is to "Copy link" because that needs to be quickly accessible.
• On the right there’s a 3-dot menu icon which brings up a menu with quick actions for
  • Share details
  • Resend email
  • Delete share / Unshare
• Going to "Share details" shows the detail page with further info
• The little primary-colored bar on the top is a little experiment and would mainly be something for the desktop client to make the dialog look less dead.
• Alternatively on mobile: Whole entry is tappable and opens the menu as a bottom sheet, in this case with
  • (Direct switch of View only / Edit / File drop if possible?)
  • Share details
  • Resend email
  • Delete share / Unshare

Share detail

• Ideally, there is a quick slide left/right animation whenever one navigates in and out of this detail view so people have a sense of place.
• The header part needs to indicate both which file it is about, and if it is a share link or which person. In this mockup it is done by changing the header – this works for Desktop, for the other platforms we need to adjust.
• This opens with the relevant settings – when there is an expiration date set or enforced, the "Advanced settings" is already open
• Here all the share settings are listed, in this order:
  • View only / Edit / File drop
  • Note to recipient
  • Set password
  • Set expiration date
  • Share label
  • Delete link / Unshare
• Clicking the "Share & copy link" button automatically copies the link as expected. For shares to people, this could say "Share & send mail"

@nextcloud/designers and the leads @tobiasKaminsky @rullzer @marinofaggiana @mgallien @FlexW @LukasReschke @karlitschek

[skjnldsv]

Related #12178
#8479

Shall we close the others @jancborchardt ?

[bes1002t]

I think this issue is also related: #25123

@jancborchardt since your proposal and my proposal from the related ticket are quite similar, I would agree that your mockups totally make sense. :P
I think It would be a huge improvement from a user experience point of view if we could keep it like this over all platforms.

[bbceg]

Just adding my two cents from the related issue #22132 in case it makes sense to add a 'Direct Download' option to the 'Advanced' screen. After months of use we're pretty happy just appending the '/download' as and when needed so I'm less fussed now than I was when I first raised it. Still, it seemed worth mentioning in case anyone else can see the benefit.