Full screen editing experience

[aabedraba]

At the moment Monokle limits me to the right tab section for editing.

I would love to be able to have a full screen "focus mode" experience for editing my files instead of the same real estate assigned to it:

[devcatalin]

@ayushgml this could be another issue to work on if you'd like

[ayushgml]

Yes i can work this issue too! Thanks @devcatalin!

[julioramosest]

@ayushgml expect some design for this tomorrow morning CET time. I had UI work for quickly expanding the editor in the IDE view - but needs some adjusting for the cluster mode.

[julioramosest]

Find UI design and UX notes here: https://www.figma.com/file/HOx9fsNedtkR2G0bCpHDX9/Resource-actions%2C-previewing-and-more?type=design&node-id=1052%3A9282&t=GRwoA81GZhm0O54t-1

additional note: panes width stickiness is important. When displaying back, user should find their panes as they had previously set up.

also related to https://github.com/kubeshop/monokle/issues/4034

[ayushgml]

Great design @julioramosest ! I will start working on it. Really excited!

[ayushgml]

Heyy @julioramosest ! I have a doubt. In the following line: "user should find their panes as they had previously set up." So this happens when the user resizes or when the user exits/enters full screen mode?

[julioramosest]

hey @ayushgml what I mean by that is that the system needs to have some "memory", in the sense that, when quitting full screen (aka left and middle panes folded), those left and middle panes go back to previous corresponding sizes the user had just prior to going full screen.

[ayushgml]

Understood! Thank you @julioramosest!

[ayushgml]

@devcatalin @olensmar The following video is the look till now:

https://github.com/kubeshop/monokle/assets/72748253/c7a9c1ab-0c75-4a9c-b9da-163c457d6460

I am able to set the maximum height( View height - Header of app - Header of Dashboard) of the Drawer which is child of TableView by including a margin-top: -65px in Tableview. Tableview has 2 children - Table and Drawer. So basically by shifting tableView up by 65px. I shifted both the Table and Drawer up by 65px. But due to the search bar hiding, I added a margin-top:65px to Table. Outcome of this the final position of table is unchanged and the Drawer is shifted up(which we want). Now I am working on styling the CSS to get exactly the desired look. I'm running into some issues but I will fix it.I will keep you guys updated @julioramosest I have included the "memory" that you previously mentioned.

[julioramosest]

@devcatalin not sure if this is out scope for this, but can we have the left pane scroll hidden unless focusing?