From 4dfa70df92095fe82dacc088cf351c0b841cbdec Mon Sep 17 00:00:00 2001 From: Lukasz Ostafin Date: Wed, 20 Sep 2023 15:38:10 +0200 Subject: [PATCH] IBX-6597: Content type pickers are inconsistent --- .../js/scripts/sidebar/btn/location.create.js | 27 ++++++++- .../Resources/public/scss/_extra-actions.scss | 9 ++- .../translations/locationview.en.xliff | 5 ++ .../universal_discovery_widget.en.xliff | 7 ++- .../content/widget/content_create.html.twig | 57 ++++++++++++------- .../content.create.button.js | 2 +- .../content.create.widget.js | 2 +- 7 files changed, 81 insertions(+), 28 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 index ef143e4d81..075e9eae51 100644 --- 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,31 @@ 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 index 997759424a..fee3821daa 100644 --- 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(4px); + padding: calculateRem(16px) 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)}); + max-height: calc(100% - #{calculateRem(157px)}); overflow: auto; } diff --git a/src/bundle/Resources/translations/locationview.en.xliff b/src/bundle/Resources/translations/locationview.en.xliff index 282e0f7711..8528d6cbb8 100644 --- a/src/bundle/Resources/translations/locationview.en.xliff +++ b/src/bundle/Resources/translations/locationview.en.xliff @@ -16,6 +16,11 @@ Content Type key: bulk_action.failed.modal.content_type_name + + Cancel + Cancel + key: content.create.cancel_btn.label + Create content Create content diff --git a/src/bundle/Resources/translations/universal_discovery_widget.en.xliff b/src/bundle/Resources/translations/universal_discovery_widget.en.xliff index 2be84109d8..6cdf508087 100644 --- a/src/bundle/Resources/translations/universal_discovery_widget.en.xliff +++ b/src/bundle/Resources/translations/universal_discovery_widget.en.xliff @@ -97,9 +97,14 @@ key: copy.title + Create + Create + key: create_content.create + + Create new Create new - key: create_content.create + key: create_content.create_new Create new content 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 index 6ca6f43436..7191485337 100644 --- 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') %} -
-
-

{{ 'content.create.create_content'|trans|desc('Create content') }}

- -
- {% 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' } +}) }} +
+
+

{{ 'content.create.create_content'|trans|desc('Create content') }}

+ +
+ {% if content is defined %} + {{ 'content.create.editing_details'|trans({ '%content_name%': ibexa_content_name(content) })|desc('under %content_name%') }} + {% endif %} +
-
-
- {% set action = action is defined ? action : path('ibexa.content.create') %} - {{ form_start(form, { - 'action': action, - 'attr': { 'autocomplete': 'off' } - }) }} +
{% if form.language.vars.choices|length == 1 %} @@ -49,7 +52,17 @@
- {{ form_widget(form.create, {'attr': {'hidden': 'hidden'}}) }} - {{ form_end(form) }} +
+
+ {{ form_widget(form.create, { + attr: { + disabled: true, + class: 'ibexa-btn ibexa-btn--primary ibexa-extra-actions__btn ibexa-extra-actions__btn--confirm' + } + }) }} + +
-
+{{ form_end(form) }} diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-button/content.create.button.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-button/content.create.button.js index f0aee36898..6e36dca190 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-button/content.create.button.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-button/content.create.button.js @@ -23,7 +23,7 @@ const ContentCreateButton = ({ isDisabled }) => { const [multiple, multipleItemsLimit] = useContext(MultipleConfigContext); const { hidden, allowedLocations } = useContext(ContentOnTheFlyConfigContext); const contentTypesMap = useContext(ContentTypesMapContext); - const createLabel = Translator.trans(/*@Desc("Create new")*/ 'create_content.create', {}, 'universal_discovery_widget'); + const createLabel = Translator.trans(/*@Desc("Create new")*/ 'create_content.create_new', {}, 'universal_discovery_widget'); const toggleContentCreateVisibility = () => { ibexa.helpers.tooltips.hideAll(); setCreateContentVisible((prevState) => !prevState); diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js index 9d75fd90db..1e02e32b44 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-create-widget/content.create.widget.js @@ -77,7 +77,7 @@ const ContentCreateWidget = () => { {}, 'universal_discovery_widget', ); - const createLabel = Translator.trans(/*@Desc("Create new")*/ 'create_content.create', {}, 'universal_discovery_widget'); + const createLabel = Translator.trans(/*@Desc("Create")*/ 'create_content.create', {}, 'universal_discovery_widget'); const closeLabel = Translator.trans(/*@Desc("Close")*/ 'popup.close.label', {}, 'universal_discovery_widget'); const cancelLabel = Translator.trans(/*@Desc("Cancel")*/ 'content_create.cancel.label', {}, 'universal_discovery_widget'); const placeholder = Translator.trans(/*@Desc("Type to refine")*/ 'content_create.placeholder', {}, 'universal_discovery_widget');