IBX-2937: Added styling to starting location options

ibexa · Jul 6, 2022 · 2b27614 · 2b27614
1 parent 818b696
commit 2b27614
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 93 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/admin.contenttype.relation.default.location.js b/src/bundle/Resources/public/js/scripts/admin.contenttype.relation.default.location.js
@@ -1,26 +1,36 @@
 (function (global, doc, ibexa, React, ReactDOM) {
-    const SELECTOR_RESET_STARTING_LOCATION_BTN = '.ibexa-btn--reset-starting-location';
+    const SELECTOR_RESET_STARTING_LOCATION_BTN = '.ibexa-tag__remove-btn';
     const defaultLocationContainers = doc.querySelectorAll('.ibexa-default-location');
     const udwContainer = doc.getElementById('react-udw');
     let udwRoot = null;
     const closeUDW = () => udwRoot.unmount();
+    const renderTagItem = (container, [item]) => {
+        const template = container.dataset.template.replaceAll('{{ content }}', item.name);
+
+        container.innerHTML = template;
+
+        const deleteBtn = container.querySelector(SELECTOR_RESET_STARTING_LOCATION_BTN);
+
+        ibexa.helpers.ellipsis.middle.parseAll();
+
+        deleteBtn.addEventListener('click', resetStartingLocation, false);
+    };
     const onConfirm = (btn, items) => {
         closeUDW();
 
         const locationId = items[0].id;
-        const locationName = items[0].ContentInfo.Content.TranslatedName;
-        const objectRelationListSettingsWrapper = btn.closest('.ezobjectrelationlist-settings');
-        const objectRelationSettingsWrapper = btn.closest('.ezobjectrelation-settings');
-
-        toggleResetStartingLocationBtn(btn.parentNode.querySelector(SELECTOR_RESET_STARTING_LOCATION_BTN), true);
-
-        if (objectRelationListSettingsWrapper) {
-            objectRelationListSettingsWrapper.querySelector(btn.dataset.relationRootInputSelector).value = locationId;
-            objectRelationListSettingsWrapper.querySelector(btn.dataset.relationSelectedRootNameSelector).innerHTML = locationName;
-        } else {
-            objectRelationSettingsWrapper.querySelector(btn.dataset.relationRootInputSelector).value = locationId;
-            objectRelationSettingsWrapper.querySelector(btn.dataset.relationSelectedRootNameSelector).innerHTML = locationName;
-        }
+        const container = btn.closest('.ibexa-default-location');
+        const pathSelector = container.querySelector('.ibexa-default-location__path-selector');
+
+        container.querySelector(btn.dataset.relationRootInputSelector).value = locationId;
+
+        pathSelector.classList.add('ibexa-default-location__path-selector--filled');
+
+        ibexa.helpers.tagViewSelect.buildItemsFromUDWResponse(
+            items,
+            (item) => item.pathString,
+            renderTagItem.bind(null, container.querySelector('.ibexa-default-location__selected-path')),
+        );
     };
     const onCancel = () => closeUDW();
     const openUDW = (event) => {
@@ -39,29 +49,23 @@
             }),
         );
     };
-    const toggleResetStartingLocationBtn = (button, isEnabled) => {
-        if (isEnabled) {
-            button.removeAttribute('disabled');
-        } else {
-            button.setAttribute('disabled', true);
-        }
-    };
-    const resetStartingLocation = (event) => {
-        const button = event.currentTarget;
-        const { relationRootInputSelector, relationSelectedRootNameSelector } = button.dataset;
-
-        doc.querySelector(relationRootInputSelector).value = '';
-        doc.querySelector(relationSelectedRootNameSelector).innerHTML = '';
+    const resetStartingLocation = ({ currentTarget }) => {
+        const container = currentTarget.closest('.ibexa-default-location');
+        const udwBtn = container.querySelector('.ibexa-btn--udw-relation-default-location');
+        const pathSelector = container.querySelector('.ibexa-default-location__path-selector');
+        const { relationRootInputSelector } = udwBtn.dataset;
 
-        toggleResetStartingLocationBtn(button, false);
+        container.querySelector(relationRootInputSelector).value = '';
+        container.querySelector('.ibexa-default-location__selected-path').innerHTML = '';
+        pathSelector.classList.remove('ibexa-default-location__path-selector--filled');
     };
     const attachEvents = (container) => {
         const udwBtn = container.querySelector('.ibexa-btn--udw-relation-default-location');
         const deleteBtn = container.querySelector(SELECTOR_RESET_STARTING_LOCATION_BTN);
         const choices = container.querySelectorAll('input[type="radio"]');
 
         udwBtn.addEventListener('click', openUDW, false);
-        deleteBtn.addEventListener('click', resetStartingLocation, false);
+        deleteBtn?.addEventListener('click', resetStartingLocation, false);
         choices.forEach((choice) => choice.addEventListener('change', toggleDisabledState.bind(null, container), false));
     };
     const toggleDisabledState = (container) => {
@@ -70,7 +74,7 @@
         const isDisabled = !container.querySelector('input[value="1"]').checked;
 
         locationBtn.classList.toggle('disabled', isDisabled);
-        toggleResetStartingLocationBtn(deleteBtn, !isDisabled);
+        deleteBtn?.classList.toggle('disabled', isDisabled);
     };
 
     doc.body.addEventListener(
@@ -95,5 +99,6 @@
     defaultLocationContainers.forEach((defaultLocationContainer) => {
         attachEvents(defaultLocationContainer);
         toggleDisabledState(defaultLocationContainer);
+        ibexa.helpers.ellipsis.middle.parseAll();
     });
 })(window, window.document, window.ibexa, window.React, window.ReactDOM);
