Update Layer panel icon components for better comprehension

[LuniMoon]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the bug

Based on TheQuirkyGamer feature request on the forum

The user reports that it is hard to distinguish which are the locked or unlocked instances on the instance list. Specially when the list is long.

Suggested solution:

Update the layer panel with an updated icon button. Look for the specifications on the file "Components" and search for "Clickable-Icon"

This design should allow the eye to make a distinction between default state (Placeholder in the Component) and Active (Enabled)

Steps to reproduce

Long list of objects in the instance panel

GDevelop platform

Desktop, Web, Mobile

GDevelop version

5.4.204

Platform info

*OS (e.g. Windows, Linux, macOS, Android, iOS)* > *OS Version (e.g. Windows 10, macOS 10.15)* > *Browser(For Web) (e.g. Chrome, Firefox, Safari)* > *Device(For Mobile) (e.g. iPhone 12, Samsung Galaxy S21)* >

Additional context

No response

[tristanbob]

How about placing the controls to the left of the object name?

[LuniMoon]

I've placed them on the right so it's easier to reach with the thumb on mobile (plus it follows upcoming UI patterns with the action buttons to the right... like the Project Manager for example).

[jack-ii]

Good mockup :) But this is the Instances List Panel, not the Layer Panel Hide/Show is not yet available for objects in the editor 1 of 6 titles as an icon doesn't fit so well, especially because the panel and column are much wider in reality than on the image

Instances List Panel: Angle Properties Panel: Rotation I think "Angle" would be correct so that it fits the events

[LuniMoon]

Update:

• The typo on the original issue was corrected. Now it says "instance list" instead of "layers list".
• Note on hide/show: this is an equivalence on the Figma file "Editor Panels" -> Sandbox Layers. That's the main reason why this mockup has hide/show icons but we do not need to add them on the first iteration of the instance list panel.
• Regarding icons as titles: we keep the 'layers" icon, and we'll replace "Angle" with its icon
• As for the icon for angle... we used "icon/Angle" (see Icon file on Figma) in the 1st design, but we later changed it to the "Rotate Z" icon to align it with the 3D icon set... probably we'll have to change the tooltip title on the instance list panel to "Rotation (Z)" and use its icon.