Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FEATURE: Display document status of other dimensions in dimension dropdown #3680

Open
wants to merge 18 commits into
base: 8.4
Choose a base branch
from

Conversation

pKallert
Copy link
Contributor

@pKallert pKallert commented Dec 28, 2023

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
Bildschirmfoto 2024-01-02 um 11 00 58
=> English(US) and English(UK) can be opened in new tab

For "normal" languages: only one dimensions highlighted
Bildschirmfoto 2024-01-02 um 11 01 54

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)
Bildschirmfoto 2024-01-02 um 13 50 49

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.
Bildschirmfoto 2024-01-02 um 13 57 05

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"?

@github-actions github-actions bot added the 8.4 label Dec 28, 2023
@markusguenther
Copy link
Member

This is a successor PR of #3597

@pKallert pKallert changed the title Draft: Add "non-existant" state to dimension Menu Draft: Display document status of other dimensions in dimension dropdown Dec 29, 2023
@markusguenther
Copy link
Member

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.

Screenshot 2024-01-02 at 19 54 09

@markusguenther
Copy link
Member

markusguenther commented Jan 2, 2024

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

@pKallert pKallert force-pushed the feature/AddInactiveContentDimensionsDropdown branch from f642c52 to 7da44f2 Compare January 3, 2024 07:48
@pKallert pKallert force-pushed the feature/AddInactiveContentDimensionsDropdown branch from 7da44f2 to 76c0299 Compare January 3, 2024 07:49
@pKallert
Copy link
Contributor Author

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
Bildschirmfoto 2024-01-30 um 08 58 50

Element is disallowed: Text color is grey
Bildschirmfoto 2024-01-30 um 15 00 40

Example:
Bildschirmfoto 2024-01-30 um 15 09 15
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
Copy link
Member

markusguenther commented Jan 30, 2024

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
Copy link
Contributor Author

I tried it out locally and now have the following design:
Not permitted:
Bildschirmfoto 2024-03-15 um 08 19 37

Not translated:
Bildschirmfoto 2024-03-15 um 08 20 33
Bildschirmfoto 2024-03-12 um 11 46 46
For not tranlated we could also not do the striped background:

Bildschirmfoto 2024-03-12 um 12 41 01

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

Copy link
Contributor

@dlubitz dlubitz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Looks good by reading

@ahaeslich
Copy link
Member

@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
Copy link
Contributor

dlubitz commented Jun 5, 2024

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

@crydotsnake crydotsnake added the Feature Label to mark the change as feature label Jun 5, 2024
@crydotsnake crydotsnake self-requested a review June 5, 2024 10:44
@pKallert
Copy link
Contributor Author

pKallert commented Jun 5, 2024

@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
Copy link
Member

Sebobo commented Jun 5, 2024

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

Copy link
Member

@Sebobo Sebobo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thx, looks great, left some suggestions.

@pKallert pKallert changed the title Draft: Display document status of other dimensions in dimension dropdown Display document status of other dimensions in dimension dropdown Jun 5, 2024
@pKallert pKallert changed the title Display document status of other dimensions in dimension dropdown FEATURE: Display document status of other dimensions in dimension dropdown Jun 5, 2024
@pKallert pKallert requested a review from Sebobo June 5, 2024 13:52
@pKallert
Copy link
Contributor Author

pKallert commented Jun 6, 2024

Quick opinion poll:

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

313102123-64ce50f0-dad0-4be4-b970-35245acef569313102293-f78c2116-a8f4-4578-9540-933f2203c930

Striped background: 🚀 reaction
No striped background: 👍 reaction

@ahaeslich
Copy link
Member

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
Copy link
Contributor

dlubitz commented Jun 6, 2024

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

Copy link
Member

@Sebobo Sebobo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
8.4 Feature Label to mark the change as feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

FEATURE: Usability Improvements for Dimensions Menu
6 participants