Move device properties to side panel instead of pop-up

[lohnn]

Adding interactive side panel device info settings would make it possible for users to quickly try out different device settings.

My idea is something akin to this:

If you agree that this is a good idea, you can assign me as I'm taking a stab at this 👍

[erickzanardo]

Hey 🖖

I am not sure I fully understand, is there any more differences other than just changing the modal to a side panel?

[lohnn]

Well, some small GUI tweaks to tailor it to side panel of course. I'd propose moving the device orientation and "show device frame" buttons to the side panel to keep them with the device settings.
But mainly making it updating the device settings in real time as you update the values in the side panel. Like sliding the text scale factor updates the text in real time in the preview. Like such:

Screen.Recording.2022-11-19.at.16.11.43.mov

[erickzanardo]

I like the idea, the only addition that I would suggest is to add a checkbox with the label use custom device, that would be unchecked by default.

Once it is checked, then the custom device fields would appear, wdyt?

[lohnn]

Love it! Just the piece of UX puzzle I was looking for to make it more understandable. I'll continue on the code for this and make it a PR in a few days when I have time again, a bit choked as of now.

[lohnn]

Finally had some time to spare. How would this be as a first version?

Screen.Recording.2022-12-09.at.13.48.16.mov

[erickzanardo]

That LGTM! Awesome

[lohnn]

Then I'll make sure the tests are running properly and make a PR :)

[lohnn]

Then there is a PR to look at ;) #98

[erickzanardo]

Solved by #98 released on 0.1.12