1045618 - Repo menu: The "repos" panel should use all the space available

Status: RESOLVED FIXED

(Tree Management :: Treeherder, defect, P2)

Description

[:Paolo Amadini]

The "repos" panel often needs scrolling to find the repository you are looking for, but at the same time it overlaps with the interface, meaning that it should be closed anyways before continuing. It might as well use all the space available and require no scrolling.

Additionally, the checkboxes should be replaced with "plus" buttons after each name, since the removal is handled by the X buttons in the toolbar itself, and I don't need to use the checkboxes to see which repositories I've selected because I already see them in the toolbar.

Comment 2

[William Lachance (:wlach)]

Hey Ed, what do you think of using a large bootstrap modal for the repos? We'd get a lot of nice behavior (clicking outside the modal dismisses it, etc) that way for free.

http://getbootstrap.com/javascript/#modals

Comment 3

[:Paolo Amadini]

(In reply to William Lachance (:wlach) from comment #2)
> clicking outside the modal dismisses it

I don't know about the technology, it might be actually be a good idea as far as I can tell, but I would say that clicking outside the popup to close it is not the user interface I would design, as it's not discoverable, but more importantly works differently than other panels in the same application. I think the current method of toggling the panel works well.

Comment 4

[William Lachance (:wlach)]

(In reply to :Paolo Amadini from comment #3)
> (In reply to William Lachance (:wlach) from comment #2)
> > clicking outside the modal dismisses it
> 
> I don't know about the technology, it might be actually be a good idea as
> far as I can tell, but I would say that clicking outside the popup to close
> it is not the user interface I would design, as it's not discoverable, but
> more importantly works differently than other panels in the same
> application. I think the current method of toggling the panel works well.

There's also an "X" on the modal to dismiss. Agreed that this would be different from the other panels (actually if we used this it would no longer really be a panel), but then again the repos panel has pretty different behaviour than the other panels (which are designed to filter stuff inside the current view).

Comment 5

[Ed Morley [:emorley]]

I'm not sure. Thinking about this some more I'm not sure if making modal is the right way to go. I've explained the common workflows a bit more in bug 1053985 comment 2 (added to that bug, since that's the overall UX bug) - with some thoughts.

Comment 6

[William Lachance (:wlach)]

Attachment: repo-modal.png

Hey Ed, so now that we're back to using the checkboxes, I still think a modal is the way to go here, I think the way they work (easy to dismiss by clicking on X or outside) works well for the use cases you describe in bug 1053985 comment 2. I knocked up a prototype today, here's a screenshot... let me know what you think?

Comment 7

[Ed Morley [:emorley]]

I'll ask the other sheriffs what they think today :-)

Comment 8

[Ed Morley [:emorley]]

Comment on attachment 8485255 [details]
repo-modal.png

So this is a definite improvement over what we have already - though talking things through here, one of the main issues we identified for usability of the current repos menu that is still present with this mockup, is the fact that having multiple columns for each group makes it very hard to quickly find a desired repo. ie: it's hard to tell at first glance whether it's sorted alphabetically left-to-right then up-and-down, or vice versa.

To avoid this, we were wondering whether it would be best to display each group as a single vertical column, with each group next to each other.

ie:

[development]    |  [release-stabilization]  | [foo]
mozilla-central  |  mozilla-aurora           | foo-repo
mozilla-inbound  |  mozilla-aurora>          | bar-repo

Comment 9

[William Lachance (:wlach)]

(In reply to Ed Morley (At work week 6th-13th Sept) [:edmorley] from comment #8)
> Comment on attachment 8485255 [details]
> repo-modal.png
> 
> So this is a definite improvement over what we have already - though talking
> things through here, one of the main issues we identified for usability of
> the current repos menu that is still present with this mockup, is the fact
> that having multiple columns for each group makes it very hard to quickly
> find a desired repo. ie: it's hard to tell at first glance whether it's
> sorted alphabetically left-to-right then up-and-down, or vice versa.
> 
> To avoid this, we were wondering whether it would be best to display each
> group as a single vertical column, with each group next to each other.
> 
> ie:
> 
> [development]    |  [release-stabilization]  | [foo]
> mozilla-central  |  mozilla-aurora           | foo-repo
> mozilla-inbound  |  mozilla-aurora>          | bar-repo

Definitely worth a try. We could do this with a table, most likely:

http://getbootstrap.com/css/#tables

Comment 10

[Cameron Dawson [:camd]]

this is just a drop-down menu now.
https://github.com/mozilla/treeherder-ui/commit/1ac87534a44c7ff5e8ae000752cb878800e9b272