# Feature OP-9733 - Hover, Clicked and Disabled states for cards in the Add Existing pane

Project: OpenProject
Status: closed
URL: https://community.openproject.org/work_packages/OP-9733

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 12.1.0 |
| Sprint | 12.1.0 |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

_No work packages_

## Technical Details

| Attribute | Value |
| --- | --- |
| Module |  |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Found in mobile app version |  |
| Follow-up feedback e-mail |  |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable |  |
| Product manager |  |
| Developers |  |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

This work package extends the description of individual cards that are displayed on the left-hand "Add existing pane" 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 "project" 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 "info" 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>

#### **Blocked state**

~~In certain cases, a card must be "disabled" 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 cases:~~

A blocked state indicates a card that cannot be dragged or stretched, because of certain restrictions (usually permissions). That a card is "disabled" is only apparent on hover; otherwise they look like regular open or closed cards. On hover:

  - a grey "blocked" icon is present on the top-right edge along with the blue info icon
  - hovering on this icon will display a tooltip explaining why the card is disabled
  - All other interaction (dragging, changing status) is blocked, except hover and click on the i button to open the split screen.

<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/29295/content"></div>
<figcaption class="op-uc-figure--description">A regular card that&amp;#39;s really blocked</figcaption></figure>

<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 blocked state is apparent only on hover</figcaption></figure>

<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 tooltip on the blocked icon</figcaption></figure>

This is true also for closed cards:

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

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/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>

The tooltip text depends on the reason for the block, depending on what can be technically ascertained:

  - **The user doesn't have the permission to change dates:**
      - Tooltip text: "*You do not have the necessary permissions to modify the dates.*"
  - **The user doesn't have the permission to change assignee**
      - Tooltip text: "*You do not have the necessary permissions to modify the assignee.*"
  - **The user doesn't have the permissions (specific reason unknown)**
      - Tooltip text: "*You do not have the necessary permissions to modify this.*"
  - **The work package is manually scheduled**
      - Tooltip text: "*This 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/27132/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/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>