FEATURE: Responsive grid UI

[Sebobo]

What I did

Made the Neos UI more responsive and flexible. This also brings the following features and benefits:

• Resizeable left sidebar
• Resizeable document tree
• Most positioning code could be removed
• Restructured markup a bit and cleanup up related CSS

How I did it

Instead of having every ui layout component having absolute sizes and positions the base layout is now a CSS grid and each component has an area assigned. This way the whole layout can be controlled from the wrapping container.

How to verify it

• Open the Neos UI and resize the left sidebar & document tree with the little resize icons in the bottom right.
• Try fullscreen mode
• Toggle the sidebars

Resolves: #3149

[mhsdesign]

Nice ^^ thanks!

some related infos:

i guess this problem now intensifies: #2691

about #3149
as you said:

[...] the structure is a bit strange. The two trees are not proper siblings in the sidebar. When this is cleaned up it should also be easy to adjust their relative heights

[mhsdesign]

fyi here is the slack thread (with video) https://neos-project.slack.com/archives/C0U0KEGDQ/p1665750470219249

[mhsdesign]

Hi ;) i got around trying this out

simplescreenrecorder-2022-10-23_20.15.35.mp4

if found some issues:

• there is now a white spot next to the discard button
• one cannot foldout the content tree via dragging when its collapsed
  • solution A: change the react collapse to state to "open" somehow?
  • solution B: hide this css option via js, if collapsed
• when trying to collapse the content tree too much another scrollbar is shown
  • solution A: change the react collapse state to "close" somehow
  • solution B: set a min-height which cannot be undercut when dragging (maybe max-height too ^^)
• one can only start the drag in these exact corners
  • i guess this is a css limitation?

collapsing the sidebars, full-screen and secondary inspector is working fine (well without animation for now ...) ;)

simplescreenrecorder-2022-10-23_20.18.28.mp4

[Sebobo]

This Chrome 107 news could help us with getting in animations again https://web.dev/css-animated-grid-layouts/

[Sebobo]

@mhsdesign thx for the review, I fixed the 3 points you mentioned.
The CSS resize feature is a bit limited. We might replace it later with some JS feature, but until we know what we want I prefer the native functionality. I'll check if we can style it somehow.

[Sebobo]

Here is also an example how to resize with JS as its apparently now possible to style the icon https://stackoverflow.com/questions/35702705/is-there-a-way-to-change-the-css-resize-corners-position

[mhsdesign]

Thanks for fixing these things ;)

• there is now a white spot next to the discard button
• one cannot foldout the content tree via dragging when its collapsed (via: B: hide this css option via js, if collapsed)
• (partially see below) when trying to collapse the content tree too much another scrollbar is shown

---

Hmm its not so well shown on video - but when the content tree is folded out the moving of the document tree is a bit laggier than when the content tree is hidden. The content tree itself is also quite smooth.

simplescreenrecorder-2022-10-26_15.26.38.mp4

---

One can fold the content tree to 0 height - but the js collapsed state is not changed. (Proposal: add a min-height or something)
Actually this is not a real problem :D

simplescreenrecorder-2022-10-26_15.31.29.mp4

---

i guess this problem now intensifies: #2691

;D

lets talk about a strategy to fix #2691 once and for all

maybe make it scrollable or break into two lines?

if i remember correctly the html structure up there is horrible :D

simplescreenrecorder-2022-10-26_15.34.27.mp4

[Sebobo]

Hmm its not so well shown on video - but when the content tree is folded out the moving of the document tree is a bit laggier than when the content tree is hidden. The content tree itself is also quite smooth.

No clue why, would need to check the browser performance tool

One can fold the content tree to 0 height - but the js collapsed state is not changed. (Proposal: add a min-height or something) Actually this is not a real problem :D

There is already a min-height of 40px which we could increase. I already though about setting it to ~ 120px to include the toolbar and the document node.

lets talk about a strategy to fix #2691 once and for all

maybe make it scrollable or break into two lines?

Scroll often doesn't work properly with various input devices.
I'll try breaking 🔨

[markusguenther]

Will check the pipeline, and we need a new version of @neos-project/eslint-config-neos for the code style

[markusguenther]

Hmm not sure if I now break it but I can not resize the left side bar 🤷‍♂️
But the rest of the Backend looks nice :)

[markusguenther]

Awesome feature... thanks for that.
Tested locally on Firefox, Chrome and Safari 💙