This work package extends the description of individual cards that are displayed on the left-hand &quot;Add existing pane&quot; as described in <mention class="mention" data-id="40886" data-type="work_package" data-text="#40886">#40886</mention>.

**Normal state (reference)**

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27125/content"></div></figure>

#### **Hover state**

On hover, there are two changes to a card:

* Show the info icon on the top right corner
* Change opacity of &quot;project&quot; attribute if it extends into the zone occupied by this icon

<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/27126/content"></div></figure>

**Clicked (active) state**

When the user clicks on the &quot;info&quot; icon, the card goes to a clicked/active 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/27127/content"></div></figure>

#### Begin of the insertion**BlockedEnd of the insertion Begin of the deletion **DisabledEnd of the deletion state**

Begin of the insertion~~InEnd of the insertion Begin of the deletion InEnd of the deletion certain cases, a card must be &quot;disabled&quot; in the left-hand pane. 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 Begin of the insertioncases:~~End of the insertion Begin of the deletion cases:End of the deletion

Begin of the insertionA blocked state indicates aEnd of the insertion Begin of the deletion * theEnd of the deletion card Begin of the insertionthat cannot be dragged or stretched, because of certain restrictions (usually permissions). That a cardEnd of the insertion is Begin of the insertion&quot;disabled&quot; is only apparent on hover; otherwise they look like regular open or closed cards. On hover:

End of the insertion Begin of the deletion greyed-out at 60% opacity
End of the deletion * a grey &quot;blocked&quot; icon is present on the top-right Begin of the insertionedge along withEnd of the insertion Begin of the deletion edge, aboveEnd of the deletion the Begin of the insertionblue info iconEnd of the insertion Begin of the deletion opacity layerEnd of the deletion
* hovering on this icon will display a tooltip explaining why the card is disabled
* All other interaction (dragging, changing status) is blocked, except Begin of the insertionhover and click on the i button to open the split screen.End of the insertion Begin of the deletion hover.End of the deletion

<figure class="image op-uc-figure" Begin of the insertionstyle="width:75%;"><divEnd of the insertion Begin of the deletion style="width:50%;"><divEnd of the deletion class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/29295/content"></div><figcaption class="op-uc-figure--description">A regular card that&amp;#39;s really blocked</figcaption></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/27128/content"></div></figure>End of the deletion

Begin of the insertion<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29296/content"></div><figcaption class="op-uc-figure--description">The blockedEnd of the insertion Begin of the deletion **The hoverEnd of the deletion state Begin of the deletion of a disabled card**End of the deletion is Begin of the insertionapparent only on hover</figcaption></figure>End of the insertion Begin of the deletion the same as a normal card, except:End of the deletion

Begin of the insertion<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29297/content"></div><figcaption class="op-uc-figure--description">The tooltipEnd of the insertion Begin of the deletion * The info icon is displayed left of the &quot;blocked&quot; icon. ClickingEnd of the deletion on Begin of the deletion it will displayEnd of the deletion the Begin of the insertionblocked icon</figcaption></figure>

This is true alsoEnd of the insertion Begin of the deletion split screen as it wouldEnd of the deletion for Begin of the insertionclosed cards:End of the insertion Begin of the deletion a &quot;normal&quot; card.End of the deletion

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/29298/content"></div><figcaption class="op-uc-figure--description">A closed card that blocked, but not apparent until hover</figcaption></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/27129/content"></div></figure>End of the deletion

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" Begin of the insertionsrc="/api/v3/attachments/29299/content"></div><figcaption class="op-uc-figure--description">That this closed card is blocked is only apparently on hover</figcaption></figure>End of the insertion Begin of the deletion src="/api/v3/attachments/27131/content"></div></figure>End of the deletion

The tooltip text depends on the reason for the Begin of the insertionblock, depending on what can be technically ascertained:End of the insertion Begin of the deletion block:End of the deletion

* **The user doesn&#39;t have the permission to change dates:**
* Tooltip text: &quot;_You do not have the necessary permissions to modify the dates._&quot;
* **The user doesn&#39;t have the permission to change assignee**
* Tooltip text: &quot;_You do not have the necessary permissions to modify the assignee._&quot;
* **The user doesn&#39;t have the permissions (specific reason unknown)**
* Tooltip text: &quot;_You do not have the necessary permissions to modify this._&quot;
* **The work package is manually scheduled**
* Tooltip text: &quot;_This is manually scheduled and can’t be moved._&quot;

### Visuals

_**&quot;Disabled&quot; 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/27132/content"></div></figure>

_**Tooltip on hover for &quot;disabled&quot; 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/27133/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/27134/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/27135/content"></div></figure>

### Figma prototype:

Access the latest prototypes here: https://www.figma.com/file/409d6qR685SzZLXez4TPl7/Team-Planner?node-id=1466%3A54476