**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 Begin of the insertioncards.End of the insertion Begin of the deletion cards. End of the deletion

Begin of the deletion **Important:** Please note that this work package is still in specification. **Please do not start implementing this.**


End of the deletion ## **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

Begin of the insertion<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>

End of the insertion 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

Begin of the insertion<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>

End of the insertion 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 &quot;information&quot; button is visible on the top right edge.
* This corresponds to a basic icon-only button, with icon &quot;info2&quot;.
* 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 &quot;click&quot; 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: &quot;Title of the work package (status)&quot; Begin of the insertion
End of the insertion Begin of the deletion
End of the deletion * 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 &quot;blocked&quot; icon is displayed to the right of the &quot;information&quot; 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 &quot;reason&quot; for the block (as described in #id). Begin of the insertion

End of the insertion Begin of the deletion



End of the deletion ### Begin of the insertionDrag 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 &quot;information&quot; 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.

###End of the insertion Closed work packages

Begin of the insertion<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>

End of the insertion 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. Begin of the insertion

End of the insertion Begin of the deletion



End of the deletion ### Date indicators

Begin of the insertion<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>

End of the insertion 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 &quot;cut&quot;.
* The indicator consists of an arrow and the corresponding start or finish date:
* For a start date cutoff, this corresponds to the arrow icon (&#39;arrow-left4&#39;) and the start date formatted as &quot;Aug 8 –&quot;.
* For a finish date cutoff, this corresponds to the finish date formatted as &quot;– Aug 12&quot;followed by an arrow icon (&#39;arrow-left5&#39;).
* 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. Begin of the insertion

End of the insertion Begin of the deletion



End of the deletion ### **Visuals**

Begin of the insertion**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 isEnd of the insertion Begin of the deletion WorkEnd of the deletion in Begin of the insertionblue):**

<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 &quot;blocked&#39; icon gives users a reason for why that card can&#39;tEnd of the insertion Begin of the deletion progress, willEnd of the deletion be Begin of the insertionmoved:**End of the insertion Begin of the deletion added.End of the deletion

Begin of the insertion<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>

End of the insertion Begin of the deletion ###

End of the deletion ### Figma prototype

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