Rebrush of the (static) page tree

[der-On]

The UI of the page tree for static pages is a bit out of date, requires jquery and is hard to use and error prone for users.
That's why I want to start a discussion on the how and why for "rebrushing" or rewriting it.

The main problems I see currently with the page tree are as follows:

• large page trees are hard to overview
• drag n drop especially when nesting pages is very error prone:
  • it mostly does not react as expected
  • visual feedback of where a page will be placed after dropping is sometimes very vague
• there is no undo after dropping a page, but often one drops a page wrongly and then needs to find and resort it again
• pages in the tree are missing additional information like layout or hidden that could be helpful
• it requires jquery (I think)

I would like to rewrite it using vue.js + tailwindcss.

I welcome recommendations for vue.js tree libraries and good UI concepts/examples for page tree structures.

Another thing I would like to build in is extensibility so the page tree itself can be extended to some degree by plugins.

[LukeTowers]

@jaxwilko @mjauvin @bennothommo any thoughts?

[jaxwilko]

Sounds good to me, would be interesting to see some mockups first before a lot of work is put in. Might also be worth considering existing design patterns such as Gnomes design guidelines :)

[der-On]

Here is a first iteration of the design.

Some key points with this design:

• An action menu allows to add various actions to pages
• instead of drag n drop a "Move to..." action is used. After clicking that you can then click on "dropzones" that appear in the page tree to move the page there
• clicking "Select page" in the action menu will go into "bulk mode" and allow to also select other pages for bulk operations.

[der-On]

@LukeTowers @jaxwilko Would like your feedback on this.

[LukeTowers]

@der-On

• Are you able to show us a screen recording of the movement process?
• How does it handle deeply nested page structures (3+)?

[der-On]

@LukeTowers This is just a figma sketch. I'll try to add some additonal screens showing the movement process. In my vision you basically expand/collapse and navigate the page tree and then click one of the drop areas that only appear in the "move" mode. It is not as fancy as drag n drop but works very realiable and predictable even on touch devices.

[bennothommo]

Personally, I would like to try and aim for items in a tree nav to use one line - that way we can fit a lot more items, and should accommodate larger sites a lot easier. Either the URL can be moved to next to the title (if it's short enough, or dropped entirely).

[der-On]

@LukeTowers Here is an example of how I would like the drag n drop behavior to be:

To drag an item into another one you need to move the dragged item a bit further to the right then a drop-area appears.
This prevents items from accidently beeing dragged into other items.

Another improvement is having a "ghost" that indicates where exactly the item will be placed after the drop.

drag_n_drop_example.webm