Added icons and remove context menu on the components bar. Fixes #10

[fernandojsg]

• Removed the three dots and the contextmenu on the component's name and replace them by icons (Style and image to-be-defined)
• Added confirmation while trying to remove or reset a component.

[dmarcos]

Where is the icon to copy the component to clipboard going to be?

[fernandojsg]

@dmarcos next to the current icons, in the same row

[dmarcos]

Are we adding the icon on a different PR or should be part of this one?

[fernandojsg]

Not yet, the icons will be something like the one used on the Copy to clipboard for entity (#188) and it will be added in another PR, not to mix different issues in the same PR (delete dots -> icons, and copy to clipboard)

[dmarcos]

Can we try labels instead of icons as @cvan suggested? It might not be too bad.

[fernandojsg]

My idea is, as they all looks the same style, review the functionality and the placement and if we're good to go merge them and create another issue with "Style the component's icons"

[fernandojsg]

do you mean label when mouseOver or label all the time?

[dmarcos]

Label all the time: copy, reset, remove instead of the icon.

[dmarcos]

We can add a subtle background to indicate it's a button

[fernandojsg]

You mean something like this right?

(From #10)

[fernandojsg]

I'm afraid that showing the labels all the time won't fit in some situations, like when we've multiple components:

[dmarcos]

When having multiple components we can show the id in the panel like the html element (<a-entity>) in the common section

[fernandojsg]

But could be nice to see them when everything is collapsed

[dmarcos]

What about always showing the attribute name as it is. Only SOUND__2 instead of SOUND (SOUND__2) ?

[fernandojsg]

We had already an issue on the previous repo but I deleted when I changed the repos, I've created a new one to discuss it again -> #190

[ngokevin]

Use text-overflow: ellipsis + max-width up until the start of the icons so they don't clash. Then use title so they can see the full name on hover.

SOMESUPERLONGCOMPONENT__TRUNC... icon1 icon2

[fernandojsg]

@ngokevin ok thank you! And what do you think about the icons + tooltip/label? #10

[ngokevin]

The current state is great. Only problems:

• Tooltip takes too long to display on Chrome after hover. We can't really change that except by using a custom solution.
• Eraser icon might not be immediately clear what it does. The alert modal does help. Personally, I don't think we need Reset to Default and would remove it (Trashing + Re-add would do it too). But if we keep it, we'll have telemetry to see how often it is used.

Addressing those two might not be in context of this PR.

[dmarcos]

What about using labels instead of icons? text labels with a background + underline to convey clickability ( remove, delete )

[ngokevin]

That sounds good, it would solve both issues.

[fernandojsg]

Something like this?

I also start to believe that the clear button probably won't be used so much, so we could remove it and just add it in the future if someone asks for it. Or just leave it on the edit menu, just in case :)

[ngokevin]

That looks good. Maybe lowercase copy html too.

[fernandojsg]

I've removed the reset to default button and the copy html because it was just to show the mockup and I'll open another PR with that functionality.

[ngokevin]

single quotes

[ngokevin]

remove component is more consistent to the API than delete. Former means to detach from the entity, latter almost sounds like to permanently delete.

r+wc love it

[fernandojsg]

@ngokevin both changes done! thank you