Layout rework

[MichaelBuessemeyer]

This PR is about the planned UI Rework using the new layout library FlexLayout. The new layout should match all the points mentioned in issue #5230.
Additionally to the new layout, this already includes a placeholder for the footer. This is necessary to have the buttons in the footer and so that these buttons are able to interact with the flexlayout to toggle the sidebars.

But I think integration with the other footer PR shouldn't be that difficult :).

TODOs:

• The TODO list below
• Find a better Icon for the border toggle buttons.

URL of deployed dev instance (used for testing):

• https://layoutrework.webknossos.xyz

Steps to test:

• see below

Issues:

• fixes Rework core layout (using sidebars) #5230

---

• Updated (unreleased) changelog
• [ ] Updated (unreleased) migration guide if applicable
• [ ] Updated documentation if applicable
• [ ] Adapted wk-connect if datastore API changes
• [ ] Needs datastore update after deployment
• Ready for review

[MichaelBuessemeyer]

Open TODOs:
Testing hints are in the sub-item of a TODO item.

• "."-keyboard shortcut to maximize the active viewport.
  • Test: Activate a core tab by clicking into a viewport. Then use "." to toggle maximize for that tab.
• keep sidebar opened status consistent between layouts. So that changing the layout does not open or close a sidebar
  • 1. Open a tracing in Orthogonal mode. 2. Toggle the visibility of both sidebars once. 3. Change to flight mode. The sidebars' visibility should not have changed.
• add sidebar toggle buttons to the navbar
  • Just try them out. They should work exactly like the buttons in the footer.
• restore the old toggle button for the left sidebar
• make the footer thinner
• No gray border on hover of tab title
• reduce the size of the tab headers
  • For this the layout needs to be on the newest version. To ensure this, reset the current layout via the ui.
• Create a follow-up issue to make the left sidebar content responsive.
  • see Make the left sidebar responsive #5302
• Hide sidebars when maximizing a viewport. When minimizing show the previously visible sidebars again.
  • All sidebars should be auto-hidden if a viewport is maximized. The "open"-state of both sidebars should be saved
• Maybe use min-width for the sidebars if that is supported. Instead auto-hide a sidebar if the size is below a certain threshold.
  • Resize a sidebar to a small width. The sidebar should automatically hide.
• Do not allow to move tabs between sidebars.
• Consistent naming: Use border (from FlexLayout) instead of sidebar.

To discuss:

• Do we want a consistent horizontal resizer? Needs to be developed on our own.
  • This will be done in a follow-up issue Rework Ortho Viewport Layouting #5307.
• Do we still want to support k/l zooming? And if yes: how to implement this?
  • We will let users test the feature beforehand. If they notice that this feature is missing, we should consider adding it again.
• Should the left sidebar be active/visible by default?
  • Both sidebars should be visible in the default layout to reveal them to the user.
• What layout restrictions do we want to have for the core layout and the sidebars?
  • The current restrictions are fine. Changes will be made in a follow-up PR.

[philippotto]

Awesome! I only left some nitpicks.

One last thing I noticed: The sidebar toggle buttons in the tab-headers don't work on touch (can be reproduced when simulating mobile-devices with the chrome devtools). Maybe you need to add an touchstart event? Normally, onClick should suffice, but I assume that flexlayout swallows this event, since this is also used to drag tabs around.
There also might be another workaround (via css somehow?). Would be cool if you could fix this.

Afterwards, the next step would be to wait for the status bar PR, so that we can merge everything together.

[MichaelBuessemeyer]

TODOs

• make sure the panels do not have their own scrolling mechanism as this is already provided by FlexLayout.
  • On hold, as I cannot reproduce this.
  • Update: This was due to the tree's tab buttons not automatically doing line breaks caused by the antd upgrade. As this is already fixed, updating this branch to the newest version of the master resolved this bug.
• get rid of the unused code lines that were used for k/l zooming
• On branch panel-content-reorganization the selected tab of a tabset is not persisted between reloads. Check whether this is also the case here and fix it.
  • This bug should have exsisted quite some time on the branch but I was able to fix it 😄

[philippotto]

@MichaelBuessemeyer Are there any remaining todos? Couldn't spot any if I'm not mistaken? :) The latest commits look good 👍

The next step will be to merge #5369 into this PR when it's ready 🚀

[MichaelBuessemeyer]

@MichaelBuessemeyer Are there any remaining todos? Couldn't spot any if I'm not mistaken? :)

I can't think of any open todos anymore. Everything should be implemented.

The latest commits look good 👍

So you did already review the newest code? If yes, this PR should be good to go 🏎️