IBX-1526: change edit fields width to full column; Page Builder updates

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

@@ -91,7 +91,10 @@
 
         &:hover {
             color: $ibexa-color-primary;
-            fill: $ibexa-color-primary;
+
+            .ibexa-icon {
+                fill: $ibexa-color-primary;
+            }
         }
 
         &:focus {

src/bundle/Resources/public/scss/_edit-header.scss

@@ -45,7 +45,7 @@
             padding-left: 0;
 
             .ibexa-icon {
-                margin-right: calculateRem(16px);
+                margin-right: calculateRem(8px);
                 fill: $ibexa-color-dark-400;
             }
         }

src/bundle/Resources/public/scss/_inputs.scss

@@ -352,7 +352,6 @@
 }
 
 .ibexa-input-text-wrapper {
-    width: calculateRem(288px);
     position: relative;
 
     &__actions {

src/bundle/Resources/public/scss/fieldType/edit/_base-preview.scss

@@ -30,7 +30,6 @@
         position: relative;
         border: calculateRem(1px) dashed $ibexa-color-dark-300;
         border-radius: $ibexa-border-radius;
-        width: 65%;
 
         .ibexa-data-source {
             border-radius: $ibexa-border-radius;

src/bundle/Resources/public/scss/fieldType/edit/_ezfloat.scss

@@ -1,8 +1,10 @@
 .ibexa-field-edit--ezfloat {
-    .ibexa-data-source__input {
+    .ibexa-input-text-wrapper {
         width: calculateRem(84px);
         height: calculateRem(48px);
+    }
 
+    .ibexa-data-source__input {
         &.is-invalid {
             background-image: none;
             padding-right: calculateRem(12px);

src/bundle/Resources/public/scss/fieldType/edit/_ezgmaplocation.scss

@@ -4,7 +4,6 @@
 
         &__map {
             z-index: 0;
-            width: 50%;
             height: calculateRem(400px);
             border-top-left-radius: $ibexa-border-radius;
             border-bottom-left-radius: $ibexa-border-radius;
@@ -28,7 +27,6 @@
         }
 
         &__options {
-            width: 50%;
             padding: calculateRem(24px);
 
             .ibexa-input {

src/bundle/Resources/public/scss/ibexa.scss

@@ -48,9 +48,6 @@
 @import 'fieldType/edit/base-field';
 @import 'fieldType/edit/base-preview';
 @import 'fieldType/edit/ezauthor';
-@import 'fieldType/edit/ezstring';
-@import 'fieldType/edit/ezemail';
-@import 'fieldType/edit/ezcountry';
 @import 'fieldType/edit/ezinteger';
 @import 'fieldType/edit/ezfloat';
 @import 'fieldType/edit/ezboolean';

src/bundle/Resources/public/scss/ui/modules/universal-discovery/_content.meta.preview.scss

@@ -50,10 +50,6 @@
         margin-top: calculateRem(16px);
     }
 
-    &__details-item-row {
-        width: 50%;
-    }
-
     &__toggle-bookmark-button {
         border: none;
         align-self: flex-start;

src/bundle/Resources/views/themes/admin/content/edit_base.html.twig

@@ -23,7 +23,7 @@
     {% include '@ibexadesign/ui/anchor_navigation_menu.html.twig' with anchor_params %}
 {% endblock %}
 
-{% block content%}
+{% block content %}
     {% block form_before %}{% endblock %}
 
     {% block form %}
@@ -62,7 +62,7 @@
                     </div>
                 {% else %}
                     <div class="row">
-                        <div class="offset-1 col-6 p-0">
+                        <div class="{{ is_full_width|default(false) ? 'col-12' : 'col-6 offset-1 p-0' }}">
                             {% for field in form.fieldsData %}
                                 {% if not field.rendered %}
                                     {% if field.value is defined %}

src/bundle/ui-dev/src/modules/common/popup/popup.component.js

@@ -27,12 +27,14 @@ class Popup extends Component {
     }
 
     componentDidMount() {
+        const { noKeyboard, hasFocus } = this.props;
         const { isVisible: show } = this.state;
 
         if (show) {
             const bootstrapModal = window.bootstrap.Modal.getOrCreateInstance(this._refModal, {
                 ...MODAL_CONFIG,
-                focus: this.props.hasFocus,
+                keyboard: !noKeyboard,
+                focus: hasFocus,
             });
 
             bootstrapModal.show();
@@ -86,8 +88,6 @@ class Popup extends Component {
     }
 
     renderHeader() {
-        const closeBtnLabel = Translator.trans(/*@Desc("Close")*/ 'popup.close.label', {}, 'universal_discovery_widget');
-
         return (
             <div className={'modal-header c-popup__header'}>
                 {this.renderHeadline()}
@@ -97,6 +97,10 @@ class Popup extends Component {
     }
 
     renderCloseButton() {
+        if (this.props.noCloseBtn) {
+            return;
+        }
+
         const closeBtnLabel = Translator.trans(/*@Desc("Close")*/ 'popup.close.label', {}, 'universal_discovery_widget');
 
         return (
@@ -148,9 +152,9 @@ class Popup extends Component {
 
     render() {
         const { isVisible } = this.state;
-        const { additionalClasses, size, noHeader } = this.props;
+        const { additionalClasses, size, noHeader, extraClasses } = this.props;
         const modalAttrs = {
-            className: 'c-popup modal fade',
+            className: `c-popup modal fade ${extraClasses}`,
             ref: this.setModalRef,
             tabIndex: this.props.hasFocus ? -1 : undefined,
         };
@@ -193,6 +197,9 @@ Popup.propTypes = {
     footerChildren: PropTypes.element,
     size: PropTypes.string,
     noHeader: PropTypes.bool,
+    noCloseBtn: PropTypes.bool,
+    noKeyboard: PropTypes.bool,
+    extraClasses: PropTypes.string,
 };
 
 Popup.defaultProps = {
@@ -201,6 +208,9 @@ Popup.defaultProps = {
     hasFocus: true,
     size: 'large',
     noHeader: false,
+    noCloseBtn: false,
+    noKeyboard: false,
+    extraClasses: '',
     onConfigIframeLoad: () => {},
 };