IBX-7086: Widget to change siteAccess context

ibexa · Nov 17, 2023 · ca72515 · ca72515
1 parent 54a8734
commit ca72515
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 9 deletions.
diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss
@@ -196,6 +196,14 @@
         display: none;
     }
 
+    &__items-list-header {
+        color: $ibexa-color-dark-400;
+        font-size: $ibexa-text-font-size-small;
+        font-weight: 400;
+        line-height: calculateRem(18px);
+        padding: calculateRem(12px) calculateRem(16px) 0;
+    }
+
     &__items-list {
         list-style: none;
         padding: calculateRem(8.5px);

diff --git a/src/bundle/Resources/public/scss/_grid-view-item.scss b/src/bundle/Resources/public/scss/_grid-view-item.scss
@@ -1,4 +1,6 @@
 .ibexa-grid-view-item {
+    $self: &;
+
     display: flex;
     flex-direction: column;
     position: relative;
@@ -127,5 +129,63 @@
                 font-weight: 600;
             }
         }
+
+        #{$self}__radio {
+            &--checked {
+                display: block;
+            }
+        }
+    }
+
+    &--vertical {
+        padding: calculateRem(12px);
+        max-width: initial;
+        flex-direction: row;
+
+        #{$self}__image-wrapper {
+            height: calculateRem(72px);
+            width: calculateRem(120px);
+            overflow: hidden;
+            border-radius: 0;
+        }
+
+        #{$self}__footer {
+            width: 100%;
+            padding: 0 calculateRem(16px);
+            row-gap: 0;
+        }
+
+        #{$self}__title {
+            font-size: $ibexa-text-font-size;
+            font-weight: 600;
+            line-height: calculateRem(24px);
+        }
+
+        #{$self}__details-wrapper {
+            padding-top: calculateRem(8px);
+            color: $ibexa-color-dark-400;
+            font-size: $ibexa-text-font-size-small;
+            font-weight: 400;
+            line-height: calculateRem(18px);
+        }
+    }
+
+    &__radio {
+        position: absolute;
+        left: calculateRem(10px);
+        top: calculateRem(10px);
+        display: none;
+
+        .ibexa-input {
+            background-color: $ibexa-color-white;
+        }
+    }
+
+    &:hover {
+        #{$self}__radio {
+            &--hovered {
+                display: block;
+            }
+        }
     }
 }
diff --git a/src/bundle/Resources/public/scss/_inputs.scss b/src/bundle/Resources/public/scss/_inputs.scss
@@ -25,7 +25,8 @@
     transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
     border: calculateRem(1px) solid $ibexa-color-dark-300;
 
-    &:hover {
+    &:hover,
+    &--hovered {
         border-color: var(--ibexa-input-primary-color);
     }
 

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
@@ -20,6 +20,8 @@
 {% set has_select_all_toggler = has_select_all_toggler|default(false) %}
 {% set item_icon = item_icon|default() %}
 {% set item_icon_class = item_icon_class|default('') %}
+{% set selected_item_template_name = selected_item_template_name|default('@ibexadesign/ui/component/dropdown/dropdown_selected_item.html.twig') %}
+{% set list_item_template_name = list_item_template_name|default('@ibexadesign/ui/component/dropdown/dropdown_item.html.twig') %}
 
 {% macro get_translated_label(label, translation_domain) %}
     {{ translation_domain is same as(false) ? label : label|trans({}, translation_domain) }}
@@ -58,7 +60,7 @@
             data-icon-template="{{ include('@ibexadesign/ui/component/dropdown/dropdown_selected_item_icon.html.twig', {
                 icon: '{{ icon }}',
             })|e('html_attr') }}"
-            data-template="{{ include('@ibexadesign/ui/component/dropdown/dropdown_selected_item.html.twig', {
+            data-template="{{ include(selected_item_template_name, {
                 value: '{{ value }}',
                 label: '{{ label }}',
             })|e('html_attr') }}"