diff --git a/src/bundle/Resources/public/scss/_default-location.scss b/src/bundle/Resources/public/scss/_default-location.scss
@@ -0,0 +1,29 @@
+.ibexa-default-location {
+    &__path-selector {
+        border: calculateRem(1px) solid $ibexa-color-dark-200;
+        border-radius: $ibexa-border-radius;
+        padding: calculateRem(6px);
+        width: 80%;
+        display: flex;
+        align-items: center;
+
+        .ibexa-btn__label--change {
+            display: none;
+        }
+
+        &--filled {
+            .ibexa-btn__label--change {
+                display: inline;
+            }
+
+            .ibexa-btn__label--select {
+                display: none;
+            }
+        }
+    }
+
+    &__selected-path {
+        max-width: 70%;
+        margin-left: calculateRem(8px);
+    }
+}
diff --git a/src/bundle/Resources/public/scss/ibexa.scss b/src/bundle/Resources/public/scss/ibexa.scss
@@ -117,3 +117,4 @@
 @import 'user-thumbnail';
 @import 'user-group-invitation';
 @import 'user-invitation-modal';
+@import 'default-location';
diff --git a/src/bundle/Resources/translations/content_type.en.xliff b/src/bundle/Resources/translations/content_type.en.xliff
@@ -667,8 +667,8 @@
         <note>key: field_definition.ezobjectrelation.selection_root_reset_title</note>
       </trans-unit>
       <trans-unit id="e03e262fad0802fdee49aac136644b35450e1eab" resname="field_definition.ezobjectrelation.selection_root_udw_button">
-        <source>Select starting Location</source>
-        <target state="new">Select starting Location</target>
+        <source>Select path</source>
+        <target state="new">Select path</target>
         <note>key: field_definition.ezobjectrelation.selection_root_udw_button</note>
       </trans-unit>
       <trans-unit id="d892163a41d816c03db3c4a04e35550f02169c11" resname="field_definition.ezobjectrelation.selection_root_udw_title">
@@ -697,8 +697,8 @@
         <note>key: field_definition.ezobjectrelationlist.selection_limit</note>
       </trans-unit>
       <trans-unit id="1592c36df8d445c3154d1f639027f97a90739856" resname="field_definition.ezobjectrelationlist.selection_root_udw_button">
-        <source>Select Location</source>
-        <target state="new">Select Location</target>
+        <source>Select path</source>
+        <target state="new">Select path</target>
         <note>key: field_definition.ezobjectrelationlist.selection_root_udw_button</note>
       </trans-unit>
       <trans-unit id="17d8f3e8bbd5b5f0f5b4b02ddaeaf2af82b0d222" resname="field_definition.ezobjectrelationlist.selection_root_udw_title">

diff --git a/src/bundle/Resources/views/themes/admin/content_type/relation_form_fields.html.twig b/src/bundle/Resources/views/themes/admin/content_type/relation_form_fields.html.twig
@@ -1,39 +1,54 @@
 {% block radio_label %}
     {% if form.parent is defined and "ibexa_form_type_location_choice" in form.parent.vars.block_prefixes and value == "1" %}
         {% set form_default_location = form.parent.parent %}
-        {{ widget|raw }}
-        <div class="mt-1">
+        {% set is_path_selected = form_default_location.location.vars.destination_location is not null %}
+
+        {{- block('checkbox_radio_label') -}}
+        <div 
+            class="
+                ibexa-default-location__path-selector
+                {% if is_path_selected %}ibexa-default-location__path-selector--filled{% endif %}
+            "
+        >
             <button
