diff --git a/.gitignore b/.gitignore index 7026e200fd..fee6267cf6 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,9 @@ package-lock.json composer.lock /var tsconfig.json +.button-migration/*.log + +# Migration tool runtime state +.button-migration/ +migrations/*/.migration-state/ +*.migration.log diff --git a/composer.json b/composer.json index 97beea181e..3385484998 100644 --- a/composer.json +++ b/composer.json @@ -27,6 +27,7 @@ "ibexa/content-forms": "~6.0.x-dev", "ibexa/core": "~6.0.x-dev", "ibexa/design-engine": "~6.0.x-dev", + "ibexa/design-system-twig": "~6.0.x-dev", "ibexa/rest": "~6.0.x-dev", "ibexa/search": "~6.0.x-dev", "ibexa/twig-components": "~6.0.x-dev", diff --git a/features/standard/UserCreation.feature b/features/standard/UserCreation.feature index 7f0e523f09..6b914081e3 100644 --- a/features/standard/UserCreation.feature +++ b/features/standard/UserCreation.feature @@ -37,8 +37,8 @@ Feature: User management | First name | testuseredited | | Last name | lastnameedited | And I set content fields for user - | label | Username | Password | Confirm password | Email | - | User account | testuser | Test123456 | Test123456 | test@test.org | + | label | Username | Password | Confirm password | Email | Enabled | + | User account | testuser | Test123456 | Test123456 | test@test.org | Yes | And I perform the "Save and close" action Then I should be on Content view Page for "Users/testuseredited lastnameedited" And content attributes equal diff --git a/src/bundle/Resources/encore/ibexa.css.config.js b/src/bundle/Resources/encore/ibexa.css.config.js index 62dfba962e..7dfada06f7 100644 --- a/src/bundle/Resources/encore/ibexa.css.config.js +++ b/src/bundle/Resources/encore/ibexa.css.config.js @@ -5,6 +5,7 @@ module.exports = (Encore) => { path.resolve(__dirname, '../public/scss/ibexa-bootstrap.scss'), path.resolve(__dirname, '../public/scss/ibexa.scss'), path.resolve(__dirname, '../public/scss/ui/ibexa-modules.scss'), + path.resolve(__dirname, '../public/scss/ibexa-ids-assets.scss'), path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/flatpickr/dist/flatpickr.min.css'), path.resolve( './vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/flatpickr/dist/plugins/confirmDate/confirmDate.css', @@ -18,6 +19,7 @@ module.exports = (Encore) => { ]) .addEntry('ibexa-admin-ui-security-base-css', [ path.resolve(__dirname, '../public/scss/ibexa-bootstrap.scss'), + path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/css/styles.css'), path.resolve(__dirname, '../public/scss/ibexa.scss'), ]); }; diff --git a/src/bundle/Resources/encore/ibexa.js.config.js b/src/bundle/Resources/encore/ibexa.js.config.js index 30b8296fd9..2e9b2cb849 100644 --- a/src/bundle/Resources/encore/ibexa.js.config.js +++ b/src/bundle/Resources/encore/ibexa.js.config.js @@ -49,6 +49,7 @@ const layout = [ path.resolve(__dirname, '../public/js/scripts/admin.focus.mode.js'), path.resolve(__dirname, '../public/js/scripts/sidebar/main.menu.js'), path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'), + path.resolve('./vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts'), path.resolve(__dirname, '../public/js/scripts/admin.table.js'), path.resolve(__dirname, '../public/js/scripts/core/collapse.js'), path.resolve(__dirname, '../public/js/scripts/admin.dropdown.js'), @@ -247,9 +248,13 @@ module.exports = (Encore) => { ]) .addEntry('ibexa-admin-ui-login-js', [ path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'), + path.resolve('./vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts'), path.resolve(__dirname, '../public/js/scripts/login.js'), ]) - .addEntry('ibexa-admin-ui-reset-password-js', [path.resolve(__dirname, '../public/js/scripts/admin.input.text.js')]) + .addEntry('ibexa-admin-ui-reset-password-js', [ + path.resolve(__dirname, '../public/js/scripts/admin.input.text.js'), + path.resolve('./vendor/ibexa/design-system-twig/src/bundle/Resources/public/ts/init_components.ts'), + ]) .addEntry('ibexa-admin-ui-user-invitation-modal', [path.resolve(__dirname, '../public/js/scripts/user.invitation.modal.js')]) .addEntry('ibexa-admin-ui-tabs-js', [ path.resolve(__dirname, '../public/js/scripts/admin.location.tab.js'), diff --git a/src/bundle/Resources/public/js/scripts/admin.contenttype.copy.js b/src/bundle/Resources/public/js/scripts/admin.contenttype.copy.js index af8a99514c..42494971e4 100644 --- a/src/bundle/Resources/public/js/scripts/admin.contenttype.copy.js +++ b/src/bundle/Resources/public/js/scripts/admin.contenttype.copy.js @@ -1,5 +1,5 @@ (function (global, doc, ibexa, Routing) { - const copyButtons = doc.querySelectorAll('.ibexa-btn--copy-content-type'); + const copyButtons = doc.querySelectorAll('.ids-btn--copy-content-type'); const copyContentType = ({ currentTarget }) => { const contentTypeCopyForm = doc.querySelector('form[name="content_type_copy"]'); const contentTypeIdentifierInput = contentTypeCopyForm.querySelector('#content_type_copy_content_type'); diff --git a/src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js b/src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js index eb8935244d..383d2f8e72 100644 --- a/src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js +++ b/src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js @@ -1,7 +1,7 @@ (function (global, doc, ibexa, Routing, Translator, bootstrap) { const SELECTOR_INPUTS_TO_VALIDATE = '.ibexa-input[required]:not([disabled]):not([hidden])'; const SELETOR_FIELD_INPUTS = - '.ibexa-input-text-wrapper:not(.ibexa-input-text-wrapper--search) > input.ibexa-input--text:not([hidden]):not(ibexa-input-text-wrapper--search)'; + '.ids-input-text .ids-input:not([hidden]), .ibexa-input-text-wrapper:not(.ibexa-input-text-wrapper--search) > input.ibexa-input:not([hidden]):not(.ibexa-input--date)'; const MATRIX_COLUMN_ID_PATTERN = /^\w[\w:-]*$/; const MATRIX_COLUMN_ID_ERROR_CLASS = 'ibexa-matrix-settings__identifier-error'; const TIMEOUT_REMOVE_HIGHLIGHT = 3000; @@ -381,7 +381,7 @@ const isMatrixColumnId = input.classList.contains('ibexa-input--matrix-column-identifier'); const isMatrixColumnIdInvalid = !isInputEmpty && isMatrixColumnId && !MATRIX_COLUMN_ID_PATTERN.test(input.value); const field = input.closest('.form-group'); - const labelNode = field?.querySelector('.ibexa-label'); + const labelNode = field?.querySelector('.ids-label'); const errorNode = field?.querySelector('.ibexa-form-error'); const isInvalid = isInputEmpty || isMatrixColumnIdInvalid; diff --git a/src/bundle/Resources/public/js/scripts/admin.contenttype.relation.default.location.js b/src/bundle/Resources/public/js/scripts/admin.contenttype.relation.default.location.js index 6525c48b14..fffb04627c 100644 --- a/src/bundle/Resources/public/js/scripts/admin.contenttype.relation.default.location.js +++ b/src/bundle/Resources/public/js/scripts/admin.contenttype.relation.default.location.js @@ -53,7 +53,7 @@ import * as middleEllipsisHelper from '@ibexa-admin-ui/src/bundle/Resources/publ }; const resetStartingLocation = ({ currentTarget }) => { const container = currentTarget.closest('.ibexa-default-location'); - const udwBtn = container.querySelector('.ibexa-btn--udw-relation-default-location'); + const udwBtn = container.querySelector('.ids-btn--udw-relation-default-location'); const pathSelector = container.querySelector('.ibexa-default-location__path-selector'); const { relationRootInputSelector } = udwBtn.dataset; @@ -62,7 +62,7 @@ import * as middleEllipsisHelper from '@ibexa-admin-ui/src/bundle/Resources/publ pathSelector.classList.remove('ibexa-default-location__path-selector--filled'); }; const attachEvents = (container) => { - const udwBtn = container.querySelector('.ibexa-btn--udw-relation-default-location'); + const udwBtn = container.querySelector('.ids-btn--udw-relation-default-location'); const deleteBtn = container.querySelector(SELECTOR_RESET_STARTING_LOCATION_BTN); const choices = container.querySelectorAll('input[type="radio"]'); @@ -71,12 +71,15 @@ import * as middleEllipsisHelper from '@ibexa-admin-ui/src/bundle/Resources/publ choices.forEach((choice) => choice.addEventListener('change', toggleDisabledState.bind(null, container), false)); }; const toggleDisabledState = (container) => { - const locationBtn = container.querySelector('.ibexa-btn--udw-relation-default-location'); + const locationBtn = container.querySelector('.ids-btn--udw-relation-default-location'); const deleteBtn = container.querySelector(SELECTOR_RESET_STARTING_LOCATION_BTN); const isDisabled = !container.querySelector('input[value="1"]').checked; - locationBtn.classList.toggle('disabled', isDisabled); - deleteBtn?.classList.toggle('disabled', isDisabled); + locationBtn.disabled = isDisabled; + + if (deleteBtn) { + deleteBtn.disabled = isDisabled; + } }; doc.body.addEventListener( diff --git a/src/bundle/Resources/public/js/scripts/admin.context.menu.js b/src/bundle/Resources/public/js/scripts/admin.context.menu.js index 1d3c82ee53..03b25f5d95 100644 --- a/src/bundle/Resources/public/js/scripts/admin.context.menu.js +++ b/src/bundle/Resources/public/js/scripts/admin.context.menu.js @@ -7,11 +7,13 @@ const menuButtons = [ ...adaptedItemsContainer.querySelectorAll( - '.ibexa-context-menu__item > .ibexa-btn:not(.ibexa-btn--more), .ibexa-context-menu__item > .ibexa-split-btn', + '.ibexa-context-menu__item > .ibexa-btn:not(.ibexa-btn--more), .ibexa-context-menu__item > .ids-btn:not(.ibexa-btn--more), .ibexa-context-menu__item > .ibexa-split-btn', ), ]; const popupMenuElement = adaptedItemsContainer.querySelector('.ibexa-context-menu__item--more .ibexa-multilevel-popup-menu'); const showPopupButton = adaptedItemsContainer.querySelector('.ibexa-btn--more'); + const getButtonLabel = (button) => button.querySelector('.ids-btn__label, .ibexa-btn__label')?.textContent ?? ''; + const getItemButton = (item) => item.querySelector('.ids-btn, .ibexa-btn'); if (!showPopupButton) { return; @@ -24,7 +26,7 @@ return adaptedItemsContainer.querySelector('.ibexa-context-menu__item'); }, onAdapted: (visibleItems, hiddenItems) => { - const hiddenButtonsIds = [...hiddenItems].map((item) => item.querySelector('.ibexa-btn').id); + const hiddenButtonsIds = [...hiddenItems].map((item) => getItemButton(item)?.id).filter(Boolean); const topBranchItems = multilevelPopupMenu.getBranchItems(topBranch); topBranchItems.forEach((branchItem) => { @@ -51,7 +53,7 @@ const mainBtn = menuButton.querySelector('.ibexa-split-btn__main-btn'); const splitBtn = menuButton.querySelector('.ibexa-split-btn__toggle-btn'); const relatedMainBtnId = mainBtn.id; - const mainBtnLabel = mainBtn.querySelector('.ibexa-btn__label').textContent; + const mainBtnLabel = getButtonLabel(mainBtn); const { alternativeMainBtnLabel: mainBtnAlternativeLabel, alternativeMainBtnSublabel: mainBtnAlternativeSublabel, @@ -60,7 +62,7 @@ const subitemsBtns = [...splitBtn.branchElement.querySelectorAll('.ibexa-popup-menu__item-content')]; const subitems = subitemsBtns.map((subitemBtn) => { - const subitemLabel = subitemBtn.querySelector('.ibexa-btn__label').textContent; + const subitemLabel = getButtonLabel(subitemBtn); const relatedSubitemBtnId = subitemBtn.id; return { @@ -108,7 +110,7 @@ } const relatedBtnId = menuButton.id; - const label = menuButton.querySelector('.ibexa-btn__label').textContent; + const label = getButtonLabel(menuButton); return { label, diff --git a/src/bundle/Resources/public/js/scripts/admin.limitation.pick.js b/src/bundle/Resources/public/js/scripts/admin.limitation.pick.js index 0a89be4347..aaf413933d 100644 --- a/src/bundle/Resources/public/js/scripts/admin.limitation.pick.js +++ b/src/bundle/Resources/public/js/scripts/admin.limitation.pick.js @@ -176,7 +176,7 @@ udwRoot = ReactDOMClient.createRoot(udwContainer); udwRoot.render( React.createElement(ibexa.modules.UniversalDiscovery, { - onConfirm: handleUdwConfirm.bind(this, event.target), + onConfirm: handleUdwConfirm.bind(this, event.currentTarget), onCancel: closeUDW, title, multiple: true, diff --git a/src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js b/src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js index 8668cff04f..ba398b6ff5 100644 --- a/src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js +++ b/src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js @@ -4,15 +4,23 @@ if (modal) { const discardBtns = modal.querySelectorAll('[data-bs-dismiss="modal"]'); const submitBtn = modal.querySelector('#custom_url_add_add'); - const input = modal.querySelector('[required="required"]'); + const input = modal.querySelector('#custom_url_add_path') || modal.querySelector('[name="custom_url_add[path]"]'); const siteRootCheckbox = modal.querySelector('[name="custom_url_add[site_root]"]'); const toggleButtonState = () => { + if (!input || !submitBtn) { + return; + } + const hasValue = input.value.trim().length !== 0; const methodName = hasValue ? 'removeAttribute' : 'setAttribute'; submitBtn[methodName]('disabled', true); }; const clearValues = () => { + if (!input) { + return; + } + input.value = ''; toggleButtonState(); }; @@ -20,11 +28,21 @@ const isChecked = event.target.checked; const siteAccessSelect = modal.querySelector('.ibexa-custom-url-from__item--siteacces .ibexa-dropdown'); + if (!siteAccessSelect) { + return; + } + siteAccessSelect.classList.toggle('ibexa-dropdown--is-disabled', isChecked); }; - input.addEventListener('input', toggleButtonState, false); - siteRootCheckbox.addEventListener('change', toggleSiteAccessSelect, false); + if (input) { + input.addEventListener('input', toggleButtonState, false); + } + + if (siteRootCheckbox) { + siteRootCheckbox.addEventListener('change', toggleSiteAccessSelect, false); + } + discardBtns.forEach((btn) => btn.addEventListener('click', clearValues, false)); } })(window, window.document); diff --git a/src/bundle/Resources/public/js/scripts/admin.location.add.translation.js b/src/bundle/Resources/public/js/scripts/admin.location.add.translation.js index f63ae54c3e..ef9bff4e12 100644 --- a/src/bundle/Resources/public/js/scripts/admin.location.add.translation.js +++ b/src/bundle/Resources/public/js/scripts/admin.location.add.translation.js @@ -9,7 +9,7 @@ if (!modal) { return; } - const buttonCreate = modal.querySelector('.ibexa-btn--create-translation'); + const buttonCreate = modal.querySelector('.ids-btn--create-translation'); if (!buttonCreate) { return; } diff --git a/src/bundle/Resources/public/js/scripts/admin.location.view.js b/src/bundle/Resources/public/js/scripts/admin.location.view.js index 9690526b75..4a7dea5085 100644 --- a/src/bundle/Resources/public/js/scripts/admin.location.view.js +++ b/src/bundle/Resources/public/js/scripts/admin.location.view.js @@ -29,7 +29,7 @@ import { checkIsContainer } from './helpers/content.type.helper'; bootstrap.Modal.getOrCreateInstance(doc.querySelector('#version-draft-conflict-modal')).hide(); }; const attachModalListeners = (wrapper) => { - const addDraftButton = wrapper.querySelector('.ibexa-btn--add-draft'); + const addDraftButton = wrapper.querySelector('.ids-btn--add-draft'); const conflictModal = doc.querySelector('#version-draft-conflict-modal'); if (addDraftButton) { @@ -37,7 +37,7 @@ import { checkIsContainer } from './helpers/content.type.helper'; } wrapper - .querySelectorAll('.ibexa-btn--prevented') + .querySelectorAll('.ids-btn--prevented') .forEach((btn) => btn.addEventListener('click', (event) => event.preventDefault(), false)); if (conflictModal) { diff --git a/src/bundle/Resources/public/js/scripts/admin.notifications.filters.js b/src/bundle/Resources/public/js/scripts/admin.notifications.filters.js index 33fb21d9d9..71f31fc1f9 100644 --- a/src/bundle/Resources/public/js/scripts/admin.notifications.filters.js +++ b/src/bundle/Resources/public/js/scripts/admin.notifications.filters.js @@ -1,8 +1,9 @@ (function (global, doc) { + const SELECTOR_FILTER_CHECKBOX = '.ids-input--checkbox:not([name="dropdown-checkbox"])'; const searchForm = doc.querySelector('.ibexa-list-search-form'); const filtersContainerNode = doc.querySelector('.ibexa-list-filters'); - const applyFiltersBtn = filtersContainerNode.querySelector('.ibexa-btn--apply'); - const clearFiltersBtn = filtersContainerNode.querySelector('.ibexa-btn--clear'); + const applyFiltersBtn = filtersContainerNode.querySelector('.ids-btn--apply'); + const clearFiltersBtn = filtersContainerNode.querySelector('.ids-btn--clear'); const statusFilterNode = filtersContainerNode.querySelector('.ibexa-list-filters__item--statuses'); const typeFilterNode = filtersContainerNode.querySelector('.ibexa-list-filters__item--type'); const datetimeFilterNodes = filtersContainerNode.querySelectorAll('.ibexa-list-filters__item--date-time .ibexa-picker'); @@ -13,9 +14,7 @@ } const sourceSelect = filterNode.querySelector('.ibexa-list-filters__item-content .ibexa-dropdown__source .ibexa-input--select'); - const checkboxes = filterNode.querySelectorAll( - '.ibexa-list-filters__item-content .ibexa-input--checkbox:not([name="dropdown-checkbox"])', - ); + const checkboxes = filterNode.querySelectorAll(`.ibexa-list-filters__item-content ${SELECTOR_FILTER_CHECKBOX}`); const timePicker = filterNode.querySelector('.ibexa-date-time-picker__input'); if (sourceSelect) { @@ -45,9 +44,7 @@ return; } - const checkboxes = filterNode.querySelectorAll( - '.ibexa-list-filters__item-content .ibexa-input--checkbox:not([name="dropdown-checkbox"])', - ); + const checkboxes = filterNode.querySelectorAll(`.ibexa-list-filters__item-content ${SELECTOR_FILTER_CHECKBOX}`); checkboxes.forEach((checkbox) => { checkbox.addEventListener('change', filterChange, false); }); @@ -80,7 +77,7 @@ } const select = filterNode.querySelector('.ibexa-dropdown__source .ibexa-input--select'); - const checkedCheckboxes = filterNode.querySelectorAll('.ibexa-input--checkbox:checked'); + const checkedCheckboxes = filterNode.querySelectorAll(`${SELECTOR_FILTER_CHECKBOX}:checked`); if (isNodeDatePicker(filterNode)) { const timePicker = filterNode.querySelector('.ibexa-date-time-picker__input'); diff --git a/src/bundle/Resources/public/js/scripts/admin.notifications.list.js b/src/bundle/Resources/public/js/scripts/admin.notifications.list.js index e17cdcb55a..10ab3a0dee 100644 --- a/src/bundle/Resources/public/js/scripts/admin.notifications.list.js +++ b/src/bundle/Resources/public/js/scripts/admin.notifications.list.js @@ -1,6 +1,7 @@ import { isFirefox } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/browser.helper.js'; (function (global, doc, ibexa, Translator, Routing) { + const SELECTOR_NOTIFICATION_CHECKBOX = '.ibexa-notification-list__mark-row-checkbox'; const SELECTOR_MODAL_ITEM = '.ibexa-notifications-modal__item'; const SELECTOR_GO_TO_NOTIFICATION = '.ibexa-notification-view-all__show'; const SELECTOR_TOGGLE_NOTIFICATION = '.ibexa-notification-view-all__mail'; @@ -10,7 +11,7 @@ import { isFirefox } from '@ibexa-admin-ui/src/bundle/Resources/public/js/script const markAsReadBtn = doc.querySelector('.ibexa-notification-list__btn-mark-as-read'); const deleteBtn = doc.querySelector('.ibexa-notification-list__btn-delete'); const notificationsCheckboxes = [ - ...doc.querySelectorAll('.ibexa-notification-list .ibexa-table__cell--has-checkbox .ibexa-input--checkbox'), + ...doc.querySelectorAll(`.ibexa-notification-list .ibexa-table__cell--has-checkbox ${SELECTOR_NOTIFICATION_CHECKBOX}`), ]; const notificationsTable = doc.querySelector('.ibexa-table--notifications'); const uncheckCheckboxesEvent = new CustomEvent('ibexa-uncheck-checkboxes', { diff --git a/src/bundle/Resources/public/js/scripts/admin.search.autocomplete.js b/src/bundle/Resources/public/js/scripts/admin.search.autocomplete.js index 96adaa9c01..b2abddd3ce 100644 --- a/src/bundle/Resources/public/js/scripts/admin.search.autocomplete.js +++ b/src/bundle/Resources/public/js/scripts/admin.search.autocomplete.js @@ -10,7 +10,7 @@ } const globalSearchInput = globalSearch.querySelector('.ibexa-global-search__input'); - const clearBtn = globalSearch.querySelector(' .ibexa-input-text-wrapper__action-btn--clear'); + const clearBtn = globalSearch.querySelector('.ids-clear-btn, .ibexa-input-text-wrapper__action-btn--clear'); const autocompleteNode = globalSearch.querySelector('.ibexa-global-search__autocomplete'); const autocompleteListNode = globalSearch.querySelector('.ibexa-global-search__autocomplete-list'); const autocompleteResultsCountNumber = globalSearch.querySelector('.ibexa-global-search__autocomplete-total-count-number'); @@ -152,6 +152,6 @@ }; globalSearchInput.addEventListener('keyup', handleTyping, false); - clearBtn.addEventListener('click', hideAutocomplete, false); + clearBtn?.addEventListener('click', hideAutocomplete, false); doc.addEventListener('keydown', focusSearch, false); })(window, document, window.ibexa, window.Routing, window.Translator); diff --git a/src/bundle/Resources/public/js/scripts/admin.search.filters.js b/src/bundle/Resources/public/js/scripts/admin.search.filters.js index 7f6b1dcc1c..f5a2e6783b 100644 --- a/src/bundle/Resources/public/js/scripts/admin.search.filters.js +++ b/src/bundle/Resources/public/js/scripts/admin.search.filters.js @@ -1,14 +1,16 @@ +import Chip from '@ibexa-design-system/src/bundle/Resources/public/ts/components/chip'; + (function (global, doc, ibexa, flatpickr, React, ReactDOMClient) { const { escapeHTML, escapeHTMLAttribute } = ibexa.helpers.text; const { dangerouslySetInnerHTML } = ibexa.helpers.dom; const { getInstance } = ibexa.helpers.objectInstances; let getUsersTimeout; - const SELECTOR_TAG = '.ibexa-tag'; + const SELECTOR_TAG = '.ids-chip'; const token = doc.querySelector('meta[name="CSRF-Token"]').content; const siteaccess = doc.querySelector('meta[name="SiteAccess"]').content; const filters = doc.querySelector('.ibexa-filters'); - const clearBtn = filters.querySelector('.ibexa-btn--clear'); - const applyBtn = filters.querySelector('.ibexa-btn--apply'); + const clearBtn = filters.querySelector('.ids-btn--clear'); + const applyBtn = filters.querySelector('.ids-btn--apply'); const contentTypeSelect = doc.querySelector('.ibexa-filters__item--content-type .ibexa-filters__select'); const sectionSelect = doc.querySelector('.ibexa-filters__item--section .ibexa-filters__select'); const lastModifiedSelectNode = doc.querySelector('.ibexa-filters__item--modified .ibexa-filters__select'); @@ -35,7 +37,7 @@ const lastCreatedPeriod = doc.querySelector(lastCreatedPeriodSelector); const lastCreatedStartDate = doc.querySelector(lastCreatedStartDateSelector); const lastCreatedEndDate = doc.querySelector(lastCreatedEndDateSelector); - const creatorInput = doc.querySelector('.ibexa-filters__item--creator .ibexa-input'); + const creatorInput = doc.querySelector('.ibexa-filters__item--creator input:not([type="hidden"])'); const isInitializedCreatorInput = !!creatorInput.value; const searchCreatorInput = doc.querySelector('#search_creator'); const usersList = doc.querySelector('.ibexa-filters__item--creator .ibexa-filters__user-list'); @@ -108,6 +110,7 @@ const methodName = isEnabled ? 'removeAttribute' : 'setAttribute'; applyBtn[methodName]('disabled', !isEnabled); + // ids-btn--disabled class no longer needed - native [disabled] attribute handles styling }; const toggleDatesSelectVisibility = (event, select, dateRange) => { const datesRangeNode = doc.querySelector(event.target.dataset.targetSelector); @@ -234,7 +237,7 @@ form.submit(); }; const clearContentType = (event) => { - const checkbox = doc.querySelector(event.currentTarget.dataset.targetSelector); + const checkbox = doc.querySelector(event.currentTarget.closest('.ids-chip').dataset.targetSelector); checkbox.checked = false; removeSearchTag(event); @@ -265,6 +268,21 @@ 'last-modified': (event) => clearDataRange(event, lastModifiedSelect, lastModifiedDateRange), 'last-created': (event) => clearDataRange(event, lastCreatedSelect, lastCreatedDateRange), }; + const initSearchTagChips = () => { + for (const tagType in clearSearchTagBtnMethods) { + const chips = doc.querySelectorAll(`.ibexa-search-criteria-tags__tag--${tagType}.ids-chip`); + + chips.forEach((chip) => { + if (!chip.dataset.idsInitialized) { + const chipInstance = new Chip(chip); + + chipInstance.init(); + } + + chip.addEventListener('ids:chip:delete:before', clearSearchTagBtnMethods[tagType], false); + }); + } + }; const showMoreContentTypes = (event) => { const btn = event.currentTarget; const contentTypesList = btn @@ -315,11 +333,7 @@ sectionSelect.addEventListener('change', toggleDisabledStateOnApplyBtn, false); } - for (const tagType in clearSearchTagBtnMethods) { - const tagBtns = doc.querySelectorAll(`.ibexa-tag__remove-btn--${tagType}`); - - tagBtns.forEach((btn) => btn.addEventListener('click', clearSearchTagBtnMethods[tagType], false)); - } + initSearchTagChips(); lastModifiedPeriod.addEventListener('change', toggleDisabledStateOnApplyBtn, false); lastModifiedStartDate.addEventListener('change', toggleDisabledStateOnApplyBtn, false); diff --git a/src/bundle/Resources/public/js/scripts/admin.section.list.js b/src/bundle/Resources/public/js/scripts/admin.section.list.js index e0b630d227..997177771e 100644 --- a/src/bundle/Resources/public/js/scripts/admin.section.list.js +++ b/src/bundle/Resources/public/js/scripts/admin.section.list.js @@ -1,5 +1,5 @@ (function (global, doc, ibexa, React, ReactDOMClient) { - const btns = doc.querySelectorAll('.ibexa-btn--open-udw'); + const btns = doc.querySelectorAll('.ids-btn--open-udw'); const udwContainer = doc.getElementById('react-udw'); let udwRoot = null; const closeUDW = () => udwRoot.unmount(); diff --git a/src/bundle/Resources/public/js/scripts/admin.section.view.js b/src/bundle/Resources/public/js/scripts/admin.section.view.js index 5754137b0a..2dd3d0f25a 100644 --- a/src/bundle/Resources/public/js/scripts/admin.section.view.js +++ b/src/bundle/Resources/public/js/scripts/admin.section.view.js @@ -1,5 +1,5 @@ (function (global, doc, ibexa, React, ReactDOMClient) { - const btns = doc.querySelectorAll('.ibexa-btn--open-udw'); + const btns = doc.querySelectorAll('.ids-btn--open-udw, .ids-btn--open-udw'); const udwContainer = doc.getElementById('react-udw'); let udwRoot = null; const closeUDW = () => udwRoot.unmount(); diff --git a/src/bundle/Resources/public/js/scripts/admin.table.js b/src/bundle/Resources/public/js/scripts/admin.table.js index cd95832999..325c822c9c 100644 --- a/src/bundle/Resources/public/js/scripts/admin.table.js +++ b/src/bundle/Resources/public/js/scripts/admin.table.js @@ -1,4 +1,5 @@ (function (global, doc) { + const SELECTOR_TABLE_CHECKBOX = '.ids-input--checkbox'; const ibexaTables = doc.querySelectorAll('.ibexa-table'); const setMainCheckboxState = (mainCheckbox, subCheckboxes, event) => { const isFromJS = event?.detail?.isFromJS ?? false; @@ -61,9 +62,9 @@ } const mainCheckboxIndex = [...headCells].indexOf(headCellWithCheckbox); - const mainCheckbox = headCellWithCheckbox.querySelector('.ibexa-input--checkbox'); + const mainCheckbox = headCellWithCheckbox.querySelector(SELECTOR_TABLE_CHECKBOX); const subCheckboxes = tableBody.querySelectorAll( - `.ibexa-table__cell--has-checkbox:nth-child(${mainCheckboxIndex + 1}) .ibexa-input--checkbox`, + `.ibexa-table__cell--has-checkbox:nth-child(${mainCheckboxIndex + 1}) ${SELECTOR_TABLE_CHECKBOX}`, ); if (!mainCheckbox) { @@ -138,7 +139,7 @@ const uncheckCheckboxes = (table) => { const mainCheckbox = table.querySelector('.ibexa-table__header-cell-checkbox'); - const subCheckboxes = [...table.querySelectorAll('.ibexa-table__cell--has-checkbox .ibexa-input--checkbox')]; + const subCheckboxes = [...table.querySelectorAll(`.ibexa-table__cell--has-checkbox ${SELECTOR_TABLE_CHECKBOX}`)]; mainCheckbox.checked = false; mainCheckbox.indeterminate = false; diff --git a/src/bundle/Resources/public/js/scripts/admin.trash.js b/src/bundle/Resources/public/js/scripts/admin.trash.js index 9c6ac384f3..bcd7dfc9f0 100644 --- a/src/bundle/Resources/public/js/scripts/admin.trash.js +++ b/src/bundle/Resources/public/js/scripts/admin.trash.js @@ -16,7 +16,7 @@ const { numberOfSubitems } = event.detail; const sendToTrashModal = document.querySelector('.ibexa-modal--trash-location'); const modalBody = sendToTrashModal.querySelector('.modal-body'); - const modalSendToTrashButton = sendToTrashModal.querySelector('.modal-footer .ibexa-btn--confirm-send-to-trash'); + const modalSendToTrashButton = sendToTrashModal.querySelector('.modal-footer .ids-btn--confirm-send-to-trash'); const { contentName } = sendToTrashModal.dataset; if (numberOfSubitems) { diff --git a/src/bundle/Resources/public/js/scripts/admin.trash.list.js b/src/bundle/Resources/public/js/scripts/admin.trash.list.js index c65abaa918..3e64523160 100644 --- a/src/bundle/Resources/public/js/scripts/admin.trash.list.js +++ b/src/bundle/Resources/public/js/scripts/admin.trash.list.js @@ -17,10 +17,9 @@ const sortDirection = doc.querySelector('#trash_search_sort_direction'); const creatorInput = doc.querySelector('.ibexa-trash-search-form__item--creator .ibexa-trash-search-form__input'); const usersList = doc.querySelector('.ibexa-trash-search-form__item--creator .ibexa-trash-search-form__user-list'); - const resetCreatorBtn = doc.querySelector('.ibexa-btn--reset-creator'); const searchCreatorInput = doc.querySelector('#trash_search_creator'); const sortableColumns = doc.querySelectorAll('.ibexa-table__sort-column'); - const btns = doc.querySelectorAll('.ibexa-btn--open-udw'); + const btns = doc.querySelectorAll('.ids-btn--open-udw, .ids-btn--open-udw'); const udwContainer = doc.getElementById('react-udw'); const autoSendNodes = doc.querySelectorAll('.ibexa-trash-search-form__item--auto-send'); const errorMessage = Translator.trans(/* @Desc("Cannot fetch user list") */ 'trash.user_list.error', {}, 'ibexa_trash_ui'); @@ -95,12 +94,6 @@ updateTrashForm([event.target]); enableButtons(); }; - const handleResetUser = () => { - searchCreatorInput.value = ''; - - creatorInput.value = ''; - creatorInput.removeAttribute('disabled'); - }; const handleClickOutsideUserList = (event) => { if (event.target.closest('.ibexa-trash-search-form__item--creator')) { return; @@ -173,13 +166,23 @@ doc.querySelector('body').removeEventListener('click', handleClickOutsideUserList, false); } }; + const handleCreatorInputChange = (event) => { + if (event.target.value !== '') { + return; + } + + searchCreatorInput.value = ''; + creatorInput.removeAttribute('readonly'); + usersList.classList.add('ibexa-trash-search-form__user-list--hidden'); + doc.querySelector('body').removeEventListener('click', handleClickOutsideUserList, false); + }; const handleSelectUser = (event) => { searchCreatorInput.value = event.target.dataset.id; usersList.classList.add('ibexa-trash-search-form__user-list--hidden'); creatorInput.value = event.target.dataset.name; - creatorInput.setAttribute('disabled', true); + creatorInput.setAttribute('readonly', true); doc.querySelector('body').removeEventListener('click', handleClickOutsideUserList, false); formSearch.submit(); @@ -251,9 +254,9 @@ autoSendNodes.forEach((node) => node.addEventListener('change', handleAutoSubmitNodes, false)); sortableColumns.forEach((column) => column.addEventListener('click', sortTrashItems, false)); trashedTypeInput.addEventListener('change', toggleDatesSelectVisibility, false); - creatorInput.addEventListener('keyup', handleTyping, false); + creatorInput.addEventListener('input', handleTyping, false); + creatorInput.addEventListener('input', handleCreatorInputChange, false); usersList.addEventListener('click', handleSelectUser, false); - resetCreatorBtn.addEventListener('click', handleResetUser, false); updateTrashForm(trashRestoreCheckboxes); enableButtons(); trashRestoreCheckboxes.forEach((checkbox) => checkbox.addEventListener('change', handleCheckboxChange, false)); diff --git a/src/bundle/Resources/public/js/scripts/admin.url.wildcards.create.js b/src/bundle/Resources/public/js/scripts/admin.url.wildcards.create.js index a957dc5937..b748ff9edb 100644 --- a/src/bundle/Resources/public/js/scripts/admin.url.wildcards.create.js +++ b/src/bundle/Resources/public/js/scripts/admin.url.wildcards.create.js @@ -7,8 +7,12 @@ const discardBtns = modal.querySelectorAll('[data-bs-dismiss="modal"]'); const submitBtn = modal.querySelector('[type="submit"]'); - const inputs = [...modal.querySelectorAll('[required="required"]')]; + const inputs = [...modal.querySelectorAll('[required], [required="required"]')]; const toggleButtonState = () => { + if (!submitBtn || inputs.length === 0) { + return; + } + const isInvalid = inputs.some((input) => input.value.trim().length === 0); const methodName = isInvalid ? 'setAttribute' : 'removeAttribute'; diff --git a/src/bundle/Resources/public/js/scripts/admin.version.edit.conflict.js b/src/bundle/Resources/public/js/scripts/admin.version.edit.conflict.js index da4114023c..e28b703ad6 100644 --- a/src/bundle/Resources/public/js/scripts/admin.version.edit.conflict.js +++ b/src/bundle/Resources/public/js/scripts/admin.version.edit.conflict.js @@ -41,5 +41,5 @@ .catch(showErrorNotification); }; - doc.querySelectorAll('.ibexa-btn--content-draft-edit').forEach((button) => button.addEventListener('click', editVersion, false)); + doc.querySelectorAll('.ids-btn--content-draft-edit').forEach((button) => button.addEventListener('click', editVersion, false)); })(window, window.document, window.bootstrap, window.ibexa, window.Translator, window.Routing); diff --git a/src/bundle/Resources/public/js/scripts/button.content.edit.js b/src/bundle/Resources/public/js/scripts/button.content.edit.js index e16ad17bdd..d286f6417b 100644 --- a/src/bundle/Resources/public/js/scripts/button.content.edit.js +++ b/src/bundle/Resources/public/js/scripts/button.content.edit.js @@ -35,14 +35,14 @@ wrapper.innerHTML = modalHtml; const conflictModal = doc.querySelector('#version-draft-conflict-modal'); - const addDraftButton = wrapper.querySelector('.ibexa-btn--add-draft'); + const addDraftButton = wrapper.querySelector('.ids-btn--add-draft'); if (addDraftButton) { addDraftButton.addEventListener('click', addDraft, false); } wrapper - .querySelectorAll('.ibexa-btn--prevented') + .querySelectorAll('.ids-btn--prevented') .forEach((btn) => btn.addEventListener('click', (wrapperBtnEvent) => wrapperBtnEvent.preventDefault(), false)); bootstrap.Modal.getOrCreateInstance(conflictModal).show(); @@ -80,5 +80,5 @@ .catch(showErrorNotification); }; - doc.querySelectorAll('.ibexa-btn--content-edit').forEach((button) => button.addEventListener('click', editVersion, false)); + doc.querySelectorAll('.ids-btn--content-edit').forEach((button) => button.addEventListener('click', editVersion, false)); })(window, window.document, window.bootstrap, window.ibexa, window.Translator, window.Routing); diff --git a/src/bundle/Resources/public/js/scripts/button.prevent.default.js b/src/bundle/Resources/public/js/scripts/button.prevent.default.js index 0e9039e75a..7bf575388d 100644 --- a/src/bundle/Resources/public/js/scripts/button.prevent.default.js +++ b/src/bundle/Resources/public/js/scripts/button.prevent.default.js @@ -1,3 +1,3 @@ (function (global, doc) { - doc.querySelectorAll('.ibexa-btn--prevented').forEach((btn) => btn.addEventListener('click', (event) => event.preventDefault(), false)); + doc.querySelectorAll('.ids-btn--prevented').forEach((btn) => btn.addEventListener('click', (event) => event.preventDefault(), false)); })(window, window.document); diff --git a/src/bundle/Resources/public/js/scripts/button.state.toggle.js b/src/bundle/Resources/public/js/scripts/button.state.toggle.js index a06a27b90f..e17acd6ac0 100644 --- a/src/bundle/Resources/public/js/scripts/button.state.toggle.js +++ b/src/bundle/Resources/public/js/scripts/button.state.toggle.js @@ -1,8 +1,9 @@ (function (global, doc) { + const SELECTOR_TABLE_CHECKBOX = '.ids-input--checkbox'; const toggleForms = doc.querySelectorAll('.ibexa-toggle-btn-state'); toggleForms.forEach((toggleForm) => { - const checkboxes = [...toggleForm.querySelectorAll('.ibexa-table__cell--has-checkbox .ibexa-input--checkbox')]; + const checkboxes = [...toggleForm.querySelectorAll(`.ibexa-table__cell--has-checkbox ${SELECTOR_TABLE_CHECKBOX}`)]; const buttonRemove = doc.querySelector(toggleForm.dataset.toggleButtonId); if (!buttonRemove) { diff --git a/src/bundle/Resources/public/js/scripts/button.translation.edit.js b/src/bundle/Resources/public/js/scripts/button.translation.edit.js index c6de4dfd00..7181521a01 100644 --- a/src/bundle/Resources/public/js/scripts/button.translation.edit.js +++ b/src/bundle/Resources/public/js/scripts/button.translation.edit.js @@ -2,11 +2,11 @@ class EditTranslation { constructor(config) { this.container = config.container; - this.toggler = config.container.querySelector('.ibexa-btn--translations-list-toggler'); + this.toggler = config.container.querySelector('.ids-btn--translations-list-toggler'); this.extraActionsContainer = config.container.querySelector('.ibexa-extra-actions'); this.closeBtn = config.container.querySelector('.ibexa-extra-actions__close-btn'); this.confirmBtn = config.container.querySelector('.ibexa-extra-actions__confirm-btn'); - this.languagesBtns = config.container.querySelectorAll('.ibexa-btn--select-language'); + this.languagesBtns = config.container.querySelectorAll('.ids-btn--select-language'); this.backdrop = config.backdrop; this.tableNode = null; @@ -64,8 +64,8 @@ this.confirmBtn.dataset.languageCode = languageCode; this.confirmBtn.disabled = false; - this.languagesBtns.forEach((btn) => btn.classList.remove('ibexa-btn--active')); - event.currentTarget.classList.add('ibexa-btn--active'); + this.languagesBtns.forEach((btn) => btn.classList.remove('ids-btn--active')); + event.currentTarget.classList.add('ids-btn--active'); } resetLanguageSelector() { @@ -73,7 +73,7 @@ this.confirmBtn.dataset.languageCode = null; this.confirmBtn.disabled = true; - this.languagesBtns.forEach((btn) => btn.classList.remove('ibexa-btn--active')); + this.languagesBtns.forEach((btn) => btn.classList.remove('ids-btn--active')); } init() { diff --git a/src/bundle/Resources/public/js/scripts/button.trigger.js b/src/bundle/Resources/public/js/scripts/button.trigger.js index bd1092535d..3e93ad4777 100644 --- a/src/bundle/Resources/public/js/scripts/button.trigger.js +++ b/src/bundle/Resources/public/js/scripts/button.trigger.js @@ -2,7 +2,7 @@ doc.addEventListener( 'DOMContentLoaded', () => { - const buttons = doc.querySelectorAll('.ibexa-btn--trigger'); + const buttons = doc.querySelectorAll('.ids-btn--trigger'); const trigger = (event) => { event.preventDefault(); diff --git a/src/bundle/Resources/public/js/scripts/core/dropdown.js b/src/bundle/Resources/public/js/scripts/core/dropdown.js index f0beec4be2..e2a3e8da96 100644 --- a/src/bundle/Resources/public/js/scripts/core/dropdown.js +++ b/src/bundle/Resources/public/js/scripts/core/dropdown.js @@ -48,7 +48,7 @@ this.itemsFixedWrapperContainer = this.container.querySelector('.ibexa-dropdown__items-fixed-wrapper'); this.itemsContainer = this.container.querySelector('.ibexa-dropdown__items'); this.itemsListContainer = this.itemsContainer.querySelector('.ibexa-dropdown__items-list'); - this.itemsFilterInput = this.itemsContainer.querySelector('.ibexa-dropdown__items-filter'); + this.itemsFilterInput = this.itemsContainer.querySelector('.ibexa-dropdown__items-filter-wrapper .ids-input'); this.itemsListFilterEmptyContainer = this.itemsContainer.querySelector('.ibexa-dropdown__items-list-filter-empty'); this.selectionTogglerBtn = this.itemsContainer.querySelector('.ibexa-dropdown__selection-toggler-btn'); @@ -152,7 +152,7 @@ this.sourceInput.querySelectorAll('option').forEach((option) => (option.selected = false)); this.itemsListContainer.querySelectorAll('.ibexa-dropdown__item--selected').forEach((option) => { - const checkbox = option.querySelector('.ibexa-input--checkbox'); + const checkbox = option.querySelector('.ibexa-dropdown__item-checkbox'); option.classList.remove('ibexa-dropdown__item--selected'); @@ -211,7 +211,11 @@ const value = this.getValueFromElement(element); if (value && !this.canSelectOnlyOne) { - element.querySelector('.ibexa-input').checked = selected; + const checkbox = element.querySelector('.ibexa-dropdown__item-checkbox'); + + if (checkbox) { + checkbox.checked = selected; + } } this.itemsListContainer.querySelector(`[data-value=${value}]`).classList.toggle('ibexa-dropdown__item--selected', selected); @@ -314,7 +318,11 @@ itemSelected.classList.remove('ibexa-dropdown__item--selected'); if (!this.canSelectOnlyOne) { - itemSelected.querySelector('.ibexa-input').checked = false; + const checkbox = itemSelected.querySelector('.ibexa-dropdown__item-checkbox'); + + if (checkbox) { + checkbox.checked = false; + } } if (optionSelect) { diff --git a/src/bundle/Resources/public/js/scripts/core/toggle.button.js b/src/bundle/Resources/public/js/scripts/core/toggle.button.js index 19bf315f33..31ef39f7d4 100644 --- a/src/bundle/Resources/public/js/scripts/core/toggle.button.js +++ b/src/bundle/Resources/public/js/scripts/core/toggle.button.js @@ -4,7 +4,11 @@ class ToggleButton { constructor(config) { this.toggleNode = config.toggleNode; - this.inputsSelector = config?.inputsSelector || 'input'; + this.inputsSelector = + config?.inputsSelector || (this.toggleNode.classList.contains('ids-toggle') ? '.ids-toggle__source input' : 'input'); + this.checkedClass = this.toggleNode.classList.contains('ids-toggle') ? 'ids-toggle--checked' : 'ibexa-toggle--is-checked'; + this.disabledClass = this.toggleNode.classList.contains('ids-toggle') ? 'ids-toggle--disabled' : 'ibexa-toggle--is-disabled'; + this.focusedClass = this.toggleNode.classList.contains('ids-toggle') ? 'ids-toggle--focused' : 'ibexa-toggle--is-focused'; this.toggleState = this.toggleState.bind(this); this.addFocus = this.addFocus.bind(this); @@ -18,18 +22,18 @@ const toggler = event.currentTarget; - if (toggler.classList.contains('ibexa-toggle--is-disabled')) { + if (toggler.classList.contains(this.disabledClass)) { return; } - const isChecked = toggler.classList.toggle('ibexa-toggle--is-checked'); + const isChecked = toggler.classList.toggle(this.checkedClass); if (toggler.classList.contains('ibexa-toggle--radio')) { const valueToSet = isChecked ? 1 : 0; toggler.querySelector(`.form-check input[value="${valueToSet}"]`).checked = true; } else { - const toggleInput = toggler.querySelector('.ibexa-toggle__input'); + const toggleInput = toggler.querySelector(this.inputsSelector); toggleInput.checked = isChecked; toggleInput.dispatchEvent(new Event('change')); @@ -39,25 +43,25 @@ addFocus(event) { event.preventDefault(); - const toggler = event.currentTarget.closest('.ibexa-toggle'); + const toggler = event.currentTarget.closest('.ibexa-toggle, .ids-toggle'); - if (toggler.classList.contains('ibexa-toggle--is-disabled')) { + if (toggler.classList.contains(this.disabledClass)) { return; } - toggler.classList.add('ibexa-toggle--is-focused'); + toggler.classList.add(this.focusedClass); } removeFocus(event) { event.preventDefault(); - const toggler = event.currentTarget.closest('.ibexa-toggle'); + const toggler = event.currentTarget.closest('.ibexa-toggle, .ids-toggle'); - if (toggler.classList.contains('ibexa-toggle--is-disabled')) { + if (toggler.classList.contains(this.disabledClass)) { return; } - toggler.classList.remove('ibexa-toggle--is-focused'); + toggler.classList.remove(this.focusedClass); } toggleStateOnSpacePressed(event) { diff --git a/src/bundle/Resources/public/js/scripts/cotf/create.js b/src/bundle/Resources/public/js/scripts/cotf/create.js index d4e938c51c..721a159aea 100644 --- a/src/bundle/Resources/public/js/scripts/cotf/create.js +++ b/src/bundle/Resources/public/js/scripts/cotf/create.js @@ -1,5 +1,5 @@ (function (global, doc, ibexa, React, ReactDOMClient, Translator, Routing) { - const btns = doc.querySelectorAll('.ibexa-btn--cotf-create'); + const btns = doc.querySelectorAll('.ids-btn--cotf-create'); const udwContainer = doc.getElementById('react-udw'); let udwRoot = null; const closeUDW = () => udwRoot.unmount(); diff --git a/src/bundle/Resources/public/js/scripts/details.js b/src/bundle/Resources/public/js/scripts/details.js index e0d0e11297..3d8a9d4103 100644 --- a/src/bundle/Resources/public/js/scripts/details.js +++ b/src/bundle/Resources/public/js/scripts/details.js @@ -1,7 +1,7 @@ (function (global, doc) { const showMoreBtns = doc.querySelectorAll('.ibexa-details__show-more-btn'); const toggleShowMore = (ellipsizedContent, showMoreBtn) => { - const showMoreIcon = showMoreBtn.querySelector('.ibexa-details__show-more-btn-icon'); + const showMoreIcon = showMoreBtn.querySelector('.ids-btn__icon'); const showMoreLabel = showMoreBtn.querySelector('.ibexa-details__show-more-label'); const showLessLabel = showMoreBtn.querySelector('.ibexa-details__show-less-label'); const ellipsizedLinesNo = getComputedStyle(ellipsizedContent).getPropertyValue('--ibexa-details__ellipsized-lines-no'); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ibexa_author.js b/src/bundle/Resources/public/js/scripts/fieldType/ibexa_author.js index 117997bd48..1fd31d76d8 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ibexa_author.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ibexa_author.js @@ -1,6 +1,7 @@ (function (global, doc, ibexa) { - const SELECTOR_REMOVE_AUTHOR = '.ibexa-btn--remove-author'; + const SELECTOR_REMOVE_AUTHOR = '.ids-btn--remove-author'; const SELECTOR_AUTHOR = '.ibexa-data-source__author'; + const SELECTOR_AUTHOR_CHECKBOX = '.ibexa-data-source__author-checkbox'; const SELECTOR_FIELD = '.ibexa-field-edit--ibexa_author'; const SELECTOR_LABEL = '.ibexa-data-source__label'; const SELECTOR_FIELD_EMAIL = '.ibexa-data-source__field--email'; @@ -104,17 +105,17 @@ toggleBulkDeleteButtonState(event) { const container = event.target.closest(SELECTOR_FIELD); - const checkboxes = container.querySelectorAll('.ibexa-input--checkbox'); + const checkboxes = container.querySelectorAll(SELECTOR_AUTHOR_CHECKBOX); const isAnyCheckboxSelected = [...checkboxes].some((checkbox) => checkbox.checked); - const bulkDeleteButton = container.querySelector('.ibexa-btn--bulk-remove-author'); + const bulkDeleteButton = container.querySelector('.ids-btn--bulk-remove-author'); bulkDeleteButton.toggleAttribute('disabled', !isAnyCheckboxSelected); } removeSelectedItems(event) { const container = event.target.closest(SELECTOR_FIELD); - const selectedCheckboxes = container.querySelectorAll('.ibexa-input--checkbox:checked'); - const bulkDeleteButton = container.querySelector('.ibexa-btn--bulk-remove-author'); + const selectedCheckboxes = container.querySelectorAll(`${SELECTOR_AUTHOR_CHECKBOX}:checked`); + const bulkDeleteButton = container.querySelector('.ids-btn--bulk-remove-author'); selectedCheckboxes.forEach((checkbox) => checkbox.closest(SELECTOR_AUTHOR).remove()); @@ -123,7 +124,7 @@ const authorsRowsExist = !!container.querySelector(SELECTOR_AUTHOR); if (!authorsRowsExist) { - container.querySelector('.ibexa-btn--add-author').click(); + container.querySelector('.ids-btn--add-author').click(); } this.updateDisabledState(container); @@ -246,19 +247,19 @@ }, { isValueValidator: false, - selector: '.ibexa-data-source__author .ibexa-input--checkbox', + selector: `.ibexa-data-source__author ${SELECTOR_AUTHOR_CHECKBOX}`, eventName: 'change', callback: 'toggleBulkDeleteButtonState', }, { isValueValidator: false, - selector: '.ibexa-btn--bulk-remove-author', + selector: '.ids-btn--bulk-remove-author', eventName: 'click', callback: 'removeSelectedItems', }, { isValueValidator: false, - selector: '.ibexa-btn--add-author', + selector: '.ids-btn--add-author', eventName: 'click', callback: 'addItem', }, diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ibexa_gmap_location.js b/src/bundle/Resources/public/js/scripts/fieldType/ibexa_gmap_location.js index 00825473c5..bf3189f868 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ibexa_gmap_location.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ibexa_gmap_location.js @@ -453,8 +453,8 @@ const longitudeInput = field.querySelector(SELECTOR_LON_INPUT); const latitudeInput = field.querySelector(SELECTOR_LAT_INPUT); const areCoordsSet = !!longitudeInput.value.length && !!latitudeInput.value.length; - const locateMeBtn = field.querySelector('.ibexa-data-source__locate-me .btn'); - const searchBtn = field.querySelector('.ibexa-btn--search-by-address'); + const locateMeBtn = field.querySelector('.ibexa-data-source__locate-me .ids-btn--locate-me'); + const searchBtn = field.querySelector('.ids-btn--search-by-address'); const mapContainer = field.querySelector('.ibexa-data-source__map'); let mapConfig = { zoom: areCoordsSet ? 15 : 1, diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ibexa_keyword.js b/src/bundle/Resources/public/js/scripts/fieldType/ibexa_keyword.js index ac7bc1945d..7c8449d027 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ibexa_keyword.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ibexa_keyword.js @@ -61,7 +61,7 @@ invalidStateSelectors: [SELECTOR_TAGGIFY, SELECTOR_LABEL], }, { - selector: `${SELECTOR_FIELD} .ibexa-data-source__input.form-control`, + selector: `${SELECTOR_FIELD} .ibexa-data-source__input`, eventName: 'change', callback: 'validateKeywords', errorNodeSelectors: [SELECTOR_ERROR_NODE], @@ -70,7 +70,7 @@ ], }); - const keywordInput = field.querySelector('.ibexa-data-source__input-wrapper .ibexa-data-source__input.form-control'); + const keywordInput = field.querySelector('.ibexa-data-source__input-wrapper .ibexa-data-source__input'); class EzKeywordTaggify extends ibexa.core.Taggify { afterTagsUpdate() { const tags = [...this.tags]; diff --git a/src/bundle/Resources/public/js/scripts/filters.action.btns.js b/src/bundle/Resources/public/js/scripts/filters.action.btns.js index ea1569d8f3..5afef34a45 100644 --- a/src/bundle/Resources/public/js/scripts/filters.action.btns.js +++ b/src/bundle/Resources/public/js/scripts/filters.action.btns.js @@ -5,7 +5,7 @@ const clearBtn = container.querySelector('.ibexa-adaptive-filters__clear-btn'); const applyBtn = container.querySelector('.ibexa-adaptive-filters__submit-btn'); const dropdownNodes = [...container.querySelectorAll('.ibexa-dropdown')]; - const textInputNodes = [...container.querySelectorAll('.ibexa-input--text')]; + const textInputNodes = [...container.querySelectorAll('.ids-input')]; const dateInputNodes = [...container.querySelectorAll('.ibexa-input--date')]; const originalValuesMap = new Map(); const dropdownSelectionsEqual = (selection1, selection2) => { diff --git a/src/bundle/Resources/public/js/scripts/helpers/form.validation.helper.js b/src/bundle/Resources/public/js/scripts/helpers/form.validation.helper.js index 9057dae6d7..1e1f8a1c4f 100644 --- a/src/bundle/Resources/public/js/scripts/helpers/form.validation.helper.js +++ b/src/bundle/Resources/public/js/scripts/helpers/form.validation.helper.js @@ -1,6 +1,9 @@ import { getTranslator } from './context.helper'; import { getIconPath } from './icon.helper'; +const SELECTOR_INPUT = '.ids-input, .ibexa-input'; +const SELECTOR_LABEL = '.ids-label'; + const formatErrorLine = (errorMessage) => { const errorIcon = ` @@ -17,8 +20,8 @@ const formatErrorLine = (errorMessage) => { const checkIsEmpty = (field) => { let errorMessage = ''; const Translator = getTranslator(); - const input = field.querySelector('.ibexa-input'); - const label = field.querySelector('.ibexa-label'); + const input = field.querySelector(SELECTOR_INPUT); + const label = field.querySelector(SELECTOR_LABEL); if (label) { const fieldName = label.innerText; @@ -34,8 +37,8 @@ const checkIsEmpty = (field) => { }; }; const validateIsEmptyField = (field) => { - const input = field.querySelector('.ibexa-input'); - const label = field.querySelector('.ibexa-label'); + const input = field.querySelector(SELECTOR_INPUT); + const label = field.querySelector(SELECTOR_LABEL); const errorWrapper = field.querySelector('.ibexa-form-error'); const validatorOutput = checkIsEmpty(field); const { isValid, errorMessage } = validatorOutput; diff --git a/src/bundle/Resources/public/js/scripts/sidebar/btn/content.edit.js b/src/bundle/Resources/public/js/scripts/sidebar/btn/content.edit.js index a2d8d1287e..cb6d9de02d 100644 --- a/src/bundle/Resources/public/js/scripts/sidebar/btn/content.edit.js +++ b/src/bundle/Resources/public/js/scripts/sidebar/btn/content.edit.js @@ -1,9 +1,9 @@ (function (global, doc) { - const editButtons = doc.querySelectorAll('.ibexa-btn--edit'); + const editButtons = doc.querySelectorAll('.ids-btn--edit'); editButtons.forEach((editButton) => { const languageRadioOption = doc.querySelector( - `.ibexa-extra-actions--edit.ibexa-extra-actions--prevent-show[data-actions="${editButton.dataset.actions}"] .ibexa-input--radio`, + `.ibexa-extra-actions--edit.ibexa-extra-actions--prevent-show[data-actions="${editButton.dataset.actions}"] .ids-input--radio`, ); if (!languageRadioOption) { diff --git a/src/bundle/Resources/public/js/scripts/sidebar/btn/content.hide.js b/src/bundle/Resources/public/js/scripts/sidebar/btn/content.hide.js index d04f59264b..60e32afcc3 100644 --- a/src/bundle/Resources/public/js/scripts/sidebar/btn/content.hide.js +++ b/src/bundle/Resources/public/js/scripts/sidebar/btn/content.hide.js @@ -1,5 +1,5 @@ (function (global, doc, bootstrap) { - const hideButton = doc.querySelector('.ibexa-btn--hide'); + const hideButton = doc.querySelector('.ids-btn--hide'); const modal = doc.querySelector('#hide-content-modal'); const form = doc.querySelector('form[name="content_visibility_update"]'); const visiblity = doc.querySelector('#content_visibility_update_visible'); @@ -9,7 +9,7 @@ } if (modal) { - modal.querySelector('.ibexa-btn--confirm').addEventListener('click', () => { + modal.querySelector('.ids-btn--confirm').addEventListener('click', () => { visiblity.value = 0; form.submit(); }); diff --git a/src/bundle/Resources/public/js/scripts/sidebar/btn/content.reveal.js b/src/bundle/Resources/public/js/scripts/sidebar/btn/content.reveal.js index b82f904cd1..3c656ec67a 100644 --- a/src/bundle/Resources/public/js/scripts/sidebar/btn/content.reveal.js +++ b/src/bundle/Resources/public/js/scripts/sidebar/btn/content.reveal.js @@ -1,5 +1,5 @@ (function (global, doc) { - const revealButton = doc.querySelector('.ibexa-btn--reveal'); + const revealButton = doc.querySelector('.ids-btn--reveal'); const form = doc.querySelector('form[name="content_visibility_update"]'); const visiblity = doc.querySelector('#content_visibility_update_visible'); diff --git a/src/bundle/Resources/public/js/scripts/sidebar/btn/contenttype.edit.js b/src/bundle/Resources/public/js/scripts/sidebar/btn/contenttype.edit.js index 437a1b5f8c..87a65792a5 100644 --- a/src/bundle/Resources/public/js/scripts/sidebar/btn/contenttype.edit.js +++ b/src/bundle/Resources/public/js/scripts/sidebar/btn/contenttype.edit.js @@ -1,6 +1,6 @@ (function (global, doc) { - const editButton = doc.querySelector('.ibexa-btn--edit'); - const languageRadioOption = doc.querySelector('.ibexa-extra-actions--edit.ibexa-extra-actions--prevent-show .ibexa-input--radio'); + const editButton = doc.querySelector('.ids-btn--edit'); + const languageRadioOption = doc.querySelector('.ibexa-extra-actions--edit.ibexa-extra-actions--prevent-show .ids-input--radio'); const editActions = doc.querySelector('.ibexa-extra-actions--edit'); const btns = editActions.querySelectorAll('.form-check [type="radio"]'); const changeHandler = () => { diff --git a/src/bundle/Resources/public/js/scripts/sidebar/btn/location.edit.js b/src/bundle/Resources/public/js/scripts/sidebar/btn/location.edit.js index 5b8d3029e8..177a7e2ab3 100644 --- a/src/bundle/Resources/public/js/scripts/sidebar/btn/location.edit.js +++ b/src/bundle/Resources/public/js/scripts/sidebar/btn/location.edit.js @@ -21,7 +21,7 @@ doc.body.dispatchEvent(event); }; const attachModalListeners = (wrapper, form, btns) => { - const addDraftButton = wrapper.querySelector('.ibexa-btn--add-draft'); + const addDraftButton = wrapper.querySelector('.ids-btn--add-draft'); const conflictModal = doc.querySelector('#version-draft-conflict-modal'); if (addDraftButton) { @@ -29,7 +29,7 @@ } wrapper - .querySelectorAll('.ibexa-btn--prevented') + .querySelectorAll('.ids-btn--prevented') .forEach((btn) => btn.addEventListener('click', (event) => event.preventDefault(), false)); if (conflictModal) { @@ -54,12 +54,12 @@ const checkedBtn = event.currentTarget; const languageCode = checkedBtn.value; const checkVersionDraftLink = Routing.generate('ibexa.version_draft.has_no_conflict', { contentId, languageCode, locationId }); - const activeLanguageItem = event.target.closest('.ibexa-instant-filter__group-item')?.querySelector('.ibexa-label'); - const allLanguageItems = form.querySelectorAll('.ibexa-instant-filter__group-item .ibexa-label'); + const activeLanguageItem = event.target.closest('.ibexa-instant-filter__group-item')?.querySelector('.ids-label'); + const allLanguageItems = form.querySelectorAll('.ibexa-instant-filter__group-item .ids-label'); const submitBtn = form.querySelector('.ibexa-extra-actions__confirm-btn'); allLanguageItems.forEach((item) => { - item.classList.remove('ibexa-label--active'); + item.classList.remove('ids-label--active'); }); fetch(checkVersionDraftLink, { @@ -83,7 +83,7 @@ } submitBtn.disabled = false; - activeLanguageItem?.classList.add('ibexa-label--active'); + activeLanguageItem?.classList.add('ids-label--active'); }); }; const attachEventsToEditActionsWidget = (container) => { diff --git a/src/bundle/Resources/public/js/scripts/sidebar/btn/user.edit.js b/src/bundle/Resources/public/js/scripts/sidebar/btn/user.edit.js index d2a8204ced..6d1e791ac4 100644 --- a/src/bundle/Resources/public/js/scripts/sidebar/btn/user.edit.js +++ b/src/bundle/Resources/public/js/scripts/sidebar/btn/user.edit.js @@ -1,6 +1,6 @@ (function (global, doc) { - const editButton = doc.querySelector('.ibexa-btn--edit-user'); - const languageRadioOption = doc.querySelector('.ibexa-extra-actions--edit-user.ibexa-extra-actions--prevent-show .ibexa-input--radio'); + const editButton = doc.querySelector('.ids-btn--edit-user'); + const languageRadioOption = doc.querySelector('.ibexa-extra-actions--edit-user.ibexa-extra-actions--prevent-show .ids-input--radio'); const editActions = doc.querySelector('.ibexa-extra-actions--edit-user'); if (!editActions || !languageRadioOption) { diff --git a/src/bundle/Resources/public/js/scripts/sidebar/extra.actions.js b/src/bundle/Resources/public/js/scripts/sidebar/extra.actions.js index e531ccf33c..066cf2d5a3 100644 --- a/src/bundle/Resources/public/js/scripts/sidebar/extra.actions.js +++ b/src/bundle/Resources/public/js/scripts/sidebar/extra.actions.js @@ -4,10 +4,8 @@ import { getInstance } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scri const CLASS_HIDDEN = 'ibexa-extra-actions--hidden'; const CLASS_EXPANDED = 'ibexa-context-menu--expanded'; const CLASS_PREVENT_SHOW = 'ibexa-extra-actions--prevent-show'; - const closeBtns = doc.querySelectorAll( - '.ibexa-extra-actions .ibexa-btn--close, .ibexa-extra-actions .ibexa-extra-actions__btn--cancel', - ); - const btns = [...doc.querySelectorAll('.ibexa-btn--extra-actions')]; + const closeBtns = doc.querySelectorAll('.ibexa-extra-actions .ids-btn--close, .ibexa-extra-actions .ibexa-extra-actions__btn--cancel'); + const btns = [...doc.querySelectorAll('.ids-btn--extra-actions, .ids-btn--extra-actions')]; const menu = doc.querySelector('.ibexa-context-menu'); const backdrop = new ibexa.core.Backdrop(); const formsInitialData = new Map(); diff --git a/src/bundle/Resources/public/js/scripts/sidebar/side.panel.js b/src/bundle/Resources/public/js/scripts/sidebar/side.panel.js index 48fa8891db..f3f6f1e29f 100644 --- a/src/bundle/Resources/public/js/scripts/sidebar/side.panel.js +++ b/src/bundle/Resources/public/js/scripts/sidebar/side.panel.js @@ -1,8 +1,6 @@ (function (global, doc, ibexa) { const CLASS_HIDDEN = 'ibexa-side-panel--hidden'; - const sidePanelCloseBtns = doc.querySelectorAll( - '.ibexa-side-panel .ibexa-btn--close, .ibexa-side-panel .ibexa-side-panel__btn--cancel', - ); + const sidePanelCloseBtns = doc.querySelectorAll('.ibexa-side-panel .ids-btn--close, .ibexa-side-panel .ibexa-side-panel__btn--cancel'); const sidePanelTriggers = [...doc.querySelectorAll('.ibexa-side-panel-trigger')]; const panelBackdrops = new Map(); const defaultBackdrop = new ibexa.core.Backdrop(); diff --git a/src/bundle/Resources/public/js/scripts/udw/copy.js b/src/bundle/Resources/public/js/scripts/udw/copy.js index 3378b5b0f8..91f33b85dd 100644 --- a/src/bundle/Resources/public/js/scripts/udw/copy.js +++ b/src/bundle/Resources/public/js/scripts/udw/copy.js @@ -1,5 +1,5 @@ (function (global, doc, ibexa, React, ReactDOMClient, Translator) { - const btns = doc.querySelectorAll('.ibexa-btn--udw-copy'); + const btns = doc.querySelectorAll('.ids-btn--udw-copy'); const form = doc.querySelector('form[name="location_copy"]'); const input = form.querySelector('#location_copy_new_parent_location'); const udwContainer = doc.getElementById('react-udw'); diff --git a/src/bundle/Resources/public/js/scripts/udw/copy_subtree.js b/src/bundle/Resources/public/js/scripts/udw/copy_subtree.js index fa1670e5ca..47853926be 100644 --- a/src/bundle/Resources/public/js/scripts/udw/copy_subtree.js +++ b/src/bundle/Resources/public/js/scripts/udw/copy_subtree.js @@ -1,5 +1,5 @@ (function (global, doc, ibexa, React, ReactDOMClient, Translator) { - const btns = doc.querySelectorAll('.ibexa-btn--udw-copy-subtree'); + const btns = doc.querySelectorAll('.ids-btn--udw-copy-subtree'); const form = doc.querySelector('form[name="location_copy_subtree"]'); const input = form.querySelector('#location_copy_subtree_new_parent_location'); const udwContainer = doc.querySelector('#react-udw'); diff --git a/src/bundle/Resources/public/js/scripts/udw/move.js b/src/bundle/Resources/public/js/scripts/udw/move.js index 731872e2ef..35731284a3 100644 --- a/src/bundle/Resources/public/js/scripts/udw/move.js +++ b/src/bundle/Resources/public/js/scripts/udw/move.js @@ -1,5 +1,5 @@ (function (global, doc, ibexa, React, ReactDOMClient, Translator) { - const btns = doc.querySelectorAll('.ibexa-btn--udw-move'); + const btns = doc.querySelectorAll('.ids-btn--udw-move'); const form = doc.querySelector('form[name="location_move"]'); if (!form) { diff --git a/src/bundle/Resources/public/js/scripts/udw/swap.js b/src/bundle/Resources/public/js/scripts/udw/swap.js index fd6a59159c..66685ada98 100644 --- a/src/bundle/Resources/public/js/scripts/udw/swap.js +++ b/src/bundle/Resources/public/js/scripts/udw/swap.js @@ -1,5 +1,5 @@ (function (global, doc, ibexa, React, ReactDOMClient, Translator) { - const btns = doc.querySelectorAll('.ibexa-btn--udw-swap'); + const btns = doc.querySelectorAll('.ids-btn--udw-swap'); const form = doc.querySelector('form[name="location_swap"]'); if (!form) { diff --git a/src/bundle/Resources/public/js/scripts/user.invitation.modal.js b/src/bundle/Resources/public/js/scripts/user.invitation.modal.js index 6adc58b8d4..9d359f3161 100644 --- a/src/bundle/Resources/public/js/scripts/user.invitation.modal.js +++ b/src/bundle/Resources/public/js/scripts/user.invitation.modal.js @@ -9,7 +9,7 @@ export class UserInvitationModal { this.modal = options.modal; this.stickyTopContainer = this.modal.querySelector('.ibexa-user-invitation-modal__sticky-top'); this.searchInput = this.modal.querySelector('.ibexa-user-invitation-modal__search-input'); - this.searchBtn = this.modal.querySelector('.ibexa-input-text-wrapper__action-btn--search'); + this.searchBtn = this.modal.querySelector('.ids-input-text__search-btn, .ibexa-input-text-wrapper__action-btn--search'); this.searchNoEntries = this.modal.querySelector('.ibexa-user-invitation-modal__search-no-entries'); this.badFileAlert = this.modal.querySelector('.ibexa-user-invitation-modal__bad-file-alert'); this.badFileAlertCloseBtn = this.badFileAlert.querySelector('.ibexa-alert__close-btn'); @@ -117,7 +117,7 @@ export class UserInvitationModal { const emptyEmailIssueNode = entry.querySelector('.ibexa-user-invitation-modal__issue-email-empty'); const invalidEmailIssueNode = entry.querySelector('.ibexa-user-invitation-modal__issue-email-invalid-format'); const { issueInvalidEmailTemplate, issueEmptyEmailTemplate } = this.entriesContainer.dataset; - const emailInput = entry.querySelector('.ibexa-user-invitation-modal__email-wrapper .ibexa-input--text'); + const emailInput = entry.querySelector('.ibexa-user-invitation-modal__email-wrapper .ids-input'); emailInput.classList.toggle('is-invalid', isEmptyError || isInvalidFormatError); @@ -138,7 +138,7 @@ export class UserInvitationModal { } validateEntryEmail(entry) { - const emailInput = entry.querySelector('.ibexa-user-invitation-modal__email-wrapper .ibexa-input--text'); + const emailInput = entry.querySelector('.ibexa-user-invitation-modal__email-wrapper .ids-input'); const errors = this.validateEmail(emailInput); this.toggleInvalidEmailState(entry, errors); @@ -279,7 +279,7 @@ export class UserInvitationModal { attachEntryListeners(entry) { const deleteEntryBtn = entry.querySelector('.ibexa-user-invitation-modal__entry-delete-btn'); - const emailInput = entry.querySelector('.ibexa-user-invitation-modal__email-wrapper .ibexa-input--text'); + const emailInput = entry.querySelector('.ibexa-user-invitation-modal__email-wrapper .ids-input'); deleteEntryBtn.addEventListener('click', this.handleEntryDelete, false); emailInput.addEventListener('blur', this.handleEmailValidation, false); @@ -452,7 +452,7 @@ export class UserInvitationModal { this.initialEntries.forEach((initialEntry) => { this.attachEntryListeners(initialEntry); - const emailInput = initialEntry.querySelector('.ibexa-user-invitation-modal__email-wrapper .ibexa-input--text'); + const emailInput = initialEntry.querySelector('.ibexa-user-invitation-modal__email-wrapper .ids-input'); const isEmailEmpty = !emailInput.value; if (!isEmailEmpty) { @@ -490,7 +490,7 @@ export class UserInvitationModal { this.goToNextIssueBtn.addEventListener('click', this.scrollToNextIssue, false); this.searchInput.addEventListener('keyup', this.handleSearch, false); - this.searchBtn.addEventListener('keyup', this.handleSearch, false); + this.searchBtn?.addEventListener('keyup', this.handleSearch, false); this.fakeSubmitBtn.addEventListener( 'click', diff --git a/src/bundle/Resources/public/scss/_adaptive-filters.scss b/src/bundle/Resources/public/scss/_adaptive-filters.scss index f423a08baa..52e4831f26 100644 --- a/src/bundle/Resources/public/scss/_adaptive-filters.scss +++ b/src/bundle/Resources/public/scss/_adaptive-filters.scss @@ -121,7 +121,7 @@ align-items: flex-end; padding-right: calculateRem(16px); - .ibexa-label { + .ids-label { margin-top: 0; } } @@ -171,7 +171,7 @@ } } - &--fake.ibexa-btn.ibexa-btn { + &--fake:is(.ibexa-btn, .ids-btn) { height: 0; padding-top: 0; padding-bottom: 0; diff --git a/src/bundle/Resources/public/scss/_add-translation.scss b/src/bundle/Resources/public/scss/_add-translation.scss index f40329c714..51e69e8e5a 100644 --- a/src/bundle/Resources/public/scss/_add-translation.scss +++ b/src/bundle/Resources/public/scss/_add-translation.scss @@ -9,7 +9,7 @@ display: flex; flex-wrap: wrap; - .ibexa-label { + .ids-label { margin-top: 0; } } diff --git a/src/bundle/Resources/public/scss/_alerts.scss b/src/bundle/Resources/public/scss/_alerts.scss index 40c7c07fc7..b176910eca 100644 --- a/src/bundle/Resources/public/scss/_alerts.scss +++ b/src/bundle/Resources/public/scss/_alerts.scss @@ -46,12 +46,19 @@ margin-top: calculateRem(8px); // Fixing position for rows } - &__close-btn { + &__close-btn.ids-btn.ids-btn { grid-area: close-btn; fill: inherit; padding: calculateRem(4px); border-radius: 50%; margin-left: calculateRem(5px); + width: calculateRem(18px); + height: calculateRem(18px); + + .ids-icon { + width: calculateRem(8px); + height: calculateRem(8px); + } &:active, &:focus-visible { diff --git a/src/bundle/Resources/public/scss/_buttons.scss b/src/bundle/Resources/public/scss/_buttons.scss index 91f22189a0..83123980f3 100644 --- a/src/bundle/Resources/public/scss/_buttons.scss +++ b/src/bundle/Resources/public/scss/_buttons.scss @@ -590,7 +590,7 @@ } } -.ibexa-btn--content-edit { +.ids-btn--content-edit { background-color: transparent; cursor: pointer; } @@ -604,3 +604,9 @@ button:focus { outline: 0; } + +a.ids-btn { + &:hover { + text-decoration: none; + } +} diff --git a/src/bundle/Resources/public/scss/_content-type-edit.scss b/src/bundle/Resources/public/scss/_content-type-edit.scss index 9f94d7b4e3..595861e0f5 100644 --- a/src/bundle/Resources/public/scss/_content-type-edit.scss +++ b/src/bundle/Resources/public/scss/_content-type-edit.scss @@ -57,7 +57,7 @@ .form-check { margin-bottom: calculateRem(16px); - .ibexa-label { + .ids-label { margin-bottom: 0; } } diff --git a/src/bundle/Resources/public/scss/_context-menu.scss b/src/bundle/Resources/public/scss/_context-menu.scss index 812536c808..69896cf47b 100644 --- a/src/bundle/Resources/public/scss/_context-menu.scss +++ b/src/bundle/Resources/public/scss/_context-menu.scss @@ -37,9 +37,9 @@ &--more { position: relative; - .ibexa-btn--more { + .ibexa-btn--more, + .ibexa-btn--more.ids-btn { align-items: center; - height: calculateRem(48px); } } } diff --git a/src/bundle/Resources/public/scss/_custom-url-form.scss b/src/bundle/Resources/public/scss/_custom-url-form.scss index 7626b45f09..e39b2788b4 100644 --- a/src/bundle/Resources/public/scss/_custom-url-form.scss +++ b/src/bundle/Resources/public/scss/_custom-url-form.scss @@ -6,7 +6,7 @@ margin-bottom: calculateRem(24px); &:first-child { - .ibexa-label { + .ids-label { margin-top: 0; } } @@ -25,13 +25,13 @@ &--checked { display: none; - .ibexa-toggle--is-checked + & { + .ids-toggle--checked + & { display: block; } } &--unchecked { - .ibexa-toggle--is-checked + .ibexa-custom-url-from__info-text--checked + & { + .ids-toggle--checked + .ibexa-custom-url-from__info-text--checked + & { display: none; } } diff --git a/src/bundle/Resources/public/scss/_default-location.scss b/src/bundle/Resources/public/scss/_default-location.scss index 14cd478e60..e1e424ac5a 100644 --- a/src/bundle/Resources/public/scss/_default-location.scss +++ b/src/bundle/Resources/public/scss/_default-location.scss @@ -10,16 +10,16 @@ display: flex; align-items: center; - .ibexa-btn__label--change { + .ids-btn__label--change { display: none; } &--filled { - .ibexa-btn__label--change { + .ids-btn__label--change { display: inline; } - .ibexa-btn__label--select { + .ids-btn__label--select { display: none; } } diff --git a/src/bundle/Resources/public/scss/_details.scss b/src/bundle/Resources/public/scss/_details.scss index 5519de600a..15b875305b 100644 --- a/src/bundle/Resources/public/scss/_details.scss +++ b/src/bundle/Resources/public/scss/_details.scss @@ -19,7 +19,7 @@ flex-basis: 25%; padding: calculateRem(8px) calculateRem(8px) calculateRem(8px) 0; - .ibexa-label { + .ids-label { margin-top: calculateRem(8px); margin-bottom: 0; } @@ -79,7 +79,9 @@ padding-right: 0; &--hidden { - display: none; + &.ids-btn { + display: none; + } } } diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss index 319de4f673..65ac913683 100644 --- a/src/bundle/Resources/public/scss/_dropdown.scss +++ b/src/bundle/Resources/public/scss/_dropdown.scss @@ -187,8 +187,10 @@ display: flex; flex-direction: column; - .ibexa-input-text-wrapper { + .ibexa-input-text-wrapper, + .ids-input-text { width: 100%; + display: block; padding: calculateRem(8px) calculateRem(12px); &__actions { @@ -197,7 +199,8 @@ } &--search-hidden { - .ibexa-input-text-wrapper { + .ibexa-input-text-wrapper, + .ids-input-text { display: none; } } @@ -282,7 +285,7 @@ } } - .ibexa-input { + .ibexa-dropdown__item-checkbox { flex-shrink: 0; margin: 0 calculateRem(16px) 0 0; } diff --git a/src/bundle/Resources/public/scss/_extra-actions.scss b/src/bundle/Resources/public/scss/_extra-actions.scss index 0dffaeba9d..5805791059 100644 --- a/src/bundle/Resources/public/scss/_extra-actions.scss +++ b/src/bundle/Resources/public/scss/_extra-actions.scss @@ -89,7 +89,8 @@ margin-top: calculateRem(42px); display: flex; - .ibexa-btn + .ibexa-btn { + .ibexa-btn + .ibexa-btn, + .ids-btn + .ids-btn { margin-left: calculateRem(16px); } } @@ -136,7 +137,7 @@ padding-left: 0; } - .ibexa-label { + .ids-label { @include edit-language-item; } diff --git a/src/bundle/Resources/public/scss/_field-group.scss b/src/bundle/Resources/public/scss/_field-group.scss index 9bff83bdda..b13206e1cd 100644 --- a/src/bundle/Resources/public/scss/_field-group.scss +++ b/src/bundle/Resources/public/scss/_field-group.scss @@ -30,7 +30,7 @@ &__language-form { display: flex; - .ibexa-label { + .ids-label { margin: calculateRem(8px) calculateRem(8px) 0; } diff --git a/src/bundle/Resources/public/scss/_filters.scss b/src/bundle/Resources/public/scss/_filters.scss index 0a7b918eda..f92cf90544 100644 --- a/src/bundle/Resources/public/scss/_filters.scss +++ b/src/bundle/Resources/public/scss/_filters.scss @@ -61,7 +61,7 @@ margin-bottom: 0; } - .ibexa-label { + .ids-label { font-size: $ibexa-text-font-size-medium; color: $ibexa-color-dark; margin-top: calculateRem(16px); diff --git a/src/bundle/Resources/public/scss/_global-search.scss b/src/bundle/Resources/public/scss/_global-search.scss index 5b79b659db..b2091628ad 100644 --- a/src/bundle/Resources/public/scss/_global-search.scss +++ b/src/bundle/Resources/public/scss/_global-search.scss @@ -6,65 +6,90 @@ width: 100%; max-width: calculateRem(600px); position: relative; + --ibexa-input-text-color: #{$ibexa-color-white}; + --ibexa-text-color: #{$ibexa-color-white}; - .ibexa-input-text-wrapper { - &--search { - width: auto; + .ids-input-text { + --ids-input-default-bg-color: #{color.change($ibexa-color-white, $alpha: 0.1)}; + --ids-input-default-border-color: transparent; + --ids-input-default-text-color: #{$ibexa-color-white}; + --ids-input-hover-border-color: #{$ibexa-color-info-600}; + --ids-input-active-border-color: #{$ibexa-color-info-600}; + --ids-input-focus-border-color: #{$ibexa-color-info-600}; - .ibexa-icon { - fill: $ibexa-color-white; + &:hover { + .ids-input { + border-color: $ibexa-color-info-600; } } - &__action-btn { - &:hover { - .ibexa-icon { - fill: $ibexa-color-info; + &:focus-within { + .ids-input-text__search-btn { + background: $ibexa-color-info-600; + + .ids-icon { + fill: $ibexa-color-white; } } + } - &--search { - width: calculateRem(40px); - height: calculateRem(40px); - transform: translateX(calculateRem(8px)); - - &:hover { - background: $ibexa-color-info-600; - box-shadow: 0 calculateRem(22px) calculateRem(24px) 0 color.change($ibexa-color-info, $alpha: 0.2); + &:has(.ibexa-global-search__input:not(:placeholder-shown)) { + .ids-input-text__search-btn { + background: $ibexa-color-info-600; - .ibexa-icon { - fill: $ibexa-color-white; - } + .ids-icon { + fill: $ibexa-color-white; } + } + } + } - &:focus { - color: $ibexa-color-white; - background: $ibexa-color-info-600; - border-color: $ibexa-color-info-600; - box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-white, $alpha: 0.2); + .ids-input-text__actions { + padding-right: 0; + } - .ibexa-icon { - fill: $ibexa-color-white; - } - } + .ids-clear-btn { + margin-right: calculateRem(8px); + + .ids-icon { + fill: $ibexa-color-light; + } + + &:hover { + .ids-icon { + fill: $ibexa-color-info; } + } - &--clear { - &:focus { - border: none; - box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-white, $alpha: 0.2); + &:focus { + border: none; + box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-white, $alpha: 0.2); - .ibexa-icon { - fill: $ibexa-color-white; - } - } + .ids-icon { + fill: $ibexa-color-white; } } + } + + .ids-btn.ids-input-text__search-btn { + width: calculateRem(40px); + height: calculateRem(40px); + transform: none; + + .ids-icon { + fill: $ibexa-color-white; + } &:hover { - .ibexa-input { - border-color: $ibexa-color-info-600; - } + background: $ibexa-color-info-600; + box-shadow: 0 calculateRem(22px) calculateRem(24px) 0 color.change($ibexa-color-info, $alpha: 0.2); + } + + &:focus { + color: $ibexa-color-white; + background: $ibexa-color-info-600; + border-color: $ibexa-color-info-600; + box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-white, $alpha: 0.2); } } @@ -75,49 +100,23 @@ background: color.change($ibexa-color-white, $alpha: 0.1); border-color: transparent; - &.ibexa-input--text { - &:not(:disabled) { - &:hover { - box-shadow: none; - border-color: $ibexa-color-info-600; - - & + .ibexa-input-text-wrapper__actions { - .ibexa-input-text-wrapper__action-btn--search { - background: transparent; - } - } - } - &:focus { - border-color: $ibexa-color-info-600; - background: color.change($ibexa-color-white, $alpha: 0.1); - box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-white, $alpha: 0.2); - - & + .ibexa-input-text-wrapper__actions { - .ibexa-input-text-wrapper__action-btn--search { - background: $ibexa-color-info-600; - } - } - } - - &:active, - &:not(:placeholder-shown) { - box-shadow: none; - border-color: $ibexa-color-info-600; + &:not(:disabled) { + &:hover { + box-shadow: none; + border-color: $ibexa-color-info-600; + } - & + .ibexa-input-text-wrapper__actions { - .ibexa-input-text-wrapper__action-btn--search { - background: $ibexa-color-info-600; - } - } - } + &:focus { + color: $ibexa-color-white; + border-color: $ibexa-color-info-600; + background: color.change($ibexa-color-white, $alpha: 0.1); + box-shadow: 0 0 0 calculateRem(4px) color.change($ibexa-color-white, $alpha: 0.2); + } - &:not(:placeholder-shown):hover { - & + .ibexa-input-text-wrapper__actions { - .ibexa-input-text-wrapper__action-btn--search { - background: $ibexa-color-info-600; - } - } - } + &:active, + &:not(:placeholder-shown) { + box-shadow: none; + border-color: $ibexa-color-info-600; } } diff --git a/src/bundle/Resources/public/scss/_grid-view-item.scss b/src/bundle/Resources/public/scss/_grid-view-item.scss index 99df31a488..ee987e6f27 100644 --- a/src/bundle/Resources/public/scss/_grid-view-item.scss +++ b/src/bundle/Resources/public/scss/_grid-view-item.scss @@ -29,8 +29,8 @@ border-color: $ibexa-color-dark; text-decoration: none; - .ibexa-input--checkbox, - .ibexa-input--radio { + .ids-input--checkbox, + .ids-input--radio { border-color: $ibexa-color-primary; } } @@ -180,9 +180,16 @@ top: calculateRem(10px); display: none; - .ibexa-input { + .ibexa-input, + .ids-input { background-color: $ibexa-color-white; } + + &--hovered { + .ids-input { + border-color: $ibexa-color-primary; + } + } } &:hover { diff --git a/src/bundle/Resources/public/scss/_icons.scss b/src/bundle/Resources/public/scss/_icons.scss index ec7b1b6eed..d0111e3d8d 100644 --- a/src/bundle/Resources/public/scss/_icons.scss +++ b/src/bundle/Resources/public/scss/_icons.scss @@ -67,7 +67,7 @@ } } -.ibexa-btn--extra-actions { +.ids-btn--extra-actions { .ibexa-icon { pointer-events: none; } diff --git a/src/bundle/Resources/public/scss/_inputs.scss b/src/bundle/Resources/public/scss/_inputs.scss index ed44cd83b4..075d7442c3 100644 --- a/src/bundle/Resources/public/scss/_inputs.scss +++ b/src/bundle/Resources/public/scss/_inputs.scss @@ -530,3 +530,15 @@ } } } + +.form-check-input:checked { + background-color: $ibexa-color-white; +} + +.form-check-input:checked[type='checkbox'] { + --bs-form-check-bg-image: none; +} + +.form-check-input[type='checkbox'] { + border-radius: calculateRem(2px); +} diff --git a/src/bundle/Resources/public/scss/_instant-filter.scss b/src/bundle/Resources/public/scss/_instant-filter.scss index 24c71b7606..31fb9ea605 100644 --- a/src/bundle/Resources/public/scss/_instant-filter.scss +++ b/src/bundle/Resources/public/scss/_instant-filter.scss @@ -64,7 +64,7 @@ } &:hover { - .ibexa-label--checkbox-radio { + .ids-choice-input-label { color: $ibexa-color-primary; } diff --git a/src/bundle/Resources/public/scss/_labels.scss b/src/bundle/Resources/public/scss/_labels.scss index 95646e84e3..620de71298 100644 --- a/src/bundle/Resources/public/scss/_labels.scss +++ b/src/bundle/Resources/public/scss/_labels.scss @@ -2,42 +2,16 @@ @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/functions/calculate.rem' as *; @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/mixins' as *; -.ibexa-label { +.ids-label { @include label-required(); - & { - font-size: $ibexa-text-font-size-small; - color: $ibexa-color-dark-400; - line-height: calculateRem(18px); - margin-bottom: calculateRem(8px); - padding-top: 0; - padding-bottom: 0; - } - - .ibexa-icon { - fill: $ibexa-color-dark-400; - } - - &--checkbox-radio { - font-size: calculateRem(14px); - line-height: calculateRem(21px); - color: $ibexa-color-dark; - margin: 0 0 calculateRem(9px); - - &.required { - &:after { - content: ''; - } - } - } - &.form-label.is-invalid { color: $ibexa-color-danger; } } .form-check-inline { - .ibexa-label { + .ids-label { &--checkbox-radio { margin: 0; } @@ -46,7 +20,7 @@ .ibexa-form-block { .form-group:first-of-type { - .ibexa-label { + .ids-label { margin-top: 0; } } diff --git a/src/bundle/Resources/public/scss/_list-filters.scss b/src/bundle/Resources/public/scss/_list-filters.scss index 015f96b439..56bf67e3dc 100644 --- a/src/bundle/Resources/public/scss/_list-filters.scss +++ b/src/bundle/Resources/public/scss/_list-filters.scss @@ -87,7 +87,7 @@ } &__item { - .ibexa-label { + .ids-label { margin: 0; padding: 0; } diff --git a/src/bundle/Resources/public/scss/_login.scss b/src/bundle/Resources/public/scss/_login.scss index 62d867116f..2e9a73414d 100644 --- a/src/bundle/Resources/public/scss/_login.scss +++ b/src/bundle/Resources/public/scss/_login.scss @@ -77,7 +77,7 @@ display: flex; } - .ibexa-label { + .ids-label { margin-top: calculateRem(16px); } @@ -104,7 +104,7 @@ margin-top: calculateRem(32px); & + .has-error { - .ibexa-label { + .ids-label { margin-top: 0; } } diff --git a/src/bundle/Resources/public/scss/_mixins.scss b/src/bundle/Resources/public/scss/_mixins.scss index 5599245922..79b573129e 100644 --- a/src/bundle/Resources/public/scss/_mixins.scss +++ b/src/bundle/Resources/public/scss/_mixins.scss @@ -4,7 +4,7 @@ @mixin datetime-field() { &.is-invalid { - .ibexa-label { + .ids-label { color: $ibexa-color-danger; } diff --git a/src/bundle/Resources/public/scss/_modals.scss b/src/bundle/Resources/public/scss/_modals.scss index 5419570f89..de7c52aaad 100644 --- a/src/bundle/Resources/public/scss/_modals.scss +++ b/src/bundle/Resources/public/scss/_modals.scss @@ -25,6 +25,10 @@ & { padding: calculateRem(2px); } + + &.ids-btn { + top: calculateRem(22px); + } } } @@ -37,7 +41,7 @@ margin-top: calculateRem(18px); } - .ibexa-label { + .ids-label { font-size: calculateRem(16px); } diff --git a/src/bundle/Resources/public/scss/_page-title.scss b/src/bundle/Resources/public/scss/_page-title.scss index 05780acda0..e01aa60f7e 100644 --- a/src/bundle/Resources/public/scss/_page-title.scss +++ b/src/bundle/Resources/public/scss/_page-title.scss @@ -28,7 +28,8 @@ white-space: nowrap; } - .ibexa-badge { + .ibexa-badge, + .ids-tag { margin-left: calculateRem(16px); font-family: $ibexa-font-family; } diff --git a/src/bundle/Resources/public/scss/_search-links-form.scss b/src/bundle/Resources/public/scss/_search-links-form.scss index 022886d474..30558f3e42 100644 --- a/src/bundle/Resources/public/scss/_search-links-form.scss +++ b/src/bundle/Resources/public/scss/_search-links-form.scss @@ -21,7 +21,7 @@ padding-left: calculateRem(24px); border-left: calculateRem(1px) solid $ibexa-color-light; - .ibexa-label { + .ids-label { margin-top: 0; } diff --git a/src/bundle/Resources/public/scss/_selection-table.scss b/src/bundle/Resources/public/scss/_selection-table.scss index fd23c96975..dc86b50721 100644 --- a/src/bundle/Resources/public/scss/_selection-table.scss +++ b/src/bundle/Resources/public/scss/_selection-table.scss @@ -1,7 +1,7 @@ @use '@ibexa-admin-ui/src/bundle/Resources/public/scss/functions/calculate.rem' as *; .ibexa-selection-table { - .ibexa-input-text-wrapper { + .ids-input-text { margin-left: calculateRem(8px); } } diff --git a/src/bundle/Resources/public/scss/_side-panel.scss b/src/bundle/Resources/public/scss/_side-panel.scss index 045eeecec6..130cb273ca 100644 --- a/src/bundle/Resources/public/scss/_side-panel.scss +++ b/src/bundle/Resources/public/scss/_side-panel.scss @@ -30,16 +30,13 @@ &__footer { display: flex; align-items: center; + gap: calculateRem(16px); box-shadow: 0 0 calculateRem(16px) 0 color.change($ibexa-color-dark, $alpha: 0.16); z-index: 1000; width: calculateRem(516px); position: fixed; bottom: 0; - .ibexa-btn { - margin-right: calculateRem(16px); - } - .ibexa-notifications-modal__footer { width: calculateRem(516px); } diff --git a/src/bundle/Resources/public/scss/_split-button.scss b/src/bundle/Resources/public/scss/_split-button.scss index 86c17ec5de..345ec20d53 100644 --- a/src/bundle/Resources/public/scss/_split-button.scss +++ b/src/bundle/Resources/public/scss/_split-button.scss @@ -16,6 +16,11 @@ border-bottom-right-radius: 0; } + &__main-btn.ids-btn { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + &__split { display: none; z-index: 2; @@ -27,21 +32,29 @@ border-top-left-radius: 0; border-bottom-left-radius: 0; + .ids-icon, .ibexa-icon { transition: all $ibexa-admin-transition-duration $ibexa-admin-transition; } &--subitems-opened { + .ids-icon, .ibexa-icon { transform: rotate(180deg); } } } + &__toggle-btn.ids-btn { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + &--primary { background-image: $ibexa-gradient-danger-primary; border-radius: $ibexa-border-radius; + .ids-btn.ids-btn--primary, .ibexa-btn.ibexa-btn--primary { background-image: none; } diff --git a/src/bundle/Resources/public/scss/_tables.scss b/src/bundle/Resources/public/scss/_tables.scss index dc7e6e5f6e..f495adcf82 100644 --- a/src/bundle/Resources/public/scss/_tables.scss +++ b/src/bundle/Resources/public/scss/_tables.scss @@ -41,8 +41,8 @@ border-color: $ibexa-color-primary; } - .ibexa-input--checkbox, - .ibexa-input--radio { + .ids-input--checkbox, + .ids-input--radio { border-color: $ibexa-color-primary; } } @@ -150,7 +150,7 @@ } &__header-cell-checkbox { - &.ibexa-input--checkbox { + &.ids-input--checkbox { margin-bottom: 0; } } @@ -187,7 +187,7 @@ &--has-checkbox { width: calculateRem(48px); - .ibexa-input--checkbox { + .ids-input--checkbox { float: left; margin-bottom: 0; } @@ -210,7 +210,7 @@ width: 70%; } - .ibexa-input--radio { + .ids-input--radio { vertical-align: middle; } } @@ -243,7 +243,7 @@ display: flex; justify-content: center; - .ibexa-input--checkbox { + .ids-input--checkbox { margin-bottom: 0; } diff --git a/src/bundle/Resources/public/scss/_tabs.scss b/src/bundle/Resources/public/scss/_tabs.scss index ca3d0c7e4c..35033a0c3f 100644 --- a/src/bundle/Resources/public/scss/_tabs.scss +++ b/src/bundle/Resources/public/scss/_tabs.scss @@ -415,7 +415,7 @@ } .form-group:first-child { - .ibexa-label { + .ids-label { margin-top: 0; } } diff --git a/src/bundle/Resources/public/scss/_trash-search-form.scss b/src/bundle/Resources/public/scss/_trash-search-form.scss index d8e1c2ac2e..8c91df3797 100644 --- a/src/bundle/Resources/public/scss/_trash-search-form.scss +++ b/src/bundle/Resources/public/scss/_trash-search-form.scss @@ -76,25 +76,8 @@ cursor: pointer; } - &__input { - &.ibexa-input.form-control:disabled { - background-color: $ibexa-color-white; - - & + .ibexa-btn--reset-creator { - display: block; - } - } - } - - .ibexa-btn--reset-creator { - display: none; - position: absolute; - right: 0; - bottom: 0; - - &:hover { - border-color: transparent; - } + &__input[readonly] { + background-color: $ibexa-color-white; } .ibexa-date-time-range-single:not(.ibexa-date-time-range-single--hidden) { diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_base-field.scss b/src/bundle/Resources/public/scss/fieldType/edit/_base-field.scss index ac813b4c86..62c04c15d5 100644 --- a/src/bundle/Resources/public/scss/fieldType/edit/_base-field.scss +++ b/src/bundle/Resources/public/scss/fieldType/edit/_base-field.scss @@ -35,7 +35,7 @@ display: flex; align-self: flex-end; - .ibexa-label { + .ids-label { display: none; padding-bottom: calculateRem(8px); } @@ -49,16 +49,18 @@ align-self: flex-end; align-items: center; - &--enable { - display: inline-flex; + .ibexa-icon { + margin-right: calculateRem(8px); } + } - &--disable { - display: none; + &__distraction-free-mode-btns { + .ibexa-field-edit__distraction-free-mode-control-btn--enable { + display: inline-flex; } - .ibexa-icon { - margin-right: calculateRem(8px); + .ibexa-field-edit__distraction-free-mode-control-btn--disable { + display: none; } } @@ -83,7 +85,7 @@ &--disabled { pointer-events: none; - .ibexa-label { + .ids-label { color: $ibexa-color-black-300; } @@ -167,7 +169,7 @@ justify-content: space-between; width: 100%; - .ibexa-label { + .ids-label { display: inline-flex; margin: calculateRem(8px) 0 0 0; } @@ -175,12 +177,14 @@ &__distraction-free-mode-control-btn { margin: 0; + } - &--enable { + &__distraction-free-mode-btns { + .ibexa-field-edit__distraction-free-mode-control-btn--enable { display: none; } - &--disable { + .ibexa-field-edit__distraction-free-mode-control-btn--disable { display: inline-flex; } } diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_binaryfile.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_binaryfile.scss index 759847e7c3..7357169420 100644 --- a/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_binaryfile.scss +++ b/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_binaryfile.scss @@ -35,7 +35,7 @@ font-size: calculateRem(16px); margin-right: calculateRem(40px); - .ibexa-label { + .ids-label { margin-bottom: 0; } } diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_gmap_location.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_gmap_location.scss index b3a5f35251..2ed12fd246 100644 --- a/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_gmap_location.scss +++ b/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_gmap_location.scss @@ -30,7 +30,7 @@ } &__field--address { - .ibexa-input { + .ids-input { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-left: calculateRem(48px); @@ -67,7 +67,8 @@ width: 50%; padding: calculateRem(24px); - .ibexa-input { + .ids-input { + height: calculateRem(40px); margin-bottom: 0; } } @@ -86,7 +87,7 @@ width: 100%; } - .ibexa-btn--locate-me { + .ids-btn--locate-me { padding: calculateRem(13px); border: calculateRem(1px) solid $ibexa-color-dark-200; border-left: none; @@ -98,7 +99,7 @@ } } - .ibexa-btn--search-by-address { + .ids-btn--search-by-address { position: absolute; top: 0; left: 0; diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_image.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_image.scss index 29c35de5ce..052427b80c 100644 --- a/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_image.scss +++ b/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_image.scss @@ -7,7 +7,7 @@ &__file-name-wrapper, &__dimensions-wrapper, &__file-size-wrapper { - .ibexa-label { + .ids-label { margin-top: 0; margin-bottom: 0; } diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_image_asset.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_image_asset.scss index ebace94d37..e513133aaa 100644 --- a/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_image_asset.scss +++ b/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_image_asset.scss @@ -25,7 +25,7 @@ .ibexa-field-edit-preview { &__file-name-wrapper { - .ibexa-label { + .ids-label { margin-top: 0; margin-bottom: 0; } diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_media.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_media.scss index f4dc7bb427..a1cd239b07 100644 --- a/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_media.scss +++ b/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_media.scss @@ -28,7 +28,7 @@ min-width: 0; padding: calculateRem(8px); - .ibexa-label { + .ids-label { margin-top: 0; margin-bottom: 0; white-space: nowrap; @@ -44,7 +44,7 @@ row-gap: calculateRem(12px); column-gap: calculateRem(8px); - .ibexa-input--checkbox { + .ibexa-field-edit-preview__checkbox { margin-top: calculateRem(4px); } } diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_user.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_user.scss index b58f04381b..8979239b5b 100644 --- a/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_user.scss +++ b/src/bundle/Resources/public/scss/fieldType/edit/_ibexa_user.scss @@ -9,7 +9,7 @@ max-width: 80%; .ibexa-data-source__field:first-of-type { - .ibexa-label { + .ids-label { margin-top: 0; } } diff --git a/src/bundle/Resources/public/scss/functions/_calculate.rem.scss b/src/bundle/Resources/public/scss/functions/_calculate.rem.scss index 9c7804de60..3b9e290207 100644 --- a/src/bundle/Resources/public/scss/functions/_calculate.rem.scss +++ b/src/bundle/Resources/public/scss/functions/_calculate.rem.scss @@ -1,7 +1,7 @@ @use '../polyfill/div' as *; @function calculateRem($size) { - $remSize: div($size, 16px); + $remSize: div($size, 14px); @return $remSize + 0rem; // + 0rem converts value to proper `rem` } diff --git a/src/bundle/Resources/public/scss/ibexa-ids-assets.scss b/src/bundle/Resources/public/scss/ibexa-ids-assets.scss new file mode 100644 index 0000000000..ff50c7dd19 --- /dev/null +++ b/src/bundle/Resources/public/scss/ibexa-ids-assets.scss @@ -0,0 +1,5 @@ +@use '@ibexa-admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/scss/variables' with ( + $assets-base-path: '/bundles/ibexaadminuiassets/vendors/ids-assets/dist/' +); + +@use '@ibexa-admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/scss/styles'; diff --git a/src/bundle/Resources/public/scss/ui/modules/common/_popup.scss b/src/bundle/Resources/public/scss/ui/modules/common/_popup.scss index 6f16e7306a..5c7d48f9d2 100644 --- a/src/bundle/Resources/public/scss/ui/modules/common/_popup.scss +++ b/src/bundle/Resources/public/scss/ui/modules/common/_popup.scss @@ -74,7 +74,7 @@ } } - .ibexa-label--checkbox-radio { + .ids-choice-input-label { padding-left: calculateRem(4px); } } diff --git a/src/bundle/Resources/public/scss/ui/modules/common/_taggify.scss b/src/bundle/Resources/public/scss/ui/modules/common/_taggify.scss index 1c5a0f9e92..56ea8695fe 100644 --- a/src/bundle/Resources/public/scss/ui/modules/common/_taggify.scss +++ b/src/bundle/Resources/public/scss/ui/modules/common/_taggify.scss @@ -20,6 +20,10 @@ flex: 1 1 auto; order: 2; margin: calculateRem(2px); + + .c-taggify__new-tag-input-wrapper { + width: 100%; + } } &__tags { @@ -28,13 +32,16 @@ flex-wrap: wrap; } - &__new-tag-input { - display: block; - width: 100%; - height: calculateRem(24px); - border: 0 none; - outline: none; - background: transparent; + &__new-tag-input-wrapper { + .ids-input { + display: block; + width: 100%; + height: calculateRem(24px); + border: 0 none; + outline: none; + background: transparent; + padding: 0; + } } &__bottom-hint { diff --git a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload-item.scss b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload-item.scss index aa997f54c9..851549823f 100644 --- a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload-item.scss +++ b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload-item.scss @@ -104,11 +104,9 @@ } &__actions { - text-align: right; - - .ibexa-btn { - margin: 0; - } + display: flex; + align-items: center; + margin: 0 calculateRem(8px); } &__action { diff --git a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view-columns-toggler-list-element.scss b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view-columns-toggler-list-element.scss index 7873b20f62..fdbfea30dc 100644 --- a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view-columns-toggler-list-element.scss +++ b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_view-columns-toggler-list-element.scss @@ -9,7 +9,7 @@ align-items: center; } - .ibexa-input--checkbox { + &__checkbox { margin-right: calculateRem(8px); } diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_collapsible.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_collapsible.scss index ce400d881e..c31c8a81e6 100644 --- a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_collapsible.scss +++ b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_collapsible.scss @@ -79,7 +79,7 @@ overflow: hidden; } - .ibexa-input--checkbox { + .ids-input--checkbox { margin-right: calculateRem(8px); } } diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content-type-selector-list.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content-type-selector-list.scss index c559ad6a7b..d2afb2f7ae 100644 --- a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content-type-selector-list.scss +++ b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content-type-selector-list.scss @@ -20,7 +20,7 @@ font-size: $ibexa-text-font-size-medium; } - .ibexa-input--checkbox { + .c-content-type-selector-list__checkbox { margin-right: calculateRem(8px); } } diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_top-menu-search-input.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_top-menu-search-input.scss index a59d505365..c1a881410e 100644 --- a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_top-menu-search-input.scss +++ b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_top-menu-search-input.scss @@ -7,8 +7,10 @@ &--search-opened { .c-top-menu-search-input { &__search-input { - opacity: 1; - transform: translateY(-50%) scaleX(1); + &.ids-input-text { + opacity: 1; + transform: translateY(-50%) scaleX(1); + } } } } @@ -18,24 +20,29 @@ } &__search-input { - position: absolute; - width: calc(100% - #{calculateRem(224px)}); - top: 50%; - left: calculateRem(65px); - border: none; - padding: 0; - font-family: $ibexa-font-family-headings; - font-weight: $ibexa-font-weight-bold; - font-size: $ibexa-text-font-size-extra-large; - opacity: 0; - transform: translateY(-50%) scaleX(0); - transform-origin: left; - transition: - all $ibexa-admin-transition-duration $ibexa-admin-transition, - transform 0s; + &.ids-input-text { + position: absolute; + width: calc(100% - #{calculateRem(195px)}); + top: 50%; + left: calculateRem(65px); + opacity: 0; + transform: translateY(-50%) scaleX(0); + transform-origin: left; + transition: + all $ibexa-admin-transition-duration $ibexa-admin-transition, + transform 0s; + } + + .ids-input { + border: none; + padding: 0; + font-family: $ibexa-font-family-headings; + font-weight: $ibexa-font-weight-bold; + font-size: $ibexa-text-font-size-extra-large; - &:focus { - outline: none; + &:focus { + outline: none; + } } } } diff --git a/src/bundle/Resources/public/ts/admin.search.ts b/src/bundle/Resources/public/ts/admin.search.ts index 52b7f673ec..23404c1996 100644 --- a/src/bundle/Resources/public/ts/admin.search.ts +++ b/src/bundle/Resources/public/ts/admin.search.ts @@ -4,7 +4,7 @@ const headerSearchInput = document.querySelector('.ibexa-global-search__input'); const languageSelector = document.querySelector('.ibexa-filters__item--language-selector .ibexa-filters__select'); const headerSearchSubmitBtn = document.querySelector( - '.ibexa-main-header .ibexa-input-text-wrapper__action-btn--search', + '.ibexa-main-header .ids-input-text__search-btn, .ibexa-main-header .ibexa-input-text-wrapper__action-btn--search', ); if (!headerSearchInput || !searchInput || !searchForm) { diff --git a/src/bundle/Resources/views/themes/admin/account/bookmarks/list.html.twig b/src/bundle/Resources/views/themes/admin/account/bookmarks/list.html.twig index 273bf304d0..dfea479f5c 100644 --- a/src/bundle/Resources/views/themes/admin/account/bookmarks/list.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/bookmarks/list.html.twig @@ -55,16 +55,15 @@ {% set col_action_btns %} {% if bookmark.userCanEdit %} - + /> {% endif %} {% endset %} @@ -93,7 +92,7 @@ { }, ], body_rows, - actions: form_widget(form_remove.remove, {'attr': {'class': 'btn ibexa-btn ibexa-btn--ghost ibexa-btn--small', 'disabled': true} }), + actions: form_widget(form_remove.remove, {'attr': {'class': 'ids-btn ids-btn--tertiary-alt ids-btn--small', 'disabled': true} }), empty_table_info_text: 'bookmark.list.empty'|trans|desc('You have no bookmarks yet. Your bookmarks will show up here.'), } %} {{ form_end(form_remove) }} diff --git a/src/bundle/Resources/views/themes/admin/account/bookmarks/toggle_switch.html.twig b/src/bundle/Resources/views/themes/admin/account/bookmarks/toggle_switch.html.twig index f47ab82750..a883af5c5d 100644 --- a/src/bundle/Resources/views/themes/admin/account/bookmarks/toggle_switch.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/bookmarks/toggle_switch.html.twig @@ -1,20 +1,20 @@ {% trans_default_domain 'ibexa_locationview' %}
- - + +
diff --git a/src/bundle/Resources/views/themes/admin/account/change_password/form_fields.html.twig b/src/bundle/Resources/views/themes/admin/account/change_password/form_fields.html.twig index 9af7d06c19..e236e0eeb5 100644 --- a/src/bundle/Resources/views/themes/admin/account/change_password/form_fields.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/change_password/form_fields.html.twig @@ -7,8 +7,8 @@ {% if errors|length > 0 %}{% set wrapper_class = (wrapper_class|default('') ~ ' is-invalid')|trim %}{% endif %} {% set label_wrapper_attr = label_wrapper_attr|default({})|merge({'class': (label_wrapper_attr.class|default('') ~ 'ibexa-field__label-wrapper')|trim}) %} - {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ibexa-field__label ibexa-label')|trim}) %} - {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-input ibexa-input--text ibexa-data-source__input')|trim}) %} + {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ibexa-field__label ids-label')|trim}) %} + {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-input ibexa-data-source__input')|trim}) %} {% set wrapper_attr = wrapper_attr|default({})|merge({'class': (wrapper_attr.class|default('') ~ ' ' ~ wrapper_class)|trim}) %} diff --git a/src/bundle/Resources/views/themes/admin/account/error/credentials_expired.html.twig b/src/bundle/Resources/views/themes/admin/account/error/credentials_expired.html.twig index e263b43e07..12d7be8764 100644 --- a/src/bundle/Resources/views/themes/admin/account/error/credentials_expired.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/error/credentials_expired.html.twig @@ -10,8 +10,13 @@ ) }}

