Support adding of components

[fernandojsg]

Following up with the Add component (+) icon proposed by @feiss in https://github.com/aframevr/aframe-inspector/issues/316 I would like to hear some opinions about how to deal with it.

Right now we've just a combobox that is populated with the core's components and the third party components loaded from https://github.com/aframevr/aframe-components.

For the third party components we've a mockup of how to deal with them, in a similar way as unity's store where users can browse them: I like this kind of dialog to promote components discovery by the users, they could check around, search for a custom component, visit its website to see more examples, see a screenshot, etc... But I don't believe it's handy to keep opening this dialog every time that the user clicks Add component.

I like the way Unity handles this. When you click Add component there you get a dialog with a searchbox focused by default and the list of available components:

We could have a similar behaviour as Unity:

1. Showing the list of available components (core and loaded thirdparty components) with a searchbox and a button to launch the "components store" to include new components on the scene (they'll be available also on the list of available components).
2. The same as before but all the third party components will be available in the components list. You could enter the components dialogs just to take a look at the extra info.

[feiss]

I like the first option, showing a dropdown list with a searchbox, and a link to the store

[feiss]

'Store' is a term I dislike if all components will be for free (if not, it's fine), btw.

[fernandojsg]

Yep, I used store just to get the idea of Asset store from unity but won't be that the name in the UI. Ok, so I'll try to mockup it on the inspector.

[fernandojsg]

A WIP: If we're going to switch to the "3dsmax style" to show the components we'll just select the new component on the list and show its properties so the users will have some feedback. With the current UI we should probably add some animation or text Component "Sound" Added as the user may cannot see the new component added to the bottom of the list.

[fernandojsg]

That list is populated with the core components, we need some icon to put next to that list to go to the components "store" to add new components to the scene.

[dmarcos]

I think there should be just one list. Combining core and the store. Many of the today's core component will move to the store.

[dmarcos]

It seems that you type a name and then enter and the component gets added to the entity? Should we have the add action as a separate button to prevent user errors?

[fernandojsg]

@dmarcos so in which case are we going to show the component store with the description, url, screenshots and so on? Regarding the add button, I always tend to prefer the fast action, in Unity it works like that and I believe people already got used of that. If you make a mistake you can delete the component and nothing happens.

[feiss]

it's a yes for me!

[dmarcos]

A usable UI first prevents errors and then offers a convenient way to recover from those errors if they can happen. The latter should be introduced when you guarantee the former.

[fernandojsg]

I've created a new issue as this is already working with the registry + autocomplete combobox for adding components, but the dialog for the registry it's a completely different conversation https://github.com/aframevr/aframe-inspector/issues/430