Missing finedesign in Shares Panel

[tbsbdr]

Steps to reproduce

1.login at https://ocis.ocis-web.latest.owncloud.works/
2. share a fiel with several people
3. create 4 links for the same resource
4. Shares panel looks not well visually tidied up yet

Expected behaviour

• remove top- and bottom seperators from header
• remove resource size and modified date from header
• Add contextual help "?" next to "Share with people"
• move helper text into "?"
• round corners for the group-background fix: group avatars by long group names in sidebar owncloud-design-system#2242
• adjust avatar size to 36 px
• adjust avatar initials to regular font weight (not bold)
• center-vertical 3-dots button, "via" and exp. date (related to the whole collaborator-item)
• reduce whitespace between resource-name and "Share with people" area
• "Via " should get truncated
• Adjust Access Details so that it looks like the Context-Helper UI

screens are not 100% up to date, as we reworked the position of the roles and removed the user-types, but should give an impression what the design goal is.

Helper Access details

(outlook - we could show more details in the future. currently this is mainly used to keep the shares-list clean, i.e. let not so important infos take a backseat here in the Access details)

Texts

• Name
• Additional info
• Access expires ("No" or <Date>)
• Shared on
• Invited by
• Recent view or download of the share ("Never" or <Date>)

Learn more (Will be documented as soon as we extend the infos)

[kulmann]

Would like to see written down acceptance criteria here. Otherwise the design screenshots leave too much room for interpretation.

[tbsbdr]

update: added ACs (checklist in initial post) to make changes more transparent

[tbsbdr]

regarding #7372 :

"Via" needs some truncation:

flip order of the items in the collaborators item; should be "via", then "exp. Date"  

reduce whitespace between resource-name and "Share with people" area. should be like:

[AlexAndBear]

TBD in another PR

[AlexAndBear]

Follow up: #7402

[AlexAndBear]

@tbsbdr
I set the distance between Navbar-header, Navbar-resource-name and Navbar-body to 10px.
This is the same padding (10px) we already used for the left and right.

However, the distance between Share with people and Share via link is 16px.

So we have the option to:

• Set the navbar distances to 16px (IHMO too much)
• Set the Share with people and Share via link distance to 10px
• Leave it as it is (Best solution IHMO, as it looks good now)

[tbsbdr]

ack

👍 nice, thanks - also for stating the other options

[tbsbdr]

Update: added "Adjust Access Details so that it looks like the Context-Helper UI"
moved here from #7331

[kulmann]

What about using our theme css variables for margin/padding? based on a grid of 8px. Honestly not sure where we should hardcode margins and where to use the variables, but my gut feeling is that we should use the css variables here.

[AlexAndBear]

@kulmann Totally agree and implemented