IBX-6597: Content type pickers are inconsistent

ibexa · Sep 21, 2023 · 23e17b4 · 23e17b4
1 parent 8f83ccf
commit 23e17b4
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 25 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/sidebar/btn/location.create.js b/src/bundle/Resources/public/js/scripts/sidebar/btn/location.create.js
@@ -7,8 +7,19 @@
 
     createActions.forEach((container) => {
         const radioInputs = container.querySelectorAll('.form-check [type="radio"]');
-        const form = container.querySelector('form');
+        const submitBtn = container.querySelector('.ibexa-extra-actions__btn--confirm');
+        const cancelBtn = container.querySelector('.ibexa-extra-actions__btn--cancel');
+        const closeBtn = container.querySelector('.ibexa-extra-actions__header .ibexa-btn--close');
 
-        radioInputs.forEach((radioInput) => radioInput.addEventListener('change', () => form.submit(), false));
+        cancelBtn.addEventListener('click', () => { closeBtn.click() }, false);
+        radioInputs.forEach((radioInput) => radioInput.addEventListener('change', (event) => {
+            const selectedItems = container.querySelectorAll('.ibexa-instant-filter__group-item--selected');
+            const itemToSelect = event.currentTarget.closest('.ibexa-instant-filter__group-item');
+
+            selectedItems.forEach((selectedItem) => selectedItem.classList.remove('ibexa-instant-filter__group-item--selected'));
+            itemToSelect.classList.add('ibexa-instant-filter__group-item--selected');
+
+            submitBtn.removeAttribute('disabled');
+        }, false));
     });
 })(window, window.document);
diff --git a/src/bundle/Resources/public/scss/_extra-actions.scss b/src/bundle/Resources/public/scss/_extra-actions.scss
@@ -82,6 +82,13 @@
         }
     }
 
+    &__confirm-wrapper {
+        margin-top: calculateRem(20px);
+        padding: 0 calculateRem(32px);
+        display: flex;
+        gap: calculateRem(16px);
+    }
+
     &--edit-user,
     &--edit {
         .form-check {
@@ -126,7 +133,7 @@
     &--create {
         .ibexa-extra-actions {
             &__content {
-                max-height: calc(100% - #{calculateRem(89px)});
+                height: calc(100% - #{calculateRem(157px)});
                 overflow: auto;
             }
 

diff --git a/src/bundle/Resources/views/themes/admin/content/widget/content_create.html.twig b/src/bundle/Resources/views/themes/admin/content/widget/content_create.html.twig
@@ -1,27 +1,30 @@
 {% trans_default_domain 'locationview' %}
 
 {% set data_actions = data_actions|default('create') %}
+{% set action = action is defined ? action : path('ibexa.content.create') %}
 
-<div class="ibexa-extra-actions ibexa-extra-actions--create ibexa-extra-actions--hidden" data-actions="{{ data_actions }}">
-    <div class="ibexa-extra-actions__header">
-        <h2>{{ 'content.create.create_content'|trans|desc('Create content') }}</h2>
-        <button class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-btn--no-text ibexa-btn--close">
-            <svg class="ibexa-icon ibexa-icon--small">
-                <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
-            </svg>
-        </button>
-        <div class="ibexa-extra-actions__header-subtitle">
-            {% if content is defined %}
-                {{ 'content.create.editing_details'|trans({ '%content_name%': ibexa_content_name(content) })|desc('under %content_name%') }}
-            {% endif %}
+{{ form_start(form, {
+    action,
+    attr: { autocomplete: 'off' }
+}) }}
+    <div class="ibexa-extra-actions ibexa-extra-actions--create ibexa-extra-actions--hidden" data-actions="{{ data_actions }}">
+        <div class="ibexa-extra-actions__header">
+            <h2>{{ 'content.create.create_content'|trans|desc('Create content') }}</h2>
+            <button
+                type="button"
+                class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-btn--no-text ibexa-btn--close"
+            >
+                <svg class="ibexa-icon ibexa-icon--small">
+                    <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
+                </svg>
+            </button>
+            <div class="ibexa-extra-actions__header-subtitle">
+                {% if content is defined %}
+                    {{ 'content.create.editing_details'|trans({ '%content_name%': ibexa_content_name(content) })|desc('under %content_name%') }}
+                {% endif %}
+            </div>
         </div>
-    </div>
-    <div class="ibexa-extra-actions__content ibexa-extra-actions__content--create">
-        {% set action = action is defined ? action : path('ibexa.content.create') %}
-        {{ form_start(form, {
-            'action': action,
-            'attr': { 'autocomplete': 'off' }
-        }) }}
+        <div class="ibexa-extra-actions__content ibexa-extra-actions__content--create">
             <label class="ibexa-label ibexa-extra-actions__section-header">{{ 'content.create.select_language'|trans|desc('Select a language:') }}</label>
             <div class="ibexa-extra-actions__section-content">
                 {% if form.language.vars.choices|length == 1 %}
@@ -49,7 +52,17 @@
                     </div>
                 </div>
             </div>
-            {{ form_widget(form.create, {'attr': {'hidden': 'hidden'}}) }}
-        {{ form_end(form) }}
+        </div>
+        <div class="ibexa-extra-actions__confirm-wrapper">
+            {{ form_widget(form.create, {
+                attr: {
+                    disabled: true,
+                    class: 'ibexa-btn ibexa-btn--primary ibexa-extra-actions__btn ibexa-extra-actions__btn--confirm'
+                }
+            }) }}
+            <button class="btn ibexa-btn ibexa-btn--secondary ibexa-extra-actions__btn ibexa-extra-actions__btn--cancel" type="button">
+                {{ 'content.create.cancel_btn.label'|trans|desc('Cancel') }}
+            </button>
+        </div>
     </div>
-</div>
+{{ form_end(form) }}