Navigation Panel Customization

[spaceman]

Another update on this. The StylesheetExtension in the below topic seems to be a good hack for the CSS in order to shorten the names for long pages in the Navigation Panel and enforce one page per line in the navigation list:

Skin extensions not executing for users who are not logged in

Here you go. Among other things, it turns this: [image] Into this: [image] .xwikipanelcontents { padding-right: 0px; } .jstree-xwiki > .jstree-no-dots.jstree-no-icons a.jstree-anchor { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; width: 100%; } .jstree-xwiki > .jstree-no-dots.jstree-no-icons li.jstree-node { padding-left: 10px; } .skin-flamingo .jstree-xwiki .jstree-clicked { background-color: #e4e4e4; font-weight: bold; }

Combine this CSS with a direct edit to the Navigation Panel code which adds limit=1000 as a parameter for the documentTree macro, and it will display all pages in the navigation tree with one page per line. (Based on a quick scan of the documentTree macro source code, there does not appear to be an “unlimited” option for the limit parameter so my arbitrary limit of 1000 could be increased if necessary.)

This should continue to work as long as: (1) the HTML class attributes for XWiki’s document tree don’t change, and (2) the Navigation Panel doesn’t get updated in a way that blows away the custom limit for the documentTree macro.

However, it would be nice if this solution could be rolled into something a bit more permanent. Here are a few thoughts:

1. The documentTree macro uses the XWiki Tree Widget which in turn is based on jsTree. I read through the jsTree documentation, and it looks like there may be an ellipsis setting built into jsTree itself. I did not test this setting directly in jsTree, but if that ends up being the case then it may be possible to add an option to the Tree Widget which provides access to the ellipsis feature via jsTree. (There may still be CSS adjustments that need to be made in order to set a fixed width for the panel contents and trigger the ellipsis option.)
2. Adding a “limit = -1” option or similar to the addChildNodes macro which removes the limit and then adding a limit parameter option to the Navigation Panel config in the Global Administration would probably be the simplest fix for the size limit.
3. It would also be nice to have a tooltip pop up which displays the full page name when you hover over a shortened page link. I am still looking into potential ways to implement that.

So there’s an idea dump for now. I’m still trying different solutions here and seeing if I can find a better way to handle this.