Expand/collapse the issue board backlog and closed lists
Resources
Description
- Currently the issue board does not have a
Backlog
list. - Currently the issue board does have a
Closed
list. - There are many different use cases (e.g. Kanban, large projects, small projects, etc.) where it would be useful to show/hide these two lists independently.
- Per board, customize expanding / collapsing the backlog and closed lists, independently.
- The
Backlog
list is the first list. - The
Closed
list is the last list. - When you first visit / create a board, both of these lists are expanded.
- You can toggle expanding / collapsing the lists independently of each other.
- If you expand / collapse one of these two lists, the setting is saved in browser storage, so that you see the same thing next time you come back to the same board. (Not persisted to the BE. Just on the FE.) So it is customized to each user per browser (as long as they don't refresh their browser storage.
- The
Closed
list already exists, and so the logic of which issues display in that list should not be changed. - The
Backlog
list was originally in the issue board when it the issue board was first released. The logic on what should appear in that list should be the same as before it was removed. (So the same logic can be simply re-used before.) - Specifically, the issues that should appear in the
Backlog
fulfill:- Is an issue of this project
- AND is open
- AND does not have a label that corresponds with a list that is already on the board.
- As a check, the same issues that appear in the
Backlog
list are the ones that appear when you click theAdd issues
modal. - Note that all lists (including both the
Backlog
andClosed
lists) respect the search filter bar in real-time. When you enter filters in the search filter bar, issues are filtered out automatically.
Design
We add a caret to the Backlog and Closed lists to indicate that they are expanded and can be collapsed:
When hovering over the Backlog or Closed lists, the header darkens to #f5f5f5
to indicate that any part of it can be clicked to collapse the list. Exactly the same thing for the reverse. When you hover over the collapsed list vertical bar, it becomes #f5f5f5
.
Resting | Hover | |
---|---|---|
Expanded | ![]() |
![]() |
When the lists are collapsed, they become thin 'headers', where the title is rotated and a caret shows that they can be expanded. They also stick to each side of the screen so they stay out of the way as much as possible:
Backlog collapsed | Closed list collapsed | Both collapsed |
---|---|---|
![]() |
![]() |
![]() |
If possible, the transitions between expanded and collapsed states should be animated. This includes fading in/out some elements and changing the x
position of others. The animation properties for all those changes are:
- Duration:
300 ms
- Curve:
Ease In-Out
Backlog | Closed list |
---|---|
![]() |
![]() |