-                    data-universaldiscovery-title="{{ "field_definition.ezobjectrelation.selection_root_udw_title"
-                    |trans({}, "content_type")
-                    |desc("Select where to start browsing for a Relation") }}"
-                    class="btn ibexa-btn ibexa-btn--secondary ibexa-btn--udw-relation-default-location"
-                    data-relation-root-input-selector="#{{ form_default_location.location.vars.id }}"
-                    data-relation-selected-root-name-selector="#{{ form_default_location.location.vars.id }}-selected-root-name"
-                    data-starting-location-id="{{ ibexa_admin_ui_config.universalDiscoveryWidget.startingLocationId|default(1) }}"
-                    data-udw-config="{{ ibexa_udw_config('single', {}) }}"
-            >{{ "field_definition.ezobjectrelation.selection_root_udw_button"
+                data-universaldiscovery-title="{{ "field_definition.ezobjectrelation.selection_root_udw_title"
                 |trans({}, "content_type")
-                |desc("Select starting Location") }}</button>
-            <button
-                    type="button"
-                    title="{{ "field_definition.ezobjectrelation.selection_root_reset_title"
-                    |trans({}, "content_type")
-                    |desc('Reset starting location') }}"
-                    class="ibexa-btn ibexa-btn--reset-starting-location btn"
-                    data-relation-root-input-selector="#{{ form_default_location.location.vars.id }}"
-                    data-relation-selected-root-name-selector="#{{ form_default_location.location.vars.id }}-selected-root-name"
-                    {% if form_default_location.location.vars.destination_location is null %} disabled {% endif %}
+                |desc("Select where to start browsing for a Relation") }}"
+                class="btn ibexa-btn ibexa-btn--secondary ibexa-btn--small ibexa-btn--udw-relation-default-location"
+                data-relation-root-input-selector="#{{ form_default_location.location.vars.id }}"
+                data-starting-location-id="{{ ibexa_admin_ui_config.universalDiscoveryWidget.startingLocationId|default(1) }}"
+                data-udw-config="{{ ibexa_udw_config('single', {}) }}"
             >
-                <svg class="ibexa-icon ibexa-icon--small">
-                    <use xlink:href="{{ ibexa_icon_path('trash') }}"></use>
-                </svg>
+                <span class="ibexa-btn__label ibexa-btn__label--select">
+                    {{ "field_definition.ezobjectrelation.selection_root_udw_button"|trans({}, "content_type")|desc("Select path") }}
+                </span>
+                <span class="ibexa-btn__label ibexa-btn__label--change">
+                    {{ "field_definition.ezobjectrelation.change_root_udw_button"|trans({}, "content_type")|desc("Change path") }}
+                </span>
             </button>
-        </div>
-        <div id="{{ form_default_location.location.vars.id }}-selected-root-name">
-            {% if form_default_location.location.vars.destination_location is not null %}
-                {{ ibexa_content_name(form_default_location.location.vars.destination_location.contentInfo) }}
-            {% endif %}
+            <div 
+                class="ibexa-default-location__selected-path"
+                data-template="{{ include('@ibexadesign/ui/tag.html.twig', {
+                    'content': "{{ content }}",
+                    'is_loading_state': false,
+                })|e('html_attr')  }}"
+            >
+                {% if is_path_selected %}
+                    {% set path_locations = ibexa_path_to_locations(form_default_location.location.vars.destination_location.pathString) %}
+                    {% set content_breadcrumbs = '' %}
+                    {% for location in path_locations %}
+                        {% set content_breadcrumbs = content_breadcrumbs ~ ibexa_content_name(location.contentInfo) %}
+                        {% if not loop.last %}
+                            {% set content_breadcrumbs = content_breadcrumbs ~ ' / ' %}
+                        {% endif %}
+                    {% endfor %}
+
+                    {{ include('@ibexadesign/ui/tag.html.twig', {
+                        'content': content_breadcrumbs,
+                        'is_loading_state': false,
+                    }) }}
+                {% endif %}
+            </div>
         </div>
     {% else %}
         {{- block('checkbox_radio_label') -}}

diff --git a/src/bundle/Resources/views/themes/admin/content_type/relation_list_form_fields.html.twig b/src/bundle/Resources/views/themes/admin/content_type/relation_list_form_fields.html.twig
@@ -1,39 +1,54 @@
 {% block radio_label %}
     {% if form.parent is defined and "ibexa_form_type_location_choice" in form.parent.vars.block_prefixes and value == "1" %}
         {% set form_default_location = form.parent.parent %}
-        {{ widget|raw }}
-        <div class="mt-1">
+        {% set is_path_selected = form_default_location.location.vars.destination_location is not null %}
+
+        {{- block('checkbox_radio_label') -}}
+        <div 
+            class="
+                ibexa-default-location__path-selector
+                {% if is_path_selected %}ibexa-default-location__path-selector--filled{% endif %}
+            "
+        >
             <button
