IBX-1515: As an Editor, I want to see redesigned Create translation

ibexa · Dec 20, 2021 · c0a2f78 · c0a2f78
1 parent 530c17d
commit c0a2f78
Show file tree

Hide file tree

Showing 17 changed files with 118 additions and 56 deletions.
diff --git a/src/bundle/Resources/public/img/ibexa-icons.svg b/src/bundle/Resources/public/img/ibexa-icons.svg
diff --git a/src/bundle/Resources/public/img/icons/interface-block.svg b/src/bundle/Resources/public/img/icons/interface-block.svg
diff --git a/src/bundle/Resources/public/js/scripts/admin.location.add.translation.js b/src/bundle/Resources/public/js/scripts/admin.location.add.translation.js
@@ -1,7 +1,7 @@
 (function(global, doc) {
     const SELECTOR_MODAL = '.ibexa-modal';
 
-    doc.querySelectorAll('.ez-translation__language-wrapper--language').forEach((select) => {
+    doc.querySelectorAll('.ibexa-translation__language-wrapper--language').forEach((select) => {
         select.addEventListener(
             'change',
             (event) => {

diff --git a/src/bundle/Resources/public/js/scripts/core/dropdown.js b/src/bundle/Resources/public/js/scripts/core/dropdown.js
@@ -110,7 +110,7 @@
 
             const selectedItemsList = this.container.querySelector('.ibexa-dropdown__selection-info');
 
-            if (selected && value) {
+            if (selected) {
                 const label = element.querySelector('.ibexa-dropdown__item-label').innerHTML;
 
                 selectedItemsList

diff --git a/src/bundle/Resources/public/scss/_add-translation.scss b/src/bundle/Resources/public/scss/_add-translation.scss
@@ -1,11 +1,23 @@
-.ez-translation {
-    .ibexa-dropdown {
-        &__wrapper {
-            width: 60%;
-        }
+.ibexa-translation {
+    .modal-dialog {
+        max-width: calculateRem(790px);
+    }
+
+    .modal-body {
+        display: flex;
+        align-items: flex-end;
+        padding-bottom: calculateRem(140px);
+    }
+
+    .form-group {
+        width: calculateRem(330px);
+    }
 
-        &__items {
-            width: 100%;
-        }
+    &__arrow {
+        height: calculateRem(48px);
+        transform: rotate(180deg);
+        display: flex;
+        align-items: center;
+        padding: 0 calculateRem(16px);
     }
 }
diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss
@@ -186,10 +186,22 @@
             display: none;
         }
 
+        &--selected {
+            position: relative;
+
+            .ibexa-dropdown__item-check {
+                display: block;
+            }
+        }
+
         .ibexa-input {
             margin-right: calculateRem(16px);
         }
 
+        .ibexa-icon {
+            margin-right: calculateRem(8px);
+        }
+
         &:hover {
             background-color: $ibexa-color-light-300;
         }
@@ -201,6 +213,20 @@
                 cursor: not-allowed;
             }
         }
+
+        &[data-value=""] {
+            position: relative;
+
+            &:after {
+                display: block;
+                content: '';
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                border-bottom: calculateRem(1px) solid $ibexa-color-light;
+            }
+        }
     }
 
     &__item-group-label {
@@ -211,6 +237,12 @@
         padding-left: 0;
     }
 
+    &__item-check {
+        position: absolute;
+        right: calculateRem(4px);
+        display: none;
+    }
+
     &__separator {
         background-color: $ibexa-color-light-600;
     }

diff --git a/src/bundle/Resources/public/scss/mixins/_modals.scss b/src/bundle/Resources/public/scss/mixins/_modals.scss
@@ -18,7 +18,7 @@
 @mixin modal-title {
     margin-right: calculateRem(30px);
     font-size: $modal-title-font-size;
-    font-weight: 500;
+    font-weight: 600;
 }
 
 @mixin modal-subtitle {

diff --git a/src/bundle/Resources/translations/content_type.en.xliff b/src/bundle/Resources/translations/content_type.en.xliff
@@ -36,11 +36,6 @@
         <target state="new">Content Field definitions</target>
         <note>key: content_type.content_field_definitions</note>
       </trans-unit>
-      <trans-unit id="3066b4a1b2277f4e299d9c91ad3134d725467b39" resname="content_type.content_type">
-        <source>Content Type</source>
-        <target state="new">Content Type</target>
-        <note>key: content_type.content_type</note>
-      </trans-unit>
       <trans-unit id="e7a6e28719e705ca85e715114370d15deee0cd59" resname="content_type.copy.error">
         <source>Error occoured while copying the '%name%' Content Type.</source>
         <target state="new">Error occoured while copying the '%name%' Content Type.</target>
@@ -71,11 +66,6 @@
         <target state="new">Available</target>
         <note>key: content_type.default_availability.available</note>
       </trans-unit>
-      <trans-unit id="3b3fc626a669a5462ec9fa7c94280a3573d8b106" resname="content_type.default_availability.help">
-        <source>Content of this Content Type will be available in the main language even if there is no translation.</source>
-        <target state="new">Content of this Content Type will be available in the main language even if there is no translation.</target>
-        <note>key: content_type.default_availability.help</note>
-      </trans-unit>
       <trans-unit id="da6afb475bbd2efbe3929af770d0fc17e6e86132" resname="content_type.default_availability.not_available">
         <source>Not available</source>
         <target state="new">Not available</target>

diff --git a/src/bundle/Resources/translations/forms.en.xliff b/src/bundle/Resources/translations/forms.en.xliff
@@ -1081,10 +1081,20 @@
         <target state="new">Select Content item</target>
         <note>key: swap_location_form.swap</note>
       </trans-unit>
-      <trans-unit id="f41c864f5e47e9829cac16492d544b9c7bce9f01" resname="translation.base_language.choose">
-        <source>Choose a Language</source>
-        <target state="new">Choose a Language</target>
-        <note>key: translation.base_language.choose</note>
+      <trans-unit id="d183d1b00142b36a06d45e6341e4c8b01976a6b9" resname="translation.base_language.label">
+        <source>Source language</source>
+        <target state="new">Source language</target>
+        <note>key: translation.base_language.label</note>
+      </trans-unit>
+      <trans-unit id="84c716177ff27c2a0900b4318920b1e0cbbf9b93" resname="translation.base_language.no_language">
+        <source>No language</source>
+        <target state="new">No language</target>
+        <note>key: translation.base_language.no_language</note>
+      </trans-unit>
+      <trans-unit id="68c3e0fd0fe047dae5853efbc89ccb128b544263" resname="translation.language.label">
+        <source>Target language</source>
+        <target state="new">Target language</target>
+        <note>key: translation.language.label</note>
       </trans-unit>
       <trans-unit id="30b0c3c3e5e096a078005be2cc34bca6227ae381" resname="trash_empty_form.empty">
         <source>Delete permanently</source>

diff --git a/src/bundle/Resources/translations/locationview.en.xliff b/src/bundle/Resources/translations/locationview.en.xliff
@@ -341,21 +341,11 @@
         <target state="new">Delete Translation</target>
         <note>key: tab.translations.action.delete</note>
       </trans-unit>
-      <trans-unit id="5022ce879be6a69956541173bf658dccff5d7280" resname="tab.translations.add.base_language">
-        <source>Base this translation on an existing translation</source>
-        <target state="new">Base this translation on an existing translation</target>
-        <note>key: tab.translations.add.base_language</note>
-      </trans-unit>
       <trans-unit id="c22e9f75640384f917cc76e6736b3a6e91d70f1d" resname="tab.translations.add.cancel">
         <source>Cancel</source>
         <target state="new">Cancel</target>
         <note>key: tab.translations.add.cancel</note>
       </trans-unit>
-      <trans-unit id="fe6c962e1d0766f59a66d3766c56edffdce6735d" resname="tab.translations.add.language">
-        <source>Select a language for the new translation</source>
-        <target state="new">Select a language for the new translation</target>
-        <note>key: tab.translations.add.language</note>
-      </trans-unit>
       <trans-unit id="2d1ceec2bfb85db323e21e358b6be6aad547e1d0" resname="tab.translations.add.title">
         <source>Create a new translation</source>
         <target state="new">Create a new translation</target>

diff --git a/src/bundle/Resources/translations/messages.en.xliff b/src/bundle/Resources/translations/messages.en.xliff
@@ -643,11 +643,6 @@
         <target state="new">From date - to date</target>
         <note>key: search.date.range</note>
       </trans-unit>
-      <trans-unit id="128df491a522e7af4916cd002d9e11a3d2bc4078" resname="section.action.delete">
-        <source>Delete Section</source>
-        <target state="new">Delete Section</target>
-        <note>key: section.action.delete</note>
-      </trans-unit>
       <trans-unit id="9567771350aff93580f743089937b0c8fe31058e" resname="section.assign,content">
         <source>Assign Content</source>
         <target state="new">Assign Content</target>

diff --git a/src/bundle/Resources/translations/section.en.xliff b/src/bundle/Resources/translations/section.en.xliff
@@ -11,6 +11,11 @@
         <target state="new">No content. Drafts you create will show up here</target>
         <note>key: dashboard.tab.my_drafts.empty</note>
       </trans-unit>
+      <trans-unit id="128df491a522e7af4916cd002d9e11a3d2bc4078" resname="section.action.delete">
+        <source>Delete Section</source>
+        <target state="new">Delete Section</target>
+        <note>key: section.action.delete</note>
+      </trans-unit>
       <trans-unit id="84413bc1ae3385c0aac1af7ea5665cb0c1eaf3ba" resname="section.assign_content">
         <source>Assign content</source>
         <target state="new">Assign content</target>
@@ -81,11 +86,6 @@
         <target state="new">Identifier</target>
         <note>key: section.identifier</note>
       </trans-unit>
-      <trans-unit id="105a971e4f7e75ad6066301cedc90bd4acf0ae12" resname="section.information.header">
-        <source>Section information</source>
-        <target state="new">Section information</target>
-        <note>key: section.information.header</note>
-      </trans-unit>
       <trans-unit id="1f9b6e37416ff607de9d4fa280dce2f734ea622c" resname="section.list">
         <source>Sections</source>
         <target state="new">Sections</target>
@@ -121,6 +121,11 @@
         <target state="new">Section: %identifier%</target>
         <note>key: section.view.title.identifier</note>
       </trans-unit>
+      <trans-unit id="09fcd5ad39b9c2b778be171f88559f6c117ff48b" resname="tab.details.technical_details">
+        <source>Technical details</source>
+        <target state="new">Technical details</target>
+        <note>key: tab.details.technical_details</note>
+      </trans-unit>
     </body>
   </file>
 </xliff>
diff --git a/src/bundle/Resources/views/themes/admin/content/modal/add_translation.html.twig b/src/bundle/Resources/views/themes/admin/content/modal/add_translation.html.twig
@@ -2,7 +2,7 @@
 
 {% form_theme form '@ibexadesign/content/translation_add_form_fields.html.twig' %}
 
-<div class="modal fade ibexa-modal ez-translation" id="add-translation-modal" tabindex="-1" role="dialog">
+<div class="modal fade ibexa-modal ibexa-translation" id="add-translation-modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         {% set action = action is defined ? action : path('ezplatform.translation.add') %}
         {{ form_start(form, {'action': action}) }}
@@ -16,13 +16,16 @@
                     </button>
                 </div>
                 <div class="modal-body">
-                    <div class="ez-translation__title">{{ 'tab.translations.add.language'|trans|desc('Select a language for the new translation') }}</div>
-                    {{ form_widget(form.language, {'attr': {'class': 'ez-translation__language-wrapper ez-translation__language-wrapper--language'}}) }}
-                    <div class="ez-translation__title mt-4">{{ 'tab.translations.add.base_language'|trans|desc('Base this translation on an existing translation') }}</div>
-                    {{ form_widget(form.base_language, {'attr': {'class': 'ez-translation__language-wrapper ez-translation__language-wrapper--base-language'}}) }}
+                    {{ form_row(form.base_language, {'attr': {'class': 'ibexa-translation__language-wrapper ibexa-translation__language-wrapper--base-language'}}) }}
+                    <div class="ibexa-translation__arrow">
+                        <svg class="ibexa-icon ibexa-icon--medium">
+                            <use xlink:href="{{ ibexa_icon_path('back') }}"></use>
+                        </svg>
+                    </div>
+                    {{ form_row(form.language, {'attr': {'class': 'ibexa-translation__language-wrapper ibexa-translation__language-wrapper--language'}}) }}
                 </div>
                 <div class="modal-footer">
-                    {{ form_widget(form.add, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary ibexa-btn--create-translation', 'disabled': 'disabled'}}) }}
+                    {{ form_widget(form.add, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary ibexa-btn--create-translation'}}) }}
                     <button type="button" class="btn ibexa-btn ibexa-btn--secondary" data-bs-dismiss="modal">
                         {{ 'tab.translations.add.cancel'|trans|desc('Cancel') }}
                     </button>

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown.html.twig
@@ -105,7 +105,7 @@
                         value: '',
                         label: _self.get_translated_label(placeholder, translation_domain),
                     } %}
-                    {% include '@ibexadesign/ui/component/dropdown/dropdown_item.html.twig' with { choice: placeholder_choice, custom_form: true } %}
+                    {% include '@ibexadesign/ui/component/dropdown/dropdown_item.html.twig' with { choice: placeholder_choice, custom_form: true, icon: 'interface-block' } %}
                 {% endif %}
                 {% for choice in preferred_choices %}
                     {% include '@ibexadesign/ui/component/dropdown/dropdown_item.html.twig' with { choice, preferred_choice: true, custom_form } %}

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig
@@ -11,16 +11,25 @@
         </ul>
     </li>
 {% else %}
+    {% set is_selected = custom_form ? choice.value == value : choice is selectedchoice(value) %}
     <li
         data-value="{{ choice.value }}"
         data-filter-value="{{ item_label }}"
         class="ibexa-dropdown__item
             {% if preferred_choice %}ibexa-dropdown__item--preferred-choice{% endif %}
-            {% if custom_form ? choice.value == value : choice is selectedchoice(value) %}ibexa-dropdown__item--selected{% endif %}"
+            {% if is_selected %}ibexa-dropdown__item--selected{% endif %}"
     >
         {% if multiple is defined and multiple %}
-            <input type="checkbox" name="dropdown-checkbox" class="ibexa-input ibexa-input--checkbox" {% if custom_form ? choice.value == value : choice is selectedchoice(value) %}checked{% endif %} />
+            <input type="checkbox" name="dropdown-checkbox" class="ibexa-input ibexa-input--checkbox" {% if is_selected %}checked{% endif %} />
+        {% endif %}
+        {% if icon is defined %}
+            <svg class="ibexa-icon ibexa-icon--small">
+                <use xlink:href="{{ ibexa_icon_path(icon) }}"></use>
+            </svg>
         {% endif %}
         <span class="ibexa-dropdown__item-label">{{ item_label }}</span>
+        <svg class="ibexa-icon ibexa-icon--small ibexa-dropdown__item-check">
+            <use xlink:href="{{ ibexa_icon_path('checkmark') }}"></use>
+        </svg>
     </li>
 {% endif %}
diff --git a/src/lib/Form/Type/Content/Translation/TranslationAddType.php b/src/lib/Form/Type/Content/Translation/TranslationAddType.php
@@ -232,6 +232,7 @@ static function (Language $language) use ($contentLanguages, $limitationLanguage
                             }
                         );
                     }),
+                    'label' => /** @Desc("Target language") */ 'translation.language.label',
                     'choice_value' => 'languageCode',
                     'choice_label' => 'name',
                 ]
@@ -241,7 +242,7 @@ static function (Language $language) use ($contentLanguages, $limitationLanguage
                 ChoiceType::class,
                 [
                     'required' => false,
-                    'placeholder' => /** @Desc("Choose a Language") */ 'translation.base_language.choose',
+                    'placeholder' => /** @Desc("No language") */ 'translation.base_language.no_language',
                     'multiple' => false,
                     'expanded' => false,
                     'choice_loader' => new CallbackChoiceLoader(function () use ($contentLanguages) {
@@ -251,6 +252,7 @@ static function (Language $language) use ($contentLanguages) {
                             }
                         );
                     }),
+                    'label' => /** @Desc("Source language") */ 'translation.base_language.label',
                     'choice_value' => 'languageCode',
                     'choice_label' => 'name',
                 ]