# Feature OP-9819 - Replace work strips on the team planner calendar with full cards

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

## Planning

| Attribute | Value |
| --- | --- |
| Date | 2021-11-01 – 2022-02-27 |
| 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

**As a** project member,  
**I want to** view work packages in the team planner as cards  
**so that** I can read work package attributes (subject, status, project, id...) without needing to open the split screen

## **Note**

This feature extends the existing Team Planner by replacing the work package strips with full cards.

## **Acceptance Criteria:**

### Calendar background

Since the cards have a white background, the fullcalendar module needs a different background colour.

  - Regular days should have a background that corresponds to Gray 6 (\#f3f3f3").
  - Weekends should have a background that correponds to Gray 4 (\#e0e0e0").

*Note: The "weekend" style will eventually also be used on non-working days once we implement that feature.*

### Card design

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

The cards that are visible on the calendar are the same component as the ones implemented in the left-hand Add Existing pane (and on the boards), with these specificities and variations:

  - A card on the calendar can only have two lines; it cannot expand vertically.
      - The third line (assignee and date range) is hidden; the team planner already displays this information with calendar and assignee column.
  - The width of a card is determined only by the number of days spanned. The card truncates at the point where this limit is reached.
  - The first line of the card is the same as on the Add Existing pane. It displays:
      - The status. This is displayed as a drop down: the user is able to modify the status directly.
      - The \#id. This links to the work package (users can click to open the work package, or control+click to open it in a new tab)
      - Project name. This links to the project page.
  - The second line displays the subject.
      - To ensure the subject is at least partially visible (especially in shorter cards), the type attribute that is normally displayed before the subject is hidden.
  - The type is instead visible as a 2px stripe of colour on the top edge.
      - This stripe will eventually be user-customisable and the colour can represent another attribute (like priority or status). But for now, on the Team planner, it will only represent type.

### 

### Hover behaviour

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

A number of interactions are possible on hover:

  - Drag handles are displayed on either edge of a work package.
      - If an edge is not visible because the start or finish date is beyond the currently visible date range, the drag handle is also not displayed.
  - An "information" button is visible on the top right edge.
      - This corresponds to a basic icon-only button, with icon "info2".
  - Clicking on this button will open the work package in split screen.
      - The work package that is being displayed in the split-screen is highlighted in blue.
      - When the split screen is open, clicking on other work packages will open that other work package and highlight *it* in blue.
      - This "click" behaviour is only applicable when the split screen is already open.
  - Keeping the mouse still over a work package will display a browser native tooltip displaying the subject and status in this format: "Title of the work package (status)"
      - This is especially useful for short (especially one-day) work packages that might also have date indicators (described below) whose names might be so truncated as to be unusable.
  - If a card has known permission restrictions, then a "blocked" icon is displayed to the right of the "information" button (so that this blocked icon is now on the top right corner).
      - Hovering on this icon displays an OpenProject tooltip that displays the correct "reason" for the block (as described in \#id).

### Drag behaviour

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

  - ~~When dragging, the drag on either edge disappear.~~
  - The blue "information" button remains visible.
  - Currently implemented behaviour with the work strips is maintained:
      - The calendar reacts on where the mouse is by highlighing the days that the work package would span if dropped there
      - The remove assignee/dates dropzone is visible.

### Closed work packages

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

Users should be able to quickly tell if a work package is closed or not. This will allow a team manager or team members get a sense of what is open/closed at a glance:

  - The background colour is Gray 6 (\#f3f3f3).
      - This is the same colour as the background for a normal (working) day; this is intended.

### Date indicators

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

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

When one edge or both edges of a work package are not visible in the currently visible date range (whether that range spans one or two weeks), display date indicators:

  - The date indicators are visible on the second (subject) line and only on the edge that is "cut".
  - The indicator consists of an arrow and the corresponding start or finish date:
      - For a start date cutoff, this corresponds to the arrow icon ('arrow-left4') and the start date formatted as "Aug 8 –".
      - For a finish date cutoff, this corresponds to the finish date formatted as "– Aug 12"followed by an arrow icon ('arrow-left5').
      - The hyphen at the beginning or the end of the dates is important.
  - For work packages whose start AND finish dates are cut off, the indicators are shown on both ends.
  - The arrows exceed the padding of the card and extend closer to the edges such that there is only a 5 pixel padding between the arrow and the edge of the card.

### **Visuals**

**A regular week view with cards**

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

**Dragging a card to another assignee (the drag handles disappear)**

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

**Hovering on the info button:**

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

**Opening the split-screen view (selected work package card is in blue):**

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

**Tooltip (OS-native) on a work package allows users to access the full subject and status on truncated cards:**

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

**Hovering on the "blocked' icon gives users a reason for why that card can't be moved:**

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

### Figma prototype

Figma link: <https://www.figma.com/file/409d6qR685SzZLXez4TPl7/?node-id=1591%3A54396>