IBX-5778: Fixed misplaced Content Type translation dropdown (#798)

ibexa · May 24, 2023 · 36d7076 · 36d7076
1 parent 623baec
commit 36d7076
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 18 deletions.
diff --git a/src/bundle/Resources/public/scss/_details.scss b/src/bundle/Resources/public/scss/_details.scss
@@ -29,8 +29,10 @@
     }
 
     &__header {
-        .ibexa-table-header {
-            justify-content: flex-start;
+        &--inline-headline {
+            .ibexa-table-header {
+                justify-content: flex-start;
+            }
         }
     }
 }
diff --git a/src/bundle/Resources/views/themes/admin/content_type/tab/view.html.twig b/src/bundle/Resources/views/themes/admin/content_type/tab/view.html.twig
@@ -44,21 +44,47 @@
 {% set global_properties_headline_items %}
     {% if languages|length > 1 %}
         <form class="form-inline justify-content-end mb-4">
-            <select class="form-control ibexa-location-language-change">
-                {% for language in languages %}
-                    <option
-                        value="{{ path('ibexa.content_type.view', {
-                            'contentTypeId': content_type.id,
-                            'contentTypeGroupId': content_type_group.id,
-                            'languageCode': language.languageCode,
-                            '_fragment': constant('Ibexa\\AdminUi\\Tab\\ContentType\\ViewTab::URI_FRAGMENT'),
-                        }) }}"
-                        {% if current_language == language.languageCode %} selected="selected" {% endif %}
-                    >
-                        {{ language.name }}
-                    </option>
-                {% endfor %}
-            </select>
+            {% set choices = languages|map((language) => {
+                value: path('ibexa.content_type.view', {
+                    'contentTypeId': content_type.id,
+                    'contentTypeGroupId': content_type_group.id,
+                    'languageCode': language.languageCode,
+                    '_fragment': constant('Ibexa\\AdminUi\\Tab\\ContentType\\ViewTab::URI_FRAGMENT'),
+                }),
+                label: language.name
+            }) %}
+            {% set value = '' %}
+
+            {% for language in languages %}
+                {% if current_language == language.languageCode %}
+                    {% set value = path('ibexa.content_type.view', {
+                        'contentTypeId': content_type.id,
+                        'contentTypeGroupId': content_type_group.id,
+                        'languageCode': language.languageCode,
+                        '_fragment': constant('Ibexa\\AdminUi\\Tab\\ContentType\\ViewTab::URI_FRAGMENT'),
+                    }) %}
+                {% endif %}
+            {% endfor %}
+
+            {% set source %}
+                <select class="form-control ibexa-input ibexa-location-language-change">
+                    {% for choice in choices %}
+                        <option
+                            value="{{ choice.value }}"
+                            {% if value == choice.value %}selected="selected"{% endif %}
+                        >
+                            {{ choice.label }}
+                        </option>
+                    {% endfor %}
+                </select>
+            {% endset %}
+
+            {% include '@ibexadesign/ui/component/dropdown/dropdown.html.twig' with {
+                source: source,
+                choices: choices,
+                value: value,
+                is_small: true,
+            } %}
         </form>
     {% endif %}
 {% endset %}

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/details/details.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/details/details.html.twig
@@ -1,7 +1,7 @@
 <div class="ibexa-details">
     {% block details_header %}
         {% if headline is defined %}
-            <div class="ibexa-details__header">
+            <div class="ibexa-details__header {{ is_inline_headline|default(false) ? 'ibexa-details__header--inline-headline' }}">
                 {% include '@ibexadesign/ui/component/table/table_header.html.twig' with {
                     headline,
                     actions: headline_items|default([])