Expand/collapse the issue board backlog and closed lists

Resources

FE @annabeldunstone

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 the Add issues modal.
  • Note that all lists (including both the Backlog and Closed 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:

ce_28312__issue-board-show-hide-backlog-closed-lists

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 ce_28312__issue-board-show-hide-backlog-closed-lists ce_28312__issue-board-show-hide-backlog-closed-lists--backlog-hover

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
issue-board-hide-backlog-closed ce_28312__issue-board-show-hide-backlog-closed-lists--closed-collapsed ce_28312__issue-board-show-hide-backlog-closed-lists--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
2017-05-05_10.16.49 2017-05-05_10.36.44

This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.

Edited by 🤖 GitLab Bot 🤖