-
+ {% endblock %}
+{% endembed %}
diff --git a/src/bundle/Resources/views/themes/admin/content/widget/form_fields.html.twig b/src/bundle/Resources/views/themes/admin/content/widget/form_fields.html.twig
new file mode 100644
index 0000000000..e09eaadc87
--- /dev/null
+++ b/src/bundle/Resources/views/themes/admin/content/widget/form_fields.html.twig
@@ -0,0 +1,19 @@
+{% extends '@ibexadesign/content/form_fields.html.twig' %}
+
+{% block language_entry %}
+
-
- {{ 'content.edit.select_language'|trans|desc('Select translation') }} ({{ form.language.vars.choices|length }})
- -
- {% set action = action is defined ? action : path('ibexa.content.edit') %}
+{% embed '@ibexadesign/ui/component/edit_content_translation_select.html.twig' with {
+ title: 'content.edit.select_language'|trans|desc('Select translation'),
+ has_search: form.language.vars.choices|length >= 10,
+ filter_placeholder: 'instant.filter.languages.placeholder'|trans|desc('Search...'),
+ filter_description: 'instant.filter.languages.select_language.desc'|trans|desc('Languages'),
+ extra_class: check_is_prevent_show ? 'ibexa-extra-actions--prevent-show',
+ data_attr: {
+ 'data-actions': data_actions
+ },
+} %}
+ {% block before_body %}
{{ form_start(form, { 'action': action }) }}
+ {% endblock %}
+
+ {% block content_items %}
+ {{ form_widget(form.language, { 'attr': { 'class': 'ibexa-instant-filter__items' } }) }}
+ {{ form_widget(form.version_info, { 'attr': { 'hidden': 'hidden' } }) }}
{{ form_widget(form.content_info, { 'attr': {
'hidden': 'hidden',
'class': 'ibexa-extra-actions__form-field ibexa-extra-actions__form-field--content-info'
} }) }}
- {{ form_widget(form.version_info, { 'attr': {
- 'hidden': 'hidden',
- 'class': 'ibexa-extra-actions__form-field'
- } }) }}
- {{ form_widget(form.language, { 'attr': {
- 'class': 'ibexa-extra-actions__form-values'
- } }) }}
{{ form_widget(form.location, { 'attr': {
'hidden': 'hidden',
'class': 'ibexa-extra-actions__form-field ibexa-extra-actions__form-field--location'
} }) }}
+ {% endblock %}
+
+ {% block footer_items %}
+ {% trans_default_domain 'ibexa_locationview' %}
+
+
+
+ {% endblock %}
+
+ {% block after_body %}
{{ form_end(form) }}
-
-
+ {{ form_widget(form) }}
+
+{% endblock %}
+
+{% block _content_tree_content_edit_language_entry_widget %}
+ {{ block('language_entry') }}
+{% endblock %}
+
+{% block _content_edit_language_entry_widget %}
+ {{ block('language_entry') }}
+{% endblock %}
+
+{% block _content_edit_language_widget %}
+ {{ form_widget(form, { 'attr': { 'class': 'ibexa-instant-filter__items' } }) }}
+{% endblock %}
diff --git a/src/bundle/Resources/views/themes/admin/ui/component/edit_content_translation_select.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/edit_content_translation_select.html.twig
new file mode 100644
index 0000000000..461b592bc0
--- /dev/null
+++ b/src/bundle/Resources/views/themes/admin/ui/component/edit_content_translation_select.html.twig
@@ -0,0 +1,54 @@
+{% import '@ibexadesign/ui/component/macros.html.twig' as html %}
+
+{% set title = title|default('') %}
+{% set filter_placeholder = filter_placeholder|default('') %}
+{% set filter_description = filter_description|default('') %}
+{% set extra_class = extra_class|default('') %}
+
+{% set container_attr = {
+ class: ('ibexa-extra-actions ibexa-extra-actions--edit ibexa-extra-actions--hidden '
+ ~ (has_search ? 'ibexa-extra-actions--has-search ')
+ ~ extra_class),
+ }|merge(data_attr|default({})) %}
+
+
+ {% block before_body %}{% endblock %}
+
+ {% block header %}
+ {% if title %}
+
diff --git a/src/bundle/Resources/views/themes/admin/ui/edit_translation_button.html.twig b/src/bundle/Resources/views/themes/admin/ui/edit_translation_button.html.twig
index 0ef5372791..53a2e5ff66 100644
--- a/src/bundle/Resources/views/themes/admin/ui/edit_translation_button.html.twig
+++ b/src/bundle/Resources/views/themes/admin/ui/edit_translation_button.html.twig
@@ -17,6 +17,7 @@
{% else %}
{% set top_offset = top_offset is defined ? top_offset : 72 %}
+
+
+ {% endif %}
+ {% endblock %}
+
+ {% block content %}
+ {{ title }}
+
+
+ {% endblock %}
+
+ {% block footer %}
+
+
+
+
+
+ {% if filter_description %}
+
+ {{ filter_description }}
+
+ {% endif %}
+
+ {% block content_items %}{% endblock %}
+
+ {% block footer_items %}{% endblock %}
+
+ {% endblock %}
+
+ {% block after_body %}{% endblock %}
+
-
{% endif %}
diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/instant.filter.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/instant.filter.component.js
index ad24b79442..8e699ab11e 100644
--- a/src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/instant.filter.component.js
+++ b/src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/instant.filter.component.js
@@ -1,56 +1,52 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useState, useMemo } from 'react';
import PropTypes from 'prop-types';
-const { Translator } = window;
-
-const FILTER_TIMEOUT = 200;
+import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
+import { createCssClassNames } from '@ibexa-admin-ui-modules/common/helpers/css.class.names';
const InstantFilter = (props) => {
- const _refInstantFilter = useRef(null);
+ const Translator = getTranslator();
const [filterQuery, setFilterQuery] = useState('');
- const [itemsMap, setItemsMap] = useState([]);
- let filterTimeout = null;
-
- useEffect(() => {
- const items = [..._refInstantFilter.current.querySelectorAll('.ibexa-instant-filter__item')];
- const itemsMapNext = items.map((item) => ({
- label: item.textContent.toLowerCase(),
- element: item,
- }));
-
- setItemsMap(itemsMapNext);
- }, [props.items]);
+ const searchInputWrapperClassName = createCssClassNames({
+ 'ibexa-instant-filter__input-wrapper': true,
+ 'ibexa-instant-filter__input-wrapper--hidden': !props.isSearchEnabled,
+ });
+ const filteredItems = useMemo(() => {
+ if (!filterQuery) {
+ return props.items;
+ }
- useEffect(() => {
const filterQueryLowerCase = filterQuery.toLowerCase();
- filterTimeout = window.setTimeout(() => {
- itemsMap.forEach((item) => {
- const methodName = item.label.includes(filterQueryLowerCase) ? 'removeAttribute' : 'setAttribute';
+ return props.items.filter((item) => {
+ const itemLabelLowerCase = item.label.toLowerCase();
- item.element[methodName]('hidden', true);
- });
- }, FILTER_TIMEOUT);
-
- return () => {
- window.clearTimeout(filterTimeout);
- };
- }, [filterQuery]);
+ return itemLabelLowerCase.includes(filterQueryLowerCase);
+ });
+ }, [props.items, filterQuery]);
return (
-
-
+
+ {% embed '@ibexadesign/ui/component/edit_content_translation_select.html.twig' with {
+ title: 'edit_translation.languages.select_language_title'|trans|desc('Select translation'),
+ has_search: translations|length >= 10,
+ filter_placeholder: 'edit_translation.languages.filter.placeholder'|trans|desc('Search...'),
+ filter_description: 'edit_translation.languages.filter.description'|trans|desc('Languages'),
+ data_attr: {
+ 'data-top-offset': top_offset
+ },
+ } %}
+ {% block content_items %}
+ {{ 'edit_translation.list.title'|trans|desc('Select language') }}:
-
- {% for language in translations %}
-
- {% endfor %}
-
-
+ {% for language in translations %}
+
+ {% endblock %}
+
+ {% block footer_items %}
+ {% trans_default_domain 'ibexa_admin_ui' %}
+
+
+
+ {% endblock %}
+ {% endembed %}
+
+
+ {% endfor %}
+
-
+
+
setFilterQuery(event.target.value)}
/>
+
+ {Translator.trans(/*@Desc("Languages")*/ 'instant.filter.languages.select_language.desc', {}, 'ibexa_sub_items')}
+
- {props.items.map((item) => {
+ {filteredItems.map((item) => {
const radioId = `item_${item.value}`;
+ const labelClassName = createCssClassNames({
+ 'form-check-label': true,
+ 'ibexa-label': true,
+ 'ibexa-label--active': props.activeLanguage === item.value,
+ });
return (
-
@@ -59,11 +55,12 @@ const InstantFilter = (props) => {
type="radio"
id={radioId}
name="items"
- className="form-check-input"
+ className="form-check-input ibexa-input"
value={item.value}
+ checked={props.activeLanguage === item.value}
onChange={() => props.handleItemChange(item.value)}
/>
-
@@ -76,11 +73,15 @@ const InstantFilter = (props) => {
};
InstantFilter.propTypes = {
+ isSearchEnabled: PropTypes.bool,
+ activeLanguage: PropTypes.string,
items: PropTypes.array,
handleItemChange: PropTypes.func,
};
InstantFilter.defaultProps = {
+ isSearchEnabled: true,
+ activeLanguage: '',
items: [],
handleItemChange: () => {},
};
diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/language.selector.compoment.js b/src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/language.selector.compoment.js
index b68d1efc0b..c12b45ae35 100644
--- a/src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/language.selector.compoment.js
+++ b/src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/language.selector.compoment.js
@@ -1,35 +1,80 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
+import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
+
import { createCssClassNames } from '../../../common/helpers/css.class.names';
import InstantFilter from '../sub-items-list/instant.filter.component';
+const MIN_ITEMS_WITH_SEARCH = 10;
+
const LanguageSelector = (props) => {
+ const Translator = getTranslator();
+ const discardBtnRef = useRef(null);
+ const submitBtnRef = useRef(null);
+ const [activeLanguage, setActiveLanguage] = useState('');
+ const isSearchEnabled = props.languageItems.length >= MIN_ITEMS_WITH_SEARCH;
const className = createCssClassNames({
- 'ibexa-extra-actions': true,
'c-language-selector': true,
+ 'ibexa-extra-actions': true,
'ibexa-extra-actions--edit': true,
'ibexa-extra-actions--hidden': !props.isOpen,
+ 'ibexa-extra-actions--has-search': isSearchEnabled,
});
const closeLanguageSelector = (event) => {
if (!event.target.closest('.c-table-view-item__btn') && !event.target.classList.contains('ibexa-instant-filter__input')) {
props.close();
+ resetLanguageSelector();
}
};
+ const dispatchSubmitFormEvent = () => {
+ document.body.dispatchEvent(new CustomEvent('ibexa-sub-items:submit-version-edit-form'));
+ };
+ const handleItemChange = (value) => {
+ props.handleItemChange(value);
+ setActiveLanguage(value);
+ };
+ const resetLanguageSelector = () => {
+ setActiveLanguage('');
+ };
useEffect(() => {
- window.document.addEventListener('click', closeLanguageSelector, false);
+ discardBtnRef.current?.addEventListener('click', closeLanguageSelector, false);
+ submitBtnRef.current?.addEventListener('click', dispatchSubmitFormEvent, false);
+ document.body.addEventListener('ibexa:edit-content-reset-language-selector', resetLanguageSelector, false);
return () => {
- window.document.removeEventListener('click', closeLanguageSelector);
+ discardBtnRef.current?.removeEventListener('click', closeLanguageSelector);
+ submitBtnRef.current?.removeEventListener('click', dispatchSubmitFormEvent);
+ document.body.removeEventListener('ibexa:edit-content-reset-language-selector', resetLanguageSelector);
};
}, []);
return (
-
);
diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js
index 15a078a69d..266e8bcdb0 100644
--- a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js
+++ b/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.item.component.js
@@ -27,6 +27,7 @@ export default class TableViewItemComponent extends PureComponent {
priorityValue: props.item.priority,
priorityInputEnabled: false,
startingPriorityValue: props.item.priority,
+ isLanguageSelectorOpened: false,
};
this.columnsRenderers = {
@@ -118,6 +119,7 @@ export default class TableViewItemComponent extends PureComponent {
*/
editItem(languageCode) {
const { id, currentVersion } = this.props.item.content._info;
+ const { isLanguageSelectorOpened } = this.state;
this.props.handleEditItem(
{
@@ -132,6 +134,7 @@ export default class TableViewItemComponent extends PureComponent {
},
},
this.props.item.id,
+ isLanguageSelectorOpened,
);
}
@@ -145,11 +148,14 @@ export default class TableViewItemComponent extends PureComponent {
const { mainLanguageCode, currentVersion } = this.props.item.content._info;
const { languageCodes } = currentVersion;
+ this.setState(() => ({ isLanguageSelectorOpened: false }));
+
if (languageCodes.length > 1) {
this.props.setLanguageSelectorData(this.getLanguageSelectorData());
this.props.openLanguageSelector();
+ this.setState(() => ({ isLanguageSelectorOpened: true }));
} else {
- this.editItem(mainLanguageCode);
+ this.editItem(mainLanguageCode, languageCodes);
}
}
@@ -391,15 +397,15 @@ export default class TableViewItemComponent extends PureComponent {
getLanguageSelectorData() {
const languages = this.props.languages.mappings;
const { languageCodes } = this.props.item.content._info.currentVersion;
- const label = Translator.trans(/*@Desc("Select language")*/ 'languages.modal.label', {}, 'ibexa_sub_items');
+ const label = Translator.trans(/*@Desc("Select translation")*/ 'languages.modal.label', {}, 'ibexa_sub_items');
const languageItems = languageCodes.map((item) => ({
label: languages[item].name,
value: item,
}));
return {
+ label,
languageItems,
- label: `${label} (${languageItems.length})`,
handleItemChange: this.editItem,
};
}
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 02d91e9ae6..c1a8e04eac 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
@@ -182,7 +182,7 @@ const ContentCreateWidget = () => {
{props.label}
+
+
{props.label}
+
-
+
+
+
{createContentLabel}
{createUnderLabel}
+
{
const Translator = getTranslator();
const adminUiConfig = getAdminUiConfig();
+ const [filterQuery, setFilterQuery] = useState('');
+ const [activeLanguage, setActiveLanguage] = useState('');
const languageCodes = version ? version.VersionInfo.languageCodes.split(',') : [];
+ const isSearchEnabled = languageCodes.length >= MIN_ITEMS_WITH_SEARCH;
const editTranslationLabel = Translator.trans(
/*@Desc("Select translation")*/ 'meta_preview.edit_translation',
{},
'ibexa_universal_discovery_widget',
);
- const className = createCssClassNames({
+ const resetLanguageSelector = () => {
+ setFilterQuery('');
+ setActiveLanguage('');
+ };
+ const getLanguageName = (languageCode, lowerCase = true) => {
+ const language = window.ibexa.adminUiConfig.languages.mappings[languageCode];
+
+ if (!language) {
+ return null;
+ }
+
+ return lowerCase ? language.name.toLowerCase() : language.name;
+ };
+
+ const filteredLanguageCodes = useMemo(() => {
+ if (!filterQuery) {
+ return languageCodes;
+ }
+
+ const filterQueryLowerCase = filterQuery.toLowerCase();
+
+ return languageCodes.filter((languageCode) => {
+ const languageNameLowerCase = getLanguageName(languageCode);
+
+ return languageNameLowerCase.includes(filterQueryLowerCase);
+ });
+ }, [filterQuery]);
+
+ useEffect(() => {
+ if (!isOpen) {
+ resetLanguageSelector();
+ }
+ }, [isOpen]);
+
+ const containerClassName = createCssClassNames({
'c-translation-selector': true,
- 'c-translation-selector--hidden': !isOpen,
+ 'ibexa-extra-actions': true,
+ 'ibexa-extra-actions--edit': true,
+ 'ibexa-extra-actions--full-height': true,
+ 'ibexa-extra-actions--hidden': !isOpen,
+ 'ibexa-extra-actions--has-search': isSearchEnabled,
});
+ const searchInputWrapperClassName = createCssClassNames({
+ 'ibexa-instant-filter__input-wrapper': true,
+ 'ibexa-instant-filter__input-wrapper--hidden': !isSearchEnabled,
+ });
+ const renderLanguages = () => {
+ return filteredLanguageCodes.map((languageCode) => {
+ const languageNodeClassName = createCssClassNames({
+ 'ibexa-instant-filter__item': true,
+ 'ibexa-instant-filter__item--active': activeLanguage === languageCode,
+ });
- return (
-
-
-