FEATURE: Display document status of other dimensions in dimension dropdown

[pKallert]

Solves partially #3413

What I did
In the single-dimensions dropdown, the Languages with existing documents are now a linked and can be opened in a new tab.
The dropdown now shows which dimensions the current already document exists in. "Not allowed" dimensions have a new styling

How I did it

For the dimensions menu there are two scenarios. This here describes the current implementation, but everything is still up for discussion

Single dimension
"Shine through" for en_UK and en_US

=> English(US) and English(UK) can be opened in new tab

For "normal" languages: only one dimensions highlighted

Multiple dimensions
(Currently) no shine through for dimensions.
No linking of dimensions, this is what the apply button is for, I think?
Disallowed dimensions are marked with strike-through (for now)

Available dimensions are shown top-down.
For example, if in the first dropdown "Deutsch" is chosen as the language, in the second dropdown only the variants with language deutsch and country * will be chosen.

ToDos

• full width of links in dropdown
• write e2e tests

To be discussed

• Do we even want the "available" Elements shown in multiple dimensions? Is it understandable?
• Visualize "Shine through" of languages in dropdown menu?
• Are shine-through dimensions counted as "available"?
• Better display of "disallowed" vs "available"?

[markusguenther]

This is a successor PR of #3597

[markusguenther]

Hello, and thanks to @pKallert for highlighting that fantastic feature. I've reviewed the code and experimented with it, and it functions as you outlined. However, I'm not particularly fond of the strikeout method for disallowed dimensions. With the introduction of the new grouping feature in UI version 8.4, I thought about utilizing groups for this purpose.

This approach could potentially enhance the user experience, as users would better comprehend the implications. We could incorporate a helpful text within the groups to explain the meaning of terms like "untranslated" or "disallowed." Additionally, it might be beneficial to consider hiding disallowed dimensions, as they occupy space without serving any practical purpose.

What do you and the others think about that?
Maybe a help message would be a nice feature extension for the groups anyway.

[markusguenther]

Addendum: Linking to other dimensions in a new tab doesn't work for me in Firefox, Chrome and Safari

[pKallert]

I thought a little bit more about the styling of the elements and came up with a new solution:

Element does not exist in dimension: use grey background color

Element is disallowed: Text color is grey

Example:

Francais-> France exists,
Francais-> Germany is not allowed, and does also not exist
Francais-> US is allowed, but does not exist

This would also maintain the current logic where disallowed Elements are grey/have opacity.

[markusguenther]

That's funny, I also had this topic yesterday on my desk to continue with that.
I came to this idea.

1. Colored Bars:
   • Using a small colored bar for each entry is a concise and visually efficient way to communicate the status of dimensions.
   • The traffic light metaphor (red, orange, etc.) is intuitive and widely understood, making it user-friendly.
2. Not Permitted Dimensions:
   • Greyed-out entries with a red bar make it clear that these dimensions are not permitted. This combination of visual cues effectively signals to users that these dimensions are restricted.
3. Not Translated Dimensions:
   • Introducing an orange bar and a zebra background for dimensions that are not translated adds a distinct visual element to highlight this state.
   • The use of a 45-degree angle for the zebra background creates a visually interesting effect and sets it apart from the regular and greyed-out dimensions.

I am also half the way of the implementation. What do you think about that?

[pKallert]

I tried it out locally and now have the following design:
Not permitted:

Not translated:


For not tranlated we could also not do the striped background:

As a follow-up we could also visualize the shine-through with fallback dimensions.

[dlubitz]

Thanks for this one. ❤️ This will make my life much easier. 😄

Looks good by reading

[ahaeslich]

@pKallert nice visualization. As addition and because I'm not sure if I'm missing it: are we explaining the color codes to the user, e.g. via using the title attribute?

[dlubitz]

And pipeline is complaining and needs to get fixed before merge!

[pKallert]

@pKallert nice visualization. As addition and because I'm not sure if I'm missing it: are we explaining the color codes to the user, e.g. via using the title attribute?

Not right now, but I will get on that :)

[Sebobo]

The title says draft, but we are ready for review correct?

[Sebobo]

Thx, looks great, left some suggestions.

[pKallert]

Quick opinion poll:

Do you prefer with or without striped background to display that a document does not exist in this dimension?

Striped background: 🚀 reaction
No striped background: 👍 reaction

[ahaeslich]

The striped background is more different to the 'edited' marking we have on other places in the CMS. Therefore, it might highlight the difference a bit better.

[dlubitz]

@ahaeslich is right here. You could think, that there are unpublished nodes in this dimension.

[Sebobo]

I just tested the feature again.
It looks great but there is one problem, the state is not properly updated after creating the non-existing variant.

1. So in the demo I'm in English
2. then German has the stripes
3. then I create the German variant via the modal
4. dropdown shows all variants normally
5. I go back to English
6. German is still shown as non-existing (but it won't show the create variant dialog when I click again)