Fixes #56 Copy entity HTML to clipboard

[fernandojsg]

Added copy to clipboard icon on the entity panel. It will copy the HTML for the current component and its children.

Icons and style to-be-defined to match the same style for the component's icons (https://github.com/aframevr/aframe-editor/issues/10)

[dmarcos]

If the copy icon is on common it seems that you're going to only copy the common section

[dmarcos]

The icon / label should be better placed on the entity on the scenegraph

[ngokevin]

Advantage on the component panel is to keep the entity copy action in the same place as component copy action. As well as separating management of scene structure (scene graph) from scene data (components panel).

But I agree the current placement makes it seem like you can only copy the common components.

[ngokevin]

Code looks good. Just need to address the UX.

• Current icon placement looks like it applies for common components.

Possible solutions:

• Add text label to the icon. Possibly renaming the Common panel to the Entity panel might help as well.
• Move function to scene graph - I don't quite like this as it mixes scene structure with entity data.

[dmarcos]

Renaming common to entity is misleading. All the components below belong to the entity as well. A third solution:

We could make the attributes panel title (and maybe rename to entity) larger to accommodate the copy button. That would break the consistency though with the scenegraph title.

[dmarcos]

As a side note. I think we still need to visually differentiate the commons section from the rest of the components. Commons looks like any other component

[dmarcos]

A fourth solution: We can put the copy button next to the <a-entity> label

[ngokevin]

Third solution addendum, we can make both headers bigger. They do look sort of cramped anyways.

[fernandojsg]

I like the third solution too, I'll make a mockup and we could discuss about it.

[fernandojsg]

What do you think about something like this (Adding the copy to clipboard icon as the third proposed solution by @dmarcos)? I was thinking that probably we could remove the <a-entity> from common and put it in the panel title, so instead of having, like in the screenshot, entitywe could have <a-entity>, <a-box>, <a-entity #box>...

[dmarcos]

The top padding / margin of the titles looks too dark in comparison with the lines that separate the component titles. They should be consistent.

[fernandojsg]

@dmarcos I just fixed that, although the menu bar will be remove in the next PR :D

[fernandojsg]

Updated with the last changes regarding the top menu. I've moved the <a-entity> attribute from Common to the title of the sidebar.

[fernandojsg]

@dmarcos @ngokevin what do you think about the new style? ^

[dmarcos]

Maybe the question mark for the docs is too big. We sould make it match the line height of the component title

[dmarcos]

Should we make <a-entity> title larger and increase the contrast? We probably need to emphasize that it's the title for the whole components panel

[fernandojsg]

@dmarcos yep, I'll decrease the size of the icon for help. Re the title, I've made it white and a little bigger, something like this you mean?

[fernandojsg]

Maybe a different color of the title background to make a bigger contrast?

[fernandojsg]

@dmarcos @ngokevin what do you think about adding this functionality as is and then we could create another PR just for style the icons and sidebar title style?

[ngokevin]

I get: <a-entity id="greenBox" geometry="primitive: box" material="color: #0f0" position="4 2 4" rotation="" scale="" visible=""></a-entity>

Should we trim the null values for default components?

[ngokevin]

r+wc adjusting style in another PR sounds good.

[fernandojsg]

@ngokevin do you mean converting this

<a-entity id="greenBox" geometry="primitive: box" material="color: #0f0" position="4 2 4" rotation="" scale="" visible=""></a-entity>

into

<a-entity id="greenBox" geometry="primitive: box" material="color: #0f0" position="4 2 4" rotation scale visible></a-entity>

or directly removing them as they're already default components included in any entity?

<a-entity id="greenBox" geometry="primitive: box" material="color: #0f0" position="4 2 4"></a-entity>

[ngokevin]

I would polish it so it is ready to paste into people's code editors, meaning to remove superfluous stuff that don't matter like rotation="". So yeah, I'd say remove them.

[fernandojsg]

@ngokevin I've implemented removing the default attributes if they've default value, thanks for the idea. the result copy to the clipboard it's more clear now.