IBX-8626: Create action menu component foundations (#1318)

ibexa · Sep 17, 2024 · d01569c · d01569c
1 parent 7f93bc9
commit d01569c
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 30 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/circle-minus.svg b/src/bundle/Resources/public/img/icons/circle-minus.svg
diff --git a/src/bundle/Resources/public/img/icons/explore.svg b/src/bundle/Resources/public/img/icons/explore.svg
diff --git a/src/bundle/Resources/public/js/scripts/core/multilevel.popup.menu.js b/src/bundle/Resources/public/js/scripts/core/multilevel.popup.menu.js
@@ -101,6 +101,9 @@
             if (isTopBranch) {
                 triggerElement.addEventListener('click', this.handleItemWithSubitemsClick, false);
 
+                processBranchAfter(branchElement);
+                branchItems.forEach((itemElement) => processBranchItemAfter(itemElement));
+
                 return;
             }
 
@@ -205,6 +208,12 @@
 
         toggleBranch(branchElement, shouldBeExpanded = true) {
             const topBranch = this.triggerElement.branchElement;
+            const searchInput = branchElement.querySelector('.ibexa-multilevel-popup-menu__search-input');
+
+            if (searchInput?.value !== '') {
+                searchInput.value = '';
+                searchInput.dispatchEvent(new Event('input'));
+            }
 
             branchElement.classList.toggle('ibexa-popup-menu--hidden', !shouldBeExpanded);
 
@@ -414,18 +423,6 @@
                 return;
             }
 
-            const branchesSearchInput = doc.querySelectorAll('.ibexa-multilevel-popup-menu__search-input');
-
-            branchesSearchInput.forEach((searchInput) => {
-                if (searchInput.value !== '') {
-                    const searchInputBranch = searchInput.closest('.ibexa-multilevel-popup-menu__branch');
-
-                    searchInput.value = '';
-                    searchInputBranch.dispatchEvent(new CustomEvent('ibexa-multilevel-popup-menu:close-branch'));
-                    searchInput.dispatchEvent(new Event('input'));
-                }
-            });
-
             this.closeWithSubbranches(topBranch);
         }
 

diff --git a/src/bundle/Resources/views/themes/admin/content/form_fields.html.twig b/src/bundle/Resources/views/themes/admin/content/form_fields.html.twig
@@ -47,15 +47,16 @@
 {%- endblock %}
 
 {% block form_row_subfield -%}
+    {% set is_small = attr.is_small ?? true %}
     {% set wrapper_class = 'ibexa-data-source__field ibexa-data-source__field--' ~ name ~ ' ibexa-data-form-field' %}
     {% if required %}{% set wrapper_class = (wrapper_class ~ ' ibexa-data-source__field--required')|trim %}{% endif %}
     {% if errors|length > 0 %}{% set wrapper_class = (wrapper_class|default('') ~ ' is-invalid')|trim %}{% endif %}
 
     {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ibexa-label ibexa-data-source__label')|trim}) %}
     {% set label_wrapper_attr = label_wrapper_attr|default({})|merge({'class': (label_wrapper_attr.class|default('') ~ ' ibexa-data-source__label-wrapper')|trim}) %}
     {% set attr = attr|merge({
-        class: (attr.class|default('') ~ ' ibexa-data-source__input ibexa-input--small')|trim,
-        is_small: true,
+        class: (attr.class|default('') ~ ' ibexa-data-source__input' ~ (is_small ? ' ibexa-input--small'))|trim,
+        is_small,
     }) %}
     {% set wrapper_attr = wrapper_attr|default({})|merge({class: (wrapper_attr.class|default('') ~ ' ' ~ wrapper_class)|trim}) %}
     {% set widget_wrapper_attr = widget_wrapper_attr|default({})|merge({class: (widget_wrapper_attr.class|default('') ~ ' ibexa-data-source__input-wrapper')|trim}) %}

diff --git a/...ces/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu.html.twig b/...ces/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu.html.twig
@@ -1,5 +1,9 @@
 {%- import '@ibexadesign/ui/component/macros.html.twig' as html -%}
 
+{%- set branch_template_path = branch_template_path|default('@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig') -%}
+{%- set group_template_path = group_template_path|default('@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_group.html.twig') -%}
+{%- set item_template_path = item_template_path|default('@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_item.html.twig') -%}
+
 {%- set is_template = is_template|default(false) -%}
 
 {%- set branch_template_params = branch_template_params|default({})|merge({
@@ -26,28 +30,28 @@
         ~ attr.class|default(''))|trim,
     'data-branch-template': items_container_attr['data-branch-template']|default(
         include(
-            '@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig',
+            branch_template_path,
             branch_template_params,
             with_context = false
         )
     ),
     'data-group-template': items_container_attr['data-group-template']|default(
         include(
-            '@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_group.html.twig',
+            group_template_path,
             group_template_params,
             with_context = false
         )
     ),
     'data-item-template-btn': items_container_attr['data-item-template-btn']|default(
         include(
-            '@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_item.html.twig',
+            item_template_path,
             item_template_params,
             with_context = false
         )
     ),
     'data-item-template-link': items_container_attr['data-item-template-link']|default(
         include(
-            '@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_item.html.twig',
+            item_template_path,
             item_template_params|merge({ is_button: false }),
             with_context = false
         )
@@ -58,7 +62,7 @@
     <div {{ html.attributes(attr, is_template) }}>
         {%- block branch -%}
             {%- if groups is defined and groups is not null -%}
-                {%- include '@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig' with {
+                {%- include branch_template_path with {
                     groups,
                 } -%}
             {%- endif -%}

diff --git a/...ws/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig b/...ws/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig
@@ -1,5 +1,7 @@
 {%- import '@ibexadesign/ui/component/macros.html.twig' as html -%}
 
+{%- set group_template_path = group_template_path|default('@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_group.html.twig') -%}
+
 {%- set is_template = is_template|default(false) -%}
 
 {%- set branch_attr = branch_attr|default({})|merge({
@@ -17,11 +19,19 @@
 
     <div {{ html.attributes(branch_attr, is_template) }}>
         <div class="ibexa-multilevel-popup-menu__search {{ not hasSearch|default(false) ? 'ibexa-multilevel-popup-menu__search--hidden' }}">
-            <input
-                type="text"
-                placeholder="{{ 'search.placeholder'|trans|desc('Search...') }}"
-                class="ibexa-input ibexa-input--small ibexa-input--text form-control ibexa-multilevel-popup-menu__search-input"
-            />
+            {% block search %}
+                {%- embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: true } only -%}
+                    {% block content %}
+                        {% trans_default_domain 'ibexa_multilevel_popup_menu' %}
+
+                        <input
+                            type="text"
+                            placeholder="{{ 'search.placeholder'|trans|desc('Search...') }}"
+                            class="ibexa-input ibexa-input--small ibexa-input--text form-control ibexa-multilevel-popup-menu__search-input"
+                        />
+                    {% endblock %}
+                {%- endembed -%}
+            {% endblock %}
         </div>
 
         {%- block branch_groups -%}
@@ -32,10 +42,12 @@
                         group_attr: group.group_attr|default({}),
                     }) -%}
 
-                    {%- include '@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu_group.html.twig'
-                        with group_params -%}
+                    {%- include group_template_path with group_params -%}
                 {%- endfor -%}
             </div>
         {%- endblock -%}
+
+        {% block footer %}
+        {% endblock %}
     </div>
 {%- endblock -%}