IBX-1528: Redesigned modals

src/bundle/Resources/encore/ez.js.config.js

@@ -27,6 +27,7 @@ const layout = [
     path.resolve(__dirname, '../public/js/scripts/admin.notifications.js'),
     path.resolve(__dirname, '../public/js/scripts/button.trigger.js'),
     path.resolve(__dirname, '../public/js/scripts/button.prevent.default.js'),
+    path.resolve(__dirname, '../public/js/scripts/toggle.button.state.toggle.js'),
     path.resolve(__dirname, '../public/js/scripts/udw/browse.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.user.menu.js'),
     path.resolve(__dirname, '../public/js/scripts/admin.prevent.click.js'),
@@ -177,7 +178,6 @@ module.exports = (Encore) => {
             path.resolve(__dirname, '../public/js/scripts/fieldType/base/multi-input-field.js'),
             ...fieldTypes,
             path.resolve(__dirname, '../public/js/scripts/sidebar/extra.actions.js'),
-            path.resolve(__dirname, '../public/js/scripts/toggle.button.state.toggle.js'),
             path.resolve(__dirname, '../public/js/scripts/edit.header.js'),
         ])
         .addEntry('ezplatform-admin-ui-settings-datetime-format-update-js', [
@@ -207,7 +207,7 @@ module.exports = (Encore) => {
             path.resolve(__dirname, '../../ui-dev/src/modules/universal-discovery/components/view-switcher/view.switcher.js'),
             path.resolve(
                 __dirname,
-                '../../ui-dev/src/modules/universal-discovery/components/tree-item-toggle-selection/tree.item.toggle.selection.js',
+                '../../ui-dev/src/modules/universal-discovery/components/tree-item-toggle-selection/tree.item.toggle.selection.js'
             ),
         ])
         .addEntry('ezplatform-admin-ui-mfu-js', [
@@ -220,17 +220,11 @@ module.exports = (Encore) => {
         .addEntry('ezplatform-admin-ui-url-management-js', [
             path.resolve(__dirname, '../public/js/scripts/button.state.toggle.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.url.wildcards.create.js'),
-            path.resolve(__dirname, '../public/js/scripts/toggle.button.state.toggle.js'),
-        ])
-        .addEntry('ezplatform-admin-ui-url-management-update-js', [
-            path.resolve(__dirname, '../public/js/scripts/toggle.button.state.toggle.js'),
         ])
         .addEntry('ezplatform-admin-ui-login-js', [path.resolve(__dirname, '../public/js/scripts/login.js')])
         .addEntry('ezplatform-admin-ui-tabs-js', [
             path.resolve(__dirname, '../public/js/scripts/admin.location.tab.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.location.adaptive.tabs.js'),
         ])
-        .addEntry('ezplatform-admin-ui-edit-base-js', [
-            path.resolve(__dirname, '../public/js/scripts/edit.header.js'),
-        ]);
+        .addEntry('ezplatform-admin-ui-edit-base-js', [path.resolve(__dirname, '../public/js/scripts/edit.header.js')]);
 };

src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js

@@ -1,39 +1,30 @@
 (function(global, doc) {
-    const modal = doc.querySelector('#ez-modal--custom-url-alias');
+    const modal = doc.querySelector('#ibexa-modal--custom-url-alias');
 
     if (modal) {
         const discardBtns = modal.querySelectorAll('[data-bs-dismiss="modal"]');
-        const submitBtn = modal.querySelector('[type="submit"]');
+        const submitBtn = modal.querySelector('#custom_url_add_add');
         const input = modal.querySelector('[required="required"]');
-        const checkboxes = modal.querySelectorAll('.ez-field-edit--ezboolean input');
         const siteRootCheckbox = modal.querySelector('[name="custom_url_add[site_root]"]');
         const toggleButtonState = () => {
             const hasValue = input.value.trim().length !== 0;
             const methodName = hasValue ? 'removeAttribute' : 'setAttribute';
 
             submitBtn[methodName]('disabled', true);
         };
-        const toggleCheckbox = (event) => {
-            const checkbox = event.target;
-            const methodName = checkbox.checked ? 'add' : 'remove';
-
-            checkbox.closest('.ez-data-source__label').classList[methodName]('is-checked');
-        };
         const clearValues = () => {
             input.value = '';
             toggleButtonState();
         };
         const toggleSiteAccessSelect = (event) => {
             const isChecked = event.target.checked;
-            const siteAccessSelect = modal.querySelector('[name="custom_url_add[site_access]"]');
-            const methodName = isChecked ? 'removeAttribute' : 'setAttribute';
+            const siteAccessSelect = modal.querySelector('.ibexa-custom-url-from__item--siteacces .ibexa-dropdown');
 
-            siteAccessSelect[methodName]('disabled', true);
+            siteAccessSelect.classList.toggle('ibexa-dropdown--is-disabled', isChecked);
         };
 
         input.addEventListener('input', toggleButtonState, false);
         siteRootCheckbox.addEventListener('change', toggleSiteAccessSelect, false);
-        checkboxes.forEach((checkbox) => checkbox.addEventListener('change', toggleCheckbox, false));
         discardBtns.forEach((btn) => btn.addEventListener('click', clearValues, false));
     }
 })(window, window.document);

src/bundle/Resources/public/js/scripts/admin.location.add.translation.js

@@ -1,5 +1,5 @@
 (function(global, doc) {
-    const SELECTOR_MODAL = '.ez-modal';
+    const SELECTOR_MODAL = '.ibexa-modal';
 
     doc.querySelectorAll('.ez-translation__language-wrapper--language').forEach((select) => {
         select.addEventListener(

src/bundle/Resources/public/js/scripts/admin.location.view.js

@@ -53,7 +53,7 @@
             }
         };
         const showModal = (modalHtml) => {
-            const wrapper = doc.querySelector('.ez-modal-wrapper');
+            const wrapper = doc.querySelector('.ibexa-modal-wrapper');
 
             wrapper.innerHTML = modalHtml;
             attachModalListeners(wrapper);
@@ -106,9 +106,7 @@
 
         failedItemsData.forEach(({ contentName, contentTypeName }) => {
             const container = doc.createElement('tbody');
-            const renderedItem = rowTemplate
-                .replace('{{ content_name }}', contentName)
-                .replace('{{ content_type_name }}', contentTypeName);
+            const renderedItem = rowTemplate.replace('{{ content_name }}', contentName).replace('{{ content_type_name }}', contentTypeName);
 
             container.insertAdjacentHTML('beforeend', renderedItem);
 

src/bundle/Resources/public/js/scripts/admin.trash.js

@@ -1,7 +1,7 @@
 (function(global, doc) {
     const form = doc.querySelector('form[name="location_trash"]');
     const submitButton = form.querySelector('button[type="submit"]');
-    const allOptions = form.querySelectorAll('.ez-modal__trash-option');
+    const allOptions = form.querySelectorAll('.ibexa-modal__trash-option');
     const confirmCheckbox = form.querySelector('input[name="location_trash[confirm][]"]');
     const enableButton = (button) => {
         button.disabled = false;
@@ -13,7 +13,7 @@
     };
     const refreshTrashModal = (event) => {
         const { numberOfSubitems } = event.detail;
-        const sendToTrashModal = document.querySelector('.ez-modal--trash-location');
+        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 { contentName } = sendToTrashModal.dataset;
@@ -28,7 +28,7 @@
                 'content'
             );
 
-            modalBody.querySelector('.ez-modal__option-description').innerHTML = message;
+            modalBody.querySelector('.ibexa-modal__option-description').innerHTML = message;
         } else {
             const message = Translator.trans(
                 /*@Desc("Are you sure you want to send this Content item to Trash?")*/ 'trash.modal.message',

src/bundle/Resources/public/js/scripts/button.content.edit.js

@@ -30,7 +30,7 @@
             bootstrap.Modal.getOrCreateInstance(doc.querySelector('#version-draft-conflict-modal')).hide();
         };
         const showModal = (modalHtml) => {
-            const wrapper = doc.querySelector('.ez-modal-wrapper');
+            const wrapper = doc.querySelector('.ibexa-modal-wrapper');
 
             wrapper.innerHTML = modalHtml;
 

src/bundle/Resources/public/js/scripts/button.translation.edit.js

@@ -22,7 +22,7 @@
         hideTranslationsList(event) {
             const closestTranslationSelector = event.target.closest('.ez-translation-selector');
             const clickedOnTranslationsList = closestTranslationSelector && closestTranslationSelector.isSameNode(this.container);
-            const clickedOnDraftConflictModal = event.target.closest('.ez-modal--version-draft-conflict');
+            const clickedOnDraftConflictModal = event.target.closest('.ibexa-modal--version-draft-conflict');
 
             if (clickedOnTranslationsList || clickedOnDraftConflictModal) {
                 return;

src/bundle/Resources/public/js/scripts/sidebar/btn/location.edit.js

@@ -46,7 +46,7 @@
         }
     };
     const showModal = (modalHtml) => {
-        const wrapper = doc.querySelector('.ez-modal-wrapper');
+        const wrapper = doc.querySelector('.ibexa-modal-wrapper');
 
         wrapper.innerHTML = modalHtml;
         attachModalListeners(wrapper);

src/bundle/Resources/public/scss/_buttons.scss

@@ -261,7 +261,7 @@
 
 .ez-content-view,
 .ez-trash-list-view {
-    .ez-modal--send-to-trash {
+    .ibexa-modal--send-to-trash {
         .modal-footer {
             .form-check-inline {
                 margin-right: 0;

src/bundle/Resources/public/scss/_custom-url-form.scss

@@ -0,0 +1,29 @@
+.ibexa-custom-url-from {
+    &__item {
+        margin-bottom: calculateRem(24px);
+
+        .ibexa-dropdown,
+        .ibexa-input-text-wrapper {
+            width: calculateRem(352px);
+        }
+    }
+
+    &__info-text {
+        font-size: $ibexa-text-font-size-small;
+        color: $ibexa-color-dark-400;
+
+        &--checked {
+            display: none;
+
+            .ibexa-toggle--is-checked + & {
+                display: block;
+            }
+        }
+
+        &--unchecked {
+            .ibexa-toggle--is-checked + .ibexa-custom-url-from__info-text--checked + & {
+                display: none;
+            }
+        }
+    }
+}

src/bundle/Resources/public/scss/_custom.scss

@@ -366,11 +366,11 @@ $pagination-disabled-bg: transparent;
 $pagination-disabled-border-color: transparent;
 
 // Modals
-$modal-header-padding-y: 24px;
+$modal-header-padding-y: 16px;
 $modal-header-padding-x: 0;
 $modal-header-border-width: 1px;
 $modal-header-border-color: $ibexa-color-base-medium;
-$modal-title-font-size: 20px;
+$modal-title-font-size: 28px;
 $modal-content-border-width: 0;
 $modal-content-border-radius: $ibexa-border-radius;
 $modal-inner-padding: 24px 0;

src/bundle/Resources/public/scss/_modals.scss

@@ -1,4 +1,4 @@
-.ez-modal {
+.ibexa-modal {
     .modal-dialog {
         @include modal-main();
     }
@@ -30,7 +30,7 @@
     &--table-content {
         .modal-header {
             border-width: 0;
-        }        
+        }
 
         .modal-body {
             padding-top: 0;
@@ -53,8 +53,8 @@
 
     &--wide {
         .modal-dialog {
-            max-width: calculateRem(800px); 
-            width: calculateRem(800px);       
+            max-width: calculateRem(800px);
+            width: calculateRem(800px);
         }
     }
 }

src/bundle/Resources/public/scss/ezplatform.scss

@@ -107,3 +107,4 @@
 @import 'grid-view-item';
 @import 'list-search';
 @import 'search-links-form';
+@import 'custom-url-form';

src/bundle/Resources/public/scss/mixins/_modals.scss

@@ -57,6 +57,6 @@
     padding: $modal-footer-padding;
 
     .btn {
-        margin: 0 calculateRem(4px) 0 0;
+        margin: 0 calculateRem(16px) 0 0;
     }
 }

src/bundle/Resources/translations/content_url.en.xliff

@@ -37,13 +37,13 @@
         <note>key: tab.urls.add.redirect</note>
       </trans-unit>
       <trans-unit id="e84da49f6798548a0e09f5f7d5095788257f0119" resname="tab.urls.add.redirect.helper.checked">
-        <source>When checked, the alias will redirect to the destination using an HTTP 301 response.</source>
-        <target state="new">When checked, the alias will redirect to the destination using an HTTP 301 response.</target>
+        <source>The alias will redirect to the destination using an HTTP 301 response.</source>
+        <target state="new">The alias will redirect to the destination using an HTTP 301 response.</target>
         <note>key: tab.urls.add.redirect.helper.checked</note>
       </trans-unit>
       <trans-unit id="bccfa7be40c2932ae04a50767aee2184bd5ca4d5" resname="tab.urls.add.redirect.helper.unchecked">
-        <source>When unchecked, the alias will not redirect to the destination and the URL will stay the same.</source>
-        <target state="new">When unchecked, the alias will not redirect to the destination and the URL will stay the same.</target>
+        <source>The alias will not redirect to the destination and the URL will stay the same.</source>
+        <target state="new">The alias will not redirect to the destination and the URL will stay the same.</target>
         <note>key: tab.urls.add.redirect.helper.unchecked</note>
       </trans-unit>
       <trans-unit id="c1277a6823f4d281355e706e54cd723b5ed4adf7" resname="tab.urls.add.root_location_id.helper_secondary">
@@ -62,18 +62,18 @@
         <note>key: tab.urls.add.site_root</note>
       </trans-unit>
       <trans-unit id="9fc6fbd86b58ee883321610dd1726551772edaf1" resname="tab.urls.add.site_root.helper.checked">
-        <source>When checked, the alias will be placed at the site root.</source>
-        <target state="new">When checked, the alias will be placed at the site root.</target>
+        <source>The alias will be placed at the site root.</source>
+        <target state="new">The alias will be placed at the site root.</target>
         <note>key: tab.urls.add.site_root.helper.checked</note>
       </trans-unit>
       <trans-unit id="cf65d6c865f18c51e3edcd90c6779079b994595c" resname="tab.urls.add.site_root.helper.no_parent_name">
-        <source>When unchecked, the alias will be placed under the parent of this Location</source>
-        <target state="new">When unchecked, the alias will be placed under the parent of this Location</target>
+        <source>The alias will be placed under the parent of this Location</source>
+        <target state="new">The alias will be placed under the parent of this Location</target>
         <note>key: tab.urls.add.site_root.helper.no_parent_name</note>
       </trans-unit>
       <trans-unit id="db531fb5f993263b5ea57393101781b9d731a738" resname="tab.urls.add.site_root.helper.unchecked">
-        <source>When unchecked, the alias will be placed under %parent_name%</source>
-        <target state="new">When unchecked, the alias will be placed under %parent_name%</target>
+        <source>The alias will be placed under %parent_name%</source>
+        <target state="new">The alias will be placed under %parent_name%</target>
         <note>key: tab.urls.add.site_root.helper.unchecked</note>
       </trans-unit>
       <trans-unit id="25badd959ce69714e8eb349ebddbbbe126c14458" resname="tab.urls.add.title">

src/bundle/Resources/views/themes/admin/account/notifications/modal.html.twig

@@ -1,7 +1,7 @@
 {% trans_default_domain 'notifications' %}
 
 <div
-    class="modal fade ez-notifications-modal ez-modal ez-modal--table-content"
+    class="modal fade ez-notifications-modal ibexa-modal ibexa-modal--table-content"
     id="view-notifications"
     tabindex="-1"
     role="dialog">
@@ -22,7 +22,7 @@
                     data-bs-dismiss="modal"
                     aria-label="Close">
                     <svg
-                        class="ibexa-icon ibexa-icon--small"
+                        class="ibexa-icon ibexa-icon--small-medium"
                         aria-hidden="true">
                         <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
                     </svg>

src/bundle/Resources/views/themes/admin/content/modal/add_translation.html.twig

@@ -2,15 +2,15 @@
 
 {% form_theme form '@ezdesign/content/translation_add_form_fields.html.twig' %}
 
-<div class="modal fade ez-modal ez-translation" id="add-translation-modal" tabindex="-1" role="dialog">
+<div class="modal fade ibexa-modal ez-translation" id="add-translation-modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         {% set action = action is defined ? action : path('ezplatform.translation.add') %}
         {{ form_start(form, {'action': action}) }}
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title">{{ 'tab.translations.add.title'|trans|desc('Create a new translation') }}</h5>
                     <button type="button" class="close" data-bs-dismiss="modal" aria-label="{{ 'translation.modal_close'|trans|desc('Close') }}">
-                        <svg class="ibexa-icon ibexa-icon--medium" aria-hidden="true">
+                        <svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
                             <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
                         </svg>
                     </button>

src/bundle/Resources/views/themes/admin/content/modal/draft_conflict.html.twig

@@ -2,7 +2,7 @@
 
 {% import _self as version_modal_draft_conflict %}
 
-<div class="modal fade ez-modal ez-modal--version-draft-conflict" id="version-draft-conflict-modal" tabindex="-1" role="dialog">
+<div class="modal fade ibexa-modal ibexa-modal--version-draft-conflict" id="version-draft-conflict-modal" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
@@ -14,13 +14,13 @@
                     aria-label={{ 'draft.conflict.close'|trans|desc('Close') }}
                     title={{ 'draft.conflict.close'|trans|desc('Close') }}
                 >
-                    <svg class="ibexa-icon ibexa-icon--small" aria-hidden="true">
+                    <svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
                         <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
                     </svg>
                 </button>
             </div>
             <div class="modal-body">
-                <div class="ez-modal-body__main">
+                <div class="ibexa-modal-body__main">
                     {% set number = conflicted_drafts|length %}
                     {% if number == 1 %}
                         {{ 'draft.conflict.number.one'|trans|desc('There is already one draft for this Content item.') }}

src/bundle/Resources/views/themes/admin/content/modal/hide_confirmation.html.twig

@@ -1,16 +1,16 @@
-<div class="modal fade ez-modal ez-modal--content-hide-confirmation" id="hide-content-modal" tabindex="-1" role="dialog">
+<div class="modal fade ibexa-modal ibexa-modal--content-hide-confirmation" id="hide-content-modal" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">{{ 'content.hide.modal.title'|trans()|desc('Content hide conflict') }}</h5>
                 <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                    <svg class="ibexa-icon ibexa-icon--medium" aria-hidden="true">
+                    <svg class="ibexa-icon ibexa-icon--small-medium" aria-hidden="true">
                         <use xlink:href="{{ ibexa_icon_path('discard') }}"></use>
                     </svg>
                 </button>
             </div>
             <div class="modal-body">
-                <div class="ez-modal-body__main">
+                <div class="ibexa-modal-body__main">
                     {{ 'content.hide.modal.warning_content_used_by_other_content'|trans()|desc('This content is used by other Content item(s). To avoid errors, update or remove all related content listed in the Relations tab.') }}<br/>
                     {{ 'content.hide.modal.please_confirm_to_continue'|trans()|desc('To hide the Content item anyway, click Confirm.') }}
                 </div>