Feedback on Navigation Menu

Cristal
,
1

Hello! :waving_hand: A part of my tasks these last couple of weeks were dedicated to reviewing Cristal’s current state and the proposals that are going to be implemented.

This first discussion is around my feedback on the Navigation Menu of Cristal.

See all notes in this design page.

New Page button is highlighted too much in the navigation menu

The new page button is a very normal/expected feature, it doesn’t need to be that highlighted. Most people that use Notion or Confluence or just general knowledge management tools know the button is usually in the left side bar. It is not the same case as XWiki.

Vuetify specific: Because of how it’s styled, the button seems to have some correlation with the current page, as they have the same height and background.

image
image1782Ă—946 73.7 KB

Font-size (in the nav menu, but also in general)

The font-size in the navigation menu feels slightly too big. On my Mac, on 90% viewport size, it looks right, but on 100%, slightly too big. Maybe this is subjective, I’d be interested to see what others think.

Menu items line height (On Vuetify config)

The distance between pages in the nav menu seems a bit big. When deleting the following css code, the UI seemed better:

.v-list-item--density-compact.v-list-item--one-line { min-height: 40px; }

image
image2528Ă—1044 105 KB

Navigation Menu Movement

When I open the navigation bar, it should push the content to the right, not cover it. I’ve expected this behaviour from the first time, and it still bugs me a little bit every time I try Cristal. It just doesn’t feel as smooth as it could.

Contrast & Hierarchy

I would encourage a higher contrast between selected parent page and child page. Something like what Notion does.

See a quick before and after I did:

image
image782Ă—256 36.1 KB

What do you think?

Feedback on Main Content UI & Macros
2

Thanks @amilica!

First, a reminder that while we can raise issues for a given design system, we need to reason at the level of the abstract design system (i.e., reason in terms of concepts that are more general than a specific design system).
Of course, applying the generic concepts to the design system we currently support (Vuetify and Shoelace) is a good way to validate if the abstract concepts are applicable.

+1 to create an improvement issue to make the new page action more discreet and more visually separate from the document tree.

To be confirmed by @tkrieck but afaik the font size we use is always the default from the design system.
I wouldn’t change that unless there is a reason that goes beyond personnal perception.

I’m fine with the creation of a minor improvement issue to make the document tree more compact.
Here too we’ll need to see if we can change it in a generic way.
We’ll also need to make sure that making things more compact is not hurting accessibility.

The navigation bar has two modes:

  1. un-pinned - When resizing, the content is pushed and the panel is not covering the content. The panel is always visible even when the user focuses on the main content
  2. pinned - When resizing, the panel is covering the content. The panel is hidden when the user focuses on the content. This is the default on small screens, and can be toggled on larger screen by clicking on the pin button at the top of the panel

cc @pjeanjean for confirmation.

We don’t do that on XWiki either. What would be the benefit of applying this change?
I’m not sure what the expected behavior is for siblings, parents, and other items that are not part of the close hierarchy should be.