Content
View differences
Updated by Wieland Lindenthal over 1 year ago
#### **Context**
As part of our on-going work on Primer-ising OpenProject, this feature aims to Primerise the _Activity_ tab in work packages behind a feature flag, to lay the groundwork for further integration with Open points.
#### Goals
We aim at multiple improvements at the same time:
* Advanced UI patterns: Adopt Primer's timeline style, that we are familiar with from GitHub PRs.
* Adopt known UX pattern: Behave more often like a chat.
* Make the input field for comments more prominently, always visible, at least for desktop screen sizes
* By default order the timeline from old to new, making the newest message visible by default just above the message input field
* Show new comments automatically without reloads by polling frequently for new comments
#### **Acceptance criteria**
* **Primer:** Use Primer components to rebuild the current Activity tab (in the right split screen of Work package details view)
* **Current elements** must be present:
* Meta information:
* User name
* Date/time
* #id
* Notification badge (if present)
* More icon with existing actions
* Comment text
* Change list list
* Reply/Quote button that functions as it does today
* ~~\[open\] Emoji button?~~
* **New comment box:**
* On desktop/split screen:
* The comment box will be a fixed element anchored to the bottom of the split screen area (regardless of sort order of activity)
* When a new comment is posted, the activity tab will scroll to display the new comment (on top or at the bottom, depending on user preferences)
* On mobile:
* The comment box will not be a fixed element; it will function as it does today: it will be positioned either on top after the tab bar (when sort order is newest on top) or at the bottom after all activity (when sort order is newest at bottom).
* The comment box will, at its base state, be a single line text-area.
* On focus, this will expand to multi-line with an CKEditor editor toolbar.
* The comment box will expand to a max-height, after which it will be scrollable.
* For the fixed version: max-height will be 30% of the available total height.
* When focusing out (on blur),
* If the field is empty: it goes back to its initial empty one-line state
* If the field has text: it will reduce in size to a max of 4-lines (or less if content is less)
* **Filtering** with these options:
* Show everything
* Show changes only
* Show comments only
* **Ordering** (move it here instead of hiding it in a separate settings page):
* Newest on top
* Newest at the bottom Oldest on top (new default), on page load scrolled to bottom, so that newest are visible directly.
* _Additional specifications to be defined_
#### Related/parallel features
* ###40437
* Activities displayed in a GitHub-style timeline (feature to be defined), with separation of comments and activities/changes
#### **Out of scope**
* Primerisation of other elements of the page, including:
* The tab bar itself
* Other tabs (such as Files, Relations, Watchers)
* Threads (the ability to start a new thread with a reply to individual comments): ###54709
* Open points: ###49578
**Figma prototype**
[https://www.figma.com/file/Lb7ao364ppIiPxp9ptSXkM/Primerised-Activity-Panel?type=design&node-id=0-1&mode=design](https://www.figma.com/design/Lb7ao364ppIiPxp9ptSXkM/Threads?node-id=0-1)
As part of our on-going work on Primer-ising OpenProject, this feature aims to Primerise the _Activity_ tab in work packages behind a feature flag, to lay the groundwork for further integration with Open points.
#### Goals
We aim at multiple improvements at the same time:
* Advanced UI patterns: Adopt Primer's timeline style, that we are familiar with from GitHub PRs.
* Adopt known UX pattern: Behave more often like a chat.
* Make the input field for comments more prominently, always visible, at least for desktop screen sizes
* By default order the timeline from old to new, making the newest message visible by default just above the message input field
* Show new comments automatically without reloads by polling frequently for new comments
#### **Acceptance criteria**
* **Primer:** Use Primer components to rebuild the current Activity tab (in the right split screen of Work package details view)
* **Current elements** must be present:
* Meta information:
* User name
* Date/time
* #id
* Notification badge (if present)
* More icon with existing actions
* Comment text
* Change list
* Reply/Quote button that functions as it does today
* ~~\[open\] Emoji button?~~
* **New comment box:**
* On desktop/split screen:
* The comment box will be a fixed element anchored to the bottom of the split screen area (regardless of sort order of activity)
* When a new comment is posted, the activity tab will scroll to display the new comment (on top or at the bottom, depending on user preferences)
* On mobile:
* The comment box will not be a fixed element; it will function as it does today: it will be positioned either on top after the tab bar (when sort order is newest on top) or at the bottom after all activity (when sort order is newest at bottom).
* The comment box will, at its base state, be a single line text-area.
* On focus, this will expand to multi-line with an CKEditor editor toolbar.
* The comment box will expand to a max-height, after which it will be scrollable.
* For the fixed version: max-height will be 30% of the available total height.
* When focusing out (on blur),
* If the field is empty: it goes back to its initial empty one-line state
* If the field has text: it will reduce in size to a max of 4-lines (or less if content is less)
* **Filtering** with these options:
* Show everything
* Show changes only
* Show comments only
* **Ordering** (move it here instead of hiding it in a separate settings page):
* Newest on top
* Newest at the bottom
* _Additional specifications to be defined_
#### Related/parallel features
* ###40437
* Activities displayed in a GitHub-style timeline (feature to be defined), with separation of comments and activities/changes
#### **Out of scope**
* Primerisation of other elements of the page, including:
* The tab bar itself
* Other tabs (such as Files, Relations, Watchers)
* Threads (the ability to start a new thread with a reply to individual comments): ###54709
* Open points: ###49578
**Figma prototype**
[https://www.figma.com/file/Lb7ao364ppIiPxp9ptSXkM/Primerised-Activity-Panel?type=design&node-id=0-1&mode=design](https://www.figma.com/design/Lb7ao364ppIiPxp9ptSXkM/Threads?node-id=0-1)