EZP-23765: As a PlatformUI user I want to view different language ver…

[mhyndle]

JIRA: https://jira.ez.no/browse/EZP-23765

Description

The goal of the story is to allow user switch viewed language of content by using dropdown list with existing translations. After choosing other translation app should navigate to the same location view but with selected language parameter. There will be language indicator in upper right corner of "Content" section.

Screencast: https://youtu.be/MYP8XpRlSZc

Tasks

• Implementation
• CSS
• Tests
• Rebase

Related issues:

• https://jira.ez.no/browse/EZP-24384 - language parameter in the viewLocation route

[dpobel]

usually we add the -container on such element so it should be called ez-language-switcher-container.

[dpobel]

There's also an inconsistency here, the language switcher is a sub view of the LocationView but its container is added to the RawContentView template. It's either a sub view of the LocationView and its container is added to the LocationView template or a sub view of the RawContentView and it's ok to add the container in the rawcontent.hbt template.

[mhyndle]

Ready for review
ping @dpobel @yannickroger @StephaneDiot @andrerom

[dpobel]

the empty rules can be removed

[dpobel]

Nice work :)
Besides the inline comments, I've noticed a few issues:

• The flag of the current translation and the flags in the list are not aligned . I would also make the shadow a bit darker (btw, in a review for new UI thing a screencast or at least a screenshot is always welcome)

• A CSS transition when the list (dis)appears would be nice. Since the list is absolutely positioned and appears like a vertical list, a transition on a scaleY transform seems appropriate and quite easy to do. So basically, in the theme stylesheet you should set the list with display: block but hide it with the transform: scaleY(0), then when it's supposed to be displayed you have to set transform: scaleY(1) and to a get a nice transition

    -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;

  would do the trick.

• The getter for eZ.Content currentVersion attribute is not really tested. You should check that it returns an instance of eZ.Version with its attributes consistent with the raw value of the currentVersion attribute.

• eZ.Version.getTranslationsList is not tested

• the RawContentView instantiated in LocationViewView now receives some new parameters, this should be tested

• The ez-getflagcodehelper is not tested at all.

[mhyndle]

I think I haven't miss anything from @dpobel 's comments, so please review it again (I will rebase commits after positive review). Added the screencast which is presenting the behaviour of the language switcher, however navigating to translations is not working as it's waiting for this one: https://jira.ez.no/browse/EZP-24384. However, there shouldn't be need to fix anything after that in language switcher as path helper is already called with languageCode parameter.

[dpobel]

please order, group and align the rules like (and -webkit-transform is missing and -webkit-transition is not needed):

        transform: scaleY(0);
-webkit-transform: scaleY(0);
        transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transition: all 0.3s ease;

[dpobel]

after testing it, 0.3s is maybe a bit slow in this case, I think 0.2s would give a better result.

[dpobel]

almost there! One last nitpick on the translation list CSS, again on the alignement but this time for the small arrow:

Besides that and the last inline comments, +1

[crevillo]

to flag or not to flag, that'ts the question... :)

[mhyndle]

Rebased
ping @dpobel @yannickroger @StephaneDiot @andrerom

[dpobel]

+1