-                    data-universaldiscovery-title="{{ "field_definition.ezobjectrelationlist.selection_root_udw_title"
-                    |trans({}, "content_type")
-                    |desc("Select where to start browsing for Relations") }}"
-                    class="btn ibexa-btn ibexa-btn--secondary ibexa-btn--udw-relation-default-location"
-                    data-relation-root-input-selector="#{{ form_default_location.location.vars.id }}"
-                    data-relation-selected-root-name-selector="#{{ form_default_location.location.vars.id }}-selected-root-name"
-                    data-starting-location-id="{{ ibexa_admin_ui_config.universalDiscoveryWidget.startingLocationId|default(1) }}"
-                    data-udw-config="{{ ibexa_udw_config('single_container', {}) }}"
-            >{{ "field_definition.ezobjectrelationlist.selection_root_udw_button"
+                data-universaldiscovery-title="{{ "field_definition.ezobjectrelationlist.selection_root_udw_title"
                 |trans({}, "content_type")
-                |desc("Select Location") }}</button>
-            <button
-                    type="button"
-                    title="{{ "field_definition.ezobjectrelation.selection_root_reset_title"
-                    |trans({}, "content_type")
-                    |desc('Reset starting location') }}"
-                    class="ibexa-btn ibexa-btn--reset-starting-location btn"
-                    data-relation-root-input-selector="#{{ form_default_location.location.vars.id }}"
-                    data-relation-selected-root-name-selector="#{{ form_default_location.location.vars.id }}-selected-root-name"
-                    {% if form_default_location.location.vars.destination_location is null %} disabled {% endif %}
+                |desc("Select where to start browsing for Relations") }}"
+                class="btn ibexa-btn ibexa-btn--secondary ibexa-btn--small ibexa-btn--udw-relation-default-location"
+                data-relation-root-input-selector="#{{ form_default_location.location.vars.id }}"
+                data-starting-location-id="{{ ibexa_admin_ui_config.universalDiscoveryWidget.startingLocationId|default(1) }}"
+                data-udw-config="{{ ibexa_udw_config('single_container', {}) }}"
             >
-                <svg class="ibexa-icon ibexa-icon--small">
-                    <use xlink:href="{{ ibexa_icon_path('trash') }}"></use>
-                </svg>
+                <span class="ibexa-btn__label ibexa-btn__label--select">
+                    {{ "field_definition.ezobjectrelationlist.selection_root_udw_button"|trans({}, "content_type")|desc("Select path") }}
+                </span>
+                <span class="ibexa-btn__label ibexa-btn__label--change">
+                    {{ "field_definition.ezobjectrelationlist.change_root_udw_button"|trans({}, "content_type")|desc("Change path") }}
+                </span>
             </button>
-        </div>
-        <div id="{{ form_default_location.location.vars.id }}-selected-root-name">
-            {% if form_default_location.location.vars.destination_location is not null %}
-                {{ ibexa_content_name(form_default_location.location.vars.destination_location.contentInfo) }}
-            {% endif %}
+            <div 
+                class="ibexa-default-location__selected-path"
+                data-template="{{ include('@ibexadesign/ui/tag.html.twig', {
+                    'content': "{{ content }}",
+                    'is_loading_state': false,
+                })|e('html_attr')  }}"
+            >
+                {% if is_path_selected %}
+                    {% set path_locations = ibexa_path_to_locations(form_default_location.location.vars.destination_location.pathString) %}
+                    {% set content_breadcrumbs = '' %}
+                    {% for location in path_locations %}
+                        {% set content_breadcrumbs = content_breadcrumbs ~ ibexa_content_name(location.contentInfo) %}
+                        {% if not loop.last %}
+                            {% set content_breadcrumbs = content_breadcrumbs ~ ' / ' %}
+                        {% endif %}
+                    {% endfor %}
+
+                    {{ include('@ibexadesign/ui/tag.html.twig', {
+                        'content': content_breadcrumbs,
+                        'is_loading_state': false,
+                    }) }}
+                {% endif %}
+            </div>
         </div>
     {% else %}
         {{- block('checkbox_radio_label') -}}

diff --git a/src/bundle/Resources/views/themes/admin/ui/tag.html.twig b/src/bundle/Resources/views/themes/admin/ui/tag.html.twig
@@ -13,7 +13,7 @@
             <use xlink:href="{{ ibexa_icon_path('spinner') }}"></use>
         </svg>
     </div>
-    <button type="button" class="ibexa-tag__remove-btn">
+    <button type="button" class="btn ibexa-tag__remove-btn">
         <svg class="ibexa-icon ibexa-icon--tiny">
             <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
         </svg>