IBX-2002: Redesigned language switcher in content structure (#213)

ezsystems · Jan 24, 2022 · 5d95945 · 5d95945
1 parent bfd1e68
commit 5d95945
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 22 deletions.
diff --git a/src/bundle/Resources/public/scss/_field-group.scss b/src/bundle/Resources/public/scss/_field-group.scss
@@ -3,23 +3,20 @@
     background-color: $ibexa-color-white;
 
     .ibexa-raw-content-title {
-        padding: calculateRem(24px);
+        padding: calculateRem(16px) calculateRem(24px);
         color: $ibexa-color-black;
         align-items: center;
         border-bottom: calculateRem(1px) solid $ibexa-color-light;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
 
-        h2 {
-            margin: 0 calculateRem(10px) 0 0;
-            font-size: calculateRem(16px);
-            font-weight: normal;
+        h3 {
+            margin: 0;
         }
 
-        .form-inline {
-            &.collapsing {
-                -webkit-transition: none;
-                transition: none;
-                display: none;
-            }
+        &__language-form {
+            display: flex;
         }
     }
 }

diff --git a/src/bundle/Resources/translations/messages.en.xliff b/src/bundle/Resources/translations/messages.en.xliff
@@ -663,6 +663,11 @@
         <target state="new">Can't fetch contributor</target>
         <note>key: tab.versions.table.author.not_found</note>
       </trans-unit>
+      <trans-unit id="f776c84d19e4a757aecdf2cc52aef393a60f7a38" resname="tab.view.descriptions">
+        <source>Descriptions</source>
+        <target state="new">Descriptions</target>
+        <note>key: tab.view.descriptions</note>
+      </trans-unit>
       <trans-unit id="1246bcf8752e249bdec2067d43cfae2a5103bc5f" resname="tab.view.preview">
         <source>Preview</source>
         <target state="new">Preview</target>

diff --git a/src/bundle/Resources/views/themes/admin/content/content_view_fields.html.twig b/src/bundle/Resources/views/themes/admin/content/content_view_fields.html.twig
@@ -1,6 +1,6 @@
 <section class="ibexa-view-rawcontentview">
-    <div class="ibexa-raw-content-title d-flex">
-        <h2>{{ 'tab.view.preview'|trans()|desc('Preview') }}</h2>
+    <div class="ibexa-raw-content-title">
+        <h3>{{ 'tab.view.descriptions'|trans()|desc('Descriptions') }}</h3>
         {% block extras %}{% endblock %}
     </div>
 

diff --git a/src/bundle/Resources/views/themes/admin/content/tab/content.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/content.html.twig
@@ -4,18 +4,43 @@
     {% set current_language = app.request.get('languageCode') ?: content.prioritizedFieldLanguageCode %}
 
     {% if languages|length > 1  %}
-    <form class="form-inline">
-        <select class="form-control ibexa-location-language-change">
-            {% for language in languages %}
-                <option value="{{ path('_ez_content_translation_view', {
+        <form class="form-inline ibexa-raw-content-title__language-form">
+            <label class="ibexa-label">{{ 'tab.view.preview'|trans()|desc('Preview') }}</label>
+            {% set choices = languages|map((language) => {
+                value: path('_ez_content_translation_view', {
                     'contentId': location.contentId,
                     'locationId': location.id,
                     'languageCode': language.languageCode
-                }) }}"
-                    {% if current_language == language.languageCode %} selected="selected" {% endif %}
-                >{{ language.name }}</option>
+                }),
+                label: language.name
+            }) %}
+            {% set value = '' %}
+
+            {% for language in languages %}
+                {% if current_language == language.languageCode %}
+                    {% set value = path('_ez_content_translation_view', {
+                        'contentId': location.contentId,
+                        'locationId': location.id,
+                        'languageCode': language.languageCode
+                    }) %}
+                {% endif %}
             {% endfor %}
-        </select>
-    </form>
+
+            {% 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,
+            } %}
+        </form>
     {% endif %}
 {% endblock %}