As a user I want to have full control of the collaborators in an easy way

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: Master
• Component/s: Documents & Media
• Labels:
  • 7.2-ui-change
  • Apr_'19
• Epic Link: Share a document or a media asset with other users
• Sprint: Col | Sprint 9 | Feb18 - Mar5, Col | Sprint10 | Mar6 - Mar15, Col | Sprint11 | Mar19 - Mar28, Col | Sprint 12 | Apr1 - Apr5
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/71693

Description

Resources: Product Team Feedback

User Experience

Resources: Discussion Document

Basic Structure

Modal

STRUCTURE

1. Header
2. Body with Collaborators Items
3. Footer

Measurements

• Width: 600px
• Body Padding: 8px 0px
• Margin between Items: 0px

Collaborator Item

1. Sticker
2. Name + Surname
3. Can share flag
4. Expiration flag
5. Permission
6. Remove button

Measurements & Style
Width: 600px
Height: 56px
Font Size: 16px
Font Weight: Semibold

Visual States

1. Collapsed/Normal
2. Hover
3. Expanded

STRUCTURE

1. Resharing Check Box with the text “Allow share and manage permissions”
2. “Set Expiration Date” checkbox + Input (date input)
3. Cancel Expiration Date Button with the text “Cancel expiration”

Interaction

Expand Interaction

• After a user clicks an item it changes from collapsed to expanded state.
• Only one item at a time can be expanded. If the user clicks an item while there is one expanded, the expanded item collapses and the item clicked expands.  

Interaction Area: Selector and Remove button have their own interaction areas

Expiration date

• A user can enable an expiration date, checking the “Set Expiration Date” checkbox
• When the checkbox is checked, the input date shows the tomorrow day set by default.
• If the user unchecks the checkbox, the input date is cleared and hidden.

Set expiration unchecked

Flags

• If an expiration date was set, the expiration flag shows.
• If a user has permission to share and manage the file, the sharing flag shows.
• When the user makes changes before saving, the flags are not shown/hide.

Tooltips

• Share and Manage Tooltip: “Can share and manage permissions”
• Expiration Date Tooltip: “Until #expirationDate”.