UX suggestion: install package/theme dialog


May I propose to slightly change the install package/theme dialog? I think the UI elements should be arranged in a left to right order in the order in which they are used. Today, we have a long search field on the left, and then a combined button “Packages/Themes” on the right. “Packages” is pre-selected.

If I want to search for a package, I can enter a search string and hit enter.
But if I want to search for a theme, I need to click the “Theme” button first.
Well, actually, I can also enter a search string, then click the “Theme” button.
But if I click the “Theme” button first, then no search is performed. If I enter a search string first, then click the “Theme” button, a search is performed upon clicking the button.
So I think maybe the right way to do it is to enter a search string, then click the right button (without hitting the enter key).
But if I try that (i.e. I invoke the install dialog, then enter a search string, then click the (pre-selected) “Package” button), then, well, it doesn’t work out right.

My proposal is to put the “Packages/Themes” button to the left of the search field.


I’d prefer the way it is right now, but you can put this in your styles.less:

.settings-view .packages .search-container {
  flex-direction: row-reverse;

Yeah… Flex is that awesome


I agree that this specific UI is a bit weird. The buttons are like tabs and buttons all rolled into one. It feels a bit forced, I don’t think switching the buttons over to the left solves that.


Yes. Maybe search could search both packages and themes, and the result list would allow focusing on one or the other.

One possible UI for the result list would be two tabs, with headings like “Packages (13)” and “Themes (2)”.