Content
View differences
Updated by Marc Alcobé almost 4 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.
* 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 indicates the project that the work package is set in and after it the option to set a parent for it (or the parent if already has one). Once the set parent is filled it might happen that the parent work package belongs to a different parent than the child (see specific visuals bellow for set parents flow and cases).
In case of accessing a work package from outside any project the blue box with "This work package belongs to project X. Open this work package in that project." will not appear anymore as you can see the project in the breadcrumb.
## **Generic visuals**
#### Full view:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36965/content"><img src="/api/v3/attachments/36965/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"> src="/api/v3/attachments/36964/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"> src="/api/v3/attachments/37066/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">
#### Set parent:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36930/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36935/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36936/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36937/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36938/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36990/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.
* 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 indicates the project that the work package is set in and after it the option to set a parent for it (or the parent if already has one). Once the set parent is filled it might happen that the parent work package belongs to a different parent than the child (see specific visuals bellow for set parents flow and cases).
In case of accessing a work package from outside any project the blue box with "This work package belongs to project X. Open this work package in that project." will not appear anymore as you can see the project in the breadcrumb.
## **Generic visuals**
#### Full view:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36965/content"><img
#### 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">
#### Set parent:
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36930/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36935/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36936/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36937/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36938/content"><img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/36990/content">
##
## Figma
[https://www.figma.com/file/9Xx1gBIDG2MHsUmE4MjFV0/?node-id=0%3A1](https://www.figma.com/file/9Xx1gBIDG2MHsUmE4MjFV0/?node-id=0%3A1)