Content
View differences
Updated by Parimal Satyal over 4 years ago
#### **Hover state**
On hover, there are two changes to a card in the left-side pane in the team planner:
* Show the info icon on the top left (like in Boards).
* the project name attribute will be dimmed to 20% opacity (in order to make the icon legible)
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27001/content"></div></figure>
**Clicked (active) state**
When the user clicks on the "info" icon, the card goes to a clicked state:
* the background colour of the card becomes light blue
* the split screen is displayed for that work package
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27003/content"></div></figure>
#### **Disabled state**
In certain cases, a card must be "disabled" in the left-hand pane. With @Henriette, we have identified a number of cases, where the should should not be able to drag and drop a work package into the team planner. In each of these cases:
* the card is greyed-out at 60% opacity
* a grey"warning" icon is present on the top-right edge, above the opacity layer
* hovering on this with display a tooltip explaining why the card is disabled
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27008/content"></div></figure>
Please not that the "info" icon described in the hover state also applies to hover on a disabled card: the grey icon on the right is complemented by the blue icon on the left.
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27009/content"></div></figure>
The tooltip text depends on the reason for the block:
* **The user doesn't have the permission to change dates:**
* Tooltip text: "_You do not have the necessary permissions to modify the dates of this work package._"
* **The user doesn't have the permission to change assignee**
* Tooltip text: "_You do not have the necessary permissions to modify the assignee of this work package._"
* **The user doesn't have the permissions (specific reason unknown)**
* Tooltip text: "_You do not have the necessary permissions to modify this work package._"
* **The work package is manually scheduled**
* Tooltip text: "_This work package is manually scheduled and can’t be moved._"
### Visuals
_**"Disabled" work packages that cannot be moved:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27004/content"></div></figure>
_**Tooltip on hover for "disabled" work packages that cannot be moved:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27005/content"></div></figure>
_**Hover state:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27007/content"></div></figure>
_**Clicked (active) state:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27006/content"></div></figure>
### Figma prototype:
Access the latest prototypes here: [https://www.figma.com/file/409d6qR685SzZLXez4TPl7/?node-id=614%3A26487](https://www.figma.com/file/409d6qR685SzZLXez4TPl7/?node-id=614%3A26487)
On hover, there are two changes to a card in the left-side pane in the team planner:
* Show the info icon on the top left (like in Boards).
* the project name attribute will be dimmed to 20% opacity (in order to make the icon legible)
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27001/content"></div></figure>
**Clicked (active) state**
When the user clicks on the "info" icon, the card goes to a clicked state:
* the background colour of the card becomes light blue
* the split screen is displayed for that work package
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27003/content"></div></figure>
#### **Disabled state**
In certain cases, a card must be "disabled" in the left-hand pane. With @Henriette, we have identified a number of cases, where the should should not be able to drag and drop a work package into the team planner. In each of these cases:
* the card is greyed-out at 60% opacity
* a grey"warning" icon is present on the top-right edge, above the opacity layer
* hovering on this with display a tooltip explaining why the card is disabled
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27008/content"></div></figure>
Please not that the "info" icon described in the hover state also applies to hover on a disabled card: the grey icon on the right is complemented by the blue icon on the left.
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27009/content"></div></figure>
The tooltip text depends on the reason for the block:
* **The user doesn't have the permission to change dates:**
* Tooltip text: "_You do not have the necessary permissions to modify the dates of this work package._"
* **The user doesn't have the permission to change assignee**
* Tooltip text: "_You do not have the necessary permissions to modify the assignee of this work package._"
* **The user doesn't have the permissions (specific reason unknown)**
* Tooltip text: "_You do not have the necessary permissions to modify this work package._"
* **The work package is manually scheduled**
* Tooltip text: "_This work package is manually scheduled and can’t be moved._"
### Visuals
_**"Disabled" work packages that cannot be moved:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27004/content"></div></figure>
_**Tooltip on hover for "disabled" work packages that cannot be moved:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27005/content"></div></figure>
_**Hover state:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27007/content"></div></figure>
_**Clicked (active) state:**_
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27006/content"></div></figure>
### Figma prototype:
Access the latest prototypes here: [https://www.figma.com/file/409d6qR685SzZLXez4TPl7/?node-id=614%3A26487](https://www.figma.com/file/409d6qR685SzZLXez4TPl7/?node-id=614%3A26487)