Define a basic UI

[jmolivas]

@antillas21 sent me an image after a conversation we have about the project.

As you can see the idea is to have the registered sites (aka site aliases) on the left side-bar and to have the DrupalConsole functionality (available command features) grouped by namespace.

[greg-1-anderson]

Don't make the hit box too small on those triangles. It can be very tedious to navigate in several levels. If the hit box fills the whole line, then it's much faster and easier to use. See http://drushcommands.com for an example.

[jmolivas]

👍 on the UI of http://drushcommands.com we can for sure get some inspiration from that:

[cosmicdreams]

I can see how this UI makes sense from a system-design perspective. You want to be able to list all the things Drupal Console can do. But I feel that we should ask the following questions:

What commands will a user who comes to this Web-based UI want to do? What commands don't make sense to show this user? What things is that user trying to get accomplished?

I think that we will eventually need to modify this design to suit the things the user wants to get done.

[willwh]

I think it makes the most sense to provide a list of commands, and have a way to tag them to a site, or all sites, so when you are viewing one of your sites, the commands in the header are only the ones you've sticked, with maybe a [more] button to show the whole list..

[antillas21]

yeah, mockup is merely a starting point to discuss what can work best for
this particular project.

DrupalConsole provides a lot of commands, and like mentioned in a previous
comment, most used, most popular or the features that provide the most bang
for a user's buck should come first in the UI... but still find a way to
expose all the features you have access to through the console.
On Mar 22, 2016 1:36 PM, "William Hetherington" notifications@github.com
wrote:

I think it makes the most sense to provide a list of commands, and have a
way to tag them to a site, or all sites, so when you are viewing one of
your sites, the commands in the header are only the ones you've sticked,
with maybe a [more] button to show the whole list..

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#5 (comment)

[jmolivas]

We can probably:

• Define a set of commands shown as default
• Allow user to customize those commands on a preference/config page.
• Based on user interaction with a site we can add more commands to that list.

We should allow the user to search for all of the available commands.

[jmevalentin]

It's impossible to know which commands will no be used, so you want to include all commands, essentially laid out like the TOC in the user's manual, that way the user can rely on that as a guide. Also, I would like to have the ability to enter in commands directly into a box, so if possible, as user's click options, the complete command, with all options selected, should display in a box that the user can then edit prior to execution.

[jmolivas]

We can provide the search capabilities of drushcommands.com as well to search for commands.

[jmolivas]

As a note, the commands can vary depending on the site.

If a site contains a module with custom commands those commands should be added to the list on that site only.

[antillas21]

Ok, I've been thinking if anything like this could work, feel free to comment on the following mockups.

Walk-through

Start by selecting a site from the list of registered sites to interact with (left side).
Then, at the empty main container (right side), where you have a search-like input to filter all available commands the DrupalConsole provides, then you can either:

• click the View all commands link and open up a modal window listing them all (alphabetically), selecting any of the commands will
  • close the modal and populate sections below (Selected command and Output) with the corresponding form controls to interact with that command
• start typing a command name (or a part of it) in the search-like box and begin filtering based on partial matches, selecting any of the suggested commands from the autocomplete-like list will
  • close the list and populate sections below (Selected command and Output) with the corresponding form controls to interact with that command

What do you think? could something like this work?

Again, this is just a starting point, trying to find out what could be the 80/20 interface here :)

[jmolivas]

@antillas21 👍

Then, at the empty main container (right side)

I like this idea better than having multiple tabs on the right side.

Start typing a command name

Like this approach, unfortunately, the user won't be able to see the full list, but still can click the View all commands link.

[antillas21]

yeah, that's the point. I'm thinking that maybe newbie users will rely on the View all commands link while getting started to using the DrupalConsole as a whole, and intermediate/advanced users will rely more on the search field to quickly jump to the command they'd like to execute.