Work In Progress - Rearranging GUI for usability.

[AlbertoCasasOrtiz]

Hi @aymanhab. I am rearranging the GUI and this is what I have right now. I am trying to make it responsible so it looks good in phones, tablets and desktop.

Desktop:

Tablets:

Phones:

The only current GUI problem is with phones, where the slider does not fit with the buttons, so I have separated it into two different rows. Should I reduce the height of the viewer, so the two rows fit on phones?

Also, there is an issue with the animations only loading when the animation side bar is opened, I am working on it right now.

[netlify[bot]]

❌ Deploy Preview for comforting-speculoos-d9e100 failed.

Name	Link
🔨 Latest commit	9f5712b0db9a1c69e5f32c4771f9d53d7b2f2e5f
🔍 Latest deploy log	https://app.netlify.com/sites/comforting-speculoos-d9e100/deploys/65a195f66c604800087c84eb

[netlify[bot]]

❌ Deploy Preview for grand-clafoutis-85edb2 failed.

Name	Link
🔨 Latest commit	9f5712b0db9a1c69e5f32c4771f9d53d7b2f2e5f
🔍 Latest deploy log	https://app.netlify.com/sites/grand-clafoutis-85edb2/deploys/65a195f6af8d560008424bc0

[aymanhab]

@AlbertoCasasOrtiz Also wanted to mention regarding the animation sliders/GUI if you can, or let me know when done and I'll tackle:

1. Hide the speed controls likely rarely used for typically short animations and occupies space
2. Remove the frame number and replace it with time, may do something like youtube playback where we show next to the play button: a text that keeps updating e.g.1.5:4.5 to indicate time of 1.5 seconds of a 4.5 long animation time. What do you think?

[aymanhab]

Can you confirm that the animation button has been removed from the side bar? Thank you

[AlbertoCasasOrtiz]

Hi @aymanhab, the animation button is still in the sidebar because the animation selection combo box is still there. Should we move it to the bottom bar too?

[aymanhab]

Thanks @AlbertoCasasOrtiz I can't get the slider or combobox for animations activated even for the builtin .trc files on open, am I doing something wrong here? It gets activated only after I open/close the side panel, is this expected? Here's a link to the deployed branch just in case: https://rearrange-gui.d7iaa9a9lxtm6.amplifyapp.com/

Otherwise looks great. Thanks

[AlbertoCasasOrtiz]

@aymanhab I just solved this. Looks like the animations array was not declared as observable, so every useEffect depending on it was not being triggered when it was changed.

[aymanhab]

I'll approve and merge into dev for use in demo, we can address the size issue later #145