Content
View differences
Updated by Marc Alcobé over 3 years ago
**As** a project member
**I want to** see the most relevant information always at the same place in the work packages different views
**so that** I can modify it easier and don't need to search for it in the details of the work package.
## **Acceptance criteria**
#### **New sub-header with relevant information:**
* Remove the following fields from the work package form configuration (details):
* Date
* Assignee
* Log time
* Add the previous mentioned information in a sub-header closer to the content header as in the visuals (also check the specific visuals to see the expected behaviour on how to set each value).
* There is multiple options to display the dates depending on the situation (specific visuals bellow):
* _No date or duration:_ "Set date"
* _No date but has duration_: "Set date (19 days)"
* _Start date only:_ "05/10/2022 – Set finish date"
* _Finish date only:_ "Set start date – 24/10/2022"
* In the case of log time the current behaviour is still expected with a minor change:
* When there is no time logged: the text is "Log time" and both icon and text are clickable to log time.
* When there is time logged: the current behaviour applies. The clock icon opens the modal to log time while the text opens the report page.
* When the "Costs and Time" module is not active in the project the log time action is not displayed.
* The ID and last change will be also moved to the the sub-header and will take the format: "ID - Last update X days ago". This means the "Created by" disappears and the time stamp is standardised with "days ago". TBD which is the scale used for days vs months vs years (eg. 90+ days is transformed in months and 12+ months is transformed in years)
* Changes carried out on the same day. Should there also be an hours and minutes unit as we do for linking/attaching files.
* The placement of the elements is variable depending on the following cases:
* Work package full view
* Work package split screen view
* Work package in mobile:
* The arrangement of elements adapts to the different cases and devices as specified in the visuals.
* The fixing of elements also is modified as the first header (toolbar) is fixed as specified in the visuals.
#### **Other changes:**
* On the full view the toolbar/header also changes as the "+ Create" button disappears and two new buttons will appear that will relate to the tabs and will behave as specified in this [Figma prototype](https://www.figma.com/proto/9Xx1gBIDG2MHsUmE4MjFV0/Sub-header-proposal?page-id=79%3A3707&node-id=82%3A3708&viewport=424%2C311%2C0.15&scaling=contain&starting-point-node-id=82%3A3708):
* Create child work package (icon needs to be redesigned and reviewed)
* Attach a file
* Watch work package (already existing but behaviour will change)
* There is a new breadcrumb that is specified in <mention class="mention" data-id="44142" data-type="work_package" data-text="#44142">#44142</mention>.
## **Generic visuals**
#### Full view:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38533/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36964/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37079/content">
#### Split view:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37065/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37066/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37078/content">
#### Mobile:
## <img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37063/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37064/content">
##
##
## **Visuals for time specific cases**
#### Full view:
## <img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36960/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36959/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36958/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36957/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36956/content">
#### Split view:
## <img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37068/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37069/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37070/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37071/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37072/content">
##
##
## **Visuals for time specific cases**
#### Set dates:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36950/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36949/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36948/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36947/content">
#### Set assignee:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36946/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36945/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36944/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36943/content">
#### Log time:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36942/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36941/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36940/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36939/content">
##
## Figma
[https://www.figma.com/file/9Xx1gBIDG2MHsUmE4MjFV0/?node-id=0%3A1](https://www.figma.com/file/9Xx1gBIDG2MHsUmE4MjFV0/?node-id=0%3A1)
**I want to** see the most relevant information always at the same place in the work packages different views
**so that** I can modify it easier and don't need to search for it in the details of the work package.
## **Acceptance criteria**
#### **New sub-header with relevant information:**
* Remove the following fields from the work package form configuration (details):
* Date
* Assignee
* Log time
* Add the previous mentioned information in a sub-header closer to the content header as in the visuals (also check the specific visuals to see the expected behaviour on how to set each value).
* There is multiple options to display the dates depending on the situation (specific visuals bellow):
* _No date or duration:_ "Set date"
* _No date but has duration_: "Set date (19 days)"
* _Start date only:_ "05/10/2022 – Set finish date"
* _Finish date only:_ "Set start date – 24/10/2022"
* In the case of log time the current behaviour is still expected with a minor change:
* When there is no time logged: the text is "Log time" and both icon and text are clickable to log time.
* When there is time logged: the current behaviour applies. The clock icon opens the modal to log time while the text opens the report page.
* When the "Costs and Time" module is not active in the project the log time action is not displayed.
* The ID and last change will be also moved to the the sub-header and will take the format: "ID - Last update X days ago". This means the "Created by" disappears and the time stamp is standardised with "days ago". TBD which is the scale used for days vs months vs years (eg. 90+ days is transformed in months and 12+ months is transformed in years)
* Changes carried out on the same day. Should there also be an hours and minutes unit as we do for linking/attaching files.
* The placement of the elements is variable depending on the following cases:
* Work package full view
* Work package split screen view
* Work package in mobile:
* The arrangement of elements adapts to the different cases and devices as specified in the visuals.
* The fixing of elements also is modified as the first header (toolbar) is fixed as specified in the visuals.
#### **Other changes:**
* On the full view the toolbar/header also changes as the "+ Create" button disappears and two new buttons will appear that will relate to the tabs and will behave as specified in this [Figma prototype](https://www.figma.com/proto/9Xx1gBIDG2MHsUmE4MjFV0/Sub-header-proposal?page-id=79%3A3707&node-id=82%3A3708&viewport=424%2C311%2C0.15&scaling=contain&starting-point-node-id=82%3A3708):
* Create child work package (icon needs to be redesigned and reviewed)
* Attach a file
* Watch work package (already existing but behaviour will change)
* There is a new breadcrumb that is specified in <mention class="mention" data-id="44142" data-type="work_package" data-text="#44142">#44142</mention>.
## **Generic visuals**
#### Full view:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/38533/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36964/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37079/content">
#### Split view:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37065/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37066/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37078/content">
#### Mobile:
## <img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37063/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37064/content">
##
##
## **Visuals for time specific cases**
#### Full view:
## <img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36960/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36959/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36958/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36957/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36956/content">
#### Split view:
## <img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37068/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37069/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37070/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37071/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/37072/content">
##
##
## **Visuals for time specific cases**
#### Set dates:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36950/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36949/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36948/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36947/content">
#### Set assignee:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36946/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36945/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36944/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36943/content">
#### Log time:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36942/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36941/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36940/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36939/content">
##
## Figma
[https://www.figma.com/file/9Xx1gBIDG2MHsUmE4MjFV0/?node-id=0%3A1](https://www.figma.com/file/9Xx1gBIDG2MHsUmE4MjFV0/?node-id=0%3A1)