Differentiate between registry and core components in Add Component selectbox

[fernandojsg]

We'll have three types of components:

• Core
• Registry
• Manually added to the html

We should find a way to differentiate them on the Add component select box, maybe different icon or color depending its origin?

[fernandojsg]

At least to show somehow (maybe color) that we're already using one component on the scene.

[feiss]

Maybe something like this? just the name of the origin on the right side. Check "collada-model-large" for an example of the case with a long name.

I would make components font color brighter (#a2a2a2) with a shadow of the same color as the selectbox background, so it covers better the origin word.

[fernandojsg]

I was thinking about it and I believe it's more useful to know if the component is already loaded or not. Let's say you've 3 components in the registry called physics-* (physics-body, physics-ammo-body, physica-cannon-body...) from different implementations. And you already loaded the physics-ammo library in your scene. If you want to add a physics body to an entity, you could write physics body in the autocomplete box and you'll see these three but the physica-ammo-body will have a brighter/different color so you could know that it's the one you're using, and just add it, instead of take a look and think which one you should use. We already have some components with similar names like text*. At the end the user shouldn't really care about where the component come from but if you're already using it or not and it will help to keep a cleaner UI

[feiss]

with a brighter color

However, I don't think this is really necessary (same with the origin of the component). It introduces some visual complexity that is not evident (why the brightness difference?), and does not provide such an important information (you can select another entity to check out what is the component you are using)

[dmarcos]

Eventually there might be multiple physics components: physics-XXX, physics-YYY and you want to apply the one you're already using in other entities in the scene. Going back to the other entities and look the name is a way to do that but could be error prone if the names of the components are similar. What about adding a small blue dot next to the component name in the list instead of the brightness diference?

[fernandojsg]

Yep, that was my point. I would go for something subtle like @dmarcos proposed, a little dot right aligned in the component probably could be enough informative and won't mess the UI

[fernandojsg]

Some wip:

What do you think? Better to have the bullet next to the component's name or aligned to the right? And what about the color? I'll add one hover description with something like Component already loaded in the scene

Yep, right now is aligned to the bottom of the line, but don't care about it, I'll fix later :)

[feiss]

What about this?

I think I prefer them aligned to the right, so they look less important

Active items in blue, white if item is selected Unactive items in #414141, #377291 if is selected