Fix(GUI): Redesign and fix parts of the gui to be more responsive

[simonsasse]

Closes #235

TODO

Diff view:

• Fix save single image offset (Not perfectly fixed..)
• Move buttons ins app bar from right to left (except help button)
• Fix size of video frames (4:3 format looks weird)
• Center frame titles above the frames
• Move frame titles and buttons closer to frames
• Reduce fullscreen button size (keep padding of icons in mind)
• Center timelines horizontally in window
• Refactor statistical informations - create info icon with title and tooltip (showing infos at hover) - position above the leftmost frame number (above the overview timeline)

Fullscreen view

• Fix size of frame to be actually full screen
• Fix size of buttons to be same size as in diff screen

Settings view:

• Remove back button and implement app bar in settings view - move title to app bar
• Reduce size of buttons (mask not whole width)
• More tooltip offset (settings)

Select view:

• Fix filepath - bigger font size and earlier replacement with dots

General:

• Center titles horizontally in app bar (all screens)

Remarks from Anton:

Diff Screen

• the full screen buttons scale too much, there should be a maximum size
• the icon in the full screen buttons should scale linearly with button size. currently, there is a padding messing with that. It would be nice, if the proportions of the button and the icon always stay the same
• The Difference Screen headline in the topbar overlaps with the buttons on the left, if the window's width is low enough
• Save image as png does not pop up where the mouse was clicked (Well not really fixed)

Settings screen

• I'd suggest putting the save settings button either in the bottom right or int the top bar on the right. Would be more streamlined with other programs' UI

Changes for other PRs

• Maskpath button not centered (but I guess we'll fix that with the merge of delete mask button #255)
• Back buttons should ask for confirmation if data would be lost (can be done in a separate PR though)

[simonsasse]

Merge conflicts resolved.

[simonsasse]

Rebased 😓

[simonsasse]

This should be reviewed by 2-3 people before being merged !!

[akriese]

Great changes :)

Couple things, I noticed:
--- Edit from Luis: Moved remarks into PR description ---

[zino212]

@akriese: For now I decided to just move the save button into the right corner.

Moving it into the appbar brings possible problems it, because the differentiation between saving and just going back would have to be made very clear. I don't know if positioning the button on the left next to the back button would be better or positioning it to the right. On the left the user would probably be more likely to see it than on the right but maybe it being so close to the back button would also be problematic.

In less words: The button being in the lower right corner is in my opinion for now the solution with the least problems. :)

[zino212]

The scaling of the full screen button seems to be a bit tricky. I set a maximum size for the vertical size for now. The horizontal size is responsive to the overall window size and therefore can not be set this way.
It would probably need a bigger refactoring to set that.

Additionally, I have no real clue on how to set a minimum size for the icons or how to make them scale linear with the buttons. I tried several things which didn't work out. Maybe @simonsasse has some ideas?
Regarding the overlapping title my ideas didn't work out as well. The borders of the different areas of the appbar seem to be kind of messed up. When scaling the window down, the title seems to notice the navigation area, but far to late. The save image button seems to be placed out of the regular navigations button area and therefore the title overlaps.

[simonsasse]

OKaaaay.
I made the appBar responsive to an extend. very narrow windows still overlap. But I think for what's relevant, it's fine now. Buttons get collapsed into a dropdown menu.

I changed the fullscreen button to be a plain IconButton. Looks cleaner and does not scale ugly.

I centered the download dropdown on the image. I am sure, it is possible to get the exact location and place it there but maybe that's not the most relevant thing for now.

[akriese]

All in all, this LGTM. Let's wait for at least one more positive review though :)