@@ -74,14 +76,14 @@
                         {% if placeholder is defined and placeholder is not none %}
                             {% set default_label = 'dropdown.placeholder.all'|trans()|desc('All') %}
 
-                            {% include '@ibexadesign/ui/component/dropdown/dropdown_selected_item.html.twig' with {
+                            {% include selected_item_template_name with {
                                 value: '',
                                 label: _self.get_translated_label(placeholder, translation_domain)|trim|default(default_label),
                             } %}
                         {% else %}
                             {% set first_choice = choices_flat|first %}
 
-                            {% include '@ibexadesign/ui/component/dropdown/dropdown_selected_item.html.twig' with {
+                            {% include selected_item_template_name with {
                                 value: first_choice.value,
                                 label: _self.get_translated_label(first_choice.label, translation_domain),
                                 icon: first_choice.icon is defined ? first_choice.icon,
@@ -96,7 +98,7 @@
                                 : _self.get_translated_label(choice.label, translation_domain)
                             %}
 
-                            {% include '@ibexadesign/ui/component/dropdown/dropdown_selected_item.html.twig' with {
+                            {% include selected_item_template_name with {
                                 label,
                                 value: choice.value,
                                 icon: choice.icon is defined ? choice.icon,
@@ -142,9 +144,17 @@
                 </button>
             {% endif %}
 
+            {% block items_list_header %}
+                {% if items_list_header is defined %}
+                    <div class="ibexa-dropdown__items-list-header">
+                        {{ items_list_header }}
+                    </div>
+                {% endif %}
+            {% endblock items_list_header %}
+
             <ul
                 class="ibexa-dropdown__items-list"
-                data-template="{{ include('@ibexadesign/ui/component/dropdown/dropdown_item.html.twig', {
+                data-template="{{ include(list_item_template_name, {
                     custom_form: true,
                     icon: item_icon,
                     icon_class: item_icon_class,
@@ -161,16 +171,16 @@
                         label: _self.get_translated_label(placeholder, translation_domain)|trim|default(default_label),
                     } %}
 
-                    {% include '@ibexadesign/ui/component/dropdown/dropdown_item.html.twig' with { choice: placeholder_choice, custom_form: true } %}
+                    {% include list_item_template_name with { choice: placeholder_choice, custom_form: true } %}
                 {% endif %}
                 {% for choice in preferred_choices %}
-                    {% include '@ibexadesign/ui/component/dropdown/dropdown_item.html.twig' with { choice, preferred_choice: true, custom_form, icon: item_icon, icon_class: item_icon_class } %}
+                    {% include list_item_template_name with { choice, preferred_choice: true, custom_form, icon: item_icon, icon_class: item_icon_class } %}
                 {% endfor %}
                 {% if preferred_choices|length > 0 %}
                     <hr class="ibexa-dropdown__separator" />
                 {% endif %}
                 {% for choice in choices %}
-                    {% include '@ibexadesign/ui/component/dropdown/dropdown_item.html.twig' with { choice, custom_form, icon: item_icon, icon_class: item_icon_class } %}
+                    {% include list_item_template_name with { choice, custom_form, icon: item_icon, icon_class: item_icon_class } %}
                 {% endfor %}
             </ul>
         </div>

diff --git a/src/bundle/Resources/views/themes/admin/ui/form_fields/dropdown_widget.html.twig b/src/bundle/Resources/views/themes/admin/ui/form_fields/dropdown_widget.html.twig
@@ -27,6 +27,10 @@
             is_dynamic: attr.is_dynamic|default(false),
             has_select_all_toggler: attr.has_select_all_toggler|default(false),
             placeholder: attr.placeholder|default(placeholder),
+            selected_item_template_name: selected_item_template_name|default(null),
+            list_item_template_name: list_item_template_name|default(null),
+            items_class: items_class|default(null),
+            items_list_header: items_list_header|default(null),
         } only %}
     {% endif %}
 {%- endblock choice_widget -%}