IBX-1384: Personalization - scenario preview redesign (#62)

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

@@ -71,14 +71,12 @@ module.exports = (Encore) => {
         .addEntry('ezplatform-admin-ui-content-type-create-js', [
             path.resolve(__dirname, '../public/js/scripts/admin.contenttype.selection.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.card.toggle.group.js'),
-            path.resolve(__dirname, '../public/js/scripts/edit.header.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.contenttype.edit'),
         ])
         .addEntry('ezplatform-admin-ui-content-type-edit-js', [
             path.resolve(__dirname, '../public/js/scripts/admin.contenttype.selection.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.card.toggle.group.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.contenttype.relation.default.location.js'),
-            path.resolve(__dirname, '../public/js/scripts/edit.header.js'),
             path.resolve(__dirname, '../public/js/scripts/admin.contenttype.edit'),
         ])
         .addEntry('ezplatform-admin-ui-content-type-list-js', [
@@ -230,5 +228,8 @@ module.exports = (Encore) => {
         .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'),
         ]);
 };

src/bundle/Resources/public/js/scripts/core/tag.view.select.js

@@ -2,15 +2,14 @@
     class TagViewSelect {
         constructor(config) {
             this.inputSelector = config.inputSelector || 'input';
-            this.fieldContainer = config.fieldContainer;
+            this.container = config.container || config.fieldContainer.querySelector('.ibexa-tag-view-select')
 
-            if (!this.fieldContainer) {
+            if (!this.container) {
                 throw new Error('Field Container doesn\'t exist!');
             }
 
-            this.container = this.fieldContainer.querySelector('.ibexa-tag-view-select');
             this.listContainer = this.container.querySelector('.ibexa-tag-view-select__selected-list');
-            this.inputField = this.fieldContainer.querySelector(this.inputSelector);
+            this.inputField = this.container.querySelector(this.inputSelector);
             this.selectBtn = this.container.querySelector('.ibexa-tag-view-select__btn-select-path')
             this.isSingleSelect = this.container.dataset.isSingleSelect === '1';
             this.canBeEmpty = this.container.dataset.canBeEmpty === '1';

src/bundle/Resources/public/js/scripts/edit.header.js

@@ -10,10 +10,10 @@
 
     const contextMenuNode = headerNode.querySelector('.ibexa-context-menu');
     const { height: expandedHeaderHeight } = headerNode.getBoundingClientRect();
-    const form = doc.querySelector('.ibexa-form');
+    const scrolledContent = doc.querySelector('.ibexa-edit-content > :first-child');
     const tooltipNode = headerNode.querySelector('.ibexa-edit-header__tooltip');
     const fitHeader = (event) => {
-        const { height: formHeight } = form.getBoundingClientRect();
+        const { height: formHeight } = scrolledContent.getBoundingClientRect();
         const contentHeightWithExpandedHeader = formHeight + expandedHeaderHeight;
         const heightDiffBetweenWindowAndContent = contentHeightWithExpandedHeader - global.innerHeight;
 

src/bundle/Resources/public/scss/_dropdown.scss

@@ -25,6 +25,7 @@
         display: flex;
         align-items: center;
         flex-wrap: wrap;
+        margin-bottom: 0;
 
         &:before,
         &:after {

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

@@ -1,15 +1,22 @@
 .ibexa-edit-header {
-    height: calculateRem(241px);
+    display: flex;
+    flex-direction: column;
     background-color: $ibexa-color-white;
-    box-shadow: $ibexa-edit-header-box-shadow;
     border-width: calculateRem(1px) calculateRem(1px) 0;
     border-style: solid;
     border-color: $ibexa-color-light-400;
     border-top-left-radius: $ibexa-border-radius;
     border-top-right-radius: $ibexa-border-radius;
     transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
 
+    &__container {
+        display: flex;
+        flex-direction: column;
+    }
+
     &__row {
+        display: flex;
+        flex-wrap: nowrap;
         transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
 
         &--top {
@@ -22,7 +29,9 @@
         }
 
         &--bottom {
-            height: calculateRem(154px);
+            flex-direction: column;
+            min-width: 60%;
+            min-height: calculateRem(150px);
         }
     }
 
@@ -42,9 +51,6 @@
         }
 
         &--left {
-            padding-left: 0;
-            border-bottom: calculateRem(1px) solid $ibexa-color-light;
-
             .ibexa-label {
                 margin-bottom: 0;
                 color: $ibexa-color-dark-400;
@@ -99,28 +105,39 @@
         transition-duration: $ibexa-admin-transition-duration;
     }
 
+    &__extra-bottom-content {
+        margin-top: calculateRem(10px);
+    }
+
+    &__bottom-row-line {
+        margin-top: auto;
+        width: 75%;
+        border-bottom: calculateRem(1px) solid $ibexa-color-light;
+    }
+
     .ibexa-autosave {
         opacity: 1;
         transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
     }
 
     &--slim {
-        height: calculateRem(87px);
-
         .ibexa-edit-header {
             &__row {
                 &--bottom {
-                    height: calculateRem(85px);
                     margin-top: calculateRem(-45px);
                 }
             }
 
-            &__column {
-                &--left {
-                    border-bottom: none;
+            &__row {
+                &--bottom {
+                    min-height: initial;
                 }
             }
 
+            &__bottom-row-line {
+                border-bottom: none;
+            }
+
             &__action-name-container {
                 margin-top: calculateRem(-30px);
             }
@@ -131,6 +148,8 @@
 
             &__subtitle {
                 opacity: 0;
+                height: 0;
+                overflow: hidden;
             }
         }
 

src/bundle/Resources/public/scss/_grid-view-item.scss

@@ -6,6 +6,7 @@
     min-height: calculateRem(238px);
     border: calculateRem(1px) solid $ibexa-color-light;
     border-radius: calculateRem(5px);
+    background: $ibexa-color-white;
     box-shadow: calculateRem(4px) calculateRem(2px) calculateRem(17px) 0 rgba($ibexa-color-black, 0.05);
     transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
 

src/bundle/Resources/public/scss/_main-container.scss

@@ -10,6 +10,7 @@
         width: 100%;
         height: 100%;
         overflow-y: auto;
+        box-shadow: $ibexa-edit-content-box-shadow;
     }
 
     &--without-anchor-menu-items {

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

@@ -1,12 +1,11 @@
 @mixin edit-right-side-container {
+    flex-grow: 1;
     position: relative;
     padding-top: calculateRem(42px);
-    min-height: calc(100vh - #{calculateRem(273px)});
     overflow-y: auto;
     border-bottom-left-radius: $ibexa-border-radius;
     border-width: 0 calculateRem(1px) calculateRem(1px);
     border-style: solid;
     border-color: $ibexa-color-light-400;
     background-color: $ibexa-color-white;
-    box-shadow: $ibexa-edit-content-box-shadow;
 }

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

@@ -91,8 +91,11 @@
 {% endblock %}
 
 {% block javascripts %}
+    {{ parent() }}
+
     {% include '@ezdesign/content/edit/javascripts.html.twig' %}
     {{ encore_entry_script_tags('ezplatform-admin-ui-tabs-js', null, 'ezplatform') }}
+    {{ encore_entry_script_tags('ezplatform-admin-ui-edit-base-js', null, 'ezplatform') }}
 {% endblock %}
 
 {% block stylesheets %}

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

@@ -24,5 +24,7 @@
 {% endblock %}
 
 {% block javascripts %}
+    {{ parent() }}
+
     {{ encore_entry_script_tags('ezplatform-admin-ui-content-type-edit-js', null, 'ezplatform') }}
 {% endblock %}

src/bundle/Resources/views/themes/admin/ui/component/input_text.html.twig

@@ -1,6 +1,11 @@
+{% import '@ezdesign/ui/component/macros.html.twig' as html %}
+
 {% set has_search = has_search|default(false) %}
+{% set wrapper_attr = wrapper_attr|default({})|merge({
+    class: (wrapper_attr.class|default('') ~ ' ibexa-input-text-wrapper' ~ (has_search ? ' ibexa-input-text-wrapper--search'))|trim
+}) %}
 
-<div class="ibexa-input-text-wrapper {{ has_search ? 'ibexa-input-text-wrapper--search' }}">
+<div {{ html.attributes(wrapper_attr) }}>
     {% block content %}{% endblock %}
     <div class="ibexa-input-text-wrapper__actions">
         <button type="button" class="btn ibexa-input-text-wrapper__action-btn ibexa-input-text-wrapper__action-btn--clear" tabindex="-1">