- +

{%- endblock -%} diff --git a/src/bundle/Resources/views/themes/admin/account/forgot_password/confirmation_page.html.twig b/src/bundle/Resources/views/themes/admin/account/forgot_password/confirmation_page.html.twig index 8111de6b0a..33d6af13b6 100644 --- a/src/bundle/Resources/views/themes/admin/account/forgot_password/confirmation_page.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/forgot_password/confirmation_page.html.twig @@ -1,23 +1,28 @@ {% extends '@ibexadesign/account/base.html.twig' %} {%- block content -%} -
{{ 'authentication.forgot_password'|trans|desc('Forgot password') }}
-
- {{ 'ibexa.forgot_user_password.success'|trans|raw - |desc('

If you don’t receive the email, double-check your email address and spam folder.

') }} -
+

{{ 'authentication.forgot_password'|trans|desc('Forgot password') }}

{% embed '@ibexadesign/ui/component/alert/alert.html.twig' with { type: 'success', title: 'ibexa.forgot_user_password.success.alert'|trans|desc('We’ve sent to your email account a link to reset your password.'), icon_path: ibexa_icon_path('checkmark'), - show_close_btn: true, - is_toast: true, - class: 'ibexa-login__success-toast', + class: 'mt-4', } only %} + {% block extra_content %} + + {% endblock %} {% endembed %} +

If you don’t receive the email, double-check your email address and spam folder.

') }} +

{%- endblock content -%} diff --git a/src/bundle/Resources/views/themes/admin/account/forgot_password/index.html.twig b/src/bundle/Resources/views/themes/admin/account/forgot_password/index.html.twig index aeec99ad3b..011a8bf921 100644 --- a/src/bundle/Resources/views/themes/admin/account/forgot_password/index.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/forgot_password/index.html.twig @@ -3,22 +3,28 @@ {% form_theme form_forgot_user_password '@ibexadesign/ui/form_fields.html.twig' %} {%- block content -%} - + {% if reason == userForgotPasswordReasonMigration %}

{{ 'ezplatform.forgot_password.reset_your_password.reason.migration'|trans|desc('Your password has expired, change it.') }}

{% endif %} {% if form_forgot_user_password is defined %} - {{ form_start(form_forgot_user_password, {'attr': {'class': 'ibexa-form-validate ibexa-login__forgot-password-form'} }) }} + {{ form_start(form_forgot_user_password, {'attr': {'class': 'ibexa-form-validate ibexa-login__forgot-password-form'}}) }}
- {{ form_row(form_forgot_user_password.email, {'attr': {'class': 'form-control ibexa-input ibexa-input--text ibexa-login__input'} }) }} + {{ form_row(form_forgot_user_password.email, {'attr': {'class': 'ibexa-login__input'}}) }}
- {{ form_widget(form_forgot_user_password.reset, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary ibexa-login__btn ibexa-login__btn--reset-password'} }) }} + {{ form_widget(form_forgot_user_password.reset, {'attr': {'class': 'ids-btn ids-btn--primary ids-btn--medium ibexa-login__btn--reset-password'}}) }} {{ form_end(form_forgot_user_password) }} {% endif %} - + + {{ encore_entry_script_tags('ibexa-admin-ui-reset-password-js', null, 'ibexa') }} {%- endblock content -%} diff --git a/src/bundle/Resources/views/themes/admin/account/forgot_password/index_with_login.html.twig b/src/bundle/Resources/views/themes/admin/account/forgot_password/index_with_login.html.twig index 84f707c334..12a513896e 100644 --- a/src/bundle/Resources/views/themes/admin/account/forgot_password/index_with_login.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/forgot_password/index_with_login.html.twig @@ -12,7 +12,7 @@
{{ form_row(form_forgot_user_password_with_login.login) }}
- {{ form_widget(form_forgot_user_password_with_login.reset, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary ibexa-login__btn ibexa-login__btn--reset-password'} }) }} + {{ form_widget(form_forgot_user_password_with_login.reset, {'attr': {'class': 'ids-btn ids-btn--primary ids-btn--medium ibexa-login__btn ibexa-login__btn--reset-password'}}) }} {{ form_end(form_forgot_user_password_with_login) }} {% endif %} diff --git a/src/bundle/Resources/views/themes/admin/account/login/index.html.twig b/src/bundle/Resources/views/themes/admin/account/login/index.html.twig index a87c58cfb9..cfc652a61c 100644 --- a/src/bundle/Resources/views/themes/admin/account/login/index.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/login/index.html.twig @@ -25,44 +25,38 @@ {% block login_form_fields %}
- {%- embed '@ibexadesign/ui/component/input_text.html.twig' -%} - {% block content %} - - {% endblock %} - {%- endembed -%} + {%- include '@ibexadesign/ui/component/input_text_ds.html.twig' with { + type: 'text', + input_attr: { + id: 'username', + class: 'ibexa-login__input ibexa-login__input--name', + name: '_username', + value: last_username, + required: true, + autofocus: true, + autocomplete: 'on', + tabindex: '1', + placeholder: ' ' + } + } only -%}
- {%- embed '@ibexadesign/ui/component/input_text.html.twig' with { + {%- include '@ibexadesign/ui/component/input_text_ds.html.twig' with { type: 'password', - } -%} - {% block content %} - - {% endblock %} - {%- endembed -%} + input_attr: { + id: 'password', + class: 'ibexa-login__input ibexa-login__input--password', + name: '_password', + required: true, + tabindex: '2', + placeholder: ' ' + } + } only -%}
@@ -72,26 +66,28 @@ - + {% if is_sso %} - + {% endif %} {% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/account/notifications/filters.html.twig b/src/bundle/Resources/views/themes/admin/account/notifications/filters.html.twig index 5820efab60..5a1c7bac99 100644 --- a/src/bundle/Resources/views/themes/admin/account/notifications/filters.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/notifications/filters.html.twig @@ -19,20 +19,23 @@

{{ 'ibexa.notifications.search_form.title'|trans()|desc('Filters') }}

- - + {{ 'ibexa.notifications.search_form.apply'|trans({}, 'ibexa_notifications')|desc('Apply') }} +
diff --git a/src/bundle/Resources/views/themes/admin/account/notifications/filters/form_fields.html.twig b/src/bundle/Resources/views/themes/admin/account/notifications/filters/form_fields.html.twig index 5ebf1274ac..323de63cce 100644 --- a/src/bundle/Resources/views/themes/admin/account/notifications/filters/form_fields.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/notifications/filters/form_fields.html.twig @@ -34,9 +34,9 @@ } %} {% block content %}
- + {{ form_widget(form.children.min, { attr: { 'data-seconds': 0, @@ -48,9 +48,9 @@
- + {{ form_widget(form.children.max, { attr: { 'data-seconds': 0, diff --git a/src/bundle/Resources/views/themes/admin/account/notifications/list_all.html.twig b/src/bundle/Resources/views/themes/admin/account/notifications/list_all.html.twig index f95cb71f2e..5dd725d3fd 100644 --- a/src/bundle/Resources/views/themes/admin/account/notifications/list_all.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/notifications/list_all.html.twig @@ -13,12 +13,13 @@ {% set no_items = pager.count is same as(0) %} {% block header %}
- + {{ 'ibexa_notifications.btn.mark_all_as_read'|trans({}, 'ibexa_notifications')|desc('Mark all as read') }} +
{% include '@ibexadesign/ui/page_title.html.twig' with { @@ -113,34 +114,24 @@ {% set modal_data_target = 'modal-selection_remove' %}
- - + :data-bs-target="'#' ~ modal_data_target" + >{{ 'notification.delete'|trans({}, 'ibexa_notifications')|desc('Delete') }}
{% include '@ibexadesign/ui/modal/bulk_delete_confirmation.html.twig' with { 'id': modal_data_target, diff --git a/src/bundle/Resources/views/themes/admin/account/notifications/list_item.html.twig b/src/bundle/Resources/views/themes/admin/account/notifications/list_item.html.twig index cfcde6bd3a..3cdfaf388f 100644 --- a/src/bundle/Resources/views/themes/admin/account/notifications/list_item.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/notifications/list_item.html.twig @@ -39,14 +39,14 @@ {% set popup_items = additional_popup|default([]) %} {% set popup_items = popup_items|merge([{ - label: notification.isPending == 0 ? 'notification.mark_as_unread'|trans|desc('Mark as unread') : 'notification.mark_as_read'|trans|desc('Mark as read'), + label: notification.isPending == 0 ? 'notification.mark_as_unread'|trans|desc('Mark as unread') : 'notification.mark_as_read'|trans({}, 'ibexa_notifications')|desc('Mark as read'), action_attr: { class: 'ibexa-notifications-modal--mark-as ibexa-notifications-modal--mark-as-' ~ (notification.isPending == 0 ? 'unread' : 'read'), 'data-notification-id': notification.id }, }]) %} {% set popup_items = popup_items|merge([{ - label: 'notification.delete'|trans|desc('Delete'), + label: 'notification.delete'|trans({}, 'ibexa_notifications')|desc('Delete'), action_attr: { class: 'ibexa-notifications-open-modal-button', 'data-notification-id': notification.id, @@ -82,11 +82,12 @@ {% embed '@ibexadesign/ui/component/table/table_body_cell.html.twig' with { class: '' } %} {% block content %}
- + {{ include('@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu.html.twig', { groups: [ { diff --git a/src/bundle/Resources/views/themes/admin/account/notifications/list_item_all.html.twig b/src/bundle/Resources/views/themes/admin/account/notifications/list_item_all.html.twig index 2f3d3a0f1c..f8f49ba45b 100644 --- a/src/bundle/Resources/views/themes/admin/account/notifications/list_item_all.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/notifications/list_item_all.html.twig @@ -1,5 +1,3 @@ -{% import "@ibexadesign/ui/component/macros.html.twig" as html %} - {% trans_default_domain 'ibexa_notifications' %} {% set is_read = notification.isPending == 0 %} @@ -50,30 +48,18 @@ {% set is_disabled = btn_disabled|default(false) %} {% set defaultTooltip = 'notification.go_to_content'|trans({}, 'ibexa_notifications')|desc('Go to content') %} - + {% endblock %} {% endset %} -{% set icon_mail_open %} - - - -{% endset %} - -{% set icon_mail %} - - - -{% endset %} {% embed '@ibexadesign/ui/component/table/table_body_row.html.twig' with { class: wrapper_class_list ~ (wrapper_additional_classes is defined ? ' ' ~ wrapper_additional_classes), @@ -87,11 +73,11 @@ {% embed '@ibexadesign/ui/component/table/table_body_cell.html.twig' with { class: 'ibexa-table__cell--has-checkbox' } %} {% block content %}
-
{% endblock %} @@ -127,30 +113,23 @@ {% endembed %} {% embed '@ibexadesign/ui/component/table/table_body_cell.html.twig' %} {% block content %} - - + + {% endblock %} {% endembed %} {% endblock %} {% endembed %} - diff --git a/src/bundle/Resources/views/themes/admin/account/notifications/side_panel.html.twig b/src/bundle/Resources/views/themes/admin/account/notifications/side_panel.html.twig index cbffad368b..3fcb7d2b0e 100644 --- a/src/bundle/Resources/views/themes/admin/account/notifications/side_panel.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/notifications/side_panel.html.twig @@ -14,9 +14,13 @@ {{ 'ibexa_notifications'|trans|desc('Notifications')}} ({{max_visible_notifications_count}}) - +
{% endblock %} @@ -37,10 +41,15 @@ {% block footer %}
- + {{ 'side_panel.view_all'|trans|desc('View all notifications') }} - +
{% endblock %} {% endembed %} @@ -50,8 +59,12 @@ message: 'notification.modal.delete.confirm_message'|trans({}, 'ibexa_notifications')|desc('Are you sure you want to delete this notification?'), } %} {% block confirm_button %} - + {% endblock %} {% endembed %} diff --git a/src/bundle/Resources/views/themes/admin/account/profile/view.html.twig b/src/bundle/Resources/views/themes/admin/account/profile/view.html.twig index 0f56a61756..c7e4e17e12 100644 --- a/src/bundle/Resources/views/themes/admin/account/profile/view.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/profile/view.html.twig @@ -37,14 +37,16 @@ {% if can_edit_profile and ibexa_is_current_user(user) %} - - - - - - {{ 'user_profile.action.edit'|trans|desc('Edit') }} - - + + {{ 'user_profile.action.edit'|trans({}, 'ibexa_admin_ui')|desc('Edit') }} + {% endif %}
@@ -91,11 +93,9 @@ {% for role_assigment in roles %} -
-
- {{ role_assigment.identifier }} -
-
+ + {{ role_assigment.identifier }} + {% endfor %} {% endif %} diff --git a/src/bundle/Resources/views/themes/admin/account/register/index.html.twig b/src/bundle/Resources/views/themes/admin/account/register/index.html.twig index 9d7150bbe6..b5de90acb4 100644 --- a/src/bundle/Resources/views/themes/admin/account/register/index.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/register/index.html.twig @@ -18,7 +18,7 @@ {% endif %} {% endfor %} {{ form_widget(form.children.register, { - attr: { class: 'btn ibexa-btn ibexa-btn--primary ibexa-login__btn ibexa-login__btn--register' } + attr: { class: 'ids-btn ids-btn--primary ids-btn--medium ibexa-login__btn ibexa-login__btn--register' } }) }} {{ form_end(form) }} diff --git a/src/bundle/Resources/views/themes/admin/account/reset_password/index.html.twig b/src/bundle/Resources/views/themes/admin/account/reset_password/index.html.twig index 39ef45fac7..73a699b55d 100644 --- a/src/bundle/Resources/views/themes/admin/account/reset_password/index.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/reset_password/index.html.twig @@ -11,12 +11,17 @@
{{ form_widget(form_reset_user_password.new_password) }}
- {{ form_widget(form_reset_user_password.update, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary ibexa-login__btn ibexa-login__btn--change-password'} }) }} + {{ form_widget(form_reset_user_password.update, {'attr': {'class': 'ids-btn ids-btn--primary ids-btn--medium ibexa-login__btn--change-password'}}) }} {{ form_end(form_reset_user_password) }} {% endif %} - + {{ encore_entry_script_tags('ibexa-admin-ui-reset-password-js', null, 'ibexa') }} {%- endblock content -%} diff --git a/src/bundle/Resources/views/themes/admin/account/settings/list.html.twig b/src/bundle/Resources/views/themes/admin/account/settings/list.html.twig index 5541a70cfd..6b236bb730 100644 --- a/src/bundle/Resources/views/themes/admin/account/settings/list.html.twig +++ b/src/bundle/Resources/views/themes/admin/account/settings/list.html.twig @@ -31,17 +31,16 @@ {% for settings_group in grouped_settings %} {% if settings_group.settings is not empty %} {% set headline_items %} - - - - - - {{ 'list.action.edit'|trans|desc('Edit') }} - - + {{ 'list.action.edit'|trans|desc('Edit') }} + {% endset %} {% set items = [] %} @@ -74,18 +73,17 @@ } only %} {% endif %} {% set headline_items %} - - - - - - {{ 'my_account_settings.password.action.edit'|trans|desc('Change password') }} - - + {{ 'my_account_settings.password.action.edit'|trans|desc('Change password') }} + {% endset %} {% set item = [{ diff --git a/src/bundle/Resources/views/themes/admin/content/content_preview.html.twig b/src/bundle/Resources/views/themes/admin/content/content_preview.html.twig index 68ff88a652..d9a38d7814 100644 --- a/src/bundle/Resources/views/themes/admin/content/content_preview.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/content_preview.html.twig @@ -49,12 +49,14 @@ }) %} {% endif %} - - {{ 'preview_header.back'|trans({}, 'ibexa_content')|desc('Close') }} - + {{ 'preview_header.back'|trans({}, 'ibexa_content')|desc('Close') }} + diff --git a/src/bundle/Resources/views/themes/admin/content/content_view_fields.html.twig b/src/bundle/Resources/views/themes/admin/content/content_view_fields.html.twig index 5b128398e4..8d7f0006aa 100644 --- a/src/bundle/Resources/views/themes/admin/content/content_view_fields.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/content_view_fields.html.twig @@ -1,6 +1,6 @@
-
{{ 'tab.view.descriptions'|trans()|desc('Descriptions') }}
+
{{ 'tab.view.descriptions'|trans|desc('Descriptions') }}
{% block extras %}{% endblock %}
diff --git a/src/bundle/Resources/views/themes/admin/content/draft/draft_list.html.twig b/src/bundle/Resources/views/themes/admin/content/draft/draft_list.html.twig index 6346f68668..b8bbee694f 100644 --- a/src/bundle/Resources/views/themes/admin/content/draft/draft_list.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/draft/draft_list.html.twig @@ -149,21 +149,14 @@ {% macro table_header_tools(form) %} {% set modal_data_target = 'modal-' ~ form.remove.vars.id %} - + :data-bs-target="'#' ~ modal_data_target" + >{{ 'drafts.list.action.remove.confirmation.title'|trans({}, 'ibexa_drafts')|desc('Delete') }} {% include '@ibexadesign/ui/modal/bulk_delete_confirmation.html.twig' with { 'id': modal_data_target, 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 index 0f3b0b393a..5c1f2704aa 100644 --- a/src/bundle/Resources/views/themes/admin/content/form_fields.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/form_fields.html.twig @@ -52,7 +52,7 @@ {% 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_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ids-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' ~ (is_small ? ' ibexa-input--small'))|trim, @@ -105,7 +105,7 @@ {% set attr = attr|merge({'readonly': 'readonly'}) %} {% endif %} {% set label_wrapper_attr = label_wrapper_attr|default({})|merge({'class': (label_wrapper_attr.class|default('') ~ 'ibexa-field-edit__label-wrapper')|trim}) %} - {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ibexa-label ibexa-field-edit__label')|trim}) %} + {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' ids-label ibexa-field-edit__label')|trim}) %} {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-data-source__input')|trim}) %} {% set wrapper_attr = wrapper_attr|default({})|merge({'class': (wrapper_attr.class|default('') ~ ' ' ~ wrapper_class)|trim}) %} diff --git a/src/bundle/Resources/views/themes/admin/content/modal/add_translation.html.twig b/src/bundle/Resources/views/themes/admin/content/modal/add_translation.html.twig index 45376a2635..3dae47fa20 100644 --- a/src/bundle/Resources/views/themes/admin/content/modal/add_translation.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/modal/add_translation.html.twig @@ -30,7 +30,7 @@ }) }}
- +
{{ form_row(form.language, { @@ -47,11 +47,14 @@ {{ custom_footer|raw }} {% else %} {% if form.add is defined %} - {{ form_widget(form.add, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary ibexa-btn--create-translation'}}) }} + {{ form_widget(form.add, {'attr': {'class': 'ids-btn ids-btn--primary ids-btn--medium ids-btn--create-translation'}}) }} {% endif %} - + + {{ 'tab.translations.add.cancel'|trans({}, 'ibexa_locationview')|desc('Cancel') }} + {% endif %} {% endblock %} {% block content_after %} diff --git a/src/bundle/Resources/views/themes/admin/content/modal/draft_conflict.html.twig b/src/bundle/Resources/views/themes/admin/content/modal/draft_conflict.html.twig index 2ac6f0810c..48eaee4cd6 100644 --- a/src/bundle/Resources/views/themes/admin/content/modal/draft_conflict.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/modal/draft_conflict.html.twig @@ -41,16 +41,8 @@ {% macro table_header_tools(show_add_button) %} {% if show_add_button %} - + + {{ 'draft.conflict.add_new'|trans({}, 'ibexa_draft_conflict')|desc('Add') }} + {% endif %} {% endmacro %} diff --git a/src/bundle/Resources/views/themes/admin/content/modal/hide_confirmation.html.twig b/src/bundle/Resources/views/themes/admin/content/modal/hide_confirmation.html.twig index 4e95b0ff5e..ed23263d50 100644 --- a/src/bundle/Resources/views/themes/admin/content/modal/hide_confirmation.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/modal/hide_confirmation.html.twig @@ -16,8 +16,19 @@
- - + + {{ 'content.hide.modal.confirm'|trans()|desc('Confirm') }} + + + {{ 'content.hide.modal.cancel'|trans()|desc('Cancel') }} +
diff --git a/src/bundle/Resources/views/themes/admin/content/modal/location_trash.html.twig b/src/bundle/Resources/views/themes/admin/content/modal/location_trash.html.twig index bcdbf0cb23..40eaaab085 100644 --- a/src/bundle/Resources/views/themes/admin/content/modal/location_trash.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/modal/location_trash.html.twig @@ -43,11 +43,14 @@ {% endblock %} {% block footer_content %} {{ form_widget(form.trash, - {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary disabled ibexa-btn--confirm-send-to-trash', 'disabled': true}}) + {'attr': {'class': 'ids-btn ids-btn--primary ids-btn--medium disabled ids-btn--confirm-send-to-trash', 'disabled': true}}) }} - + {% endblock %} {% block content_after %} {{ form_end(form) }} diff --git a/src/bundle/Resources/views/themes/admin/content/modal/user_delete.html.twig b/src/bundle/Resources/views/themes/admin/content/modal/user_delete.html.twig index 95839d80de..6476891d91 100644 --- a/src/bundle/Resources/views/themes/admin/content/modal/user_delete.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/modal/user_delete.html.twig @@ -11,10 +11,10 @@ {% endblock %} {% block footer_content %} {{ form_start(form, {'action': path('ibexa.user.delete')}) }} - {{ form_widget(form.delete, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary'}}) }} - + {{ form_widget(form.delete, {'attr': {'class': 'ids-btn ids-btn--primary ids-btn--medium'}}) }} + + {{ 'delete.form.cancel'|trans({}, 'ibexa_user_delete')|desc('Cancel') }} + {{ form_end(form) }} {% endblock %} {% endembed %} diff --git a/src/bundle/Resources/views/themes/admin/content/modal/user_group_invitation_modal.html.twig b/src/bundle/Resources/views/themes/admin/content/modal/user_group_invitation_modal.html.twig index ac28e89b22..0e26b92f15 100644 --- a/src/bundle/Resources/views/themes/admin/content/modal/user_group_invitation_modal.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/modal/user_group_invitation_modal.html.twig @@ -22,9 +22,9 @@ {% block entries_labels %} {% trans_default_domain 'ibexa_locationview' %} - + + {{ 'modal.email_address'|trans({}, 'ibexa_locationview')|desc('Email address') }} + {% endblock %} {% set info = 'modal.info'|trans|desc('Enter your team members email addresses.') %} diff --git a/src/bundle/Resources/views/themes/admin/content/modal/version_conflict.html.twig b/src/bundle/Resources/views/themes/admin/content/modal/version_conflict.html.twig index f0a59ab1f9..e674cab66e 100644 --- a/src/bundle/Resources/views/themes/admin/content/modal/version_conflict.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/modal/version_conflict.html.twig @@ -27,11 +27,19 @@

{% endblock %} {% block footer_content %} - - {{ 'version.conflict.form.continue'|trans|desc('Continue') }} - - + + {{ 'version.conflict.form.continue'|trans({}, 'ibexa_version_conflict')|desc('Continue') }} + + + {{ 'version.conflict.form.cancel'|trans({}, 'ibexa_version_conflict')|desc('Cancel') }} + {% endblock %} {% endembed %} diff --git a/src/bundle/Resources/views/themes/admin/content/tab/content.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/content.html.twig index 9686cd352f..0b4591ac82 100644 --- a/src/bundle/Resources/views/themes/admin/content/tab/content.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/tab/content.html.twig @@ -5,7 +5,7 @@ {% if languages|length > 1 %}
- + {{ 'tab.view.preview'|trans|desc('Preview') }} {% set choices = languages|map((language) => { value: path('ibexa.content.translation.view', { 'contentId': location.contentId, diff --git a/src/bundle/Resources/views/themes/admin/content/tab/locations/panel_swap.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/locations/panel_swap.html.twig index 0aa5fad6db..479e961e72 100644 --- a/src/bundle/Resources/views/themes/admin/content/tab/locations/panel_swap.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/tab/locations/panel_swap.html.twig @@ -1,7 +1,7 @@ {% form_theme form '@ibexadesign/ui/form_fields.html.twig' %} {% include '@ibexadesign/ui/component/table/table_header.html.twig' with { - headline: 'tab.locations.location_content_swap'|trans()|desc('Swap Locations'), + headline: 'tab.locations.location_content_swap'|trans|desc('Swap Locations'), } only %} {{ form_start(form, { @@ -9,12 +9,12 @@ 'attr': { 'class': 'ibexa-location-swap-form' } }) }}
- {{ 'tab.locations.swap_with_another'|trans()|desc('Swap the Content item at this Location with another') }} + {{ 'tab.locations.swap_with_another'|trans|desc('Swap the Content item at this Location with another') }}
{{ form_widget(form.swap, {'attr': { 'disabled': not can_swap, - 'class': 'btn ibexa-btn ibexa-btn--secondary ibexa-btn--udw-swap ml-5', + 'class': 'ids-btn ids-btn--secondary ids-btn--medium ids-btn--udw-swap ml-5', 'data-udw-config': ibexa_udw_config('single_container', {}) }}) }} {{ form_widget(form.current_location) }} diff --git a/src/bundle/Resources/views/themes/admin/content/tab/locations/tab.html.twig b/src/bundle/Resources/views/themes/admin/content/tab/locations/tab.html.twig index 0fa5775eeb..ea9f98bc7a 100644 --- a/src/bundle/Resources/views/themes/admin/content/tab/locations/tab.html.twig +++ b/src/bundle/Resources/views/themes/admin/content/tab/locations/tab.html.twig @@ -32,14 +32,12 @@ ]) %} {% set col_raw %} - + :checked="location.main" + :disabled="not location.canEdit" + :value="location.id ~ ''" + /> {% endset %} {% set body_row_cols = body_row_cols|merge([{ content: col_raw, @@ -48,25 +46,25 @@ {% set col_raw %}
-
- - - {{ 'toggle_widget.label.on'|trans|desc('On') }} - - - {{ 'toggle_widget.label.off'|trans|desc('Off') }} - -
+ +
- {% embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: true, search_button_type: 'button' } %} - {% block content %} - - {% endblock %} - {% endembed %} + {% include '@ibexadesign/ui/component/input_text_ds.html.twig' with { + has_search: true, + search_button_type: 'button', + input_attr: { + type: 'text', + class: 'ibexa-available-field-types__sidebar-filter', + placeholder: 'content_type.view.edit.search'|trans|desc('Search...') + } + } only %}
    {% for item in field_type_toolbar %} diff --git a/src/bundle/Resources/views/themes/admin/content_type/content_type_group/index.html.twig b/src/bundle/Resources/views/themes/admin/content_type/content_type_group/index.html.twig index 7bdb2e85f1..23429b987d 100644 --- a/src/bundle/Resources/views/themes/admin/content_type/content_type_group/index.html.twig +++ b/src/bundle/Resources/views/themes/admin/content_type/content_type_group/index.html.twig @@ -22,17 +22,15 @@ {% set menu_items %} {% if can_create %}
  • - - - - - - {{ 'content_type.view.list.action.add'|trans|desc('Create') }} - - + {{ 'content_type.view.list.action.add'|trans({}, 'ibexa_content_type')|desc('Create') }} +
    • {% endif %} {% endset %} diff --git a/src/bundle/Resources/views/themes/admin/content_type/content_type_group/list.html.twig b/src/bundle/Resources/views/themes/admin/content_type/content_type_group/list.html.twig index 38242319a8..801928dc1d 100644 --- a/src/bundle/Resources/views/themes/admin/content_type/content_type_group/list.html.twig +++ b/src/bundle/Resources/views/themes/admin/content_type/content_type_group/list.html.twig @@ -25,17 +25,15 @@ {% set menu_items %} {% if can_create %}
  • - - - - - - {{ 'content_type_group.view.list.action.add'|trans|desc('Create') }} - - + {{ 'content_type_group.view.list.action.add'|trans({}, 'ibexa_content_type')|desc('Create') }} +
    • {% endif %} {% endset %} @@ -101,18 +99,14 @@ {% set col_raw %} {% if can_update %} - {% set edit_url = path('ibexa.content_type_group.update', { - contentTypeGroupId: content_type_group.id - }) %} - - - - - + /> {% endif %} {% endset %} {% set body_row_cols = body_row_cols|merge([{ @@ -143,21 +137,18 @@ {% block actions %} {% if can_delete %} {% set modal_data_target = 'delete-content-type-groups-modal' %} - + {{ 'content_type_group.view.list.action.delete'|trans|desc('Delete') }} + {% include '@ibexadesign/ui/modal/bulk_delete_confirmation.html.twig' with { 'id': modal_data_target, 'message': 'content_type_group.modal.message'|trans|desc('Do you want to delete the content type group?'), diff --git a/src/bundle/Resources/views/themes/admin/content_type/field_definitions.html.twig b/src/bundle/Resources/views/themes/admin/content_type/field_definitions.html.twig index 918ca6ede4..d55b80ccb8 100644 --- a/src/bundle/Resources/views/themes/admin/content_type/field_definitions.html.twig +++ b/src/bundle/Resources/views/themes/admin/content_type/field_definitions.html.twig @@ -73,16 +73,13 @@ {% endfor %}
- + {{ 'content_type.view.edit.add'|trans({}, 'ibexa_content_type')|desc('Add') }} {{ include('@ibexadesign/ui/component/popup_menu/popup_menu.html.twig', { 'items': grouped_field_defintions|keys|map(group => { diff --git a/src/bundle/Resources/views/themes/admin/content_type/field_types.html.twig b/src/bundle/Resources/views/themes/admin/content_type/field_types.html.twig index 8f3a3c9df7..07b1c2a10b 100644 --- a/src/bundle/Resources/views/themes/admin/content_type/field_types.html.twig +++ b/src/bundle/Resources/views/themes/admin/content_type/field_types.html.twig @@ -186,9 +186,10 @@ data-next-option-id="{{ form.options.vars.value is empty ? 0 : max(form.options.vars.value|keys) + 1 }}"> {% for option in form.options %}
  • - + {{ form_errors(option) }} {{ form_widget(option, { 'attr': { 'class': 'form-control ml-1 mb-0'}}) }}
    • @@ -199,25 +200,28 @@ data-ibexa_selection-option-input-name="{{ form.options.vars.prototype.vars.full_name }}" data-ibexa_selection-option-input-id="{{ form.options.vars.prototype.vars.id }}">
  • - + {{ form_widget(form.options.vars.prototype, { 'attr': { 'class': 'form-control ml-1 mb-0'}}) }}
    • - - + {{ 'field_definition.ibexa_selection.remove_selected_options'|trans({}, 'ibexa_content_type')|desc('Remove selected options') }} +
    {% do form.options.setRendered %} diff --git a/src/bundle/Resources/views/themes/admin/content_type/list.html.twig b/src/bundle/Resources/views/themes/admin/content_type/list.html.twig index b785ad1817..57f7f758f0 100644 --- a/src/bundle/Resources/views/themes/admin/content_type/list.html.twig +++ b/src/bundle/Resources/views/themes/admin/content_type/list.html.twig @@ -1,6 +1,5 @@ {% trans_default_domain 'ibexa_content_type' %} -{% import "@ibexadesign/content_type/macros.html.twig" as macros %} {% from '@ibexadesign/ui/component/macros.html.twig' import results_headline %} {% form_theme form_content_types_delete '@ibexadesign/ui/form_fields.html.twig' %} @@ -61,10 +60,26 @@ {% set col_raw %} {% if can_create %} - {{ macros.content_type_copy(content_type, content_type_group, 'btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-btn--copy-content-type') }} + {% endif %} {% if can_update %} - {{ macros.content_type_edit(content_type, content_type_group, 'btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text') }} + {% endif %} {% endset %} {% set body_row_cols = body_row_cols|merge([{ @@ -96,21 +111,18 @@ {% block actions %} {% if can_delete %} {% set modal_data_target = 'delete-content-types-modal' %} - + {{ 'content_type.view.list.action.delete'|trans|desc('Delete') }} + {% include '@ibexadesign/ui/modal/bulk_delete_confirmation.html.twig' with { 'id': modal_data_target, 'message': 'content_type.modal.message'|trans|desc('Do you want to delete the content type?'), diff --git a/src/bundle/Resources/views/themes/admin/content_type/relation_form_fields.html.twig b/src/bundle/Resources/views/themes/admin/content_type/relation_form_fields.html.twig index 5bc71cc1ee..a6bb7be5a1 100644 --- a/src/bundle/Resources/views/themes/admin/content_type/relation_form_fields.html.twig +++ b/src/bundle/Resources/views/themes/admin/content_type/relation_form_fields.html.twig @@ -10,22 +10,22 @@ {% if is_path_selected %}ibexa-default-location__path-selector--filled{% endif %} " > - +
    - +
  • - - - {{ 'language.edit'|trans|desc('Edit') }} - - + {{ 'language.edit'|trans({}, 'ibexa_language')|desc('Edit') }} +
  • {{ form_start(deleteForm, {"action": path("ibexa.language.delete", {"languageId": language.id, "redirectErrorsTo": "view"})}) }} {{ form_widget(deleteForm.language) }} - + {{ 'language.delete_language'|trans({}, 'ibexa_language')|desc('Delete') }} + {% include '@ibexadesign/language/modal/delete_confirmation.html.twig' with {'deleteForm': deleteForm} %} {{ form_end(deleteForm) }} @@ -60,13 +56,13 @@ {% block content %} {% set enable_checkbox_raw %}
    - + :disabled="true" + :checked="language.enabled" + />
    {% endset %} {% set language_items = [ diff --git a/src/bundle/Resources/views/themes/admin/language/list.html.twig b/src/bundle/Resources/views/themes/admin/language/list.html.twig index 571c2d8522..ff03e5116d 100644 --- a/src/bundle/Resources/views/themes/admin/language/list.html.twig +++ b/src/bundle/Resources/views/themes/admin/language/list.html.twig @@ -23,14 +23,13 @@ {% set menu_items %} {% if can_administrate %}
  • - - - {{ 'language.new'|trans|desc('Add language') }} - - + {{ 'language.new'|trans({}, 'ibexa_language')|desc('Add language') }} +
    • {% endif %} {% endset %} diff --git a/src/bundle/Resources/views/themes/admin/language/modal/delete_confirmation.html.twig b/src/bundle/Resources/views/themes/admin/language/modal/delete_confirmation.html.twig index 8cb206e3a5..e8a70773ac 100644 --- a/src/bundle/Resources/views/themes/admin/language/modal/delete_confirmation.html.twig +++ b/src/bundle/Resources/views/themes/admin/language/modal/delete_confirmation.html.twig @@ -9,9 +9,9 @@

    {{ 'language.modal.message'|trans|desc('Delete the languages?') }}

    {% endblock %} {% block footer_content %} - {{ form_widget(deleteForm.delete, { 'attr': {'class': 'btn ibexa-btn ibexa-btn--primary'} }) }} - + {{ form_widget(deleteForm.delete, { 'attr': {'class': 'ids-btn ids-btn--primary ids-btn--medium'} }) }} + + {{ 'language.form.cancel'|trans({}, 'ibexa_language')|desc('Cancel') }} + {% endblock %} {% endembed %} diff --git a/src/bundle/Resources/views/themes/admin/language/tab/languages.html.twig b/src/bundle/Resources/views/themes/admin/language/tab/languages.html.twig index 88660acce7..6e039746fc 100644 --- a/src/bundle/Resources/views/themes/admin/language/tab/languages.html.twig +++ b/src/bundle/Resources/views/themes/admin/language/tab/languages.html.twig @@ -39,13 +39,13 @@ {% set col_raw %}
    - + :disabled="true" + :checked="language.enabled" + />
    {% endset %} {% set body_row_cols = body_row_cols|merge([{ @@ -56,15 +56,14 @@ {% set col_raw %} {% if can_administrate %} - - - - - + variant="button" + type="tertiary-alt" + icon="edit" + icon_size="small" + title="{{ 'language.edit'|trans|desc('Edit') }}" + /> {% endif %} {% endset %} {% set body_row_cols = body_row_cols|merge([{ @@ -96,21 +95,18 @@ {% block actions %} {% if can_administrate %} {% set modal_data_target = 'delete-languages-modal' %} - + {{ 'language.delete'|trans|desc('Delete') }} + {% include '@ibexadesign/ui/modal/bulk_delete_confirmation.html.twig' with { id: modal_data_target, message: 'language.modal.message'|trans|desc('Delete the languages?'), diff --git a/src/bundle/Resources/views/themes/admin/limitation/udw_limitation_value.html.twig b/src/bundle/Resources/views/themes/admin/limitation/udw_limitation_value.html.twig index 79d0021a7a..8fc2331c04 100755 --- a/src/bundle/Resources/views/themes/admin/limitation/udw_limitation_value.html.twig +++ b/src/bundle/Resources/views/themes/admin/limitation/udw_limitation_value.html.twig @@ -3,20 +3,22 @@ {{ form_errors(form.limitationValues) }} {{ form_widget(form.limitationValues) }} - + data-value-template="{{ value_template_attr }}" + > + {{ 'role.policy.limitation.location.udw_button'|trans({}, 'ibexa_content_forms_role')|desc('Select Locations') }} +
      {% for limitationValue in form.limitationValues.vars.data %} @@ -37,11 +39,9 @@ }) }} {% else %}
    • -
      -
      - {{ "role.policy.limitation.location_deleted"|trans({}, 'ibexa_content_forms_role')|desc("Location deleted") }} -
      -
      + + {{ "role.policy.limitation.location_deleted"|trans({}, 'ibexa_content_forms_role')|desc("Location deleted") }} +
      • {% endif %} {% endfor %} diff --git a/src/bundle/Resources/views/themes/admin/link_manager/list.html.twig b/src/bundle/Resources/views/themes/admin/link_manager/list.html.twig index c631835c9a..ef7ab8cbd1 100644 --- a/src/bundle/Resources/views/themes/admin/link_manager/list.html.twig +++ b/src/bundle/Resources/views/themes/admin/link_manager/list.html.twig @@ -45,15 +45,14 @@ {% set col_raw %} {% if can_edit %} - - - - - + /> {% endif %} {% endset %} {% set body_row_cols = body_row_cols|merge([{ diff --git a/src/bundle/Resources/views/themes/admin/link_manager/view.html.twig b/src/bundle/Resources/views/themes/admin/link_manager/view.html.twig index 8ddf15a8c0..35f4a8b635 100644 --- a/src/bundle/Resources/views/themes/admin/link_manager/view.html.twig +++ b/src/bundle/Resources/views/themes/admin/link_manager/view.html.twig @@ -37,13 +37,15 @@ {{ 'url.label.address'|trans|desc('Address') }} {{ url.url }} - - - - - + @@ -100,16 +102,15 @@ {% set col_raw %} {% if can_edit %} - + /> {% endif %} {% endset %} {% set body_row_cols = body_row_cols|merge([{ diff --git a/src/bundle/Resources/views/themes/admin/object_state/list.html.twig b/src/bundle/Resources/views/themes/admin/object_state/list.html.twig index b8eba400cc..d8a68d5bbb 100644 --- a/src/bundle/Resources/views/themes/admin/object_state/list.html.twig +++ b/src/bundle/Resources/views/themes/admin/object_state/list.html.twig @@ -39,15 +39,14 @@ {% set col_raw %} {% if can_administrate %} - - - - - + variant="button" + type="tertiary-alt" + icon="edit" + icon_size="small-medium" + /> {% endif %} {% endset %} {% set body_row_cols = body_row_cols|merge([{ @@ -75,34 +74,30 @@ {% embed '@ibexadesign/ui/component/table/table_header.html.twig' %} {% block actions %} {% if can_administrate %} - - - - - - {{ 'object_state.new'|trans|desc('Add') }} - - + {{ 'object_state.new'|trans|desc('Add') }} + {% set modal_data_target = 'delete-object-state-modal' %} - + {{ 'object_state.delete.bulk_delete.submit'|trans|desc('Delete') }} + {% include '@ibexadesign/ui/modal/bulk_delete_confirmation.html.twig' with { 'id': modal_data_target, 'message': 'object_state.modal.message'|trans|desc('Do you want to delete the Object state(s)?'), diff --git a/src/bundle/Resources/views/themes/admin/object_state/object_state_group/list.html.twig b/src/bundle/Resources/views/themes/admin/object_state/object_state_group/list.html.twig index d79beaae9e..4d2bca5cf3 100644 --- a/src/bundle/Resources/views/themes/admin/object_state/object_state_group/list.html.twig +++ b/src/bundle/Resources/views/themes/admin/object_state/object_state_group/list.html.twig @@ -27,17 +27,15 @@ {% set menu_items %} {% if can_administrate %}
    • - - - - - - {{ 'object_state_group.new'|trans|desc('Create') }} - - + {{ 'object_state_group.new'|trans({}, 'ibexa_object_state')|desc('Create') }} +
      • {% endif %} {% endset %} @@ -83,15 +81,14 @@ {% set col_raw %} {% if can_administrate %} - - - - - + variant="button" + type="tertiary-alt" + icon="edit" + icon_size="small" + title="{{ 'object_state_group.view.list.action.edit'|trans|desc('Edit') }}" + /> {% endif %} {% endset %} {% set body_row_cols = body_row_cols|merge([{ @@ -120,21 +117,18 @@ {% block actions %} {% if can_administrate %} {% set modal_data_target = 'delete-object-state-groups-modal' %} - + {{ 'object_state_group.delete.bulk_delete.submit'|trans|desc('Delete') }} + {% include '@ibexadesign/ui/modal/bulk_delete_confirmation.html.twig' with { 'id': modal_data_target, 'message': 'object_state_group.modal.message'|trans|desc('Do you want to delete the Object state group(s)?'), diff --git a/src/bundle/Resources/views/themes/admin/object_state/object_state_group/view.html.twig b/src/bundle/Resources/views/themes/admin/object_state/object_state_group/view.html.twig index c30400a405..66d3bd1430 100644 --- a/src/bundle/Resources/views/themes/admin/object_state/object_state_group/view.html.twig +++ b/src/bundle/Resources/views/themes/admin/object_state/object_state_group/view.html.twig @@ -24,14 +24,13 @@ {% set menu_items %} {% if can_administrate %}
    • - - - {{ 'object_state_group.name.action.edit'|trans|desc('Edit') }} - - + {{ 'object_state_group.name.action.edit'|trans({}, 'ibexa_object_state')|desc('Edit') }} +
      • {% endif %} {% endset %} diff --git a/src/bundle/Resources/views/themes/admin/object_state/view.html.twig b/src/bundle/Resources/views/themes/admin/object_state/view.html.twig index ceb0b9acaa..59152dc49a 100644 --- a/src/bundle/Resources/views/themes/admin/object_state/view.html.twig +++ b/src/bundle/Resources/views/themes/admin/object_state/view.html.twig @@ -25,14 +25,13 @@ {% set menu_items %} {% if can_administrate %}
    • - - - {{ 'object_state_group.name.action.edit'|trans|desc('Edit') }} - - + {{ 'object_state_group.name.action.edit'|trans({}, 'ibexa_object_state')|desc('Edit') }} +
      • {% endif %} {% endset %} diff --git a/src/bundle/Resources/views/themes/admin/section/assigned_content.html.twig b/src/bundle/Resources/views/themes/admin/section/assigned_content.html.twig index 4f4e78fd3a..7caa867159 100644 --- a/src/bundle/Resources/views/themes/admin/section/assigned_content.html.twig +++ b/src/bundle/Resources/views/themes/admin/section/assigned_content.html.twig @@ -66,7 +66,7 @@ {{ form_widget(form_section_content_assign.locations.location) }} {{ form_widget(form_section_content_assign.locations.select_content, {'attr': { - 'class': 'btn ibexa-btn ibexa-btn--tertiary ibexa-btn--small ibexa-btn--open-udw', + 'class': 'ids-btn ids-btn--tertiary ids-btn--small ids-btn--open-udw', 'data-udw-config': ibexa_udw_config('multiple', {'type': 'section_assign'}) }} ) }} diff --git a/src/bundle/Resources/views/themes/admin/section/list.html.twig b/src/bundle/Resources/views/themes/admin/section/list.html.twig index dc1e47ad27..9e14ef4ba5 100644 --- a/src/bundle/Resources/views/themes/admin/section/list.html.twig +++ b/src/bundle/Resources/views/themes/admin/section/list.html.twig @@ -26,17 +26,15 @@ {% set menu_items %} {% if can_add %}
    • - - - - - - {{ 'section.new'|trans|desc('Create') }} - - + {{ 'section.new'|trans({}, 'ibexa_section')|desc('Create') }} +
      • {% endif %} {% endset %} @@ -91,29 +89,28 @@ {% set col_raw %} {% if assignable[section.id] %} - - - - - + class="ids-btn--open-udw" + /> {% endif %} {% if can_edit %} - - - - - + variant="button" + type="tertiary-alt" + icon="edit" + icon_size="small" + title="{{ 'section.edit'|trans|desc('Edit') }}" + /> {% endif %} {% endset %} {% set body_row_cols = body_row_cols|merge([{ @@ -144,21 +141,17 @@ {% block actions %} {% if can_edit %} {% set modal_data_target = 'delete-sections-modal' %} - + {{ 'section.delete'|trans|desc('Delete') }} + {% include '@ibexadesign/ui/modal/bulk_delete_confirmation.html.twig' with { 'id': modal_data_target, 'message': 'section.modal.message'|trans|desc('Do you want to delete the Section(s)?'), diff --git a/src/bundle/Resources/views/themes/admin/section/modal/delete_confirmation.html.twig b/src/bundle/Resources/views/themes/admin/section/modal/delete_confirmation.html.twig index 217f636d5c..4daca56e83 100644 --- a/src/bundle/Resources/views/themes/admin/section/modal/delete_confirmation.html.twig +++ b/src/bundle/Resources/views/themes/admin/section/modal/delete_confirmation.html.twig @@ -15,10 +15,10 @@ "action": path('ibexa.section.delete', {'sectionId': section.id}), 'attr': {'class': 'd-inline-block'} }) }} - {{ form_widget(form.delete, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary', 'disabled': not deletable}}) }} - + {{ form_end(form) }} {% endblock %} {% endembed %} diff --git a/src/bundle/Resources/views/themes/admin/section/view.html.twig b/src/bundle/Resources/views/themes/admin/section/view.html.twig index 409e11d8f0..18bcb7451b 100644 --- a/src/bundle/Resources/views/themes/admin/section/view.html.twig +++ b/src/bundle/Resources/views/themes/admin/section/view.html.twig @@ -41,31 +41,29 @@ ] %} {% set information_headline_items %} {% if can_edit %} - {% set modalDataAttributes = deletable ? 'data-bs-toggle=modal data-bs-target=#delete-section-modal' : '' %} - - - - - - {{ 'section.edit'|trans|desc('Edit') }} - - - + {{ 'section.action.delete'|trans({}, 'ibexa_section')|desc('Delete') }} + {% if deletable %} {% include '@ibexadesign/section/modal/delete_confirmation.html.twig' with {'form': form_section_delete} %} {% endif %} diff --git a/src/bundle/Resources/views/themes/admin/trash/list.html.twig b/src/bundle/Resources/views/themes/admin/trash/list.html.twig index 2aa53dbe29..0b461318aa 100644 --- a/src/bundle/Resources/views/themes/admin/trash/list.html.twig +++ b/src/bundle/Resources/views/themes/admin/trash/list.html.twig @@ -31,24 +31,20 @@ {% set creatorSearch %}
      - + + {{ 'search.creator_input.label'|trans({}, 'ibexa_trash')| desc('Creator') }} +
      - - + {{ include('@ibexadesign/ui/component/input_text_ds.html.twig', { + input_attr: { + class: 'ibexa-trash-search-form__input', + 'data-content-type-identifiers': user_content_type_identifier|join(','), + value: creator_exists ? ibexa_content_name(creator) : '', + placeholder: 'search.creator_input.placeholder'|trans|desc('Type creator\'s name'), + readonly: creator_exists, + }, + }) }}
        @@ -129,7 +125,7 @@
        {{ form_widget(form, { attr: { 'data-is-parent-in-trash': is_parent_in_trash ? '1': '0', - class: 'ibexa-input ibexa-input--checkbox form-check-input' + class: 'ids-input ids-input--checkbox' }}) }}
        {% endset %} @@ -286,7 +282,7 @@ {% set restore_under_new_parent_button_attr = form_trash_item_restore.location.select_content.vars.attr|merge({ 'attr': { 'data-udw-config': ibexa_udw_config('single_container', {}), - 'class': (form_trash_item_restore.location.select_content.vars.attr.class|default('') ~ ' btn ibexa-btn ibexa-btn--ghost ibexa-btn--small')|trim, + 'class': (form_trash_item_restore.location.select_content.vars.attr.class|default('') ~ ' ids-btn ids-btn--tertiary-alt ids-btn--small')|trim, 'disabled': true }, 'label': 'trash.button.restore_new_location'|trans({},'ibexa_trash')|desc("Restore in a new location") }) %} @@ -294,7 +290,7 @@ {{ form_widget(form_trash_item_restore.location.location) }} {% do form_trash_item_restore.location.setRendered %} {{ form_widget(form_trash_item_restore.restore, { - 'attr': {'class': 'btn ibexa-btn ibexa-btn--ghost ibexa-btn--small', 'disabled': true}, + 'attr': {'class': 'ids-btn ids-btn--tertiary-alt ids-btn--small', 'disabled': true}, 'label': 'trash.button.restore'|trans({},'ibexa_trash')|desc('Restore') }) }} {% else %} @@ -303,21 +299,18 @@ {% endif %} {% if can_delete %} {% set modal_data_target = 'delete-trash-items-modal' %} - + {{ 'trash.delete'|trans|desc('Delete') }} + {% include '@ibexadesign/ui/modal/bulk_delete_confirmation.html.twig' with { 'id': modal_data_target, 'message': 'trash.modal.message'|trans|desc('Delete the selected items permanently?'), diff --git a/src/bundle/Resources/views/themes/admin/trash/modal/empty_trash_confirmation.html.twig b/src/bundle/Resources/views/themes/admin/trash/modal/empty_trash_confirmation.html.twig index 4c5966f9d9..d3c1d9e03b 100644 --- a/src/bundle/Resources/views/themes/admin/trash/modal/empty_trash_confirmation.html.twig +++ b/src/bundle/Resources/views/themes/admin/trash/modal/empty_trash_confirmation.html.twig @@ -16,10 +16,10 @@ {{ form_start(form, { 'action': path('ibexa.trash.empty') }) }} - {{ form_widget(form.empty, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary'}}) }} - + {{ form_widget(form.empty_trash, {'label_attr': {'class': 'checkbox-inline'}, 'attr': {'hidden': true}}) }} {{ form_end(form) }} {% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/action_list.html.twig b/src/bundle/Resources/views/themes/admin/ui/action_list.html.twig index 3574943009..753816b5a4 100644 --- a/src/bundle/Resources/views/themes/admin/ui/action_list.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/action_list.html.twig @@ -4,7 +4,7 @@ {% for action in item.children %} {% set action_attrs = action.attributes|default({})|merge({ - class: 'btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ' ~ action.attributes.class|default(''), + class: 'ids-btn ids-btn--tertiary-alt ids-btn--medium ' ~ action.attributes.class|default(''), }) %} {% if action.uri %} {% set action_attrs = action_attrs|merge({ href: action.uri }) %} @@ -23,11 +23,12 @@
        {% set btn_data_dropdown_trigger = 'ibexa-action-list-more__trigger-' ~ random() %} - + {{ include('@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu.html.twig', { groups: [{ id: 'default', items: menu_items }], diff --git a/src/bundle/Resources/views/themes/admin/ui/component/adaptive_filters/adaptive_filters.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/adaptive_filters/adaptive_filters.html.twig index 183a3e1713..d4f678d588 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/adaptive_filters/adaptive_filters.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/adaptive_filters/adaptive_filters.html.twig @@ -45,7 +45,7 @@ }) %} {% set basic_attr_toggler_btn = basic_attr_toggler_btn|default({})|merge({ - class: ('btn ibexa-btn ibexa-btn--ghost ibexa-btn--small ibexa-adaptive-filters__toggler ' + class: ('ids-btn ids-btn--tertiary-alt ids-btn--small ibexa-adaptive-filters__toggler ' ~ basic_attr_toggler_btn.class|default(''))|trim, type: basic_attr_toggler_btn.type|default('button'), }) %} @@ -91,7 +91,7 @@
        {% block static_left %}
        - + {% block static_left_input %}{% endblock %}
        {% endblock %} @@ -109,25 +109,23 @@
        {% block actions %} {% block action_submit %} - + {{ 'actions.apply_btn'|trans({}, 'ibexa_adaptive_filters')|desc('Apply') }} + {% endblock %} {% block action_clear %} - + {{ 'actions.clear_btn'|trans({}, 'ibexa_adaptive_filters')|desc('Clear filters') }} + {% endblock %} {% endblock %}
        diff --git a/src/bundle/Resources/views/themes/admin/ui/component/alert/alert.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/alert/alert.html.twig index dc4d2a4ad7..f3003b5f07 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/alert/alert.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/alert/alert.html.twig @@ -57,11 +57,13 @@ {% endblock %} {% block close_btn %} {% if show_close_btn|default(false) %} - + {% endif %} {% endblock %}
        diff --git a/src/bundle/Resources/views/themes/admin/ui/component/collapse_all_btn/collapse_all_btn.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/collapse_all_btn/collapse_all_btn.html.twig index 9e31262283..8e9a28006e 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/collapse_all_btn/collapse_all_btn.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/collapse_all_btn/collapse_all_btn.html.twig @@ -1,7 +1,12 @@ {% trans_default_domain 'ibexa_collapse' %}
        - +
        diff --git a/src/bundle/Resources/views/themes/admin/ui/component/context_menu/context_menu.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/context_menu/context_menu.html.twig index 107882a69e..da564ab303 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/context_menu/context_menu.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/context_menu/context_menu.html.twig @@ -1,5 +1,8 @@
          - {% set selector_btn_classes = selector_btn_classes|default('btn ibexa-btn ibexa-btn--secondary ibexa-btn--no-text') %} + {% set selector_btn_classes = selector_btn_classes|default('') %} + {% set selector_btn_type = selector_btn_type|default('secondary') %} + {% set selector_btn_size = selector_btn_size|default('medium') %} + {% set selector_btn_icon_size = selector_btn_size == 'small' ? 'tiny-small' : 'small' %} {{ menu_items }} @@ -10,11 +13,13 @@ ibexa-adaptive-items__item ibexa-adaptive-items__item--selector "> - + {{ include('@ibexadesign/ui/component/multilevel_popup_menu/multilevel_popup_menu.html.twig', { is_custom_init: true, diff --git a/src/bundle/Resources/views/themes/admin/ui/component/details/details.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/details/details.html.twig index 9160796f87..c5ae5d8cdc 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/details/details.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/details/details.html.twig @@ -39,7 +39,14 @@ class="{{ item.class|default('') }} ibexa-details__item {{ item_inline|default(false) ? 'ibexa-details__item--inline' ~ (is_field_empty ? ' ibexa-details__item--hidden') }}" > -
          {{ item.label }}
          + {% if item_inline|default(false) %} +
          {{ item.label }}
          + {% else %} + + {{ item.label }} + + {% endif %} +
          - +
          {% endif %}
          diff --git a/src/bundle/Resources/views/themes/admin/ui/component/double_input_range/double_input_range.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/double_input_range/double_input_range.html.twig index c7b0296e14..7f88aca2c7 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/double_input_range/double_input_range.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/double_input_range/double_input_range.html.twig @@ -7,7 +7,7 @@ }) %} {% set single_label_attr = single_label_attr|default({})|merge({ - class: ('ibexa-label ' ~ single_label_attr.class|default(''))|trim, + class: ('ids-label ' ~ single_label_attr.class|default(''))|trim, }) %} {% set inputs_wrapper_attr = inputs_wrapper_attr|default({})|merge({ 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 index a13d52a38e..32d66acf80 100644 --- 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 @@ -149,15 +149,15 @@ {% endif %} {% endblock items_list_header %} - {%- embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: true } only -%} - {% block content %} - - {% endblock %} - {%- endembed -%} + {%- include '@ibexadesign/ui/component/input_text_ds.html.twig' with { + has_search: true, + input_attr: { + type: 'text', + size: 'small', + class: 'ibexa-dropdown__items-filter', + placeholder: 'dropdown.search'|trans({}, 'messages')|desc('Search...') + } + } only -%} {% if has_select_all_toggler and choices_flat|length >= min_select_all_toggler_items %} {% set selection_toggler_label = value|length diff --git a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig index 2e8ed6dac9..c5eeb0c030 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/dropdown/dropdown_item.html.twig @@ -23,7 +23,11 @@ {% if is_selected %}ibexa-dropdown__item--selected{% endif %}" > {% if multiple is defined and multiple %} - + {% endif %} {% if icon is defined and icon != '' %} 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 index 461b592bc0..7e8d01291b 100644 --- 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 @@ -26,12 +26,13 @@
          - + {{ include('@ibexadesign/ui/component/input_text_ds.html.twig', { + input_attr: { + class: 'ibexa-instant-filter__input', + placeholder: filter_placeholder, + value: '', + }, + }) }}
          {% if filter_description %}
          diff --git a/src/bundle/Resources/views/themes/admin/ui/component/embedded_item_actions/embedded_item_actions.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/embedded_item_actions/embedded_item_actions.html.twig index c82b3e106b..6f621ca02c 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/embedded_item_actions/embedded_item_actions.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/embedded_item_actions/embedded_item_actions.html.twig @@ -6,15 +6,14 @@ {% endblock %} {% block embedded_item_menu_trigger %} - + /> {% endblock %} {% block embedded_item_menu %} diff --git a/src/bundle/Resources/views/themes/admin/ui/component/extra_actions/extra_actions.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/extra_actions/extra_actions.html.twig index 66d0055b3a..22fe0c9439 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/extra_actions/extra_actions.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/extra_actions/extra_actions.html.twig @@ -11,11 +11,12 @@

          {{ title|default('') }}

          - +
          {% block content %}{% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig index fbfd2ebafe..e76beaecf0 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig @@ -7,14 +7,25 @@ {% set is_disabled = is_disabled|default(false) %} {% set extra_btn = extra_btn|default({})|merge({ label: extra_btn.label|default(''), - attr: extra_btn.attr|default({})|merge({ - type: extra_btn.type|default('button'), - class: (extra_btn.attr.class|default('') - ~ ' btn ibexa-btn ibexa-btn--info ibexa-input-text-wrapper__action-btn--extra-btn' - )|trim - }) + attr: extra_btn.attr|default({}) }) %} {% set should_clear_button_send_form = should_clear_button_send_form|default(false) %} +{% set clear_btn = { + htmlType: 'button', + type: 'tertiary', + size: 'small', + icon: 'discard', + icon_size: 'tiny-small', + class: 'ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear', + tabindex: '-1', + disabled: is_disabled, +}|merge(should_clear_button_send_form ? {'data-send-form-after-clearing': true} : {}) %} +{% set extra_btn_component = extra_btn.attr|merge({ + htmlType: extra_btn.attr.type|default(extra_btn.type|default('button')), + type: 'secondary', + class: (extra_btn.attr.class|default('') ~ ' ibexa-input-text-wrapper__action-btn--extra-btn')|trim, + label: extra_btn.label, +}) %} {% set wrapper_attr = wrapper_attr|default({})|merge({ class: (wrapper_attr.class|default('') ~ ' ibexa-input-text-wrapper' @@ -32,46 +43,35 @@ {% block content %}{% endblock %}
          {% block actions %} - + {{ component('ibexa:button', clear_btn) }} {% if is_password_input %} - + {% elseif has_search %} - + :disabled="is_disabled" + /> {% elseif extra_btn.label is not empty %} - + {{ component('ibexa:button', extra_btn_component) }} {% endif %} {% endblock %}
          diff --git a/src/bundle/Resources/views/themes/admin/ui/component/input_text_ds.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/input_text_ds.html.twig new file mode 100644 index 0000000000..2eb67a7da1 --- /dev/null +++ b/src/bundle/Resources/views/themes/admin/ui/component/input_text_ds.html.twig @@ -0,0 +1,139 @@ +{% import '@ibexadesign/ui/component/macros.html.twig' as html %} + +{% set type = type|default('text') %} +{% set normalized_type = is_password_input|default(false) ? 'password' : type %} +{% set is_password_type = normalized_type == 'password' %} +{% set is_password_input = is_password_input|default(is_password_type) %} +{% set has_search = has_search|default(false) %} +{% set is_multiline = is_multiline|default(false) %} +{% set is_disabled = is_disabled|default(false) %} +{% set input_attr = input_attr|default({}) %} +{% set extra_btn = extra_btn|default({})|merge({ + label: extra_btn.label|default(''), + attr: extra_btn.attr|default({})|merge({ + type: extra_btn.type|default('button'), + class: (extra_btn.attr.class|default('') + ~ ' btn ibexa-btn ibexa-btn--info ibexa-input-text-wrapper__action-btn--extra-btn' + )|trim + }) +}) %} + +{% set should_clear_button_send_form = should_clear_button_send_form|default(false) %} +{% set wrapper_attr = wrapper_attr|default({}) %} +{% set ds_supported_types = ['text', 'password', 'email', 'number', 'tel', 'search', 'url'] %} + +{% set can_use_ds_input = input_attr is not empty + and not is_multiline + and normalized_type in ds_supported_types + and right_side_label is not defined +%} + +{% if can_use_ds_input %} + {% set ds_input = input_attr|merge({ + type: normalized_type, + root_class: wrapper_attr.class|default(''), + disabled: is_disabled, + has_search_action: has_search and normalized_type != 'password', + search_button_type: search_button_type|default('submit'), + send_form_after_clearing: should_clear_button_send_form, + }) %} + + {% set extra_btn_markup %} + {% if extra_btn.label is not empty %} + + {% endif %} + {% endset %} + + {% set combined_actions_after = '' %} + + {% if extra_btn.label is not empty %} + {% set combined_actions_after = combined_actions_after ~ extra_btn_markup %} + {% endif %} + + {% if extra_actions_after|default(null) is not empty %} + {% set combined_actions_after = combined_actions_after ~ extra_actions_after %} + {% endif %} + + {% if combined_actions_after is not empty %} + {% set ds_input = ds_input|merge({ actions_after: combined_actions_after }) %} + {% endif %} + + + {{ block('extra_content') }} +{% else %} + {% set wrapper_attr = wrapper_attr|merge({ + class: (wrapper_attr.class|default('') + ~ ' ibexa-input-text-wrapper' + ~ (has_search ? ' ibexa-input-text-wrapper--search') + ~ (is_password_input ? ' ibexa-input-text-wrapper--password') + ~ " ibexa-input-text-wrapper--type-#{type}" + ~ (extra_btn.label ? ' ibexa-input-text-wrapper--extra-btn') + ~ (is_multiline ? ' ibexa-input-text-wrapper--multiline') + ~ (right_side_label is defined ? ' ibexa-input-text-wrapper--has-right-side-label') + )|trim + }) %} + +
          +
          + {% block content %}{% endblock %} +
          + {% block actions %} + + {% if is_password_input %} + + {% elseif has_search %} + + {% elseif extra_btn.label is not empty %} + + {% endif %} + {{ extra_actions_after|default(null) }} + {% endblock %} +
          +
          + {% block right_side_label %} + {% if right_side_label is defined %} +
          +
          + {{ right_side_label }} +
          +
          + {% endif %} + {% endblock %} + {% block extra_content %}{% endblock %} +
          +{% endif %} diff --git a/src/bundle/Resources/views/themes/admin/ui/component/inputs/input_date_time_picker.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/inputs/input_date_time_picker.html.twig index 0f1176400a..a2f767849e 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/inputs/input_date_time_picker.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/inputs/input_date_time_picker.html.twig @@ -29,14 +29,12 @@ {% endblock %} {% block actions %} {{ parent() }} - + {% endblock %} {% endembed %} diff --git a/src/bundle/Resources/views/themes/admin/ui/component/modal/modal.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/modal/modal.html.twig index b7166aae0f..ca5e5271c1 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/modal/modal.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/modal/modal.html.twig @@ -50,24 +50,20 @@ {% set close_btn_title = 'close_btn.title'|trans({}, 'ibexa_modal')|desc('Close') %} {% set close_btn_aria_label = 'close_btn.aria_label'|trans({}, 'ibexa_modal')|desc('Close') %} -{% set attr_close_btn = attr_close_btn|default({})|merge({ - class: ('close ibexa-btn ibexa-btn--small ibexa-btn--ghost ' ~ attr_close_btn.class|default(''))|trim, - type: attr_close_btn.type|default('button'), - title: attr_close_btn.title|default(close_btn_title), - 'data-bs-dismiss': attr_close_btn['data-bs-dismiss']|default('modal'), - 'data-tooltip-container-selector': '.modal-dialog', - 'aria-label': attr_close_btn['aria-label']|default(close_btn_aria_label), -}) %} +{% set attr_close_btn = attr_close_btn|default({}) %} {% set close_btn %} - + {% endset %}
          diff --git a/src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig index a202ffe690..3216002553 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/multilevel_popup_menu/multilevel_popup_menu_branch.html.twig @@ -20,17 +20,15 @@
          {% block search %} - {%- embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: true } only -%} - {% block content %} - {% trans_default_domain 'ibexa_multilevel_popup_menu' %} - - - {% endblock %} - {%- endembed -%} + {%- include '@ibexadesign/ui/component/input_text_ds.html.twig' with { + has_search: true, + input_attr: { + type: 'text', + size: 'small', + class: 'ibexa-multilevel-popup-menu__search-input', + placeholder: 'search.placeholder'|trans({}, 'ibexa_multilevel_popup_menu')|desc('Search...') + } + } only -%} {% endblock %}
          diff --git a/src/bundle/Resources/views/themes/admin/ui/component/side_panel/side_panel.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/side_panel/side_panel.html.twig index 7949de67eb..700b2acea1 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/side_panel/side_panel.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/side_panel/side_panel.html.twig @@ -21,26 +21,24 @@ {% block panel %}
          {% block header %} - +

          {{ title }}

          {% endblock %} {% block content %}{% endblock %}
          {% block footer %} - + {{ 'side_panel.btn.cancel_label'|trans({}, 'ibexa_admin_ui')|desc('Cancel') }} + {% endblock %}
          diff --git a/src/bundle/Resources/views/themes/admin/ui/component/split_btn/split_btn.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/split_btn/split_btn.html.twig index dfc1ebccce..9dfcd3b2bc 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/split_btn/split_btn.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/split_btn/split_btn.html.twig @@ -1,5 +1,7 @@ {% import "@ibexadesign/ui/component/macros.html.twig" as html %} +{% set use_legacy = type is null or type not in ['primary', 'secondary', 'tertiary', 'secondary-alt', 'tertiary-alt'] %} + {% set attr = attr|default({})|merge({ class: ('ibexa-split-btn ' ~ ('ibexa-split-btn--' ~ type ~ ' ') @@ -8,19 +10,33 @@ {% set popup_attr = popup_attr|default({}) %} -{% set main_btn_attr = main_btn_attr|default({})|merge({ - class: ('btn ibexa-btn ibexa-split-btn__main-btn ' - ~ (type is defined and type is not null ? 'ibexa-btn--' ~ type ~ ' ') - ~ main_btn_attr.class|default(''))|trim, - type: main_btn_attr.type|default('button'), -}) %} +{% if not use_legacy %} + {% set main_btn_attr = main_btn_attr|default({})|merge({ + class: ('ids-btn ids-btn--' ~ type ~ ' ids-btn--medium ibexa-split-btn__main-btn ' + ~ main_btn_attr.class|default(''))|trim, + type: main_btn_attr.type|default('button'), + }) %} -{% set toggler_btn_attr = toggler_btn_attr|default({})|merge({ - class: ('btn ibexa-btn ibexa-btn--no-text ibexa-split-btn__toggle-btn ' - ~ (type is defined and type is not null ? 'ibexa-btn--' ~ type ~ ' ') - ~ toggler_btn_attr.class|default(''))|trim, - type: toggler_btn_attr.type|default('button'), -}) %} + {% set toggler_btn_attr = toggler_btn_attr|default({})|merge({ + class: ('ids-btn ids-btn--' ~ type ~ ' ids-btn--medium ids-btn--icon-only ibexa-split-btn__toggle-btn ' + ~ toggler_btn_attr.class|default(''))|trim, + type: toggler_btn_attr.type|default('button'), + }) %} +{% else %} + {% set main_btn_attr = main_btn_attr|default({})|merge({ + class: ('btn ibexa-btn ibexa-split-btn__main-btn ' + ~ (type is defined and type is not null ? 'ibexa-btn--' ~ type ~ ' ') + ~ main_btn_attr.class|default(''))|trim, + type: main_btn_attr.type|default('button'), + }) %} + + {% set toggler_btn_attr = toggler_btn_attr|default({})|merge({ + class: ('btn ibexa-btn ibexa-btn--no-text ibexa-split-btn__toggle-btn ' + ~ (type is defined and type is not null ? 'ibexa-btn--' ~ type ~ ' ') + ~ toggler_btn_attr.class|default(''))|trim, + type: toggler_btn_attr.type|default('button'), + }) %} +{% endif %} {% set popup_params = popup_params|default({})|merge({ is_custom_init: true, @@ -40,7 +56,11 @@ {% block main_btn %} <{{ main_btn_element }} {{ html.attributes(main_btn_attr) }}> {% block main_btn_label %} - {{ label }} + {% if not use_legacy %} +
          {{ label }}
          + {% else %} + {{ label }} + {% endif %} {% endblock %} {% endblock %} @@ -52,9 +72,19 @@ {% block toggle_btn %} {% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/component/table/table_head_cell.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/table/table_head_cell.html.twig index 0712156e72..5ae383acfb 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/table/table_head_cell.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/table/table_head_cell.html.twig @@ -13,10 +13,11 @@ {%- block content -%} {%- if has_checkbox|default(false) -%}
          - + />
          {%- else -%} {{ 'tag_view_select.select'|trans({ '%type%': type })|desc('Select %type%') }} {{ 'tag_view_select.change'|trans({ '%type%': type })|desc('Change %type%') }} diff --git a/src/bundle/Resources/views/themes/admin/ui/component/taggify/taggify_tag.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/taggify/taggify_tag.html.twig index 2d4d6448d3..98fb4ac556 100644 --- a/src/bundle/Resources/views/themes/admin/ui/component/taggify/taggify_tag.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/component/taggify/taggify_tag.html.twig @@ -1,8 +1,10 @@
          {{ name }} - +
          diff --git a/src/bundle/Resources/views/themes/admin/ui/dashboard/dashboard.html.twig b/src/bundle/Resources/views/themes/admin/ui/dashboard/dashboard.html.twig index cb9fe447ef..38698d2cb1 100644 --- a/src/bundle/Resources/views/themes/admin/ui/dashboard/dashboard.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/dashboard/dashboard.html.twig @@ -12,16 +12,16 @@ {% block context_menu %}
          - + {{ 'dashboard.create'|trans({}, 'ibexa_dashboard')|desc('Create content') }} +
          {% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig b/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig index fac1de39a3..80be5b256c 100644 --- a/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/edit_header.html.twig @@ -16,11 +16,11 @@ {% endif %} -
          + {{ action_name|default('') }} {{ action_object|default('') }} {{ content_type_name|default('') }} -
          +
          {% if show_autosave_status|default(false) %} 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 116fe247ba..d9ffdca51c 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 @@ -4,30 +4,26 @@ {% if translations|length == 1 %} {% set language = translations|first %} - + /> {% else %} {% set top_offset = top_offset is defined ? top_offset : 72 %}
          - + /> {% embed '@ibexadesign/ui/component/edit_content_translation_select.html.twig' with { title: 'edit_translation.languages.select_language_title'|trans|desc('Select translation'), @@ -42,13 +38,15 @@
          {% for language in translations %}
          - +
          {% endfor %}
          @@ -57,12 +55,20 @@ {% block footer_items %} {% trans_default_domain 'ibexa_admin_ui' %} - - + + {{ 'edit_translation.languages.edit'|trans({}, 'ibexa_admin_ui')|desc('Edit') }} + + + {{ 'edit_translation.languages.discard'|trans({}, 'ibexa_admin_ui')|desc('Discard') }} + {% endblock %} {% endembed %}
          diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/binary_base.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/binary_base.html.twig index 64e4c3880c..28d1f327a2 100644 --- a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/binary_base.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/binary_base.html.twig @@ -45,13 +45,13 @@
          {{ 'fieldtype.binary_base.drag_drop'|trans|desc('Drag and drop file') }}
          {{ 'fieldtype.binary_base.drag_drop.or'|trans|desc('or') }}
          - + {{ 'fieldtype.binary_base.upload_file'|trans({}, 'ibexa_content_forms_content')|desc('Upload file') }} +
          {% if max_file_size is defined and max_file_size > 0 %}
          {{ 'fieldtype.binary_base.max_file_size'|trans({'%size%': max_file_size|default(0)|ibexa_file_size(2)})|desc('Max file size: %size%') }}
          diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/binary_base_fields.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/binary_base_fields.html.twig index 6c5b21d9ee..9c23e338c9 100644 --- a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/binary_base_fields.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/binary_base_fields.html.twig @@ -1,7 +1,14 @@ {% block checkbox_row %}
          - + {{ translation_domain is same as(false) ? label : label|trans({}, translation_domain) }}
          @@ -23,4 +30,3 @@
          {% endblock %} - diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_author.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_author.html.twig index e7c79d7343..bcc4ede350 100644 --- a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_author.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_author.html.twig @@ -12,32 +12,32 @@ {% set readonly = attr.readonly|default(false) %}
          - - + {{ 'ibexa_author.action.delete'|trans|desc('Delete') }} +
          - - + {{ 'ibexa_author.name'|trans|desc('Name') }} + {{ 'ibexa_author.Email'|trans|desc('Email') }}
          {% for child in form.authors %} {{ form_row(child, { attr: { readonly: readonly}}) }} @@ -50,25 +50,23 @@
          {{- form_widget(form.id) -}}
          - +
          {{- form_row(form.name, { label_wrapper_attr: { 'hidden': 'hidden' }, attr: { readonly: readonly }}) -}} - {{- form_row(form.email, { label_wrapper_attr: { 'hidden': 'hidden' }, attr: {'class': 'ibexa-input--text', readonly: readonly }}) -}} + {{- form_row(form.email, { label_wrapper_attr: { 'hidden': 'hidden' }, attr: { readonly: readonly }}) -}}
          - + />
          {%- endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_binaryfile.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_binaryfile.html.twig index e2343e25c0..b22ad847c9 100644 --- a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_binaryfile.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_binaryfile.html.twig @@ -18,34 +18,36 @@
          - - - - - {{ 'ibexa_binaryfile.action.download'|trans|desc('Download') }} - - + {{ 'ibexa_binaryfile.action.remove'|trans({}, 'ibexa_content_forms_content')|desc('Delete') }} +
          - + {{ 'ibexa_binaryfile.file_name.label'|trans({}, 'ibexa_content_forms_content')|desc('File name') }}

          {{ form.parent.vars.value.value.fileName }}

          - + {{ 'ibexa_binaryfile.file_size.label'|trans({}, 'ibexa_content_forms_content')|desc('Size') }}

          {{ form.parent.vars.value.value.fileSize|ibexa_file_size(2) }}

          diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_boolean.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_boolean.html.twig index c6a286b4f7..930734b00f 100644 --- a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_boolean.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_boolean.html.twig @@ -1,4 +1,4 @@ -{% use '@ibexadesign/ui/form_fields/toggle_widget.html.twig' %} +{% use '@ibexadesign/ui/form_fields/toggle_widget_ds.html.twig' %} {% block ezplatform_fieldtype_ibexa_boolean_label %} {{ block('form_label') }} diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_gmap_location.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_gmap_location.html.twig index 65eef13b4c..78987cd495 100644 --- a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_gmap_location.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_gmap_location.html.twig @@ -9,21 +9,18 @@
          {{ form_widget(form.address, {'attr': {'class': 'ibexa-data-source__input', 'placeholder': 'ibexa_gmap_location.input.placeholder'|trans|desc('Search address'), readonly: readonly }}) }}
          - +
          - +
          diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_image.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_image.html.twig index bbd32177e9..2ab3dab695 100644 --- a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_image.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_image.html.twig @@ -23,27 +23,28 @@
          - - + - - - - {{ 'content.field_type.ibexa_image.preview'|trans|desc('Preview') }} - + {{ 'content.field_type.ibexa_image.preview'|trans({}, 'ibexa_content_forms_content')|desc('Preview') }} + {% if version_info is defined %} {% set content_id = version_info.contentInfo.id %} @@ -68,11 +69,11 @@
          - + {{ 'content.field_type.ibexa_image.file_name.label'|trans({}, 'ibexa_content_forms_content')|desc('File name') }}

          {{ form.parent.vars.value.value.fileName }}

          - + {{ 'content.field_type.ibexa_image.dimensions.label'|trans({}, 'ibexa_content_forms_content')|desc('Master dimension') }}

          {{ 'content.field_type.ibexa_image.dimensions.width'|trans({ '%width%': form.parent.vars.value.value.width})|desc('W:%width% px') }} @@ -83,7 +84,7 @@

          - + {{ 'content.field_type.ibexa_image.file_size.label'|trans({}, 'ibexa_content_forms_content')|desc('Size') }}

          {{ form.parent.vars.value.value.fileSize|ibexa_file_size(2) }}

          diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_image_asset.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_image_asset.html.twig index 6efd4cf59f..30e5650004 100644 --- a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_image_asset.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_image_asset.html.twig @@ -79,13 +79,14 @@ {% endblock %} {% block ibexa_image_asset_source_buttons %} - + {{ 'fieldtype.ibexa_image_asset.select.label'|trans({}, 'ibexa_content_forms_content')|desc('Select from library') }} + {% endblock %} {% block ibexa_image_asset_preview %} @@ -114,27 +115,29 @@
          - - + - - - - {{ 'content.field_type.ibexa_image.preview'|trans|desc('Preview') }} - + {{ 'content.field_type.ibexa_image.preview'|trans({}, 'ibexa_content_forms_content')|desc('Preview') }} + {% if version_info is defined %} {% set content_id = version_info.contentInfo.id %} @@ -159,7 +162,7 @@
          - + {{ 'content.field_type.ibexa_image_asset.file_name.label'|trans({}, 'ibexa_content_forms_content')|desc('File name') }}

          {{ destination_content_name }} diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_media.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_media.html.twig index 75e4a3e36f..2ec66a95e1 100644 --- a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_media.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ibexa_media.html.twig @@ -17,27 +17,28 @@

          - - + - - - - {{ 'content.field_type.ibexa_media.download'|trans|desc('Download') }} - + {{ 'content.field_type.ibexa_media.download'|trans({}, 'ibexa_content_forms_content')|desc('Download') }} +
          - + {{ 'content.field_type.ibexa_media.file_name.label'|trans({}, 'ibexa_content_forms_content')|desc('File name') }}

          {{ form.parent.vars.value.value.fileName }}

           - + {{ 'content.field_type.ibexa_media.file_size.label'|trans({}, 'ibexa_content_forms_content')|desc('Size') }}

          {{ form.parent.vars.value.value.fileSize|ibexa_file_size(2) }}
          @@ -66,9 +67,9 @@
          - +
          {{ form_row(form.hasController, {'label_attr': {'class': 'checkbox-inline'}, attr: { disabled: readonly }}) }} {{ form_row(form.autoplay, {'label_attr': {'class': 'checkbox-inline'}, attr: { disabled: readonly }}) }} diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/relation_base.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/relation_base.html.twig index 97a9bb7939..2db12014cf 100644 --- a/src/bundle/Resources/views/themes/admin/ui/field_type/edit/relation_base.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/field_type/edit/relation_base.html.twig @@ -8,33 +8,35 @@ {% set helper = helper|default('') %} {% set readonly = attr.readonly|default(false) %} {% set remove_item_btn %} - + class="ibexa-relations__table-action--remove-item" + /> {% endset %} {% set col_raw_checkbox_template %} {% endset %} {% set col_raw_order_input_template %} - +
          +
          + +
          +
          {% endset %} {% set col_raw_actions_template %} @@ -111,19 +113,23 @@ {% set col_raw_checkbox %} {% endset %} {% set col_raw_order_input %} - +
          +
          + +
          +
          {% endset %} {% if limit != 1 %} @@ -183,12 +189,16 @@ {% endset %} {% set col_raw_order_input %} - +
          +
          + +
          +
          {% endset %} {% set body_rows = body_rows|merge([{ @@ -263,31 +273,32 @@ {% endblock %} {% block actions %} {% if limit != 1 %} - - + {{ 'ibexa_object_relation_list.delete_selected_relations'|trans|desc('Delete') }} + {% endif %} {% endblock %} {% endembed %} @@ -302,17 +313,17 @@ 'allowed_content_types': allowed_content_types } %} {% set udw_config = ibexa_udw_config(limit == 1 ? 'single' : 'multiple', udw_config_parameters) %} - +

          {{ helper }}

          {% set attr = attr|merge({'hidden': 'hidden'}) %} diff --git a/src/bundle/Resources/views/themes/admin/ui/field_type/preview/content_fields.html.twig b/src/bundle/Resources/views/themes/admin/ui/field_type/preview/content_fields.html.twig index f8e49d76ec..1670113bd0 100644 --- a/src/bundle/Resources/views/themes/admin/ui/field_type/preview/content_fields.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/field_type/preview/content_fields.html.twig @@ -150,21 +150,24 @@ {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-field-preview ibexa-field-preview--ibexa_selection-multiple')|trim}) %}
            {% for selectedIndex in field.value.selection %} -
          • -
            +
          • + {{ options[selectedIndex] }} -
          + {% endfor %}
        {% elseif not fieldSettings.isMultiple %} - {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-field-preview ibexa-field-preview--ibexa_selection-single ibexa-tag')|trim}) %} + {% set attr = attr|merge({'class': (attr.class|default('') ~ ' ibexa-field-preview ibexa-field-preview--ibexa_selection-single')|trim}) %} {% set field_value = options[field.value.selection|first]|escape %} - -
        + {% set simple_block_field_content %} {{ block( 'simple_block_field' ) }} -
        + {% endset %} + + + {{ simple_block_field_content }} + {% endif %} {% endblock %} @@ -228,11 +231,15 @@ {{ field.value.fileName }} {{ field.value.fileSize|ibexa_file_size( 1 ) }} - - - - - +
        {% endif %} {% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig b/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig index 91a7092d11..325f90b28a 100644 --- a/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig @@ -1,20 +1,20 @@ {% extends 'bootstrap_5_layout.html.twig' %} -{% use '@ibexadesign/ui/form_fields/toggle_widget.html.twig' %} +{% use '@ibexadesign/ui/form_fields/toggle_widget_ds.html.twig' %} {% use '@ibexadesign/ui/form_fields/dropdown_widget.html.twig' %} {%- block button_widget -%} - {%- set attr = attr|merge({class: (attr.class|default('ibexa-btn ibexa-btn--secondary') ~ ' btn')|trim}) -%} + {%- set attr = attr|merge({class: (attr.class|default('ids-btn ids-btn--secondary ids-btn--medium'))|trim}) -%} {{- parent() -}} {%- endblock button_widget %} {%- block submit_widget -%} - {%- set attr = attr|merge({class: (attr.class|default('ibexa-btn ibexa-btn--primary'))|trim}) -%} + {%- set attr = attr|merge({class: (attr.class|default('ids-btn ids-btn--primary ids-btn--medium'))|trim}) -%} {{- parent() -}} {%- endblock submit_widget %} {% block form_label -%} - {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ibexa-label')|trim}) -%} + {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ids-label')|trim}) -%} {%- set is_only_errors = label is same as(false) -%} {% if not is_only_errors -%} {{ parent() }} @@ -22,7 +22,7 @@ {%- endblock form_label %} {% block checkbox_radio_label -%} - {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ibexa-label ibexa-label--checkbox-radio')|trim}) -%} + {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ids-choice-input-label ids-choice-input-field__label')|trim}) -%} {{ parent() }} {%- endblock checkbox_radio_label %} @@ -148,17 +148,51 @@ {%- endblock -%} {%- block checkbox_widget -%} - {%- set attr = attr|merge({class: 'ibexa-input ibexa-input--checkbox ' ~ attr.class|default('') }) -%} + {%- set attr_class = attr.class|default('') -%} + {%- if 'btn-check' not in attr_class -%} + {%- set attr_class = 'ids-input ids-input--checkbox form-check-input ' ~ attr_class -%} + {%- else -%} + {%- set attr_class = 'ids-input ids-input--checkbox ' ~ attr_class -%} + {%- endif -%} + {%- set attr = attr|merge({class: attr_class|trim }) -%} {{ parent() }} {%- endblock -%} {%- block radio_widget -%} - {%- set attr = attr|merge({class: 'ibexa-input ibexa-input--radio ' ~ attr.class|default('') }) -%} - {{ parent() }} + {%- set attr_class = attr.class|default('') -%} + {%- set row_class = '' -%} + {%- if 'btn-check' not in attr_class -%} + {%- set attr_class = attr_class ~ ' form-check-input' -%} + {%- set row_class = 'form-check' -%} + {%- endif -%} + {%- set parent_label_class = parent_label_class|default(label_attr.class|default('')) -%} + {%- if 'radio-inline' in parent_label_class -%} + {%- set row_class = row_class ~ ' form-check-inline' -%} + {%- endif -%} + {%- set component_attr = attr|merge({ class: attr_class|trim }) -%} + {%- if row_class is not empty -%} +
        + {%- endif -%} + {{- form_label(form, null, { widget: block('radio_widget_input_ds') }) -}} + {%- if row_class is not empty -%} +
        + {%- endif -%} +{%- endblock -%} + +{%- block radio_widget_input_ds -%} + {%- endblock -%} {%- block trash_item_checkbox_widget -%} - + {%- endblock -%} {%- block _trash_item_restore_restore_widget -%} @@ -396,22 +430,40 @@ {%- set has_search = has_search|default(false) -%} {%- set should_clear_button_send_form = should_clear_button_send_form|default(false) -%} {%- set type = type|default('text') -%} - {%- set is_text_input = type == 'text' or type == 'number' or force_text|default(false) -%} + {%- set is_text_input = type in ['text', 'number', 'password', 'email', 'url', 'tel', 'search'] or force_text|default(false) -%} {%- if is_text_input -%} - {%- set attr = attr|merge({class: (attr.class|default('') ~ ' ibexa-input ibexa-input--text')|trim}) -%} + {%- set attr = attr|merge({class: (attr.class|default('') ~ ' ibexa-input')|trim}) -%} {%- set empty_placeholder_for_hiding_clear_btn_with_css = ' ' -%} {%- set attr = attr|merge({placeholder: (attr.placeholder is defined and attr.placeholder is not null) ? attr.placeholder : empty_placeholder_for_hiding_clear_btn_with_css}) -%} + {%- if attr.placeholder != empty_placeholder_for_hiding_clear_btn_with_css -%} + {%- set translated_placeholder = translation_domain is same as(false) + ? attr.placeholder + : attr.placeholder|trans({}, translation_domain) + -%} + {%- set attr = attr|merge({placeholder: translated_placeholder}) -%} + {%- endif -%} + {%- set input_attr = attr|merge({ + id: id, + name: full_name, + value: value is same as(null) ? '' : value, + }) -%} {%- set input_html -%} {{ parent() }} {%- endset -%} - {%- embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search, should_clear_button_send_form } -%} + {%- embed '@ibexadesign/ui/component/input_text_ds.html.twig' with { + has_search, + should_clear_button_send_form, + input_attr, + wrapper_attr: wrapper_attr|default({}), + is_disabled: attr.disabled|default(false) or disabled|default(false), + extra_actions_after: extra_actions_after|default(null), + } -%} {% block content %} {{ input_html }} {% endblock %} {% block actions %} {{ parent() }} - {{ extra_actions_after|default(null) }} {% endblock %} {%- endembed -%} {%- else -%} @@ -504,7 +556,7 @@ {%- endblock %} {% block content_type_meta_field_definition_enabled_row -%} - {% use '@ibexadesign/ui/form_fields/toggle_widget.html.twig' %} + {% use '@ibexadesign/ui/form_fields/toggle_widget_ds.html.twig' %}
        {{ block('form_label') }} @@ -551,25 +603,31 @@ {{- form_label(form) -}}
        - - + + + {{ 'distraction_free_mode.disable.label'|trans({}, 'ibexa_admin_ui')|desc('Exit distraction free mode') }} +
      diff --git a/src/bundle/Resources/views/themes/admin/ui/form_fields/toggle_widget_ds.html.twig b/src/bundle/Resources/views/themes/admin/ui/form_fields/toggle_widget_ds.html.twig new file mode 100644 index 0000000000..456d0f3d26 --- /dev/null +++ b/src/bundle/Resources/views/themes/admin/ui/form_fields/toggle_widget_ds.html.twig @@ -0,0 +1,40 @@ +{%- block toggle_widget -%} + {% set default_label_on = 'toggle_widget.label.on'|trans|desc('On') %} + {% set default_label_off = 'toggle_widget.label.off'|trans|desc('Off') %} + {% set field_type = block_prefixes[1]|default('choice') %} + {% set attr = attr|default({}) %} + {% set is_disabled = disabled|default(false) or attr.readonly|default(false) %} + + {% if checked|default(false) %} + {% set attr = attr|merge({ 'checked': 'checked' }) %} + {% endif %} + {% if value is defined %} + {% set attr = attr|merge({ 'value': value ~ '' }) %} + {% endif %} + + {% set input_content %} + {% if custom_inputs is defined %} + {{ custom_inputs }} + {% elseif field_type == 'choice' %} + {{ block('choice_widget') }} + {% else %} + + {% endif %} + {% endset %} + + + + {{ input_content|raw }} + + +{%- endblock -%} diff --git a/src/bundle/Resources/views/themes/admin/ui/global_search.html.twig b/src/bundle/Resources/views/themes/admin/ui/global_search.html.twig index e3a54c32c5..2b127ad557 100644 --- a/src/bundle/Resources/views/themes/admin/ui/global_search.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/global_search.html.twig @@ -31,13 +31,14 @@ {{ 'autocomplete.results_count'|trans|desc('Results') }}:
      - + {{ 'autocomplete.view_all_results'|trans({}, 'ibexa_search')|desc('View all results') }} +
      {{ 'autocomplete.no_results'|trans|desc('No suggestions available.') }} diff --git a/src/bundle/Resources/views/themes/admin/ui/layout.html.twig b/src/bundle/Resources/views/themes/admin/ui/layout.html.twig index b77ab3968b..03f6133ee6 100644 --- a/src/bundle/Resources/views/themes/admin/ui/layout.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/layout.html.twig @@ -221,14 +221,14 @@ {% if not is_back_to_top_disabled|default(false) %} {% block back_to_top %}
      - +
      {% endblock %} {% endif %} diff --git a/src/bundle/Resources/views/themes/admin/ui/layout_error.html.twig b/src/bundle/Resources/views/themes/admin/ui/layout_error.html.twig index f8c4710a7f..bb9d681b7c 100644 --- a/src/bundle/Resources/views/themes/admin/ui/layout_error.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/layout_error.html.twig @@ -67,14 +67,14 @@ {% if not is_back_to_top_disabled|default(false) %} {% block back_to_top %}
      - + + + {{ 'back.to.top'|trans|desc('Go to top') }} + + + + +
      {% endblock %} {% endif %} diff --git a/src/bundle/Resources/views/themes/admin/ui/menu/context_menu.html.twig b/src/bundle/Resources/views/themes/admin/ui/menu/context_menu.html.twig index 3a94f192db..ad7c9b8a58 100644 --- a/src/bundle/Resources/views/themes/admin/ui/menu/context_menu.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/menu/context_menu.html.twig @@ -15,10 +15,14 @@ {% endset %} {% set default_selector_btn_classes = options.selector_btn_classes|default('') %} + {% set default_selector_btn_type = options.selector_btn_type|default('secondary') %} + {% set default_selector_btn_size = options.selector_btn_size|default('medium') %} {{ include('@ibexadesign/ui/component/context_menu/context_menu.html.twig', { menu_items: menu_items, - selector_btn_classes: item.extras.adaptiveItemsSelectorBtnClass|default(default_selector_btn_classes) + selector_btn_classes: item.extras.adaptiveItemsSelectorBtnClass|default(default_selector_btn_classes), + selector_btn_type: default_selector_btn_type, + selector_btn_size: default_selector_btn_size, }) }} {% endblock %} @@ -111,7 +115,7 @@ main_btn_attr: attributes, main_btn_element: element, toggler_btn_attr: { - class: attributes.class|replace({ 'ibexa-btn--trigger': '' }), + class: attributes.class|replace({ 'ids-btn--trigger': '' }), disabled: all_subitems_disabled, }, label: btn_label, @@ -124,36 +128,69 @@ {%- endif -%} {% endfor %} {% else %} - {%- set default_classes = 'btn ibexa-btn' -%} - - {% if not item.extras.noDefaultBtnStyling|default(false) %} - {% if item.extras.primary|default(false) %} - {%- set default_classes = default_classes ~ ' ' ~ options.primary_item_class|default('ibexa-btn--primary') -%} - {% else %} - {%- set default_classes = default_classes ~ ' ' ~ options.secondary_item_class|default('ibexa-btn--secondary') -%} + {%- set use_legacy = item.extras.noDefaultBtnStyling|default(false) + or options.primary_item_class is defined + or options.secondary_item_class is defined -%} + + {% if not use_legacy %} + {%- set btn_type = item.extras.primary|default(false) + ? options.primary_item_type|default('primary') + : options.secondary_item_type|default('secondary') -%} + {%- set btn_size = item.extras.primary|default(false) + ? options.primary_item_size|default('medium') + : options.secondary_item_size|default('medium') -%} + {%- set ds_classes = 'ids-btn ids-btn--' ~ btn_type ~ ' ids-btn--' ~ btn_size -%} + {%- set ds_icon_size = btn_size == 'small' ? 'tiny-small' : 'small' -%} + {%- set attributes = attributes|merge({ + class: (attributes.class|default('') ~ ' ' ~ ds_classes)|trim + }) -%} + + <{{element}}{{macros.attributes(attributes)}}> + {% if item.extras.icon is defined %} +
      + + + +
      + {% endif %} +
      + {% set is_btn_label = true %} + {{ block('label') }} +
      + + + {% else %} + {%- set default_classes = 'ids-btn ids-btn--medium' -%} + + {% if not item.extras.noDefaultBtnStyling|default(false) %} + {% if item.extras.primary|default(false) %} + {%- set default_classes = default_classes ~ ' ' ~ options.primary_item_class|default('ids-btn--primary') -%} + {% else %} + {%- set default_classes = default_classes ~ ' ' ~ options.secondary_item_class|default('ids-btn--secondary') -%} + {% endif %} {% endif %} - {% endif %} - {%- set attributes = attributes|merge({ - class: (attributes.class|default('') ~ ' ' ~ default_classes|default('btn btn-secondary btn-block'))|trim - }) -%} + {%- set attributes = attributes|merge({ + class: (attributes.class|default('') ~ ' ' ~ default_classes|default('btn btn-secondary btn-block'))|trim + }) -%} - <{{element}}{{macros.attributes(attributes)}}> - {% if item.extras.icon is defined %} - - - - {% endif %} + <{{element}}{{macros.attributes(attributes)}}> + {% if item.extras.icon is defined %} + + + + {% endif %} - {% set is_btn_label = true %} - {{ block('label') }} - + {% set is_btn_label = true %} + {{ block('label') }} + + {% endif %} {% endif %} {% endblock %} {% block label %} {% if is_btn_label|default(false) %} - {{ parent() }} + {{ parent() }} {% else %} {{ parent() }} {% endif %} diff --git a/src/bundle/Resources/views/themes/admin/ui/menu/sidebar_base.html.twig b/src/bundle/Resources/views/themes/admin/ui/menu/sidebar_base.html.twig index f38b20d71d..987efc738f 100644 --- a/src/bundle/Resources/views/themes/admin/ui/menu/sidebar_base.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/menu/sidebar_base.html.twig @@ -8,7 +8,7 @@ {% block item -%} {%- if item.displayed -%} - {%- set attributes = item.attributes|merge({'class': (item.attributes.class|default('') ~ ' ' ~ default_classes|default('btn ibexa-btn ibexa-btn--secondary btn-block'))|trim}) -%} + {%- set attributes = item.attributes|merge({'class': (item.attributes.class|default('') ~ ' ' ~ default_classes|default('ids-btn ids-btn--secondary ids-btn--medium btn-block'))|trim}) -%} {%- set attributes = attributes|merge({'id': item.name ~ '-tab'}) -%} {%- if item.uri is not empty %} @@ -48,5 +48,5 @@ {% endif %} - {{ parent() }} + {{ parent() }} {% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/menu/sidebar_right.html.twig b/src/bundle/Resources/views/themes/admin/ui/menu/sidebar_right.html.twig index 5eb7dd1cbc..171427eb42 100644 --- a/src/bundle/Resources/views/themes/admin/ui/menu/sidebar_right.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/menu/sidebar_right.html.twig @@ -1,6 +1,6 @@ {% extends '@ibexadesign/ui/menu/sidebar_base.html.twig' %} {% block item -%} - {%- set default_classes = 'btn ibexa-btn ibexa-btn--primary' -%} + {%- set default_classes = 'ids-btn ids-btn--primary ids-btn--medium' -%} {{ parent() }} {%- endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/modal/bulk_delete_confirmation.html.twig b/src/bundle/Resources/views/themes/admin/ui/modal/bulk_delete_confirmation.html.twig index e4e088bf5c..54d2b333d5 100644 --- a/src/bundle/Resources/views/themes/admin/ui/modal/bulk_delete_confirmation.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/modal/bulk_delete_confirmation.html.twig @@ -8,14 +8,21 @@ {{ message }} {% endblock %} {% block footer_content %} - - + {% endblock %} {% endembed %} diff --git a/src/bundle/Resources/views/themes/admin/ui/modal/delete_confirmation.html.twig b/src/bundle/Resources/views/themes/admin/ui/modal/delete_confirmation.html.twig index 1bf953f74f..25e25211ac 100644 --- a/src/bundle/Resources/views/themes/admin/ui/modal/delete_confirmation.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/modal/delete_confirmation.html.twig @@ -1,23 +1,23 @@ {% set confirm_button_rendered %} {%- block confirm_button -%} - + {% endblock %} {% endset %} {% set cancel_button_rendered %} {%- block cancel_button -%} - + {% endblock %} {% endset %} diff --git a/src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig b/src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig index e9a3f39533..dda15b7e2b 100644 --- a/src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig @@ -11,14 +11,14 @@ {% set context_actions %} {% set menu_items %}
    • - + + {{ 'on_the_fly.confirm'|trans({}, 'ibexa_content_create')|desc('Publish') }} +
    • - + + {{ 'on_the_fly.cancel'|trans({}, 'ibexa_content_create')|desc('Discard') }} +
      • {% endset %} diff --git a/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig b/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig index af4888207b..265ed23b6e 100644 --- a/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig @@ -11,14 +11,14 @@ {% set context_actions %} {% set menu_items %}
    • - + + {{ 'on_the_fly.confirm'|trans({}, 'ibexa_content_edit')|desc('Publish') }} +
    • - + + {{ 'on_the_fly.cancel'|trans({}, 'ibexa_content_edit')|desc('Discard') }} +
      • {% endset %} diff --git a/src/bundle/Resources/views/themes/admin/ui/page_title.html.twig b/src/bundle/Resources/views/themes/admin/ui/page_title.html.twig index 7e66b6cd0b..46906cf721 100644 --- a/src/bundle/Resources/views/themes/admin/ui/page_title.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/page_title.html.twig @@ -1,5 +1,3 @@ -{% import '@ibexadesign/ui/component/macros.html.twig' as html %} - {% if title is defined %}
      @@ -7,15 +5,14 @@ {{ title }} {% block tag %} {% if tag is defined %} - {% set attr = tag_attr|default({})|merge({ - class: (tag_attr.class|default('') - ~ ' ibexa-badge ' ~ tag_extra_classes|default('') - )|trim, - }) %} - -
      + {% set tag_attr = tag_attr|default({}) %} + {{ tag }} -
      + {% endif %} {% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/ui/search/criteria_tags.html.twig b/src/bundle/Resources/views/themes/admin/ui/search/criteria_tags.html.twig index 4bf8b8dd65..823b174a30 100644 --- a/src/bundle/Resources/views/themes/admin/ui/search/criteria_tags.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/search/criteria_tags.html.twig @@ -2,13 +2,11 @@
      {% if form.children.search_language.vars.value != '' %} -
      -
      - {{ 'search.in_language'|trans({ - '%search_language%': form.children.search_language.vars.data.name, - })|desc('in %search_language%')}} -
      -
      + + {{ 'search.in_language'|trans({ + '%search_language%': form.children.search_language.vars.data.name, + }, 'ibexa_search')|desc('in %search_language%')}} + {% endif %} {% if form.content_types.vars.data is not empty %} @@ -17,7 +15,7 @@ 'content': content_type.name, 'title': "#{'search.content.type'|trans|desc('Content type')}: #{content_type.name}", 'target_selector': "#search_content_types_#{content_type.identifier}", - 'btn_class': "ibexa-tag__remove-btn--content-types", + 'tag_class': "ibexa-search-criteria-tags__tag--content-types", }) }} {% endfor %} {% endif %} @@ -25,16 +23,16 @@ {% if form.section is defined and form.section.vars.data is not empty %} {{ include('@ibexadesign/ui/search_tag.html.twig', { 'content': form.section.vars.data.name, - 'title': "#{'search.section'|trans|desc('Section')}: #{form.section.vars.data.name}", - 'btn_class': "ibexa-tag__remove-btn--section", + 'title': "#{'search.section'|trans({}, 'ibexa_search')|desc('Section')}: #{form.section.vars.data.name}", + 'tag_class': "ibexa-search-criteria-tags__tag--section", }) }} {% endif %} {% if form.subtree.vars.value is not empty %} {{ include('@ibexadesign/ui/search_tag.html.twig', { 'content': content_breadcrumbs, - 'title': "#{'search.subtree'|trans|desc('Subtree')}: #{content_breadcrumbs}", - 'btn_class': "ibexa-tag__remove-btn--subtree", + 'title': "#{'search.subtree'|trans({}, 'ibexa_search')|desc('Subtree')}: #{content_breadcrumbs}", + 'tag_class': "ibexa-search-criteria-tags__tag--subtree", }) }} {% endif %} @@ -47,8 +45,8 @@ {% set end_date = last_modified.end_date|ibexa_short_datetime %} {{ include('@ibexadesign/ui/search_tag.html.twig', { - 'content': "#{'search.last.modified'|trans|desc('Last modified')}: #{start_date} - #{end_date}", - 'btn_class': "ibexa-tag__remove-btn--last-modified", + 'content': "#{'search.last.modified'|trans({}, 'ibexa_search')|desc('Last modified')}: #{start_date} - #{end_date}", + 'tag_class': "ibexa-search-criteria-tags__tag--last-modified", }) }} {% endif %} @@ -61,16 +59,16 @@ {% set end_date = form.vars.value.created.end_date|ibexa_short_datetime %} {{ include('@ibexadesign/ui/search_tag.html.twig', { - 'content': "#{'search.created'|trans|desc('Created')}: #{start_date} - #{end_date}", - 'btn_class': "ibexa-tag__remove-btn--last-created", + 'content': "#{'search.created'|trans({}, 'ibexa_search')|desc('Created')}: #{start_date} - #{end_date}", + 'tag_class': "ibexa-search-criteria-tags__tag--last-created", }) }} {% endif %} {% if form.creator.vars.data is not empty %} {{ include('@ibexadesign/ui/search_tag.html.twig', { 'content': form.creator.vars.data.name, - 'title': "#{'search.creator'|trans|desc('Creator')}: #{form.creator.vars.data.name}", - 'btn_class': "ibexa-tag__remove-btn--creator", + 'title': "#{'search.creator'|trans({}, 'ibexa_search')|desc('Creator')}: #{form.creator.vars.data.name}", + 'tag_class': "ibexa-search-criteria-tags__tag--creator", }) }} {% endif %}
      diff --git a/src/bundle/Resources/views/themes/admin/ui/search/filters.html.twig b/src/bundle/Resources/views/themes/admin/ui/search/filters.html.twig index 60bd8e9b09..dd9cd72925 100644 --- a/src/bundle/Resources/views/themes/admin/ui/search/filters.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/search/filters.html.twig @@ -14,17 +14,17 @@

      {{ 'search.filters.title'|trans|desc('Filters') }}

      - - + + {{ 'search.clear'|trans({}, 'ibexa_search')|desc('Clear') }} + + + {{ 'search.apply'|trans({}, 'ibexa_search')|desc('Apply') }} +
      @@ -37,7 +37,7 @@ }) }}
      - + {{ 'search.last.modified'|trans({}, 'ibexa_search')|desc('Last modified') }} {{ form_widget(form.last_modified_select, { 'attr': { 'class': 'ibexa-filters__select', @@ -47,7 +47,7 @@ {{ form_errors(form.last_modified_select) }}
      - + {{ 'search.created'|trans({}, 'ibexa_search')|desc('Created') }} {{ form_widget(form.created_select, { 'attr': { 'class': 'ibexa-filters__select', @@ -57,25 +57,22 @@ {{ form_errors(form.created_select) }}
      - + {{ 'search.creator'|trans({}, 'ibexa_search')|desc('Creator') }} {% set creator = form.vars.data.creator %} - {% embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: false } %} - {% trans_default_domain 'ibexa_search' %} - {% block content %} - - {% endblock %} - {% endembed %} + {% include '@ibexadesign/ui/component/input_text_ds.html.twig' with { + input_attr: { + type: 'text', + class: 'ibexa-available-field-types__sidebar-filter', + 'data-content-type-identifiers': user_content_type_identifier|join(','), + value: creator is not empty ? ibexa_content_name(creator) : '', + placeholder: 'search.creator_input.placeholder'|trans|desc('Type creator\'s name') + } + } %}
        {% if form.section is defined %}
        - + {{ 'search.section'|trans({}, 'ibexa_search')|desc('Section') }} {{ form_widget(form.section, { 'attr': {'class': 'ibexa-filters__select'}, 'terms': sections_terms @@ -83,7 +80,7 @@
        {% endif %}
        - + {{ 'search.subtree'|trans({}, 'ibexa_search')|desc('Subtree') }} {% set items = [] %} {% if content_breadcrumbs is not empty %} diff --git a/src/bundle/Resources/views/themes/admin/ui/search_tag.html.twig b/src/bundle/Resources/views/themes/admin/ui/search_tag.html.twig index a762e503a2..a4cde363ac 100644 --- a/src/bundle/Resources/views/themes/admin/ui/search_tag.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/search_tag.html.twig @@ -1,19 +1,12 @@ -{% set btn_class = btn_class|default('') %} +{% set tag_class = tag_class|default('') %} {% set content = content|default('') %} {% set target_selector = target_selector|default('') %} {% set title = title|default('') %} -
        -
        - {{ content }} -
        - -
        + + {{ content }} + diff --git a/src/bundle/Resources/views/themes/admin/ui/tag.html.twig b/src/bundle/Resources/views/themes/admin/ui/tag.html.twig index ef899db4ea..9003b07c4b 100644 --- a/src/bundle/Resources/views/themes/admin/ui/tag.html.twig +++ b/src/bundle/Resources/views/themes/admin/ui/tag.html.twig @@ -1,3 +1,4 @@ +{# TODO IBX-11417: Migrate to when DS chip supports a loading/spinner state (ibexa-tag__spinner / is_loading_state) #} {% import '@ibexadesign/ui/component/macros.html.twig' as html %} {% set is_deletable = is_deletable is defined ? is_deletable : true %} diff --git a/src/bundle/Resources/views/themes/admin/url_wildcard/list.html.twig b/src/bundle/Resources/views/themes/admin/url_wildcard/list.html.twig index 46587e9484..85973d8d5e 100644 --- a/src/bundle/Resources/views/themes/admin/url_wildcard/list.html.twig +++ b/src/bundle/Resources/views/themes/admin/url_wildcard/list.html.twig @@ -62,26 +62,15 @@ ]) %} {% set col_raw %} - {% if can_manage %} - - - - - - {% else %} - - - - - - {% endif %} + {% endset %} {% set body_row_cols = body_row_cols|merge([{ has_action_btns: true, @@ -110,37 +99,31 @@ {% block header %} {% embed '@ibexadesign/ui/component/table/table_header.html.twig' %} {% block actions %} - - + {{ 'url_wildcard.list.action.delete'|trans|desc('Delete') }} + {% endblock %} {% endembed %} {% endblock %} diff --git a/src/bundle/Resources/views/themes/admin/url_wildcard/modal_create.html.twig b/src/bundle/Resources/views/themes/admin/url_wildcard/modal_create.html.twig index 9765292517..e72d7f16aa 100644 --- a/src/bundle/Resources/views/themes/admin/url_wildcard/modal_create.html.twig +++ b/src/bundle/Resources/views/themes/admin/url_wildcard/modal_create.html.twig @@ -14,23 +14,23 @@ {% block body_content %}
        - + + {{ 'url_wildcard.modal.create.url.wildcard'|trans({}, 'ibexa_url_wildcard')|desc('URL wildcard') }} + {{ form_widget(form.source_url) }}
        - + + {{ 'url_wildcard.modal.create.url.destintion'|trans({}, 'ibexa_url_wildcard')|desc('Destination') }} + {{ form_widget(form.destination_url) }}
        - + + {{ 'url_wildcard.modal.create.redirect'|trans({}, 'ibexa_url_wildcard')|desc('Redirect to wildcard destination') }} + {{ form_widget(form.forward) }} @@ -44,10 +44,10 @@
        {% endblock %} {% block footer_content %} - {{ form_widget(form.create, {'attr': {'class': 'btn ibexa-btn ibexa-btn--primary', 'disabled': 'disabled'}}) }} - + {{ form_widget(form.create, {'attr': {'class': 'ids-btn ids-btn--primary ids-btn--medium', 'disabled': 'disabled'}}) }} + + {{ 'url_wildcard.modal.create.cancel'|trans({}, 'ibexa_url_wildcard')|desc('Cancel') }} + {% endblock %} {% block content_after %} {{ form_end(form) }} diff --git a/src/bundle/Resources/views/themes/admin/url_wildcard/update.html.twig b/src/bundle/Resources/views/themes/admin/url_wildcard/update.html.twig index 69b4d2d3cc..2ed6a41a6b 100644 --- a/src/bundle/Resources/views/themes/admin/url_wildcard/update.html.twig +++ b/src/bundle/Resources/views/themes/admin/url_wildcard/update.html.twig @@ -35,15 +35,15 @@
        - + {{ 'url_wildcard.modal.create.url.wildcard'|trans({}, 'ibexa_url_wildcard')|desc('URL wildcard') }} {{ form_widget(form.source_url) }}
        - + {{ 'url_wildcard.modal.create.url.destintion'|trans({}, 'ibexa_url_wildcard')|desc('Destination') }} {{ form_widget(form.destination_url) }}
        - + {{ 'url_wildcard.modal.create.redirect'|trans({}, 'ibexa_url_wildcard')|desc('Redirect to wildcard destination') }} {{ form_widget(form.forward) }} diff --git a/src/bundle/Resources/views/themes/admin/user/invitation/modal.html.twig b/src/bundle/Resources/views/themes/admin/user/invitation/modal.html.twig index 6caaa12d75..dc41261072 100644 --- a/src/bundle/Resources/views/themes/admin/user/invitation/modal.html.twig +++ b/src/bundle/Resources/views/themes/admin/user/invitation/modal.html.twig @@ -1,15 +1,5 @@ {% trans_default_domain 'ibexa_user_invitation' %} -{% set top_input_content %} - {% block top_input_content %} - - {% endblock %} -{% endset %} - {% set extra_filters %} {% block extra_filters %}{% endblock %} {% endset %} @@ -74,22 +64,24 @@
        {% endblock %} {% block actions %} - - {% endblock %} - {% endembed %} - {% embed '@ibexadesign/ui/component/input_text.html.twig' with { has_search: true, search_button_type: 'button' } %} - {% trans_default_domain 'ibexa_user_invitation' %} - {% block content %} - {{ top_input_content }} + {{ 'modal.entry_issues.alert.go_to_next'|trans({}, 'ibexa_user_invitation')|desc('Go to next issue') }} + {% endblock %} {% endembed %} + {% include '@ibexadesign/ui/component/input_text_ds.html.twig' with { + has_search: true, + search_button_type: 'button', + input_attr: { + type: 'text', + class: 'ibexa-user-invitation-modal__search-input', + placeholder: 'modal.search.placeholder'|trans|desc('Search...') + }, + } %} {{ extra_filters }}
        {{ entries_labels }} @@ -110,17 +102,15 @@ 'No entries match search.' ) }}
        - + {{ 'modal.add_next'|trans({}, 'ibexa_user_invitation')|desc('Add next') }} +
        @@ -135,13 +125,13 @@
        {{ 'modal.or'|trans|desc('or') }}
        - + {{ 'modal.upload_local'|trans({}, 'ibexa_user_invitation')|desc('Upload a local file') }} + {% endblock %} {% block footer_content %} - + {{ 'modal.submit.label'|trans({}, 'ibexa_user_invitation')|desc('Send') }} + {{ form_widget(form.send, { attr: { hidden: true, - class: 'btn ibexa-btn ibexa-btn--primary ibexa-user-invitation-modal__real-submit-btn', + class: 'ids-btn ids-btn--primary ids-btn--medium ibexa-user-invitation-modal__real-submit-btn', }, }) }} - + {{ 'modal.cancel.label'|trans({}, 'ibexa_user_invitation')|desc('Cancel') }} + {% endblock %} {% block content_after %} {{ form_end(form) }} diff --git a/src/bundle/Resources/views/themes/admin/user/invitation/modal_entry.html.twig b/src/bundle/Resources/views/themes/admin/user/invitation/modal_entry.html.twig index 3ed4f371e1..599216e909 100644 --- a/src/bundle/Resources/views/themes/admin/user/invitation/modal_entry.html.twig +++ b/src/bundle/Resources/views/themes/admin/user/invitation/modal_entry.html.twig @@ -2,15 +2,13 @@
        {% block entry_form_fields %}{% endblock %} - + />
        diff --git a/src/bundle/Resources/views/themes/admin/user/policy/list.html.twig b/src/bundle/Resources/views/themes/admin/user/policy/list.html.twig index ef84ce84a7..cda89d6ed3 100644 --- a/src/bundle/Resources/views/themes/admin/user/policy/list.html.twig +++ b/src/bundle/Resources/views/themes/admin/user/policy/list.html.twig @@ -53,15 +53,15 @@ {% set col_raw %} {% if can_update %} - - - - - + variant="button" + type="tertiary-alt" + icon="edit" + icon_size="small" + title="{{ 'policy.view.list.panel.policies.action.edit'|trans|desc('Edit') }}" + :disabled="not is_editable[policy.id]" + /> {% endif %} {% endset %} {% set body_row_cols = body_row_cols|merge([{ @@ -90,33 +90,29 @@ {% embed '@ibexadesign/ui/component/table/table_header.html.twig' %} {% block actions %} {% if can_update %} - - - - - - {{ 'policy.view.list.action.add'|trans|desc('Add') }} - - + {{ 'policy.view.list.action.add'|trans|desc('Add') }} + {% set modal_data_target = 'delete-policies-modal' %} - + {{ 'policy.view.list.action.delete'|trans|desc('Delete') }} + {% include '@ibexadesign/ui/modal/bulk_delete_confirmation.html.twig' with { 'id': modal_data_target, 'message': 'policy.modal.message'|trans|desc('Do you want to delete the Policy?'), diff --git a/src/bundle/Resources/views/themes/admin/user/role/list.html.twig b/src/bundle/Resources/views/themes/admin/user/role/list.html.twig index 8935a9ff24..1cb6575431 100644 --- a/src/bundle/Resources/views/themes/admin/user/role/list.html.twig +++ b/src/bundle/Resources/views/themes/admin/user/role/list.html.twig @@ -25,17 +25,15 @@ {% set menu_items %} {% if can_create %}
      • - - - - - - {{ 'role.view.list.action.add'|trans|desc('Create') }} - - + {{ 'role.view.list.action.add'|trans({}, 'ibexa_role')|desc('Create') }} +
        • {% endif %} {% endset %} @@ -69,37 +67,34 @@ {% set col_action_btns %} {% if can_assign %} - - - - - + variant="button" + type="tertiary-alt" + icon="assign-user" + icon_size="small" + title="{{ 'role.view.list.action.assign_to_users_or_groups'|trans|desc('Assign to Users/Groups') }}" + /> {% endif %} {% if can_create %} - - - - - + variant="button" + type="tertiary-alt" + icon="copy" + icon_size="small" + title="{{ 'role.view.list.action.copy'|trans|desc('Copy') }}" + /> {% endif %} {% if can_update %} - - - - - + variant="button" + type="tertiary-alt" + icon="edit" + icon_size="small" + title="{{ 'role.view.list.action.edit'|trans|desc('Edit') }}" + /> {% endif %} {% endset %} @@ -126,21 +121,18 @@ {% block actions %} {% if can_delete %} {% set modal_data_target = 'delete-sections-modal' %} - + {{ 'role.view.list.action.delete'|trans|desc('Delete') }} + {% include '@ibexadesign/ui/modal/bulk_delete_confirmation.html.twig' with { 'id': modal_data_target, 'message': 'role.modal.message'|trans|desc('Do you want to delete the Role(s)?'), diff --git a/src/bundle/Resources/views/themes/admin/user/role_assignment/list.html.twig b/src/bundle/Resources/views/themes/admin/user/role_assignment/list.html.twig index 284d25d046..f0bb8e9fae 100644 --- a/src/bundle/Resources/views/themes/admin/user/role_assignment/list.html.twig +++ b/src/bundle/Resources/views/themes/admin/user/role_assignment/list.html.twig @@ -74,32 +74,29 @@ {% block actions %} {% if can_assign %} - - - - - - {{ 'role_assignment.view.list.action.add'|trans|desc('Assign to Users/Groups') }} - - + variant="button" + type="tertiary" + size="small" + icon="assign-user" + icon_size="small-medium" + > + {{ 'role_assignment.view.list.action.add'|trans({}, 'ibexa_role')|desc('Assign to Users/Groups') }} + {% set modal_data_target = 'delete-role-assignments-modal' %} - + {{ 'role_assignment.view.list.action.delete'|trans({}, 'ibexa_role')|desc('Unassign') }} + {% include '@ibexadesign/ui/modal/bulk_delete_confirmation.html.twig' with { 'id': modal_data_target, 'message': 'role_assignments.modal.message'|trans|desc('Do you want to unassign the Users/Groups?'), diff --git a/src/bundle/ui-dev/src/modules/common/alert/alert.js b/src/bundle/ui-dev/src/modules/common/alert/alert.js index 9f2a80ac0a..8b1ccd8fe6 100644 --- a/src/bundle/ui-dev/src/modules/common/alert/alert.js +++ b/src/bundle/ui-dev/src/modules/common/alert/alert.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Icon from '../icon/icon'; import { createCssClassNames } from '../helpers/css.class.names'; +import { Button, ButtonType } from '@ids-components/components/Button'; const ICON_NAME_MAP = { info: 'about', @@ -50,11 +51,7 @@ const Alert = ({ {subtitle &&
        {subtitle}
        }
        {children}
        - {showCloseBtn && ( - - )} + {showCloseBtn &&
        ); }; diff --git a/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js b/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js index 78b033ef93..5a375d5677 100644 --- a/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js +++ b/src/bundle/ui-dev/src/modules/common/dropdown/dropdown.js @@ -1,6 +1,9 @@ import React, { useState, useEffect, useRef, useLayoutEffect } from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; +import { InputTextInput, InputTextInputSize } from '@ids-components/components/InputText'; + +import { CheckboxInput } from '@ids-components/components/Checkbox'; import { createCssClassNames } from '../../common/helpers/css.class.names'; import Icon from '../../common/icon/icon'; @@ -55,8 +58,7 @@ const Dropdown = ({ calculateAndSetItemsListStyles(); setIsExpanded((prevState) => !prevState && !disabled); }; - const updateFilterValue = (event) => setFilterText(event.target.value); - const resetInputValue = () => setFilterText(''); + const updateFilterValue = (newValue, event) => setFilterText(event?.target.value ?? newValue); const showItem = (itemValue, searchedTerm) => { if (searchedTerm.length < 3) { return true; @@ -88,12 +90,16 @@ const Dropdown = ({ }} > {!single && ( - {}} /> + {}} + /> )} {item.label} {single && (
        - +
        )} @@ -141,34 +147,19 @@ const Dropdown = ({ return (
        -
        -
        - -
        - - -
        -
        -
        +
          {options.map(renderItem)}
        ); diff --git a/src/bundle/ui-dev/src/modules/common/input/filter.search.js b/src/bundle/ui-dev/src/modules/common/input/filter.search.js index 110d5236f3..3bfd90daf3 100644 --- a/src/bundle/ui-dev/src/modules/common/input/filter.search.js +++ b/src/bundle/ui-dev/src/modules/common/input/filter.search.js @@ -1,20 +1,26 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { createCssClassNames } from '../../common/helpers/css.class.names'; +import { InputTextInput } from '@ids-components/components/InputText'; import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; const Search = ({ onChange, placeholder = '', extraClasses = '', value }) => { const Translator = getTranslator(); const inputPlaceholder = placeholder || Translator.trans(/* @Desc("Search...") */ 'search.placeholder', {}, 'ibexa_universal_discovery_widget'); - const searchClassName = createCssClassNames({ - 'form-control': true, - 'ibexa-input': true, - 'ibexa-input--text': true, - [extraClasses]: true, - }); - return ; + return ( + onChange(event ?? { target: { value: nextValue } })} + placeholder={inputPlaceholder} + searchButtonType="button" + value={value} + /> + ); }; Search.propTypes = { diff --git a/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.js b/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.js index 873425a521..537ad3c6de 100644 --- a/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.js +++ b/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.js @@ -1,7 +1,10 @@ import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'; import PropTypes from 'prop-types'; +import { AssetsProvider } from '@ids-components/context/Assets'; +import { TranslatorProvider } from '@ids-components/context/Translator'; -import { getRootDOMElement } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; +import { getRootDOMElement, getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; +import { getIconPath } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/icon.helper'; import { createCssClassNames } from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/common/helpers/css.class.names'; import PopupMenuSearch from './popup.menu.search'; @@ -27,6 +30,7 @@ const PopupMenu = ({ }); const [filterText, setFilterText] = useState(''); const numberOfItems = useMemo(() => items.reduce((sum, group) => sum + group.items.length, 0), [items]); + const Translator = getTranslator(); const popupMenuClassName = createCssClassNames({ 'c-popup-menu': true, 'c-popup-menu--hidden': !isRendered, @@ -91,15 +95,19 @@ const PopupMenu = ({ }, [onClose, scrollContainer, referenceElement, calculateAndSetItemsListStyles]); return ( -
        - -
        - {items.map((group) => ( - - ))} -
        - {renderFooter()} -
        + + +
        + +
        + {items.map((group) => ( + + ))} +
        + {renderFooter()} +
        +         +         ); }; diff --git a/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.search.js b/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.search.js index 8676643b2a..61e959904f 100644 --- a/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.search.js +++ b/src/bundle/ui-dev/src/modules/common/popup-menu/popup.menu.search.js @@ -1,16 +1,15 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { InputTextInput, InputTextInputSize } from '@ids-components/components/InputText'; import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; -import Icon from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/common/icon/icon'; const MIN_SEARCH_ITEMS_DEFAULT = 5; const PopupMenuSearch = ({ numberOfItems, filterText = '', setFilterText }) => { const Translator = getTranslator(); const searchPlaceholder = Translator.trans(/* @Desc("Search...") */ 'ibexa_popup_menu.search.placeholder', {}, 'ibexa_popup_menu'); - const updateFilterValue = (event) => setFilterText(event.target.value); - const resetInputValue = () => setFilterText(''); + const updateFilterValue = (value, event) => setFilterText(event?.target.value ?? value); if (numberOfItems < MIN_SEARCH_ITEMS_DEFAULT) { return null; @@ -18,34 +17,19 @@ const PopupMenuSearch = ({ numberOfItems, filterText = '', setFilterText }) => { return (
        -
        -
        - -
        - - -
        -
        -
        +
        ); }; diff --git a/src/bundle/ui-dev/src/modules/common/popup/popup.component.js b/src/bundle/ui-dev/src/modules/common/popup/popup.component.js index 7637a69541..29a32c1070 100644 --- a/src/bundle/ui-dev/src/modules/common/popup/popup.component.js +++ b/src/bundle/ui-dev/src/modules/common/popup/popup.component.js @@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; import Icon from '../icon/icon'; +import { Button, ButtonType } from '@ids-components/components/Button'; import { createCssClassNames } from '@ibexa-admin-ui/src/bundle/ui-dev/src/modules/common/helpers/css.class.names'; import { getTranslator, @@ -186,17 +187,27 @@ const Popup = ({ {!noFooter && (
        {actionBtnsConfig.map( - ({ className, onClick, disabled = false, preventClose = false, label, ...extraProps }) => ( - + ), )}
        @@ -215,6 +226,8 @@ Popup.propTypes = { disabled: PropTypes.bool, className: PropTypes.string, preventClose: PropTypes.bool, + size: PropTypes.string, + type: PropTypes.oneOf(Object.values(ButtonType)), }), ).isRequired, children: PropTypes.node.isRequired, diff --git a/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js b/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js index cd5469ecc1..5922460615 100644 --- a/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js +++ b/src/bundle/ui-dev/src/modules/common/simple-dropdown/simple.dropdown.js @@ -53,7 +53,7 @@ const SimpleDropdown = ({ {item.label ?? item.getLabel()} {isItemSelected && (
        - +
        )} diff --git a/src/bundle/ui-dev/src/modules/common/tag/tag.js b/src/bundle/ui-dev/src/modules/common/tag/tag.js index 16eac4855a..76466acac4 100644 --- a/src/bundle/ui-dev/src/modules/common/tag/tag.js +++ b/src/bundle/ui-dev/src/modules/common/tag/tag.js @@ -14,7 +14,7 @@ const Tag = ({ content, onRemove = () => {}, isDeletable = true, extraClasses =
        {content}
        ); diff --git a/src/bundle/ui-dev/src/modules/common/taggify/taggify.js b/src/bundle/ui-dev/src/modules/common/taggify/taggify.js index 6f8cf10b42..6a9fca9527 100644 --- a/src/bundle/ui-dev/src/modules/common/taggify/taggify.js +++ b/src/bundle/ui-dev/src/modules/common/taggify/taggify.js @@ -1,5 +1,6 @@ import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react'; import PropTypes from 'prop-types'; +import { InputTextInput } from '@ids-components/components/InputText'; import Icon from '../icon/icon'; import Tag from '../tag/tag'; @@ -74,14 +75,18 @@ const Taggify = forwardRef( >
        - addTags([newTagContent])} + onChange={setNewTagContent} + processActions={() => []} ref={newTagContentInputRef} - className="c-taggify__new-tag-input" - type="text" value={newTagContent} - onChange={({ currentTarget }) => setNewTagContent(currentTarget.value)} - onKeyUp={handleInputKeyUp} - onBlur={() => addTags([newTagContent])} />
        @@ -92,7 +97,7 @@ const Taggify = forwardRef(
        {bottomHint && (
        - + {bottomHint}
        )} diff --git a/src/bundle/ui-dev/src/modules/common/tooltip-popup/tooltip.popup.component.js b/src/bundle/ui-dev/src/modules/common/tooltip-popup/tooltip.popup.component.js index 7ed4d9972c..2319c37e12 100644 --- a/src/bundle/ui-dev/src/modules/common/tooltip-popup/tooltip.popup.component.js +++ b/src/bundle/ui-dev/src/modules/common/tooltip-popup/tooltip.popup.component.js @@ -2,6 +2,7 @@ import React, { useRef } from 'react'; import PropTypes from 'prop-types'; import { createCssClassNames } from '../helpers/css.class.names'; +import { Button, ButtonType } from '@ids-components/components/Button'; const TooltipPopupComponent = ({ title, @@ -37,14 +38,14 @@ const TooltipPopupComponent = ({
        {confirmLabel && ( - + )} {closeLabel && ( - + )}
        diff --git a/src/bundle/ui-dev/src/modules/content-tree/components/content-tree/content.tree.js b/src/bundle/ui-dev/src/modules/content-tree/components/content-tree/content.tree.js index 68a4bd3cf8..51d3889d17 100644 --- a/src/bundle/ui-dev/src/modules/content-tree/components/content-tree/content.tree.js +++ b/src/bundle/ui-dev/src/modules/content-tree/components/content-tree/content.tree.js @@ -216,7 +216,7 @@ export default class ContentTree extends Component { return (
        - +
        ); } diff --git a/src/bundle/ui-dev/src/modules/content-tree/components/header/header.js b/src/bundle/ui-dev/src/modules/content-tree/components/header/header.js index f7a88f75f0..106dda3a8f 100644 --- a/src/bundle/ui-dev/src/modules/content-tree/components/header/header.js +++ b/src/bundle/ui-dev/src/modules/content-tree/components/header/header.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; import Icon from '../../../common/icon/icon'; +import { Button, ButtonType } from '@ids-components/components/Button'; import PopupActions from '../popup-actions/popup.actions'; import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; @@ -17,14 +18,10 @@ const Header = ({ isCollapsed, toggleCollapseTree, actions, popupRef }) => { }); return ( - + ); }; diff --git a/src/bundle/ui-dev/src/modules/content-tree/components/list-item/list.item.component.js b/src/bundle/ui-dev/src/modules/content-tree/components/list-item/list.item.component.js index 37e16a2004..4b724197c5 100644 --- a/src/bundle/ui-dev/src/modules/content-tree/components/list-item/list.item.component.js +++ b/src/bundle/ui-dev/src/modules/content-tree/components/list-item/list.item.component.js @@ -161,7 +161,9 @@ class ListItem extends Component { let loadingSpinner = null; if (isLoading) { - loadingSpinner = ; + loadingSpinner = ( + + ); } return ( @@ -217,7 +219,7 @@ class ListItem extends Component { {this.renderIcon()} {name} - {isInvisible && } + {isInvisible && }
        diff --git a/src/bundle/ui-dev/src/modules/content-tree/components/popup-actions/popup.actions.js b/src/bundle/ui-dev/src/modules/content-tree/components/popup-actions/popup.actions.js index 8846447869..0ef436e1ec 100644 --- a/src/bundle/ui-dev/src/modules/content-tree/components/popup-actions/popup.actions.js +++ b/src/bundle/ui-dev/src/modules/content-tree/components/popup-actions/popup.actions.js @@ -72,7 +72,7 @@ const PopupActions = ({ listRef, options }) => { return ( <>
        - +
        {isExpanded && ReactDOM.createPortal(renderItemsList(), listRef.current)} diff --git a/src/bundle/ui-dev/src/modules/multi-file-upload/components/drop-area/drop.area.component.js b/src/bundle/ui-dev/src/modules/multi-file-upload/components/drop-area/drop.area.component.js index 3b53170de3..73f906497e 100644 --- a/src/bundle/ui-dev/src/modules/multi-file-upload/components/drop-area/drop.area.component.js +++ b/src/bundle/ui-dev/src/modules/multi-file-upload/components/drop-area/drop.area.component.js @@ -5,6 +5,7 @@ import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/sc import { fileSizeToString } from '../../../common/helpers/text.helper'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; import Icon from '../../../common/icon/icon'; +import { Button, ButtonType } from '@ids-components/components/Button'; export default class DropAreaComponent extends Component { constructor(props) { super(props); @@ -59,7 +60,7 @@ export default class DropAreaComponent extends Component { return (
      • - + {Translator.trans(/* @Desc("Max. file size") */ 'max_file_size.message.general', {}, 'ibexa_multi_file_upload')} +
          {this.renderMaxFileMsgsToggler()} diff --git a/src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-list/upload.item.component.js b/src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-list/upload.item.component.js index d3528a8e64..873423e0d3 100644 --- a/src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-list/upload.item.component.js +++ b/src/bundle/ui-dev/src/modules/multi-file-upload/components/upload-list/upload.item.component.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { getContentTypeIconUrl } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/content.type.helper'; import { getTranslator, isExternalInstance } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; +import { Button, ButtonType, ButtonSize } from '@ids-components/components/Button'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; import Icon from '../../../common/icon/icon'; @@ -294,7 +295,7 @@ export default class UploadItemComponent extends Component { return (
          - + {label} {hasMultipleErrors && ( )}
          @@ -325,7 +326,7 @@ export default class UploadItemComponent extends Component { return (
          - + {message}
          ); @@ -342,15 +343,15 @@ export default class UploadItemComponent extends Component { const label = Translator.trans(/* @Desc("Abort") */ 'abort.label', {}, 'ibexa_multi_file_upload'); return ( - + className="c-upload-list-item__action c-upload-list-item__action--abort" + extraAria={{ tabIndex: -1 }} + /> ); } @@ -384,16 +385,16 @@ export default class UploadItemComponent extends Component { const label = Translator.trans(/* @Desc("Edit") */ 'edit.label', {}, 'ibexa_multi_file_upload'); return ( - + className="c-upload-list-item__action c-upload-list-item__action--edit" + extraAria={{ tabIndex: -1 }} + /> ); } @@ -409,16 +410,16 @@ export default class UploadItemComponent extends Component { const label = Translator.trans(/* @Desc("Delete") */ 'delete.label', {}, 'ibexa_multi_file_upload'); return ( - + className="c-upload-list-item__action c-upload-list-item__action--delete" + extraAria={{ tabIndex: -1 }} + /> ); } diff --git a/src/bundle/ui-dev/src/modules/multi-file-upload/multi.file.upload.module.js b/src/bundle/ui-dev/src/modules/multi-file-upload/multi.file.upload.module.js index e521545ec7..35ae5c19f0 100644 --- a/src/bundle/ui-dev/src/modules/multi-file-upload/multi.file.upload.module.js +++ b/src/bundle/ui-dev/src/modules/multi-file-upload/multi.file.upload.module.js @@ -6,8 +6,7 @@ import { getTranslator, getRootDOMElement } from '@ibexa-admin-ui/src/bundle/Res import UploadPopupComponent from './components/upload-popup/upload.popup.component'; import { createFileStruct, publishFile, deleteFile, checkCanUpload } from './services/multi.file.upload.service'; -import Icon from '../common/icon/icon'; -import { createCssClassNames } from '../common/helpers/css.class.names'; +import { Button, ButtonType, ButtonSize } from '@ids-components/components/Button'; export const UDW_TRIGGER_ID = 'UDW'; export const SUBITEMS_TRIGGER_ID = 'SUBITEMS'; @@ -161,15 +160,12 @@ export default class MultiFileUploadModule extends Component { const { uploadDisabled } = this.state; const label = Translator.trans(/* @Desc("Upload") */ 'multi_file_upload_open_btn.label', {}, 'ibexa_multi_file_upload'); const isTriggeredBySubitems = this.props.triggerId === SUBITEMS_TRIGGER_ID; - const buttonClassName = createCssClassNames({ - 'ibexa-btn btn': true, - 'ibexa-btn--secondary ibexa-btn--small': !isTriggeredBySubitems, - 'ibexa-btn--ghost': isTriggeredBySubitems, - }); + const buttonType = isTriggeredBySubitems ? ButtonType.TertiaryAlt : ButtonType.Secondary; + const buttonSize = isTriggeredBySubitems ? ButtonSize.Medium : ButtonSize.Small; return ( - + ); } diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/action-btn/action.btn.js b/src/bundle/ui-dev/src/modules/sub-items/components/action-btn/action.btn.js index 3c2867e9d3..5a5969a268 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/action-btn/action.btn.js +++ b/src/bundle/ui-dev/src/modules/sub-items/components/action-btn/action.btn.js @@ -1,26 +1,25 @@ import React from 'react'; import PropTypes from 'prop-types'; -import Icon from '../../../common/icon/icon'; +import { Button, ButtonType } from '@ids-components/components/Button'; + import { createCssClassNames } from '../../../common/helpers/css.class.names'; const ActionButton = ({ disabled, onClick, label = null, title = null, type }) => { + const className = createCssClassNames({ + 'c-action-btn': true, + [`c-action-btn--${type}`]: Boolean(type), + }); + const handleClick = () => { if (!disabled) { onClick(); } }; - const className = createCssClassNames({ - 'c-action-btn': true, - 'btn ibexa-btn': true, - 'ibexa-btn--ghost': true, - 'ibexa-btn--no-text': !label, - [`c-action-btn--${type}`]: !!type, - }); return ( - + ); }; 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 1382fc6bcc..ef70613e8d 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,5 +1,6 @@ import React, { useState, useMemo } from 'react'; import PropTypes from 'prop-types'; +import { InputTextInput } from '@ids-components/components/InputText'; 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'; @@ -28,12 +29,14 @@ const InstantFilter = ({ items = [], handleItemChange = () => {}, isSearchEnable return (
          - setFilterQuery(event.target.value)} />
          @@ -44,8 +47,8 @@ const InstantFilter = ({ items = [], handleItemChange = () => {}, isSearchEnable const radioId = `item_${item.value}`; const labelClassName = createCssClassNames({ 'form-check-label': true, - 'ibexa-label': true, - 'ibexa-label--active': activeLanguage === item.value, + 'ids-label': true, + 'ids-label--active': activeLanguage === item.value, }); return ( 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 49b9b168f0..ffd5862700 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,7 +1,8 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; +import { Button, ButtonType } from '@ids-components/components/Button'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; import InstantFilter from '../sub-items-list/instant.filter.component'; @@ -10,8 +11,6 @@ const MIN_ITEMS_WITH_SEARCH = 10; const LanguageSelector = ({ isOpen = false, label = '', languageItems = [], handleItemChange = () => {}, close = () => {} }) => { const Translator = getTranslator(); - const discardBtnRef = useRef(null); - const submitBtnRef = useRef(null); const [activeLanguage, setActiveLanguage] = useState(''); const isSearchEnabled = languageItems.length >= MIN_ITEMS_WITH_SEARCH; const className = createCssClassNames({ @@ -33,15 +32,14 @@ const LanguageSelector = ({ isOpen = false, label = '', languageItems = [], hand const resetLanguageSelector = () => { setActiveLanguage(''); }; + const handleDiscardClick = (event) => { + closeSelector(event); + }; useEffect(() => { - discardBtnRef.current?.addEventListener('click', closeSelector, false); - submitBtnRef.current?.addEventListener('click', dispatchSubmitFormEvent, false); document.body.addEventListener('ibexa:edit-content-reset-language-selector', resetLanguageSelector, false); return () => { - discardBtnRef.current?.removeEventListener('click', closeSelector); - submitBtnRef.current?.removeEventListener('click', dispatchSubmitFormEvent); document.body.removeEventListener('ibexa:edit-content-reset-language-selector', resetLanguageSelector); }; }, []); @@ -63,17 +61,17 @@ const LanguageSelector = ({ isOpen = false, label = '', languageItems = [], hand />
          - - + +
          ); diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.component.js index 63173a2f1c..f10de521c2 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.component.js +++ b/src/bundle/ui-dev/src/modules/sub-items/components/table-view/table.view.component.js @@ -73,12 +73,10 @@ export default class TableViewComponent extends Component { /** * Selects all visible items */ - selectAll() { - const { toggleAllItemsSelect, selectedLocationsIds } = this.props; - const anyLocationSelected = !!selectedLocationsIds.size; - const isSelectAction = !anyLocationSelected; + selectAll(isSelected) { + const { toggleAllItemsSelect } = this.props; - toggleAllItemsSelect(isSelectAction); + toggleAllItemsSelect(isSelected); } /** @@ -206,9 +204,8 @@ export default class TableViewComponent extends Component { {}} // Dummy callback to not trigger React warning as we cannot use onChange on MS Edge - className="ibexa-input ibexa-input--checkbox ibexa-table__header-cell-checkbox ibexa-table__header-cell-checkbox--custom-init" + onChange={this.selectAll} + className="ibexa-table__header-cell-checkbox ibexa-table__header-cell-checkbox--custom-init" /> {this.renderBasicColumnsHeader()} 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 4a8df5e3eb..5ba6bc945f 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 @@ -1,5 +1,8 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; +import { InputTextInput, InputTextInputSize } from '@ids-components/components/InputText'; + +import { CheckboxInput } from '@ids-components/components/Checkbox'; import { getTranslator } from '@ibexa-admin-ui-helpers/context.helper'; import { getContentTypeIconUrl } from '@ibexa-admin-ui-helpers/content.type.helper'; @@ -9,6 +12,7 @@ import { parseCheckbox } from '@ibexa-admin-ui-helpers/table.helper'; import Icon from '../../../common/icon/icon'; import UserName from '../../../common/user-name/user.name'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; +import { Button, ButtonType, ButtonSize } from '@ids-components/components/Button'; export default class TableViewItemComponent extends PureComponent { constructor(props) { @@ -109,9 +113,7 @@ export default class TableViewItemComponent extends PureComponent { * @memberof TableViewItemComponent */ storePriorityValue(event) { - event.preventDefault(); - - this.setState(() => ({ priorityValue: this._refPriorityInput.value })); + this.setState(() => ({ priorityValue: event })); } /** @@ -196,17 +198,12 @@ export default class TableViewItemComponent extends PureComponent { renderPriorityCell() { const inputAttrs = { type: 'number', - defaultValue: this.state.priorityValue, - onChange: this.storePriorityValue, - key: 'editable-priority', + value: this.state.priorityValue, }; const priorityWrapperAttrs = {}; const innerWrapperAttrs = {}; if (!this.state.priorityInputEnabled) { - delete inputAttrs.defaultValue; - inputAttrs.value = this.state.priorityValue; - inputAttrs.key = 'readonly-priority'; priorityWrapperAttrs.onClick = this.enablePriorityInput; innerWrapperAttrs.hidden = true; } @@ -214,27 +211,27 @@ export default class TableViewItemComponent extends PureComponent { return (
          - []} ref={this.setPriorityInputRef} + size={InputTextInputSize.Small} {...inputAttrs} />
          - - + className="c-table-view-item__btn c-table-view-item__btn--submit" + /> +
          ); @@ -390,9 +387,8 @@ export default class TableViewItemComponent extends PureComponent { * * @param {Event} event */ - onSelectCheckboxChange(event) { + onSelectCheckboxChange(isSelected) { const { onItemSelect, item } = this.props; - const isSelected = event.target.checked; onItemSelect(item, isSelected); } @@ -408,7 +404,7 @@ export default class TableViewItemComponent extends PureComponent { const Translator = getTranslator(); const languages = this.props.languages.mappings; const { languageCodes } = this.props.item; - 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((languageCode) => ({ label: languages[languageCode].name, value: languageCode, @@ -422,7 +418,7 @@ export default class TableViewItemComponent extends PureComponent { } componentDidMount() { - parseCheckbox('.c-table-view-item__cell .ibexa-input--checkbox', 'c-table-view-item--active'); + parseCheckbox('.c-table-view-item__cell .c-table-view-item__checkbox', 'c-table-view-item--active'); } render() { @@ -439,12 +435,7 @@ export default class TableViewItemComponent extends PureComponent { return ( - + {this.renderBasicColumns()} diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/three-state-checkbox/three.state.checkbox.component.js b/src/bundle/ui-dev/src/modules/sub-items/components/three-state-checkbox/three.state.checkbox.component.js index 6eb85900f4..27cb1734e5 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/three-state-checkbox/three.state.checkbox.component.js +++ b/src/bundle/ui-dev/src/modules/sub-items/components/three-state-checkbox/three.state.checkbox.component.js @@ -1,16 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { CheckboxInput } from '@ids-components/components/Checkbox'; + const ThreeStateCheckboxComponent = ({ indeterminate = false, ...restOfProps }) => ( - { - if (input) { - input.indeterminate = indeterminate; - } - }} - /> + ); ThreeStateCheckboxComponent.propTypes = { diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js index 7b635f5ef6..9f222626d5 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js +++ b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.js @@ -126,7 +126,7 @@ export default class ViewColumnsTogglerComponent extends Component { return ( diff --git a/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.list.element.js b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.list.element.js index 9a893e85e9..5fb7f1bbb8 100644 --- a/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.list.element.js +++ b/src/bundle/ui-dev/src/modules/sub-items/components/view-columns-toggler/view.columns.toggler.list.element.js @@ -1,13 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { CheckboxInput } from '@ids-components/components/Checkbox'; + const ViewColumnsTogglerListElement = ({ label, isColumnVisible, toggleColumnVisibility, columnKey }) => { return (
        • , '', { key: 'bulk-move-btn' }, ); @@ -1302,7 +1317,7 @@ export default class SubItemsModule extends Component { return (
          - +
          ); @@ -1526,43 +1541,51 @@ export default class SubItemsModule extends Component { ]; return ( -
          -
          -
          -
          - {listTitle} ({this.state.totalCount}) -
          -
          - {actionBtns} - {this.renderMoreBtn(actionBtns)} + + +
          +
          +
          +
          + {listTitle} ({this.state.totalCount}) +
          +
          + {actionBtns} + {this.renderMoreBtn(actionBtns)} +
          +
          + + +
          +
          +
          + {this.renderSpinner()} + {this.renderListView()} + {this.renderNoItems()} +
          +
          + {this.renderPaginationInfo()} + {this.renderPagination()} +
          + {this.renderUdw()} + {this.renderDeleteConfirmationPopup()} + {this.renderHideConfirmationPopup()} + {this.renderUnhideConfirmationPopup()}
          -
          - - -
          -
          -
          - {this.renderSpinner()} - {this.renderListView()} - {this.renderNoItems()}
          -
          - {this.renderPaginationInfo()} - {this.renderPagination()} -
          - {this.renderUdw()} - {this.renderDeleteConfirmationPopup()} - {this.renderHideConfirmationPopup()} - {this.renderUnhideConfirmationPopup()} -
          -
          + + ); } } diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/actions-menu/actions.menu.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/actions-menu/actions.menu.js index 3cf29232ba..e78e4f8204 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/actions-menu/actions.menu.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/actions-menu/actions.menu.js @@ -9,6 +9,7 @@ import { ConfirmItemsContext, } from '../../universal.discovery.module'; import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; +import { Button, ButtonType } from '@ids-components/components/Button'; const ActionsMenu = () => { const Translator = getTranslator(); @@ -38,19 +39,19 @@ const ActionsMenu = () => { return ( <> - + - + ); diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.js index 17b2651be3..a048cbf59c 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/breadcrumbs/breadcrumbs.js @@ -63,7 +63,7 @@ const Breadcrumbs = () => { return (
            {hiddenItems.map((item) => { 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 5b16b0df8f..ed9236802e 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 @@ -58,7 +58,7 @@ const ContentCreateButton = ({ isDisabled = false }) => { onClick={toggleContentCreateVisibility} type="button" > - + {createLabel}
          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 0d2615d30c..9304595f94 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 @@ -1,8 +1,11 @@ import React, { useContext, useState, useEffect, useRef, useMemo } from 'react'; +import { InputTextInput } from '@ids-components/components/InputText'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; import Icon from '../../../common/icon/icon'; import Dropdown from '../../../common/dropdown/dropdown'; +import { Label } from '@ids-components/components/Label'; +import { Button, ButtonType } from '@ids-components/components/Button'; import { DropdownPortalRefContext, @@ -61,8 +64,8 @@ const ContentCreateWidget = () => { const close = () => { setCreateContentVisible(false); }; - const updateFilterQuery = (event) => { - const query = event.target.value.toLowerCase(); + const updateFilterQuery = (value) => { + const query = value.toLowerCase(); setFilterQuery(query); }; @@ -187,7 +190,7 @@ const ContentCreateWidget = () => {
          {createUnderLabel}
          - +
          {
          -
          @@ -243,7 +248,7 @@ const ContentCreateWidget = () => {
          -
          +
          {name}
          @@ -257,17 +262,17 @@ const ContentCreateWidget = () => {
          - - + +
          diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-edit-button/content.edit.button.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-edit-button/content.edit.button.js index cb51c73aad..27db44f73e 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-edit-button/content.edit.button.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-edit-button/content.edit.button.js @@ -1,9 +1,8 @@ import React, { useState, useEffect, useContext } from 'react'; import PropTypes from 'prop-types'; -import Icon from '../../../common/icon/icon'; -import { createCssClassNames } from '../../../common/helpers/css.class.names'; import TranslationSelector from '../translation-selector/translation.selector'; +import { Button, ButtonType } from '@ids-components/components/Button'; import { getAdminUiConfig, getRouting } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; import { createDraft } from '../../services/universal.discovery.service'; import { @@ -25,10 +24,6 @@ const ContentEditButton = ({ version, location, isDisabled, label = null }) => { const [isTranslationSelectorVisible, setIsTranslationSelectorVisible] = useState(false); const contentTypeInfo = contentTypesMap[location.ContentInfo.Content.ContentType._href]; const isUserContentType = adminUiConfig.userContentTypes.includes(contentTypeInfo.identifier); - const btnClassName = createCssClassNames({ - 'c-content-edit-button__btn btn ibexa-btn ibexa-btn--ghost': true, - 'ibexa-btn--no-text': label !== null, - }); useEffect(() => { setIsTranslationSelectorVisible(false); @@ -112,16 +107,16 @@ const ContentEditButton = ({ version, location, isDisabled, label = null }) => { return (
          - + {renderTranslationSelector()}
          ); diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-type-selector/content.type.selector.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-type-selector/content.type.selector.js index 1be5094598..6b7a73f881 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/content-type-selector/content.type.selector.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/content-type-selector/content.type.selector.js @@ -1,5 +1,7 @@ import React, { useContext } from 'react'; +import { CheckboxInput } from '@ids-components/components/Checkbox'; + import { SelectedContentTypesContext } from '../search/search'; import { AllowedContentTypesContext } from '../../universal.discovery.module'; @@ -11,8 +13,8 @@ const ContentTypeSelector = () => { const { contentTypes: contentTypesMap } = adminUiConfig; const allowedContentTypes = useContext(AllowedContentTypesContext); const [selectedContentTypes, dispatchSelectedContentTypesAction] = useContext(SelectedContentTypesContext); - const handleContentTypeSelect = ({ nativeEvent }) => { - const { contentTypeIdentifier } = nativeEvent.target.dataset; + const handleContentTypeSelect = (_checked, event) => { + const { contentTypeIdentifier } = event.currentTarget.dataset; const action = { contentTypeIdentifier }; action.type = selectedContentTypes.includes(contentTypeIdentifier) ? 'REMOVE_CONTENT_TYPE' : 'ADD_CONTENT_TYPE'; @@ -44,10 +46,9 @@ const ContentTypeSelector = () => { return (
        • - { ); return ( - + ); }; const languageLabel = Translator.trans(/* @Desc("Language") */ 'filters.language', {}, 'ibexa_universal_discovery_widget'); diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.panel.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.panel.js index 0dd04527be..15785b236a 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.panel.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/filters/filters.panel.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; +import { Button, ButtonType, ButtonSize } from '@ids-components/components/Button'; const FiltersPanel = ({ children = null, isApplyButtonEnabled, makeSearch, clearFilters, containerRef = null }) => { const Translator = getTranslator(); @@ -14,17 +15,18 @@ const FiltersPanel = ({ children = null, isApplyButtonEnabled, makeSearch, clear
          {filtersLabel}
          - - +
          {children} diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/finder/finder.leaf.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/finder/finder.leaf.js index a492b4b2a0..da873b0c54 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/finder/finder.leaf.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/finder/finder.leaf.js @@ -85,7 +85,7 @@ const FinderLeaf = ({ location }) => { {location.ContentInfo.Content.TranslatedName} - {location.hidden && } + {location.hidden && }
          ); diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js index 3c74bb4c45..2511596f52 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/grid-view/grid.view.item.js @@ -93,7 +93,9 @@ const GridViewItem = ({ location, version = {} }) => {
          {location.ContentInfo.Content.TranslatedName} - {location.hidden && } + {location.hidden && ( + + )}
          {renderToggleSelection()} diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.js index 5644a80b2b..ccfa8da2f4 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.js @@ -17,6 +17,7 @@ import { ActiveTabContext, AllowedContentTypesContext, MarkedLocationIdContext, import { createCssClassNames } from '../../../common/helpers/css.class.names'; import { getAdminUiConfig, getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; import SearchNoResults from './search.no.results'; +import { Button, ButtonType, ButtonSize } from '@ids-components/components/Button'; const selectedContentTypesReducer = (state, action) => { switch (action.type) { @@ -99,13 +100,14 @@ const Search = ({ itemsPerPage = 50 }) => { <>
          {searchResultsTitle}
          - +
          {searchResultsSubtitle}
          diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.no.results.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.no.results.js index 591c41a10c..70756ea0fc 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.no.results.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/search/search.no.results.js @@ -56,7 +56,7 @@ const SearchNoResults = ({ searchText, noResultsHints: noResultsHintsCustom, ext className="c-search-no-results__no-results-hint" >
          - +
          {hint}
          diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.item.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.item.js index b671a4e346..e5286e3d75 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.item.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.item.js @@ -6,8 +6,8 @@ import { } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper'; import { getAdminUiConfig, getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; -import Icon from '../../../common/icon/icon'; import Thumbnail from '../../../common/thumbnail/thumbnail'; +import { Button, ButtonType } from '@ids-components/components/Button'; import { SelectedItemsContext } from '../../universal.discovery.module'; @@ -58,15 +58,14 @@ const SelectedItemsPanelItem = ({ item, thumbnailData, name, description, extraC return ; })} - + className="c-selected-items-panel-item__remove-button" + extraAria={{ 'data-tooltip-container-selector': '.c-udw-tab' }} + />
        {extraContent}
        diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.js index 2e421f8f57..8b56cc4be7 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-items/selected.items.panel.js @@ -10,8 +10,8 @@ import { getTranslator, } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; -import Icon from '../../../common/icon/icon'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; +import { Button, ButtonType, ButtonSize } from '@ids-components/components/Button'; import { AllowConfirmationContext, SelectedItemsContext } from '../../universal.discovery.module'; @@ -68,15 +68,15 @@ const SelectedItemsPanel = () => { }; const renderToggleBtn = () => { return ( - + className="c-selected-items-panel__toggle-button" + extraAria={{ 'data-tooltip-container-selector': '.c-udw-tab' }} + /> ); }; const renderActionBtns = () => { @@ -89,13 +89,14 @@ const SelectedItemsPanel = () => { return (
        - +
        ); }; diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.item.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.item.js index 918041fe03..a1862e793a 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.item.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.item.js @@ -6,8 +6,8 @@ import { hideAll as hideAllTooltips, } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper'; -import Icon from '../../../common/icon/icon'; import Thumbnail from '../../../common/thumbnail/thumbnail'; +import { Button, ButtonType } from '@ids-components/components/Button'; import { SelectedLocationsContext, ContentTypesMapContext } from '../../universal.discovery.module'; import { getAdminUiConfig, getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; @@ -21,7 +21,7 @@ const SelectedLocationsItem = ({ location, permissions }) => { const { checkIsDeselectionBlocked } = useSelectedLocationsHelpers(); const isDeselectionBlocked = checkIsDeselectionBlocked(location); const contentTypesMap = useContext(ContentTypesMapContext); - const clearLabel = Translator.trans( + const removeItemLabel = Translator.trans( /* @Desc("Clear selection") */ 'selected_locations.clear_selection', {}, 'ibexa_universal_discovery_widget', @@ -64,16 +64,15 @@ const SelectedLocationsItem = ({ location, permissions }) => { return ; })} - + className="c-selected-locations-item__remove-button" + extraAria={{ 'data-tooltip-container-selector': '.c-udw-tab' }} + />
        • ); diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.js index 1806ced44e..64e3eb55cd 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/selected-locations/selected.locations.js @@ -6,7 +6,7 @@ import { } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/tooltips.helper'; import { getBootstrap, getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; -import Icon from '../../../common/icon/icon'; +import { Button, ButtonType, ButtonSize } from '@ids-components/components/Button'; import SelectedLocationsItem from './selected.locations.item'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; @@ -64,15 +64,15 @@ const SelectedLocations = () => { }; const renderToggleButton = () => { return ( - + className="c-selected-locations__toggle-button" + extraAria={{ 'data-tooltip-container-selector': '.c-udw-tab' }} + /> ); }; const renderActionButtons = () => { @@ -85,13 +85,14 @@ const SelectedLocations = () => { return (
        - +
        ); }; diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.item.selection.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.item.selection.js index 6c1f228683..22ab04b50f 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.item.selection.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/toggle-selection/toggle.item.selection.js @@ -1,6 +1,8 @@ import React, { useContext, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; +import { CheckboxInput } from '@ids-components/components/Checkbox'; + import { createCssClassNames } from '../../../common/helpers/css.class.names'; import { MultipleConfigContext, SelectedItemsContext } from '../../universal.discovery.module'; @@ -11,9 +13,9 @@ const ToggleItemSelection = ({ item, isDisabled = false, isPreselected = false, const isSelected = selectedItems.some((selectedItem) => selectedItem.type === item.type && selectedItem.id === item.id); const isSelectionBlocked = multipleItemsLimit !== 0 && selectedItems.length >= multipleItemsLimit && !isSelected; const className = createCssClassNames({ - 'c-udw-toggle-selection ibexa-input': true, - 'ibexa-input--checkbox': multiple, - 'ibexa-input--radio': !multiple, + 'c-udw-toggle-selection ids-input': true, + 'ids-input--checkbox': multiple, + 'ids-input--radio': !multiple, 'c-udw-toggle-selection--hidden': isHidden, }); const inputType = multiple ? 'checkbox' : 'radio'; @@ -26,6 +28,19 @@ const ToggleItemSelection = ({ item, isDisabled = false, isPreselected = false, inputRef.current.indeterminate = isIndeterminate; }, [isIndeterminate]); + if (multiple) { + return ( + + ); + } + return ( selectedItem.location.id === location.id); const className = createCssClassNames({ - 'c-udw-toggle-selection ibexa-input': true, - 'ibexa-input--checkbox': multiple, + 'c-udw-toggle-selection ids-input ids-input--checkbox': true, 'c-udw-toggle-selection--hidden': isHidden, }); const toggleSelection = () => { @@ -22,9 +23,7 @@ const ToggleSelection = ({ multiple, location, isDisabled = false, isHidden = fa return null; } - return ( - - ); + return ; }; ToggleSelection.propTypes = { diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/top-menu/top.menu.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/top-menu/top.menu.js index 6788c04b56..628b025a00 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/top-menu/top.menu.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/top-menu/top.menu.js @@ -2,7 +2,7 @@ import React, { useContext, useMemo, useState } from 'react'; import PropTypes from 'prop-types'; import TopMenuSearchInput from './top.menu.search.input'; -import Icon from '../../../common/icon/icon'; +import { Button, ButtonType } from '@ids-components/components/Button'; import { TitleContext, CancelContext } from '../../universal.discovery.module'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; @@ -52,15 +52,14 @@ const TopMenu = ({
        - + className="c-top-menu__cancel-btn" + extraAria={{ 'data-tooltip-container-selector': '.c-top-menu__cancel-btn-wrapper' }} + />
        ); diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/top-menu/top.menu.search.input.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/top-menu/top.menu.search.input.js index cb0e94888c..311fd3fdf9 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/top-menu/top.menu.search.input.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/top-menu/top.menu.search.input.js @@ -1,8 +1,9 @@ import React, { useState, useContext, useEffect, useRef } from 'react'; import PropTypes from 'prop-types'; +import { InputTextInput } from '@ids-components/components/InputText'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; -import Icon from '../../../common/icon/icon'; +import { Button, ButtonType } from '@ids-components/components/Button'; import { SearchTextContext } from '../../universal.discovery.module'; @@ -16,12 +17,7 @@ const TopMenuSearchInput = ({ isSearchOpened, setIsSearchOpened }) => { 'c-top-menu-search-input': true, 'c-top-menu-search-input--search-opened': isSearchOpened, }); - const searchBtnClassName = createCssClassNames({ - 'c-top-menu-search-input__search-btn btn ibexa-btn ibexa-btn--no-text': true, - 'ibexa-btn--primary': isSearchOpened, - 'ibexa-btn--tertiary': !isSearchOpened, - }); - const updateInputValue = ({ target: { value } }) => setInputValue(value); + const updateInputValue = (value) => setInputValue(value); const handleSearchBtnClick = () => { if (isSearchOpened) { makeSearch(inputValue); @@ -58,17 +54,21 @@ const TopMenuSearchInput = ({ isSearchOpened, setIsSearchOpened }) => { return (
        - []} + ref={inputRef} value={inputValue} /> - +
        ); }; diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/translation-selector/translation.selector.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/translation-selector/translation.selector.js index 2a73bc53cc..152dde7f0f 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/components/translation-selector/translation.selector.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/translation-selector/translation.selector.js @@ -1,7 +1,9 @@ import React, { useEffect, useMemo, useState } from 'react'; import PropTypes from 'prop-types'; +import { InputTextInput } from '@ids-components/components/InputText'; import { createCssClassNames } from '../../../common/helpers/css.class.names'; +import { Button, ButtonType } from '@ids-components/components/Button'; import { getAdminUiConfig, getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; @@ -88,16 +90,18 @@ const TranslationSelectorButton = ({ hideTranslationSelector, selectTranslation,
        - setFilterQuery(event.target.value)} />
        @@ -111,17 +115,17 @@ const TranslationSelectorButton = ({ hideTranslationSelector, selectTranslation,
        - - + +
        ); diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/content.create.tab.module.js b/src/bundle/ui-dev/src/modules/universal-discovery/content.create.tab.module.js index 19931a8e28..fba3147203 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/content.create.tab.module.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/content.create.tab.module.js @@ -60,8 +60,8 @@ const ContentCreateTabModule = () => { const handleIframeLoad = () => { const locationId = iframeRef.current.contentWindow.document.querySelector('meta[name="LocationID"]'); const iframeBody = iframeRef.current.contentWindow.document.body; - const iframeConfirmBtn = iframeBody.querySelector('.ibexa-context-menu .ibexa-btn--confirm'); - const iframeCancelBtn = iframeBody.querySelector('.ibexa-context-menu .ibexa-btn--cancel'); + const iframeConfirmBtn = iframeBody.querySelector('.ibexa-context-menu .ids-btn--confirm'); + const iframeCancelBtn = iframeBody.querySelector('.ibexa-context-menu .ids-btn--cancel'); const iframeCloseBtn = iframeBody.querySelector('.ibexa-anchor-navigation-menu__close'); if (locationId) { diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/content.edit.tab.module.js b/src/bundle/ui-dev/src/modules/universal-discovery/content.edit.tab.module.js index 62a7767778..33cfbab373 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/content.edit.tab.module.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/content.edit.tab.module.js @@ -67,8 +67,8 @@ const ContentEditTabModule = () => { const handleIframeLoad = () => { const locationId = iframeRef.current.contentWindow.document.querySelector('meta[name="LocationID"]'); const iframeBody = iframeRef.current.contentWindow.document.body; - const iframeConfirmBtn = iframeBody.querySelector('.ibexa-context-menu .ibexa-btn--confirm'); - const iframeCancelBtn = iframeBody.querySelector('.ibexa-context-menu .ibexa-btn--cancel'); + const iframeConfirmBtn = iframeBody.querySelector('.ibexa-context-menu .ids-btn--confirm'); + const iframeCancelBtn = iframeBody.querySelector('.ibexa-context-menu .ids-btn--cancel'); const iframeCloseBtn = iframeBody.querySelector('.ibexa-anchor-navigation-menu__close'); if (locationId) { diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/content.meta.preview.module.js b/src/bundle/ui-dev/src/modules/universal-discovery/content.meta.preview.module.js index 4db4085754..73b6fc35ca 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/content.meta.preview.module.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/content.meta.preview.module.js @@ -1,9 +1,9 @@ import React, { useContext, useEffect, useMemo, useRef } from 'react'; -import Icon from '../common/icon/icon'; import Thumbnail from '../common/thumbnail/thumbnail'; import { createCssClassNames } from '../common/helpers/css.class.names'; import Spinner from '../common/spinner/spinner'; +import { Button, ButtonType } from '@ids-components/components/Button'; import { findMarkedLocation } from './helpers/locations.helper'; import { addBookmark, removeBookmark } from './services/universal.discovery.service'; import ContentEditButton from './components/content-edit-button/content.edit.button'; @@ -89,14 +89,14 @@ const ContentMetaPreview = () => { const previewButton = allowRedirects ? (
        - +
        ) : null; const hasAccess = permissions && permissions.edit.hasAccess; @@ -108,14 +108,14 @@ const ContentMetaPreview = () => {
        - +
        ); diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js b/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js index 062d87b193..12d20bd8d7 100644 --- a/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js +++ b/src/bundle/ui-dev/src/modules/universal-discovery/universal.discovery.module.js @@ -23,6 +23,9 @@ import { getTranslator, SYSTEM_ROOT_LOCATION_ID, } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; +import { getIconPath } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/icon.helper'; +import { AssetsProvider } from '@ids-components/context/Assets'; +import { TranslatorProvider } from '@ids-components/context/Translator'; import { useSelectedItemsReducer } from './hooks/useSelectedItemsReducer'; const { document } = window; @@ -44,7 +47,7 @@ export const SORTING_OPTIONS = [ return (
        {Translator.trans(/* @Desc("Date") */ 'sorting.date.label', {}, 'ibexa_universal_discovery_widget')} - +
        ); }, @@ -54,7 +57,7 @@ export const SORTING_OPTIONS = [ return (
        {Translator.trans(/* @Desc("Sort by date") */ 'sorting.date.selected_label', {}, 'ibexa_universal_discovery_widget')} - +
        ); }, @@ -69,7 +72,7 @@ export const SORTING_OPTIONS = [ return (
        {Translator.trans(/* @Desc("Date") */ 'sorting.date.label', {}, 'ibexa_universal_discovery_widget')} - +
        ); }, @@ -79,7 +82,7 @@ export const SORTING_OPTIONS = [ return (
        {Translator.trans(/* @Desc("Sort by date") */ 'sorting.date.selected_label', {}, 'ibexa_universal_discovery_widget')} - +
        ); }, @@ -540,164 +543,175 @@ const UniversalDiscoveryModule = ({ }, [currentView]); return ( -
        - - - - - - - - - - - - - - - - - - - - + +
        + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        + + + + + + + + + + + + + + + + + + + + +         +         +         +         +         +         +         +         +         +         +         +         +         +         +         +         +         +         +         +         +
        + + ); }; diff --git a/src/contracts/Menu/AbstractActionBuilder.php b/src/contracts/Menu/AbstractActionBuilder.php index 4334292463..699be2507d 100644 --- a/src/contracts/Menu/AbstractActionBuilder.php +++ b/src/contracts/Menu/AbstractActionBuilder.php @@ -20,7 +20,7 @@ abstract class AbstractActionBuilder extends AbstractBuilder { protected const string TRANSLATION_DOMAIN = 'ibexa_action_menu'; - protected const string IBEXA_BTN_CONTENT_DRAFT_EDIT_CLASS = 'ibexa-btn--content-draft-edit'; + protected const string IBEXA_BTN_CONTENT_DRAFT_EDIT_CLASS = 'ids-btn--content-draft-edit'; private const string ICON_EDIT = 'edit'; private const int ORDER_NUMBER = 200; diff --git a/src/contracts/Menu/AbstractFormContextMenuBuilder.php b/src/contracts/Menu/AbstractFormContextMenuBuilder.php index 6eeff761ad..77d347f00e 100644 --- a/src/contracts/Menu/AbstractFormContextMenuBuilder.php +++ b/src/contracts/Menu/AbstractFormContextMenuBuilder.php @@ -55,7 +55,7 @@ protected function createStructure(array $options): ItemInterface [ 'label' => self::getActionLabel(), 'attributes' => [ - 'class' => 'ibexa-btn--trigger', + 'class' => 'ids-btn--trigger', 'data-click' => $options['submit_selector'] ?? '#', ], 'translation_domain' => 'ibexa_menu', diff --git a/src/lib/Behat/Component/ContentActionsMenu.php b/src/lib/Behat/Component/ContentActionsMenu.php index edaab7b13e..bbcb6aae5d 100644 --- a/src/lib/Behat/Component/ContentActionsMenu.php +++ b/src/lib/Behat/Component/ContentActionsMenu.php @@ -11,6 +11,7 @@ use Ibexa\Behat\Browser\Component\Component; use Ibexa\Behat\Browser\Element\Action\MouseOverAndClick; use Ibexa\Behat\Browser\Element\Criterion\ElementTextCriterion; +use Ibexa\Behat\Browser\Element\ElementCollectionInterface; use Ibexa\Behat\Browser\Locator\VisibleCSSLocator; final class ContentActionsMenu extends Component @@ -28,9 +29,7 @@ public function clickButton(string $buttonName, ?string $groupName = null): void private function clickStandaloneButton(string $buttonName): void { - $buttons = $this->getHTMLPage() - ->findAll($this->getLocator('menuButton')) - ->filterBy(new ElementTextCriterion($buttonName)); + $buttons = $this->getStandaloneButtons($buttonName); if ($buttons->any()) { $buttons->single()->execute(new MouseOverAndClick()); @@ -38,12 +37,24 @@ private function clickStandaloneButton(string $buttonName): void return; } - $this->getHTMLPage()->find($this->getLocator('moreButton'))->click(); + $moreButtons = $this->getHTMLPage()->findAll($this->getLocator('moreButton')); + if (!$moreButtons->any()) { + throw new \RuntimeException(sprintf('Standalone action button "%s" was not found.', $buttonName)); + } + + $moreButtons->single()->click(); $this->getHTMLPage() ->findAll($this->getLocator('expandedMenuButton')) ->getByCriterion(new ElementTextCriterion($buttonName))->click(); } + private function getStandaloneButtons(string $buttonName): ElementCollectionInterface + { + return $this->getHTMLPage() + ->findAll($this->getLocator('menuButton')) + ->filterBy(new ElementTextCriterion($buttonName)); + } + private function clickButtonInGroup(string $groupName, string $buttonName): void { $group = $this->getHTMLPage() @@ -116,7 +127,7 @@ protected function specifyLocators(): array { return [ new VisibleCSSLocator('label', '.ibexa-btn__label'), - new VisibleCSSLocator('menuButton', '.ibexa-context-menu .ibexa-btn'), + new VisibleCSSLocator('menuButton', '.ibexa-context-menu .ibexa-btn, .ibexa-context-menu .ids-btn'), new VisibleCSSLocator('button', '.ibexa-popup-menu__item-content'), new VisibleCSSLocator('toggle', '.ibexa-split-btn__toggle-btn '), new VisibleCSSLocator('splitButton', '.ibexa-split-btn'), diff --git a/src/lib/Behat/Component/CreateNewPopup.php b/src/lib/Behat/Component/CreateNewPopup.php index fcf26c7a29..6c3091a544 100644 --- a/src/lib/Behat/Component/CreateNewPopup.php +++ b/src/lib/Behat/Component/CreateNewPopup.php @@ -75,15 +75,15 @@ protected function specifyLocators(): array { return [ new VisibleCSSLocator('popupHeader', '.ibexa-extra-actions__header'), - new VisibleCSSLocator('addButton', '.ibexa-extra-actions__pre-form-btns .ibexa-btn--primary, .ibexa-extra-actions--create .ibexa-btn--primary'), - new VisibleCSSLocator('cancelButton', '.ibexa-extra-actions__pre-form-btns .ibexa-btn--secondary'), + new VisibleCSSLocator('addButton', '.ibexa-extra-actions__pre-form-btns .ids-btn--primary, .ibexa-extra-actions--create .ids-btn--primary'), + new VisibleCSSLocator('cancelButton', '.ibexa-extra-actions__pre-form-btns .ids-btn--secondary'), new VisibleCSSLocator('popup', '.ibexa-extra-actions:not(.ibexa-extra-actions--hidden)'), new VisibleCSSLocator('formGroup', '.form-group'), new VisibleCSSLocator('dropdown', '.ibexa-dropdown'), - new VisibleCSSLocator('label', '.ibexa-label'), + new VisibleCSSLocator('label', '.ids-label'), new VisibleCSSLocator('dropdownValue', '.ibexa-dropdown__selection-info'), new VisibleCSSLocator('radioValue', '.ibexa-dc-extra-actions-applies-to__option'), - new VisibleCSSLocator('radioLabel', '.ibexa-label--checkbox-radio'), + new VisibleCSSLocator('radioLabel', '.ids-choice-input-label'), ]; } } diff --git a/src/lib/Behat/Component/CreateUrlAliasModal.php b/src/lib/Behat/Component/CreateUrlAliasModal.php index d971af4e56..0e615eb6fb 100644 --- a/src/lib/Behat/Component/CreateUrlAliasModal.php +++ b/src/lib/Behat/Component/CreateUrlAliasModal.php @@ -46,9 +46,9 @@ public function createNewUrlAlias(string $path, string $languageName, bool $redi private function setRedirectToggle(bool $shouldBeChecked): void { $toggle = $this->getHTMLPage()->find($this->getLocator('redirectToggle')); - $isChecked = $toggle->hasClass('ibexa-toggle--is-checked'); + $isChecked = $toggle->hasClass('ids-toggle--checked'); if ($shouldBeChecked !== $isChecked) { - $this->getHTMLPage()->find($this->getLocator('redirectToggle'))->click(); + $this->getHTMLPage()->find(new VisibleCSSLocator('toggle', '.ibexa-custom-url-from__item .ids-toggle .ids-toggle__widget'))->click(); } } @@ -76,7 +76,7 @@ protected function specifyLocators(): array new VisibleCSSLocator('createButton', '#custom_url_add_add'), new VisibleCSSLocator('pathInput', '#custom_url_add_path'), new VisibleCSSLocator('languageDropdown', '.ibexa-custom-url-from__item .ibexa-dropdown__selection-info'), - new VisibleCSSLocator('redirectToggle', '.ibexa-custom-url-from__item .ibexa-toggle'), + new VisibleCSSLocator('redirectToggle', '.ibexa-custom-url-from__item .ids-toggle'), ]; } } diff --git a/src/lib/Behat/Component/DeleteContentDialog.php b/src/lib/Behat/Component/DeleteContentDialog.php index ed27cd3b2f..26912eab00 100644 --- a/src/lib/Behat/Component/DeleteContentDialog.php +++ b/src/lib/Behat/Component/DeleteContentDialog.php @@ -20,7 +20,7 @@ public function confirmTrashing(): void public function specifyLocators(): array { return array_merge(parent::specifyLocators(), [ - new VisibleCSSLocator('trashConfirmCheckbox', '.modal-content .ibexa-input--checkbox'), + new VisibleCSSLocator('trashConfirmCheckbox', '.modal-content .ids-input--checkbox'), ]); } } diff --git a/src/lib/Behat/Component/Dialog.php b/src/lib/Behat/Component/Dialog.php index c74ecf2cd0..18eddb85d7 100644 --- a/src/lib/Behat/Component/Dialog.php +++ b/src/lib/Behat/Component/Dialog.php @@ -32,8 +32,8 @@ public function verifyIsLoaded(): void protected function specifyLocators(): array { return [ - new VisibleCSSLocator('confirm', '.modal.show button[type="submit"],.modal.show button[data-click], .modal.show .ibexa-btn--confirm, .modal.show .ibexa-btn--primary'), - new VisibleCSSLocator('decline', '.modal.show .ibexa-btn--secondary'), + new VisibleCSSLocator('confirm', '.modal.show button[type="submit"],.modal.show button[data-click], .modal.show .ids-btn--confirm, .modal.show .ids-btn--primary'), + new VisibleCSSLocator('decline', '.modal.show .ids-btn--secondary'), ]; } } diff --git a/src/lib/Behat/Component/DraftConflictDialog.php b/src/lib/Behat/Component/DraftConflictDialog.php index 71436c2482..d965a8b1ea 100644 --- a/src/lib/Behat/Component/DraftConflictDialog.php +++ b/src/lib/Behat/Component/DraftConflictDialog.php @@ -46,7 +46,7 @@ protected function specifyLocators(): array { return [ new VisibleCSSLocator('dialog', '#version-draft-conflict-modal.ibexa-modal--version-draft-conflict.show .modal-content'), - new VisibleCSSLocator('addDraft', '.ibexa-btn--add-draft'), + new VisibleCSSLocator('addDraft', '.ids-btn--add-draft'), new VisibleCSSLocator('table', '#version-draft-conflict-modal .modal-content'), ]; } diff --git a/src/lib/Behat/Component/Fields/Checkbox.php b/src/lib/Behat/Component/Fields/Checkbox.php index 476fdf80fb..d58614de8c 100644 --- a/src/lib/Behat/Component/Fields/Checkbox.php +++ b/src/lib/Behat/Component/Fields/Checkbox.php @@ -68,9 +68,9 @@ public function getFieldTypeIdentifier(): string public function specifyLocators(): array { return [ - new VisibleCSSLocator('fieldInput', '.ibexa-toggle__indicator'), - new VisibleCSSLocator('checkbox', '.ibexa-toggle__switcher'), - new VisibleCSSLocator('checked', 'ibexa-toggle--is-checked'), + new VisibleCSSLocator('fieldInput', '.ids-toggle__indicator'), + new VisibleCSSLocator('checkbox', '.ids-toggle__widget'), + new VisibleCSSLocator('checked', 'ids-toggle--checked'), ]; } } diff --git a/src/lib/Behat/Component/Fields/Keywords.php b/src/lib/Behat/Component/Fields/Keywords.php index 69a0edd8e8..4172858b12 100644 --- a/src/lib/Behat/Component/Fields/Keywords.php +++ b/src/lib/Behat/Component/Fields/Keywords.php @@ -18,7 +18,7 @@ final class Keywords extends FieldTypeComponent private string $setKeywordsValueScript = <<