Filters ux improvements

[discorick]

Various tweaks and improvements to the filters panel:

• More compact filters
• Filter groups are now collapsible
• Filter groups now have active filters counts
• Collapsed/Uncollapsed is saved into localStorage

[dahlbyk]

While we're fiddling with filters, thoughts on this idea?

Under "Active members" is a reasonable place to expect the other assignment-based filters. We could move them up to a single line below the avatars: me • others • unassigned.

(Maybe format them button-ish instead of using a delimiter?)

As to the general change:

• :+1: for less vertical space.
• I feel like there's not enough left padding on the non-label filter links.
• Nor is there enough padding on the label group headers. Alternative here would be to drop the hover background color, which I think would be fine (with a cursor change instead).
• Not sure if it's worth making Cards expandable. What if the assignment proposal were applied here, merging three lines into one: Issues • Pull Requests?
• I'm feeling like expanded may be a better default, since that what folks are used to. Let's see what feedback we get on collapsibility before adjusting what's visible by default?

Other random (potential) scope creep:

• Can we push an event into Segment (and then on to GA) on expand or collapse? My hypothesis is that only Milestones is likely to be collapsed to show more labels; otherwise I doubt the toggle will be used.
• It seems like expanded/collapsed groups should persist between Tasks and Milestones. Currently switching back and forth resets all to collapsed every time.
• Maybe even push expand/collapse state into local storage to persist between sessions for the given repo?

[discorick]

👍 Moving up assignees closer to the avatar filters 👍 More work with the padding 👍 Expanded may be a better default - Given we also store collapsed/uncollapsed state in localstorage

👎 Segment. I mean, I would like to do it but we need to implement tracking on the ember-app first 😄

Not sure if it's worth making Cards expandable. What if the assignment proposal were applied here, merging three lines into one: Issues • Pull Requests?

It's probably outside the scope of this one. Need to roll a whole one-off component for card filters to make this possible, which touches query parameters etc.

[dahlbyk]

Not sure if it's worth making Cards expandable. What if the assignment proposal were applied here, merging three lines into one: Issues • Pull Requests?

It's probably outside the scope of this one. Need to roll a whole one-off component for card filters to make this possible, which touches query parameters etc.

Help me understand this. You mean we would need a component different from hb-filter to style them differently? Could we just make that filter accept a class (or apply a class to the list's parent) to apply a different layout?

Also, I just noticed the filter markup looks like:

<ul class="filters">
  <div class="filter-group">
    <h5 class="filter-header">Group</h5>
    <li class="filter">Uno</li>
    <li class="filter">Dos</li>
    ...
  </div>
  <div class="filter-group">...</div>
  ...
</ul>

Can we split the parent <ul> into a <ul> per group?

<div class="filter-group">
  <h5>Group</h5>
  <ul class="filters">
    <li class="filter">Uno</li>
    <li class="filter">Dos</li>
    ...
  </ul>
</div>
<div class="filter-group">...</div>
...

[discorick]

Can we split the parent <ul> into a <ul> per group?

Glad you said something, I was already thinking about the same thing!

[rauhryan]

Playing around with it I have two thoughts

1. I like the slimmed down padding and font-size 👍 we have done a great job of slimming the cards down the filters feel like a positive step
2. The behavior of the collapsed state doesn't feel right when there are active filters. There is nothing to let me know there are active filters other than our clear filters button in the toolbar. For example if I add a filter and then refresh the board, the default state is the filter groups are collapsed. The user needs to open each filter group to figure out which filters are active. It "feels" unfinished in a way

perhaps the collapsed state lists the active filters? perhaps we have some kinds of (1) <- number of active filters in the collapsed header?

[dahlbyk]

perhaps the collapsed state lists the active filters?

:+1:

[discorick]

The behavior of the collapsed state doesn't feel right when there are active filters. There is nothing to let me know there are active filters other than our clear filters button in the toolbar. For example if I add a filter and then refresh the board, the default state is the filter groups are collapsed. The user needs to open each filter group to figure out which filters are active. It "feels" unfinished in a way

👍 , Just pushed active filter counts for each group

Maybe even push expand/collapse state into local storage to persist between sessions for the given repo?

Done and done!

[dahlbyk]

:tada: :exclamation: