improve: sidebar ui on 3D mode #16
Description
Description
I've come up with a visual improvement that brings better UX when trying to add, remove or hide a 3D model from the scene. I'll go in detail between current implementation vs the concept.
Handling model addition to scene
Our current implementation uses a Dropdown + an Add Model button which brings slight friction when trying to add new models that are not the same as the one we just added.
In the new concept, I used a list with fixed size container + a search bar component, this allows us to immediately add any model directly by just pressing the add icon or search it easily, in case that product scales to the point where it needs a search bar (not a need for now)
Handling selection and deletion from the sidebar
Currently we only can delete a model from the sidebar, this being the selected model only, with no possibility to delete or hide another one from there.
In the concept, I got a bit inspired by the Blender UX with the scene collection, so it made sense to name it like that as well. From here we can see any model added to the scene, visually hide it or entirely remove it from a scene. We can also display its position within the floor plan region (x, y), or if desired to use spatial positioning (x, y, z) based on the scene. Alignment and distance between items isn't right so please forgive me there.
New "Export 3D" button
The colors I've used until this moment come from the favicon of the project, in case you want me to change it, please let me know
| Before | After |
|---|---|
 |
 |
Side-by-side comparison
| Before | After |
|---|---|
 |
 |