IBX-1385: Scenario edit redesign

ibexa · Dec 8, 2021 · 967a7fc · 967a7fc
1 parent 5b98c7e
commit 967a7fc
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 22 deletions.
diff --git a/src/bundle/Resources/public/scss/mixins/_drag-and-drop.scss b/src/bundle/Resources/public/scss/mixins/_drag-and-drop.scss
@@ -88,14 +88,11 @@
     display: flex;
     width: 100%;
     margin-bottom: calculateRem(8px);
-    padding: calculateRem(11px) 0;
+    padding: calculateRem(11px);
     border: calculateRem(1px) solid $ibexa-color-light;
     border-radius: $ibexa-border-radius;
     box-shadow: calculateRem(4px) calculateRem(22px) calculateRem(20px) calculateRem(-7px) rgba($ibexa-color-info, 0.05);
-
-    &:hover {
-        cursor: grab;
-    }
+    cursor: grab;
 
     &:last-of-type {
         margin-bottom: calculateRem(24px);
@@ -104,7 +101,7 @@
     &__drag {
         display: flex;
         align-items: center;
-        padding: 0 calculateRem(8px) 0 calculateRem(16px);
+        padding: 0 calculateRem(8px) 0 calculateRem(5px);
     }
 
     &__drag-icon {

diff --git a/src/bundle/Resources/views/themes/admin/content/edit_base.html.twig b/src/bundle/Resources/views/themes/admin/content/edit_base.html.twig
@@ -3,22 +3,15 @@
 {% trans_default_domain 'content_edit' %}
 
 {% set grouped_fields = grouped_fields|default([]) %}
+{% set anchor_params = { items: grouped_fields|keys } %}
 {% set is_autosave_enabled = ibexa_user_settings['autosave'] is same as('enabled') %}
 {% set form_has_autosave = form.autosave is defined %}
 {% set default_form_templates = ibexa_admin_ui_config.contentEditFormTemplates %}
 {% set form_templates = form_templates is defined ? default_form_templates|merge(form_templates) : default_form_templates %}
-{% set extra_main_class = grouped_fields|length < 2 
-    ? 'ibexa-main-container--without-anchor-menu-items' 
-    : 'ibexa-main-container--with-anchor-menu-items'  
-%}
 
 {% form_theme form with form_templates %}
 
-{% block main_container_class %}{{ parent() }} {{ extra_main_class }}{% endblock %}
-
 {% block left_sidebar %}
-    {% set anchor_params = { items: grouped_fields|keys } %}
-
     {% if without_close_button is not defined or without_close_button != true %}
         {% set referrer_location = content is defined and is_published ? location : parent_location %}
 

diff --git a/src/bundle/Resources/views/themes/admin/content_type/edit_section.html.twig b/src/bundle/Resources/views/themes/admin/content_type/edit_section.html.twig
@@ -1,7 +1,8 @@
-<div 
-    data-anchor-section-id="{{ section_id }}" 
-    class="ibexa-content-type-edit__section ibexa-anchor-navigation-sections__section row {% if is_active|default(false) %}ibexa-anchor-navigation-sections__section--active{% endif %}"
->
+{% extends '@ezdesign/ui/edit_section.html.twig' %}
+
+{% set attr = { class: 'ibexa-content-type-edit__section' } %}
+
+{% block content %}
     <div class="col-8 ibexa-content-type-edit__section-column {{ left_column_class|default('') }}">
         <h2 class="ibexa-content-type-edit__section-column-header">{% block title %}{% endblock %}</h2>
         <div class="ibexa-content-type-edit__section-column-body">
@@ -13,4 +14,4 @@
             {% block right_column %}{% endblock %}
         </div>
     </div>
-</div>
+{% 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
@@ -2,7 +2,11 @@
 
 {% 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
+    class: (wrapper_attr.class|default('')
+        ~ ' ibexa-input-text-wrapper'
+        ~ (has_search ? ' ibexa-input-text-wrapper--search')
+        ~ (type is defined ? " ibexa-input-text-wrapper--type-#{type}")
+    )|trim
 }) %}
 
 <div {{ html.attributes(wrapper_attr) }}>

diff --git a/src/bundle/Resources/views/themes/admin/ui/edit_base.html.twig b/src/bundle/Resources/views/themes/admin/ui/edit_base.html.twig
@@ -1,6 +1,11 @@
 {% extends view_base_layout is defined ? view_base_layout : '@ibexadesign/ui/layout.html.twig' %}
 
-{% block main_container_class %}ibexa-main-container--edit-container{% endblock %}
+{% block main_container_class %}
+    ibexa-main-container--edit-container
+
+    {%- set has_anchor_menu_items = anchor_params.items|default([])|length > 1 -%}
+    {{ has_anchor_menu_items ? ' ibexa-main-container--with-anchor-menu-items' : ' ibexa-main-container--without-anchor-menu-items' }}
+{% endblock %}
 
 {% block header_row %}{% endblock %}
 

diff --git a/src/bundle/Resources/views/themes/admin/ui/edit_section.html.twig b/src/bundle/Resources/views/themes/admin/ui/edit_section.html.twig
@@ -0,0 +1,13 @@
+{% import '@ezdesign/ui/component/macros.html.twig' as html %}
+
+{% set attr = attr|default({})|merge({
+    class: (attr.class|default('')
+            ~ ' ibexa-anchor-navigation-sections__section row'
+            ~ (is_active|default(false) ? ' ibexa-anchor-navigation-sections__section--active')
+        )|trim,
+    'data-anchor-section-id': section_id,
+}) %}
+
+<div {{ html.attributes(attr) }}>
+    {% block content %}{% endblock %}
+</div>
diff --git a/src/bundle/Resources/views/themes/admin/ui/layout.html.twig b/src/bundle/Resources/views/themes/admin/ui/layout.html.twig
@@ -139,7 +139,7 @@
 
         <div class="ibexa-main-container {% block main_container_class %}{% endblock %}">
             {% block side_column %}
-                <div class="ibexa-main-container__side-column">
+                <div class="ibexa-main-container__side-column {% block side_column_class %}{% endblock %}">
                     {% block left_sidebar %}
                         {% set main_menu_context = {
                             'location': location ?? null,