Allow reducing / hiding the app header and footer

[GyulyVGC]

In order to take less unneeded space and let users focus on what really matters, Sniffnet should provide settings to allow reducing and / or hiding the app header and footer.

[dejang]

I'd like to try working on this. Been thinking a little bit about this task and I think there are multiple ways to go about it.

1. We could do it from settings, in the general tab we could add 2 options, "Minimal Header" and "Collapse Footer". When selecting minimal header we would still need to show the "Settings" button but we can show a smaller one in the top right corner. "Collapse Footer" would hide the footer completely.
2. We can add toggle buttons on footer and header to collapse them. These would be overlayed controls in the UI. This one is a bit trickier to do because of overlay in iced-rs but still doable. I'd say the best case scenario would be to have them overlayed but if not, some small buttons for expand/collapse in the existing containers would do.
3. We can add a menubar like in the image below. We'd move "Settings" and "Quit" in the "File" menu and everything from the footer in the "About" menu. This also opens the door to add more things to the menubar in the future. I already have a working version of a menubar built on iced-rs v0.14-dev, I could port it to v0.13.1. I made a quick mock about how this would look like.

The easiest would be the toggle buttons in the existing containers, the hardest would be the menu.

These are just a few options that crossed my mind while thinking about the problem but if you already have something in mind I'd be happy to go with that. Let me know and I could start working on this asap.

[GyulyVGC]

Hi @dejang thanks for your inputs and your availability to work on this.

I want to keep things really simple:

• the control for this feature will be just one single checkbox or toggler in general settings, which will both hide the footer and reduce the header at the same time
• the reduced header should be approximately as big as the current footer and will report the same buttons in reduced size, without using menus
• I don't particularly care about having an "about" section with the footer buttons, the only thing I'd like to move to the header (when footer is hidden) is the warning that appears to signal that a newer version is available

[dejang]

Seems pretty straightforward to do it, mind if I give it shot and spin up a PR within the next few days ?

[GyulyVGC]

Feel free to give it a try!

[dejang]

I managed to get a first iteration of this @GyulyVGC. I'd like to first get your input before I do a little more cleanup on it. I think I can improve the layout of the header to not have to use spacer widgets. One other thing I am not sure if you want is to display the version text with the update button or just the update button. Let me know what you think and we can iterate if this is at least in the ballpark of what you had in mind.

[dejang]

Also, the measurements I had to change are the following Original ones:

    header height: 70,
    header button icon size: 20,
    header button padding: 10,
    header button height: 40,
    header button width: 60,
    header logo size: 80,

And based on the 64% ratio between the header height and footer height this is what ended up being:

    header height: 45,
    header button icon size: 13,
    header button padding: 6,
    header button height: 26,
    header button width: 39,
    header logo size: 51,

[GyulyVGC]

Thanks, I'll take a look!