From bd9a12c7490a6dc6f641dbeea7718ab7dc7d5c93 Mon Sep 17 00:00:00 2001 From: "Javi H. Gil" Date: Thu, 23 Nov 2023 14:04:07 +0100 Subject: [PATCH 01/13] Group modules edition form fields into accordions --- cms/modules/block_instance/form.html.twig | 34 ++++++++----- .../translations/sfs_cms_modules.en.yaml | 5 ++ .../translations/sfs_cms_modules.es.yaml | 5 ++ .../block_instance_by_type/form.html.twig | 34 ++++++++----- .../translations/sfs_cms_modules.en.yaml | 5 ++ .../translations/sfs_cms_modules.es.yaml | 5 ++ cms/modules/block_static/form.html.twig | 34 ++++++++----- .../translations/sfs_cms_modules.en.yaml | 5 ++ .../translations/sfs_cms_modules.es.yaml | 5 ++ cms/modules/container/form.html.twig | 28 +++++++++++ .../translations/sfs_cms_modules.en.yaml | 4 ++ .../translations/sfs_cms_modules.es.yaml | 4 ++ cms/modules/css/form.html.twig | 15 +++--- .../css/translations/sfs_cms_modules.en.yaml | 5 ++ .../css/translations/sfs_cms_modules.es.yaml | 5 ++ cms/modules/grid/form.html.twig | 28 +++++++++++ .../grid/translations/sfs_cms_modules.en.yaml | 4 ++ .../grid/translations/sfs_cms_modules.es.yaml | 4 ++ cms/modules/html/form.html.twig | 34 ++++++++----- .../html/translations/sfs_cms_modules.en.yaml | 5 ++ .../html/translations/sfs_cms_modules.es.yaml | 5 ++ cms/modules/html_headers/form.html.twig | 15 +++--- .../translations/sfs_cms_modules.en.yaml | 5 ++ .../translations/sfs_cms_modules.es.yaml | 5 ++ cms/modules/html_translatable/form.html.twig | 35 ++++++++----- .../translations/sfs_cms_modules.en.yaml | 5 ++ .../translations/sfs_cms_modules.es.yaml | 5 ++ templates/forms/modules_form_block.html.twig | 15 ++++++ templates/forms/modules_theme.html.twig | 50 ++++++++++++------- 29 files changed, 319 insertions(+), 89 deletions(-) create mode 100644 cms/modules/container/form.html.twig create mode 100644 cms/modules/grid/form.html.twig create mode 100644 templates/forms/modules_form_block.html.twig diff --git a/cms/modules/block_instance/form.html.twig b/cms/modules/block_instance/form.html.twig index 5ff679fe..54143afb 100644 --- a/cms/modules/block_instance/form.html.twig +++ b/cms/modules/block_instance/form.html.twig @@ -1,12 +1,22 @@ -
-
- {{ form_row(form.id) }} -
-
- {{ form_row(form.class) }} -
-
- {{ form_row(form.block) }} -
-
-{{ form_rest(form) }} \ No newline at end of file +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'attributes', 'accordion': accordion } %} + {% block form %} +
+
+ {{ form_row(form.id) }} +
+
+ {{ form_row(form.class) }} +
+
+ {% endblock %} +{% endembed %} + +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'block', 'accordion': accordion, 'open': true } %} + {% block form %} +
+
+ {{ form_row(form.block) }} +
+
+ {% endblock %} +{% endembed %} \ No newline at end of file diff --git a/cms/modules/block_instance/translations/sfs_cms_modules.en.yaml b/cms/modules/block_instance/translations/sfs_cms_modules.en.yaml index 67c27f14..d1e96c66 100644 --- a/cms/modules/block_instance/translations/sfs_cms_modules.en.yaml +++ b/cms/modules/block_instance/translations/sfs_cms_modules.en.yaml @@ -3,6 +3,11 @@ block_instance: prototype_button: "Block instance" prototype_button_icon: '' form: + _group: + filters: "Filters" + others: "Others" + attributes: "Attributes" + block: "Block" locale_filter.label: "Locales" site_filter.label: "Sites" id.label: "Id" diff --git a/cms/modules/block_instance/translations/sfs_cms_modules.es.yaml b/cms/modules/block_instance/translations/sfs_cms_modules.es.yaml index 3cff3cec..5143698d 100644 --- a/cms/modules/block_instance/translations/sfs_cms_modules.es.yaml +++ b/cms/modules/block_instance/translations/sfs_cms_modules.es.yaml @@ -3,6 +3,11 @@ block_instance: prototype_button: "Instancia de bloque" prototype_button_icon: '' form: + _group: + filters: "Filtros" + others: "Otros" + attributes: "Atributos" + block: "Bloque" locale_filter.label: "Idiomas" site_filter.label: "Sites" id.label: "Id" diff --git a/cms/modules/block_instance_by_type/form.html.twig b/cms/modules/block_instance_by_type/form.html.twig index 5ff679fe..54143afb 100644 --- a/cms/modules/block_instance_by_type/form.html.twig +++ b/cms/modules/block_instance_by_type/form.html.twig @@ -1,12 +1,22 @@ -
-
- {{ form_row(form.id) }} -
-
- {{ form_row(form.class) }} -
-
- {{ form_row(form.block) }} -
-
-{{ form_rest(form) }} \ No newline at end of file +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'attributes', 'accordion': accordion } %} + {% block form %} +
+
+ {{ form_row(form.id) }} +
+
+ {{ form_row(form.class) }} +
+
+ {% endblock %} +{% endembed %} + +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'block', 'accordion': accordion, 'open': true } %} + {% block form %} +
+
+ {{ form_row(form.block) }} +
+
+ {% endblock %} +{% endembed %} \ No newline at end of file diff --git a/cms/modules/block_instance_by_type/translations/sfs_cms_modules.en.yaml b/cms/modules/block_instance_by_type/translations/sfs_cms_modules.en.yaml index 1d4032e4..00c5a251 100644 --- a/cms/modules/block_instance_by_type/translations/sfs_cms_modules.en.yaml +++ b/cms/modules/block_instance_by_type/translations/sfs_cms_modules.en.yaml @@ -3,6 +3,11 @@ block_instance_by_type: prototype_button: "Block by type" prototype_button_icon: '' form: + _group: + filters: "Filters" + others: "Others" + attributes: "Attributes" + block: "Block" locale_filter.label: "Locales" site_filter.label: "Sites" id.label: "Id" diff --git a/cms/modules/block_instance_by_type/translations/sfs_cms_modules.es.yaml b/cms/modules/block_instance_by_type/translations/sfs_cms_modules.es.yaml index 8ad5c3e5..8e44979c 100644 --- a/cms/modules/block_instance_by_type/translations/sfs_cms_modules.es.yaml +++ b/cms/modules/block_instance_by_type/translations/sfs_cms_modules.es.yaml @@ -3,6 +3,11 @@ block_instance_by_type: prototype_button: "Bloque por tipo" prototype_button_icon: '' form: + _group: + filters: "Filtros" + others: "Otros" + attributes: "Atributos" + block: "Bloque" locale_filter.label: "Idiomas" site_filter.label: "Sites" id.label: "Id" diff --git a/cms/modules/block_static/form.html.twig b/cms/modules/block_static/form.html.twig index 5ff679fe..54143afb 100644 --- a/cms/modules/block_static/form.html.twig +++ b/cms/modules/block_static/form.html.twig @@ -1,12 +1,22 @@ -
-
- {{ form_row(form.id) }} -
-
- {{ form_row(form.class) }} -
-
- {{ form_row(form.block) }} -
-
-{{ form_rest(form) }} \ No newline at end of file +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'attributes', 'accordion': accordion } %} + {% block form %} +
+
+ {{ form_row(form.id) }} +
+
+ {{ form_row(form.class) }} +
+
+ {% endblock %} +{% endembed %} + +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'block', 'accordion': accordion, 'open': true } %} + {% block form %} +
+
+ {{ form_row(form.block) }} +
+
+ {% endblock %} +{% endembed %} \ No newline at end of file diff --git a/cms/modules/block_static/translations/sfs_cms_modules.en.yaml b/cms/modules/block_static/translations/sfs_cms_modules.en.yaml index 77cd5c67..141f0897 100644 --- a/cms/modules/block_static/translations/sfs_cms_modules.en.yaml +++ b/cms/modules/block_static/translations/sfs_cms_modules.en.yaml @@ -3,6 +3,11 @@ block_static: prototype_button: "Static block" prototype_button_icon: '' form: + _group: + filters: "Filters" + others: "Others" + attributes: "Attributes" + block: "Block" locale_filter.label: "Locales" site_filter.label: "Sites" id.label: "Id" diff --git a/cms/modules/block_static/translations/sfs_cms_modules.es.yaml b/cms/modules/block_static/translations/sfs_cms_modules.es.yaml index 7f442664..da131aea 100644 --- a/cms/modules/block_static/translations/sfs_cms_modules.es.yaml +++ b/cms/modules/block_static/translations/sfs_cms_modules.es.yaml @@ -3,6 +3,11 @@ block_static: prototype_button: "Bloque estático" prototype_button_icon: '' form: + _group: + filters: "Filtros" + others: "Otros" + attributes: "Atributos" + block: "Bloque" locale_filter.label: "Idiomas" site_filter.label: "Sites" id.label: "Id" diff --git a/cms/modules/container/form.html.twig b/cms/modules/container/form.html.twig new file mode 100644 index 00000000..5f1fc245 --- /dev/null +++ b/cms/modules/container/form.html.twig @@ -0,0 +1,28 @@ +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'attributes', 'accordion': accordion } %} + {% block form %} +
+
+ {{ form_row(form.id) }} +
+
+ {{ form_row(form.class) }} +
+
+ {% endblock %} +{% endembed %} + +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'properties', 'accordion': accordion, 'open': true } %} + {% block form %} +
+
+ {{ form_row(form.container_type) }} +
+
+ {{ form_row(form.tag_type) }} +
+
+ {{ form_row(form.bg_color) }} +
+
+ {% endblock %} +{% endembed %} \ No newline at end of file diff --git a/cms/modules/container/translations/sfs_cms_modules.en.yaml b/cms/modules/container/translations/sfs_cms_modules.en.yaml index 4398b32d..275f7fa1 100644 --- a/cms/modules/container/translations/sfs_cms_modules.en.yaml +++ b/cms/modules/container/translations/sfs_cms_modules.en.yaml @@ -3,6 +3,10 @@ container: prototype_button: "Container" prototype_button_icon: '' form: + _group: + filters: "Filters" + others: "Others" + attributes: "Attributes" locale_filter.label: "Locales" site_filter.label: "Sites" modules.label: "Modules" diff --git a/cms/modules/container/translations/sfs_cms_modules.es.yaml b/cms/modules/container/translations/sfs_cms_modules.es.yaml index 3c89bfb5..554702a3 100644 --- a/cms/modules/container/translations/sfs_cms_modules.es.yaml +++ b/cms/modules/container/translations/sfs_cms_modules.es.yaml @@ -3,6 +3,10 @@ container: prototype_button: "Contenedor" prototype_button_icon: '' form: + _group: + filters: "Filtros" + others: "Otros" + attributes: "Atributos" locale_filter.label: "Idiomas" site_filter.label: "Sites" modules.label: "Módulos" diff --git a/cms/modules/css/form.html.twig b/cms/modules/css/form.html.twig index 84c34cd0..fbad1c4d 100644 --- a/cms/modules/css/form.html.twig +++ b/cms/modules/css/form.html.twig @@ -1,6 +1,9 @@ -
-
- {{ form_row(form.css, {'attr': {'style': 'min-height: 400px'}}) }} -
-
-{{ form_rest(form) }} +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'code', 'accordion': accordion, 'open': true } %} + {% block form %} +
+
+ {{ form_row(form.css, {'attr': {'style': 'min-height: 400px'}}) }} +
+
+ {% endblock %} +{% endembed %} \ No newline at end of file diff --git a/cms/modules/css/translations/sfs_cms_modules.en.yaml b/cms/modules/css/translations/sfs_cms_modules.en.yaml index 54af9350..d206b060 100644 --- a/cms/modules/css/translations/sfs_cms_modules.en.yaml +++ b/cms/modules/css/translations/sfs_cms_modules.en.yaml @@ -3,6 +3,11 @@ css: prototype_button: "CSS code" prototype_button_icon: '' form: + _group: + filters: "Filters" + others: "Others" + attributes: "Attributes" + code: "Code" locale_filter.label: "Locales" site_filter.label: "Sites" css.label: "CSS styles" diff --git a/cms/modules/css/translations/sfs_cms_modules.es.yaml b/cms/modules/css/translations/sfs_cms_modules.es.yaml index bb691f5a..cdd34dfe 100644 --- a/cms/modules/css/translations/sfs_cms_modules.es.yaml +++ b/cms/modules/css/translations/sfs_cms_modules.es.yaml @@ -3,6 +3,11 @@ css: prototype_button: "Código CSS" prototype_button_icon: '' form: + _group: + filters: "Filtros" + others: "Otros" + attributes: "Atributos" + code: "Código" locale_filter.label: "Idiomas" site_filter.label: "Sites" css.label: "Estilos CSS" diff --git a/cms/modules/grid/form.html.twig b/cms/modules/grid/form.html.twig new file mode 100644 index 00000000..580441ed --- /dev/null +++ b/cms/modules/grid/form.html.twig @@ -0,0 +1,28 @@ +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'attributes', 'accordion': accordion } %} + {% block form %} +
+
+ {{ form_row(form.id) }} +
+
+ {{ form_row(form.class) }} +
+
+ {% endblock %} +{% endembed %} + +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'properties', 'accordion': accordion, 'open': true } %} + {% block form %} +
+
+ {{ form_row(form.node_row_class) }} +
+
+ {{ form_row(form.node_row_class_custom) }} +
+
+ {{ form_row(form.bg_color) }} +
+
+ {% endblock %} +{% endembed %} \ No newline at end of file diff --git a/cms/modules/grid/translations/sfs_cms_modules.en.yaml b/cms/modules/grid/translations/sfs_cms_modules.en.yaml index 41857101..7e5c1d62 100644 --- a/cms/modules/grid/translations/sfs_cms_modules.en.yaml +++ b/cms/modules/grid/translations/sfs_cms_modules.en.yaml @@ -3,6 +3,10 @@ grid: prototype_button: "Grid" prototype_button_icon: '' form: + _group: + filters: "Filters" + others: "Others" + attributes: "Attributes" locale_filter.label: "Locales" site_filter.label: "Sites" modules.label: "Modules" diff --git a/cms/modules/grid/translations/sfs_cms_modules.es.yaml b/cms/modules/grid/translations/sfs_cms_modules.es.yaml index 521f23fa..3084409b 100644 --- a/cms/modules/grid/translations/sfs_cms_modules.es.yaml +++ b/cms/modules/grid/translations/sfs_cms_modules.es.yaml @@ -3,6 +3,10 @@ grid: prototype_button: "Grid" prototype_button_icon: '' form: + _group: + filters: "Filtros" + others: "Otros" + attributes: "Atributos" locale_filter.label: "Idiomas" site_filter.label: "Sites" modules.label: "Módulos" diff --git a/cms/modules/html/form.html.twig b/cms/modules/html/form.html.twig index 24028356..d51452d0 100644 --- a/cms/modules/html/form.html.twig +++ b/cms/modules/html/form.html.twig @@ -1,12 +1,22 @@ -
-
- {{ form_row(form.id) }} -
-
- {{ form_row(form.class) }} -
-
- {{ form_row(form.code) }} -
-
-{{ form_rest(form) }} \ No newline at end of file +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'attributes', 'accordion': accordion } %} + {% block form %} +
+
+ {{ form_row(form.id) }} +
+
+ {{ form_row(form.class) }} +
+
+ {% endblock %} +{% endembed %} + +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'code', 'accordion': accordion, 'open': true } %} + {% block form %} +
+
+ {{ form_row(form.code, {'attr': {'style': 'min-height: 400px'}}) }} +
+
+ {% endblock %} +{% endembed %} \ No newline at end of file diff --git a/cms/modules/html/translations/sfs_cms_modules.en.yaml b/cms/modules/html/translations/sfs_cms_modules.en.yaml index bb31db76..3c7d5510 100644 --- a/cms/modules/html/translations/sfs_cms_modules.en.yaml +++ b/cms/modules/html/translations/sfs_cms_modules.en.yaml @@ -3,6 +3,11 @@ html: prototype_button: "HTML code" prototype_button_icon: '' form: + _group: + filters: "Filters" + others: "Others" + attributes: "Attributes" + code: "Code" locale_filter.label: "Locales" site_filter.label: "Sites" id.label: "Id" diff --git a/cms/modules/html/translations/sfs_cms_modules.es.yaml b/cms/modules/html/translations/sfs_cms_modules.es.yaml index 60b89bde..c70f0ef2 100644 --- a/cms/modules/html/translations/sfs_cms_modules.es.yaml +++ b/cms/modules/html/translations/sfs_cms_modules.es.yaml @@ -3,6 +3,11 @@ html: prototype_button: "Código HTML" prototype_button_icon: '' form: + _group: + filters: "Filtros" + others: "Otros" + attributes: "Atributos" + code: "Código" locale_filter.label: "Idiomas" site_filter.label: "Sites" id.label: "Id" diff --git a/cms/modules/html_headers/form.html.twig b/cms/modules/html_headers/form.html.twig index ca1ca2b2..d02515af 100644 --- a/cms/modules/html_headers/form.html.twig +++ b/cms/modules/html_headers/form.html.twig @@ -1,6 +1,9 @@ -
-
- {{ form_row(form.code, {'attr': {'style': 'min-height: 400px'}}) }} -
-
-{{ form_rest(form) }} +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'code', 'accordion': accordion, 'open': true } %} + {% block form %} +
+
+ {{ form_row(form.code, {'attr': {'style': 'min-height: 400px'}}) }} +
+
+ {% endblock %} +{% endembed %} \ No newline at end of file diff --git a/cms/modules/html_headers/translations/sfs_cms_modules.en.yaml b/cms/modules/html_headers/translations/sfs_cms_modules.en.yaml index b4c096b9..54c6f1f9 100644 --- a/cms/modules/html_headers/translations/sfs_cms_modules.en.yaml +++ b/cms/modules/html_headers/translations/sfs_cms_modules.en.yaml @@ -3,6 +3,11 @@ html_headers: prototype_button: "HTML headers" prototype_button_icon: '' form: + _group: + filters: "Filters" + others: "Others" + attributes: "Attributes" + code: "Code" locale_filter.label: "Locales" site_filter.label: "Sites" code: diff --git a/cms/modules/html_headers/translations/sfs_cms_modules.es.yaml b/cms/modules/html_headers/translations/sfs_cms_modules.es.yaml index aa30fee8..2cc6f8a3 100644 --- a/cms/modules/html_headers/translations/sfs_cms_modules.es.yaml +++ b/cms/modules/html_headers/translations/sfs_cms_modules.es.yaml @@ -3,6 +3,11 @@ html_headers: prototype_button: "Cabeceras HTML" prototype_button_icon: '' form: + _group: + filters: "Filtros" + others: "Otros" + attributes: "Atributos" + code: "Código" locale_filter.label: "Idiomas" site_filter.label: "Sites" code: diff --git a/cms/modules/html_translatable/form.html.twig b/cms/modules/html_translatable/form.html.twig index 24028356..c2bcaf45 100644 --- a/cms/modules/html_translatable/form.html.twig +++ b/cms/modules/html_translatable/form.html.twig @@ -1,12 +1,23 @@ -
-
- {{ form_row(form.id) }} -
-
- {{ form_row(form.class) }} -
-
- {{ form_row(form.code) }} -
-
-{{ form_rest(form) }} \ No newline at end of file +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'attributes', 'accordion': accordion } %} + {% block form %} +
+
+ {{ form_row(form.id) }} +
+
+ {{ form_row(form.class) }} +
+
+ {% endblock %} +{% endembed %} + + +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'code', 'accordion': accordion, 'open': true } %} + {% block form %} +
+
+ {{ form_row(form.code, {'attr': {'style': 'min-height: 400px'}}) }} +
+
+ {% endblock %} +{% endembed %} \ No newline at end of file diff --git a/cms/modules/html_translatable/translations/sfs_cms_modules.en.yaml b/cms/modules/html_translatable/translations/sfs_cms_modules.en.yaml index 0ab5d1ab..bb3a2ed7 100644 --- a/cms/modules/html_translatable/translations/sfs_cms_modules.en.yaml +++ b/cms/modules/html_translatable/translations/sfs_cms_modules.en.yaml @@ -3,6 +3,11 @@ html_translatable: prototype_button: "Translatable HTML" prototype_button_icon: '' form: + _group: + filters: "Filters" + others: "Others" + attributes: "Attributes" + code: "Code" locale_filter.label: "Locales" site_filter.label: "Sites" id.label: "Id" diff --git a/cms/modules/html_translatable/translations/sfs_cms_modules.es.yaml b/cms/modules/html_translatable/translations/sfs_cms_modules.es.yaml index 9fb9c216..b0e4488d 100644 --- a/cms/modules/html_translatable/translations/sfs_cms_modules.es.yaml +++ b/cms/modules/html_translatable/translations/sfs_cms_modules.es.yaml @@ -3,6 +3,11 @@ html_translatable: prototype_button: "HTML traducible" prototype_button_icon: '' form: + _group: + filters: "Filtros" + others: "Otros" + attributes: "Atributos" + code: "Código" locale_filter.label: "Idiomas" site_filter.label: "Sites" id.label: "Id" diff --git a/templates/forms/modules_form_block.html.twig b/templates/forms/modules_form_block.html.twig new file mode 100644 index 00000000..5f142993 --- /dev/null +++ b/templates/forms/modules_form_block.html.twig @@ -0,0 +1,15 @@ +{% set itemId = 'block_'~random(1..100000) %} +{% set open = open is defined ? open : false %} +
+

+ +

+
+
+ {% block form %}{% endblock %} +
+
+
\ No newline at end of file diff --git a/templates/forms/modules_theme.html.twig b/templates/forms/modules_theme.html.twig index 07814a42..1223a554 100644 --- a/templates/forms/modules_theme.html.twig +++ b/templates/forms/modules_theme.html.twig @@ -133,7 +133,7 @@ {# form_name #} -
+
{% if form.vars.errors|length %}
From d5e6bed730fe9ed54b308c2c2791cf7c660ba611 Mon Sep 17 00:00:00 2001 From: "Javi H. Gil" Date: Thu, 23 Nov 2023 15:28:29 +0100 Subject: [PATCH 02/13] Remove rows --- cms/modules/block_instance/form.html.twig | 18 +++++------ .../block_instance_by_type/form.html.twig | 18 +++++------ cms/modules/block_static/form.html.twig | 18 +++++------ cms/modules/container/form.html.twig | 30 ++++++++----------- cms/modules/css/form.html.twig | 6 ++-- cms/modules/grid/form.html.twig | 30 ++++++++----------- cms/modules/html/form.html.twig | 18 +++++------ cms/modules/html_headers/form.html.twig | 6 ++-- cms/modules/html_translatable/form.html.twig | 18 +++++------ templates/forms/modules_form_block.html.twig | 4 +++ templates/forms/modules_theme.html.twig | 10 ++++--- 11 files changed, 75 insertions(+), 101 deletions(-) diff --git a/cms/modules/block_instance/form.html.twig b/cms/modules/block_instance/form.html.twig index 54143afb..9e993488 100644 --- a/cms/modules/block_instance/form.html.twig +++ b/cms/modules/block_instance/form.html.twig @@ -1,22 +1,18 @@ {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'attributes', 'accordion': accordion } %} {% block form %} -
-
- {{ form_row(form.id) }} -
-
- {{ form_row(form.class) }} -
+
+ {{ form_row(form.id) }} +
+
+ {{ form_row(form.class) }}
{% endblock %} {% endembed %} {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'block', 'accordion': accordion, 'open': true } %} {% block form %} -
-
- {{ form_row(form.block) }} -
+
+ {{ form_row(form.block) }}
{% endblock %} {% endembed %} \ No newline at end of file diff --git a/cms/modules/block_instance_by_type/form.html.twig b/cms/modules/block_instance_by_type/form.html.twig index 54143afb..9e993488 100644 --- a/cms/modules/block_instance_by_type/form.html.twig +++ b/cms/modules/block_instance_by_type/form.html.twig @@ -1,22 +1,18 @@ {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'attributes', 'accordion': accordion } %} {% block form %} -
-
- {{ form_row(form.id) }} -
-
- {{ form_row(form.class) }} -
+
+ {{ form_row(form.id) }} +
+
+ {{ form_row(form.class) }}
{% endblock %} {% endembed %} {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'block', 'accordion': accordion, 'open': true } %} {% block form %} -
-
- {{ form_row(form.block) }} -
+
+ {{ form_row(form.block) }}
{% endblock %} {% endembed %} \ No newline at end of file diff --git a/cms/modules/block_static/form.html.twig b/cms/modules/block_static/form.html.twig index 54143afb..9e993488 100644 --- a/cms/modules/block_static/form.html.twig +++ b/cms/modules/block_static/form.html.twig @@ -1,22 +1,18 @@ {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'attributes', 'accordion': accordion } %} {% block form %} -
-
- {{ form_row(form.id) }} -
-
- {{ form_row(form.class) }} -
+
+ {{ form_row(form.id) }} +
+
+ {{ form_row(form.class) }}
{% endblock %} {% endembed %} {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'block', 'accordion': accordion, 'open': true } %} {% block form %} -
-
- {{ form_row(form.block) }} -
+
+ {{ form_row(form.block) }}
{% endblock %} {% endembed %} \ No newline at end of file diff --git a/cms/modules/container/form.html.twig b/cms/modules/container/form.html.twig index 5f1fc245..139cef32 100644 --- a/cms/modules/container/form.html.twig +++ b/cms/modules/container/form.html.twig @@ -1,28 +1,24 @@ {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'attributes', 'accordion': accordion } %} {% block form %} -
-
- {{ form_row(form.id) }} -
-
- {{ form_row(form.class) }} -
+
+ {{ form_row(form.id) }} +
+
+ {{ form_row(form.class) }}
{% endblock %} {% endembed %} {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'properties', 'accordion': accordion, 'open': true } %} {% block form %} -
-
- {{ form_row(form.container_type) }} -
-
- {{ form_row(form.tag_type) }} -
-
- {{ form_row(form.bg_color) }} -
+
+ {{ form_row(form.container_type) }} +
+
+ {{ form_row(form.tag_type) }} +
+
+ {{ form_row(form.bg_color) }}
{% endblock %} {% endembed %} \ No newline at end of file diff --git a/cms/modules/css/form.html.twig b/cms/modules/css/form.html.twig index fbad1c4d..6df97a57 100644 --- a/cms/modules/css/form.html.twig +++ b/cms/modules/css/form.html.twig @@ -1,9 +1,7 @@ {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'code', 'accordion': accordion, 'open': true } %} {% block form %} -
-
- {{ form_row(form.css, {'attr': {'style': 'min-height: 400px'}}) }} -
+
+ {{ form_row(form.css, {'attr': {'style': 'min-height: 400px'}}) }}
{% endblock %} {% endembed %} \ No newline at end of file diff --git a/cms/modules/grid/form.html.twig b/cms/modules/grid/form.html.twig index 580441ed..173317d3 100644 --- a/cms/modules/grid/form.html.twig +++ b/cms/modules/grid/form.html.twig @@ -1,28 +1,24 @@ {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'attributes', 'accordion': accordion } %} {% block form %} -
-
- {{ form_row(form.id) }} -
-
- {{ form_row(form.class) }} -
+
+ {{ form_row(form.id) }} +
+
+ {{ form_row(form.class) }}
{% endblock %} {% endembed %} {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'properties', 'accordion': accordion, 'open': true } %} {% block form %} -
-
- {{ form_row(form.node_row_class) }} -
-
- {{ form_row(form.node_row_class_custom) }} -
-
- {{ form_row(form.bg_color) }} -
+
+ {{ form_row(form.node_row_class) }} +
+
+ {{ form_row(form.node_row_class_custom) }} +
+
+ {{ form_row(form.bg_color) }}
{% endblock %} {% endembed %} \ No newline at end of file diff --git a/cms/modules/html/form.html.twig b/cms/modules/html/form.html.twig index d51452d0..42124b8d 100644 --- a/cms/modules/html/form.html.twig +++ b/cms/modules/html/form.html.twig @@ -1,22 +1,18 @@ {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'attributes', 'accordion': accordion } %} {% block form %} -
-
- {{ form_row(form.id) }} -
-
- {{ form_row(form.class) }} -
+
+ {{ form_row(form.id) }} +
+
+ {{ form_row(form.class) }}
{% endblock %} {% endembed %} {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'code', 'accordion': accordion, 'open': true } %} {% block form %} -
-
- {{ form_row(form.code, {'attr': {'style': 'min-height: 400px'}}) }} -
+
+ {{ form_row(form.code, {'attr': {'style': 'min-height: 400px'}}) }}
{% endblock %} {% endembed %} \ No newline at end of file diff --git a/cms/modules/html_headers/form.html.twig b/cms/modules/html_headers/form.html.twig index d02515af..e106d5be 100644 --- a/cms/modules/html_headers/form.html.twig +++ b/cms/modules/html_headers/form.html.twig @@ -1,9 +1,7 @@ {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'code', 'accordion': accordion, 'open': true } %} {% block form %} -
-
- {{ form_row(form.code, {'attr': {'style': 'min-height: 400px'}}) }} -
+
+ {{ form_row(form.code, {'attr': {'style': 'min-height: 400px'}}) }}
{% endblock %} {% endembed %} \ No newline at end of file diff --git a/cms/modules/html_translatable/form.html.twig b/cms/modules/html_translatable/form.html.twig index c2bcaf45..64268786 100644 --- a/cms/modules/html_translatable/form.html.twig +++ b/cms/modules/html_translatable/form.html.twig @@ -1,12 +1,10 @@ {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'attributes', 'accordion': accordion } %} {% block form %} -
-
- {{ form_row(form.id) }} -
-
- {{ form_row(form.class) }} -
+
+ {{ form_row(form.id) }} +
+
+ {{ form_row(form.class) }}
{% endblock %} {% endembed %} @@ -14,10 +12,8 @@ {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'code', 'accordion': accordion, 'open': true } %} {% block form %} -
-
- {{ form_row(form.code, {'attr': {'style': 'min-height: 400px'}}) }} -
+
+ {{ form_row(form.code, {'attr': {'style': 'min-height: 400px'}}) }}
{% endblock %} {% endembed %} \ No newline at end of file diff --git a/templates/forms/modules_form_block.html.twig b/templates/forms/modules_form_block.html.twig index 5f142993..315320d6 100644 --- a/templates/forms/modules_form_block.html.twig +++ b/templates/forms/modules_form_block.html.twig @@ -1,5 +1,7 @@ {% set itemId = 'block_'~random(1..100000) %} {% set open = open is defined ? open : false %} +{% set row = row is defined ? row : true %} +

\ No newline at end of file diff --git a/templates/forms/modules_theme.html.twig b/templates/forms/modules_theme.html.twig index 1223a554..f4127a27 100644 --- a/templates/forms/modules_theme.html.twig +++ b/templates/forms/modules_theme.html.twig @@ -165,13 +165,15 @@ {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'filters', 'accordion': 'moduleForm-'~id } %} {% block form %} {% if form.site_filter is defined %} - {{ form_label(form.site_filter) }} - {{ form_widget(form.site_filter) }} +
+ {{ form_row(form.site_filter) }} +
{% endif %} {% if form.locale_filter is defined %} - {{ form_label(form.locale_filter) }} - {{ form_widget(form.locale_filter) }} +
+ {{ form_row(form.locale_filter) }} +
{% endif %} {% endblock %} {% endembed %} From 9b3543f89d81684b69f056219b3c44b531e26582 Mon Sep 17 00:00:00 2001 From: "Javi H. Gil" Date: Fri, 24 Nov 2023 13:21:36 +0100 Subject: [PATCH 03/13] Add missing translations --- templates/forms/modules_theme.html.twig | 2 +- translations/sfs_cms_admin.en.yaml | 2 ++ translations/sfs_cms_admin.es.yaml | 2 ++ 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/templates/forms/modules_theme.html.twig b/templates/forms/modules_theme.html.twig index 8882814b..4bf621b6 100644 --- a/templates/forms/modules_theme.html.twig +++ b/templates/forms/modules_theme.html.twig @@ -326,7 +326,7 @@
-

{{ form.vars.name }}

+

{{ 'admin_content.content.modules_modal.label'|trans({}, 'sfs_cms_admin') }}

diff --git a/translations/sfs_cms_admin.en.yaml b/translations/sfs_cms_admin.en.yaml index 6f48a2a6..23ed3610 100644 --- a/translations/sfs_cms_admin.en.yaml +++ b/translations/sfs_cms_admin.en.yaml @@ -4,6 +4,8 @@ admin: admin_content: content: max_input_vars_raw: "You have reached the max_input_vars (%maxInputVars%). Please remove some fields to continue.
If you need to increase this limit, please contact your provider." + modules_modal: + label: "Select module" admin_blocks: list: diff --git a/translations/sfs_cms_admin.es.yaml b/translations/sfs_cms_admin.es.yaml index aca050d0..2650ccff 100644 --- a/translations/sfs_cms_admin.es.yaml +++ b/translations/sfs_cms_admin.es.yaml @@ -4,6 +4,8 @@ admin: admin_content: content: max_input_vars_raw: "Has alcanzado el número máximo de campos soportados (%maxInputVars%). Por favor, elimina algunos módulos para continuar.
Si es necesario incrementar este límite habla con tu proveedor." + modules_modal: + label: "Selecciona el módulo" admin_blocks: list: From 90708347431029ac467c89c680501a696c5dc137 Mon Sep 17 00:00:00 2001 From: "Javi H. Gil" Date: Fri, 24 Nov 2023 13:23:51 +0100 Subject: [PATCH 04/13] Highlight linked elements on content edition --- .../content-edit/preview-contenteditable.js | 112 ++++++++++++++++++ assets/styles/admin-cms.scss | 4 + 2 files changed, 116 insertions(+) diff --git a/assets/scripts/admin/content-edit/preview-contenteditable.js b/assets/scripts/admin/content-edit/preview-contenteditable.js index c1c99b90..c81ce630 100644 --- a/assets/scripts/admin/content-edit/preview-contenteditable.js +++ b/assets/scripts/admin/content-edit/preview-contenteditable.js @@ -97,4 +97,116 @@ window.addEventListener('load', (event) => { } } }); + + /** ************************************************************************************************************ * + * Highlighting input and target elements on focus on linked elements + * ************************************************************************************************************* */ + + /** + * Show accordion item, same as click on it + */ + function accordionItemShow(accordionItem) { + let formGroupCollapse = accordionItem.querySelector('.collapse'); + let formGroupButton = accordionItem.querySelector('.accordion-header button'); + + formGroupCollapse.classList.add('show'); + formGroupCollapse.classList.remove('d-none'); + formGroupButton.setAttribute('aria-expanded', 'true'); + formGroupButton.classList.remove('collapsed'); + } + + /** + * Hide accordion item + */ + function accordionItemHide(accordionItem) { + let formGroupCollapse = accordionItem.querySelector('.collapse'); + let formGroupButton = accordionItem.querySelector('.accordion-header button'); + + formGroupCollapse.classList.remove('show'); + formGroupCollapse.classList.add('d-none'); + formGroupButton.setAttribute('aria-expanded', 'false'); + formGroupButton.classList.add('collapsed'); + } + + /** + * Show form group accordion item, and hide the rest + */ + function showFormGroup(accordionElement) { + accordionItemShow(accordionElement); + + let accordion = accordionElement.closest('.accordion'); + let accordionItems = accordion.querySelectorAll('.accordion-item'); + accordionItems.forEach(function(accordionItem) { + if (accordionItem !== accordionElement) { + accordionItemHide(accordionItem); + } + }); + } + + /** + * On focus in and input, highlights the target element + */ + window.addEventListener('focusin', function (event) { + if (!event.target || !event.target.hasAttribute('data-edit-content-input')) return; + + let modulePreview = event.target.closest('.cms-module-edit').querySelector('.module-preview'); + + let htmlTargetElements = modulePreview.querySelectorAll("[data-edit-content-target='" + event.target.dataset.editContentInput + "']"); + if (htmlTargetElements.length) { + htmlTargetElements.forEach(function(htmlTargetElement) { + htmlTargetElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" }); + htmlTargetElement.classList.add('edit-content-linked-focus'); + }); + } + }); + + /** + * On focus in a content editable element, highlights the input element + */ + window.addEventListener('focusin', function (event) { + if (!event.target || !event.target.hasAttribute('data-edit-content-target')) return; + + let moduleForm = event.target.closest('.cms-module-edit').querySelector('.cms-module-form'); + + let htmlInputElements = moduleForm.querySelectorAll("[data-edit-content-input='" + event.target.dataset.editContentTarget + "']"); + if (htmlInputElements.length) { + htmlInputElements.forEach(function(htmlInputElement) { + htmlInputElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" }); + htmlInputElement.classList.add('edit-content-linked-focus'); + showFormGroup(htmlInputElement.closest('.accordion-item')); + }); + } + }); + + /** + * On focus out and input, un-highlights the target element + */ + window.addEventListener('focusout', function (event) { + if (!event.target || !event.target.hasAttribute('data-edit-content-input')) return; + + let modulePreview = event.target.closest('.cms-module-edit').querySelector('.module-preview'); + + let htmlTargetElements = modulePreview.querySelectorAll("[data-edit-content-target='" + event.target.dataset.editContentInput + "']"); + if (htmlTargetElements.length) { + htmlTargetElements.forEach(function(htmlTargetElement) { + htmlTargetElement.classList.remove('edit-content-linked-focus'); + }); + } + }); + + /** + * On focus out a content editable element, un-highlights the input element + */ + window.addEventListener('focusout', function (event) { + if (!event.target || !event.target.hasAttribute('data-edit-content-target')) return; + + let moduleForm = event.target.closest('.cms-module-edit').querySelector('.cms-module-form'); + + let htmlInputElements = moduleForm.querySelectorAll("[data-edit-content-input='" + event.target.dataset.editContentTarget + "']"); + if (htmlInputElements.length) { + htmlInputElements.forEach(function(htmlInputElement) { + htmlInputElement.classList.remove('edit-content-linked-focus'); + }); + } + }); }); diff --git a/assets/styles/admin-cms.scss b/assets/styles/admin-cms.scss index cabe2007..8effe07b 100644 --- a/assets/styles/admin-cms.scss +++ b/assets/styles/admin-cms.scss @@ -389,3 +389,7 @@ body { border-radius: 50%; background-color: #f1f1f1; } + +.edit-content-linked-focus { + box-shadow: 0 0 15px rgba($primary, .5); +} \ No newline at end of file From 1fdfb6e3771ff0cab598a2976bc28af1e6cb45e7 Mon Sep 17 00:00:00 2001 From: "Javi H. Gil" Date: Fri, 24 Nov 2023 13:24:14 +0100 Subject: [PATCH 05/13] Close modal on insert modules --- assets/scripts/admin/content-edit/modules.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/assets/scripts/admin/content-edit/modules.js b/assets/scripts/admin/content-edit/modules.js index 823a2431..db27c245 100644 --- a/assets/scripts/admin/content-edit/modules.js +++ b/assets/scripts/admin/content-edit/modules.js @@ -1,5 +1,6 @@ import { filterCurrentFilterElements } from './filter-preview'; import { getPolymorphicCollectionLastIndex } from '@softspring/polymorphic-form-type/scripts/polymorphic-form-type'; +import { Modal } from 'bootstrap'; window.addEventListener('load', (event) => { function moduleFocus(module) { @@ -171,6 +172,8 @@ window.addEventListener('load', (event) => { // reset variables modulesCollection = null; modulesCollectionInsertIndex = null; + + Modal.getInstance(prototypesModal).hide(); }); /** @@ -193,6 +196,8 @@ window.addEventListener('load', (event) => { up.classList.add('bi-chevron-left'); } + Modal.getInstance(prototypesModal).hide(); + moduleFocus(event.node().querySelector('.cms-module')); // on insert focus into first contenteditable element From 84a8276a95efdb8b4e9705284f4916392f7f85b3 Mon Sep 17 00:00:00 2001 From: "Javi H. Gil" Date: Sat, 25 Nov 2023 17:40:39 +0100 Subject: [PATCH 06/13] Add debug module --- cms/modules/debug/config.yaml | 6 ++++++ cms/modules/debug/edit.html.twig | 2 ++ cms/modules/debug/render.html.twig | 1 + cms/modules/debug/translations/sfs_cms_modules.en.yaml | 8 ++++++++ cms/modules/debug/translations/sfs_cms_modules.es.yaml | 8 ++++++++ 5 files changed, 25 insertions(+) create mode 100644 cms/modules/debug/config.yaml create mode 100644 cms/modules/debug/edit.html.twig create mode 100644 cms/modules/debug/render.html.twig create mode 100644 cms/modules/debug/translations/sfs_cms_modules.en.yaml create mode 100644 cms/modules/debug/translations/sfs_cms_modules.es.yaml diff --git a/cms/modules/debug/config.yaml b/cms/modules/debug/config.yaml new file mode 100644 index 00000000..7d7ae1b6 --- /dev/null +++ b/cms/modules/debug/config.yaml @@ -0,0 +1,6 @@ +module: + revision: 1 + group: 'basic' + enabled: false + edit_template: '@module/debug/edit.html.twig' + module_type: 'Softspring\CmsBundle\Form\Module\EmptyModuleType' diff --git a/cms/modules/debug/edit.html.twig b/cms/modules/debug/edit.html.twig new file mode 100644 index 00000000..d679be96 --- /dev/null +++ b/cms/modules/debug/edit.html.twig @@ -0,0 +1,2 @@ +
{{ form.vars.id }}
+
{{ form.vars.full_name }}
\ No newline at end of file diff --git a/cms/modules/debug/render.html.twig b/cms/modules/debug/render.html.twig new file mode 100644 index 00000000..91c408fa --- /dev/null +++ b/cms/modules/debug/render.html.twig @@ -0,0 +1 @@ +{# nothing to render #} \ No newline at end of file diff --git a/cms/modules/debug/translations/sfs_cms_modules.en.yaml b/cms/modules/debug/translations/sfs_cms_modules.en.yaml new file mode 100644 index 00000000..c73c7606 --- /dev/null +++ b/cms/modules/debug/translations/sfs_cms_modules.en.yaml @@ -0,0 +1,8 @@ +debug: + label: "Debug" + prototype_button: "Debug" + prototype_button_icon: '' + form: + _group: + filters: "Filters" + locale_filter.label: "Locales" diff --git a/cms/modules/debug/translations/sfs_cms_modules.es.yaml b/cms/modules/debug/translations/sfs_cms_modules.es.yaml new file mode 100644 index 00000000..dec11daa --- /dev/null +++ b/cms/modules/debug/translations/sfs_cms_modules.es.yaml @@ -0,0 +1,8 @@ +debug: + label: "Debug" + prototype_button: "Debug" + prototype_button_icon: '' + form: + _group: + filters: "Filtros" + locale_filter.label: "Idiomas" \ No newline at end of file From fa3e8747685c16072bd1d1557abcddaf88077a80 Mon Sep 17 00:00:00 2001 From: "Javi H. Gil" Date: Sat, 25 Nov 2023 17:41:02 +0100 Subject: [PATCH 07/13] Improve container module configuration --- cms/modules/container/config.yaml | 19 +++++++++++-------- .../translations/sfs_cms_modules.en.yaml | 1 + .../translations/sfs_cms_modules.es.yaml | 1 + 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/cms/modules/container/config.yaml b/cms/modules/container/config.yaml index 2c1b6226..d77f6420 100644 --- a/cms/modules/container/config.yaml +++ b/cms/modules/container/config.yaml @@ -2,6 +2,7 @@ module: revision: 2 group: 'container' edit_template: '@module/container/edit.html.twig' + form_template: '@module/container/form.html.twig' module_type: 'Softspring\CmsBundle\Form\Module\ContainerModuleType' module_options: module_collection_class: 'container' @@ -11,24 +12,26 @@ module: form_fields: id: type: 'id' + + class: + type: 'class' container_type: type: 'choice' type_options: + default_value: 'container' choices: - "container.form.container_type.values.container": container - "container.form.container_type.values.fluid": container-fluid + "container.form.container_type.values.container": 'container' + "container.form.container_type.values.fluid": 'container-fluid' tag_type: type: 'choice' type_options: + default_value: 'div' choices: - "container.form.tag_type.values.div": div - "container.form.tag_type.values.section": section - "container.form.tag_type.values.article": article - - class: - type: 'class' + "container.form.tag_type.values.div": 'div' + "container.form.tag_type.values.section": 'section' + "container.form.tag_type.values.article": 'article' bg_color: type: 'color' diff --git a/cms/modules/container/translations/sfs_cms_modules.en.yaml b/cms/modules/container/translations/sfs_cms_modules.en.yaml index 275f7fa1..854bff51 100644 --- a/cms/modules/container/translations/sfs_cms_modules.en.yaml +++ b/cms/modules/container/translations/sfs_cms_modules.en.yaml @@ -7,6 +7,7 @@ container: filters: "Filters" others: "Others" attributes: "Attributes" + properties: "Properties" locale_filter.label: "Locales" site_filter.label: "Sites" modules.label: "Modules" diff --git a/cms/modules/container/translations/sfs_cms_modules.es.yaml b/cms/modules/container/translations/sfs_cms_modules.es.yaml index 554702a3..0d2d06e6 100644 --- a/cms/modules/container/translations/sfs_cms_modules.es.yaml +++ b/cms/modules/container/translations/sfs_cms_modules.es.yaml @@ -7,6 +7,7 @@ container: filters: "Filtros" others: "Otros" attributes: "Atributos" + properties: "Propiedades" locale_filter.label: "Idiomas" site_filter.label: "Sites" modules.label: "Módulos" From c0ca8e678a3af0eefeb509ac49526a76453eb065 Mon Sep 17 00:00:00 2001 From: "Javi H. Gil" Date: Sat, 25 Nov 2023 17:42:11 +0100 Subject: [PATCH 08/13] Improve form theme for content edition --- templates/forms/modules_form_block.html.twig | 2 +- templates/forms/modules_theme.html.twig | 217 +++++++------------ templates/macros/modules_edit.html.twig | 10 + 3 files changed, 94 insertions(+), 135 deletions(-) diff --git a/templates/forms/modules_form_block.html.twig b/templates/forms/modules_form_block.html.twig index 315320d6..918f91b8 100644 --- a/templates/forms/modules_form_block.html.twig +++ b/templates/forms/modules_form_block.html.twig @@ -4,7 +4,7 @@

- diff --git a/templates/forms/modules_theme.html.twig b/templates/forms/modules_theme.html.twig index 4bf621b6..a2892460 100644 --- a/templates/forms/modules_theme.html.twig +++ b/templates/forms/modules_theme.html.twig @@ -95,6 +95,81 @@

{% endblock %} +{% block module_edit_form %} + {% if form.vars.errors|length %} + + {% endif %} + + {% if form.vars.deprecated %} + + {% endif %} + + {{ form_widget(form._module) }} + {{ form_widget(form._revision) }} + +
+ {% if form.site_filter is defined or form.locale_filter is defined %} + {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'filters', 'accordion': 'moduleForm-'~id } %} + {% block form %} + {% if form.site_filter is defined %} +
+ {{ form_row(form.site_filter) }} +
+ {% endif %} + + {% if form.locale_filter is defined %} +
+ {{ form_row(form.locale_filter) }} +
+ {% endif %} + {% endblock %} + {% endembed %} + {% endif %} + + {% if form_template|default(false) %} + {% include form_template with {'accordion': 'moduleForm-'~id} %} + {% endif %} + + {% if form|filter(child => not child.rendered)|length %} + {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'others', 'accordion': 'moduleForm-'~id } %} + {% block form %} + {{ form_rest(form) }} + {% endblock %} + {% endembed %} + {% endif %} +
+{% endblock %} + +{% block module_edit_header %} +
+ {{ form.vars.name }} + + + {{ ( form.vars.prototype_button_label~'_icon')|trans(form.vars.label_translation_parameters, form.vars.translation_domain)|raw }} + + + {{ form.vars.label|trans(form.vars.label_translation_parameters, form.vars.translation_domain) }} + {% if form.vars.deprecated %}{% endif %} +
+ {# form_name #} + +{% endblock %} + {% block dynamic_form_module_row %}
@@ -119,77 +194,10 @@
-
- {{ form.vars.name }} - - - {{ ( form.vars.prototype_button_label~'_icon')|trans(form.vars.label_translation_parameters, form.vars.translation_domain)|raw }} - - - {{ form.vars.label|trans(form.vars.label_translation_parameters, form.vars.translation_domain) }} - {% if form.vars.deprecated %}{% endif %} -
- {# form_name #} - + {{ block('module_edit_header') }}
- {% if form.vars.errors|length %} - - {% endif %} - - {% if form.vars.deprecated %} - - {% endif %} - - {{ form_widget(form._module) }} - {{ form_widget(form._revision) }} - -
- {% if form.site_filter is defined or form.locale_filter is defined %} - {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'filters', 'accordion': 'moduleForm-'~id } %} - {% block form %} - {% if form.site_filter is defined %} -
- {{ form_row(form.site_filter) }} -
- {% endif %} - - {% if form.locale_filter is defined %} -
- {{ form_row(form.locale_filter) }} -
- {% endif %} - {% endblock %} - {% endembed %} - {% endif %} - - {% if form_template|default(false) %} - {% include form_template with {'accordion': 'moduleForm-'~id} %} - {% endif %} - - {% if form|filter(child => not child.rendered)|length %} - {% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'others', 'accordion': 'moduleForm-'~id } %} - {% block form %} - {{ form_rest(form) }} - {% endblock %} - {% endembed %} - {% endif %} -
+ {{ block('module_edit_form') }}
@@ -219,41 +227,12 @@
-
- {{ form.vars.name }} - - - {{ ( form.vars.prototype_button_label~'_icon')|trans(form.vars.label_translation_parameters, form.vars.translation_domain)|raw }} - - - {{ form.vars.label|trans(form.vars.label_translation_parameters, form.vars.translation_domain) }} - {% if form.vars.deprecated %}{% endif %} -
- + {{ block('module_edit_header') }}
-
- {% if form.vars.deprecated %} - - {% endif %} - - {% if form.site_filter is defined %} - {{ form_label(form.site_filter) }} - {{ form_widget(form.site_filter) }} - {% endif %} - - {% if form.locale_filter is defined %} - {{ form_label(form.locale_filter) }} - {{ form_widget(form.locale_filter) }} - {% endif %} - - {% if form_template|default(false) %} - {% include form_template %} - {% else %} - {{ form_widget(form) }} - {% endif %} +
+ {{ block('module_edit_form') }}
- {{ form_rest(form) }}
{% endblock container_module_widget %} @@ -282,42 +261,12 @@
-
- {{ form.vars.name }} - - - {{ ( form.vars.prototype_button_label~'_icon')|trans(form.vars.label_translation_parameters, form.vars.translation_domain)|raw }} - - - {{ form.vars.label|trans(form.vars.label_translation_parameters, form.vars.translation_domain) }} - {% if form.vars.deprecated %}{% endif %} -
- {# form_name #} - + {{ block('module_edit_header') }}
-
- {% if form.vars.deprecated %} - - {% endif %} - - {% if form.site_filter is defined %} - {{ form_label(form.site_filter) }} - {{ form_widget(form.site_filter) }} - {% endif %} - - {% if form.locale_filter is defined %} - {{ form_label(form.locale_filter) }} - {{ form_widget(form.locale_filter) }} - {% endif %} - - {% if form_template|default(false) %} - {% include form_template %} - {% else %} - {{ form_widget(form) }} - {% endif %} +
+ {{ block('module_edit_form') }}
- {{ form_rest(form) }}
{% endblock empty_module_widget %} diff --git a/templates/macros/modules_edit.html.twig b/templates/macros/modules_edit.html.twig index 642ee9ad..7eda176f 100644 --- a/templates/macros/modules_edit.html.twig +++ b/templates/macros/modules_edit.html.twig @@ -158,6 +158,16 @@ {%- endapply -%} {%- endmacro -%} +{# + # This macro inserts data attribute for inserting module on pressing enter + # @see assets/scripts/admin/content-edit/content-enter-inserts-module.js + #} +{%- macro enter_inserts_module (moduleId) -%} +{%- apply spaceless -%} + data-edit-content-enter-inserts-module="{{ moduleId }}" +{%- endapply -%} +{%- endmacro -%} + {%- macro _module_name (formField) -%} {%- apply spaceless -%} {% if formField.parent._module is defined %} From aedf5fbb18601727423e9b8d12e716b66a8d8d1e Mon Sep 17 00:00:00 2001 From: "Javi H. Gil" Date: Sat, 25 Nov 2023 17:42:29 +0100 Subject: [PATCH 09/13] Close modal after module insert --- assets/scripts/admin/content-edit/modules.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/assets/scripts/admin/content-edit/modules.js b/assets/scripts/admin/content-edit/modules.js index db27c245..1f140f03 100644 --- a/assets/scripts/admin/content-edit/modules.js +++ b/assets/scripts/admin/content-edit/modules.js @@ -173,7 +173,8 @@ window.addEventListener('load', (event) => { modulesCollection = null; modulesCollectionInsertIndex = null; - Modal.getInstance(prototypesModal).hide(); + const modal = Modal.getInstance(prototypesModal); + modal && modal.hide(); }); /** @@ -196,7 +197,8 @@ window.addEventListener('load', (event) => { up.classList.add('bi-chevron-left'); } - Modal.getInstance(prototypesModal).hide(); + const modal = Modal.getInstance(prototypesModal); + modal && modal.hide(); moduleFocus(event.node().querySelector('.cms-module')); From e9c79f03cf54fe1014cb676c0adf92302e182962 Mon Sep 17 00:00:00 2001 From: "Javi H. Gil" Date: Mon, 27 Nov 2023 23:09:03 +0100 Subject: [PATCH 10/13] Review modules --- cms/modules/container/config.yaml | 13 ++++++- cms/modules/container/edit.html.twig | 27 +++++++------- cms/modules/container/form.html.twig | 15 +++----- .../translations/sfs_cms_modules.en.yaml | 1 - .../translations/sfs_cms_modules.es.yaml | 1 - cms/modules/debug/config.yaml | 1 + cms/modules/debug/form.html.twig | 0 cms/modules/grid/config.yaml | 11 ++++++ cms/modules/grid/edit.html.twig | 35 ++++++++++--------- cms/modules/grid/form.html.twig | 15 +++----- .../grid/translations/sfs_cms_modules.en.yaml | 1 + .../grid/translations/sfs_cms_modules.es.yaml | 1 + 12 files changed, 68 insertions(+), 53 deletions(-) create mode 100644 cms/modules/debug/form.html.twig diff --git a/cms/modules/container/config.yaml b/cms/modules/container/config.yaml index d77f6420..e2cb83c1 100644 --- a/cms/modules/container/config.yaml +++ b/cms/modules/container/config.yaml @@ -12,10 +12,16 @@ module: form_fields: id: type: 'id' + type_options: + attr: + data-edit-id-input: 'containerDivId' class: type: 'class' - + type_options: + attr: + data-edit-class-input: 'containerDivClass' + container_type: type: 'choice' type_options: @@ -23,6 +29,8 @@ module: choices: "container.form.container_type.values.container": 'container' "container.form.container_type.values.fluid": 'container-fluid' + attr: + data-edit-class-input: 'containerDivClass' tag_type: type: 'choice' @@ -35,3 +43,6 @@ module: bg_color: type: 'color' + type_options: + attr: + data-edit-bgcolor-input: 'containerDivBgColor' diff --git a/cms/modules/container/edit.html.twig b/cms/modules/container/edit.html.twig index 5b233baf..b0ac2d66 100644 --- a/cms/modules/container/edit.html.twig +++ b/cms/modules/container/edit.html.twig @@ -1,16 +1,17 @@ {% import '@SfsCms/macros/modules_edit.html.twig' as module %} -{% set tagType = form.tag_type.vars.data|default('div') %} -{% set containerType = form.container_type.vars.data|default('container') %} +{{ form_row(form.modules, {'container': { + 'attr': { + 'id': form.id.vars.data, + 'data-edit-id-target': 'containerDivId', -<{{ tagType }} {{ module.link_class(form.class, 'border border-2 module-container') }} {{ module.link_bg_color(form.bg_color) }}> - {{ form_row(form.modules, {'container': { - 'attr': { - 'id': form.id.vars.data, - 'class': 'py-5 '~form.class.vars.data|default(''), - 'data-edit-id-target': 'containerIdDiv', - 'data-edit-class-target': 'containerClassDiv', - 'data-edit-class-default': 'py-5', - } - }}) }} - + 'class': 'py-5 '~(form.class.vars.data|default)~' '~(form.container_type.vars.data), + 'data-edit-class-target': 'containerDivClass', + 'data-edit-class-default': 'py-5', + + 'data-edit-bgcolor-target': 'containerDivBgColor', + 'style': module.bg_color_style(form.bg_color), + } +}, + 'module_collection_class': '' +}) }} diff --git a/cms/modules/container/form.html.twig b/cms/modules/container/form.html.twig index 139cef32..13f8f30c 100644 --- a/cms/modules/container/form.html.twig +++ b/cms/modules/container/form.html.twig @@ -1,16 +1,11 @@ -{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'attributes', 'accordion': accordion } %} +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'properties', 'accordion': accordion, 'open': true } %} {% block form %} -
- {{ form_row(form.id) }} +
+ {{ form_widget(form.id) }}
-
- {{ form_row(form.class) }} +
+ {{ form_widget(form.class) }}
- {% endblock %} -{% endembed %} - -{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'properties', 'accordion': accordion, 'open': true } %} - {% block form %}
{{ form_row(form.container_type) }}
diff --git a/cms/modules/container/translations/sfs_cms_modules.en.yaml b/cms/modules/container/translations/sfs_cms_modules.en.yaml index 854bff51..de395ea8 100644 --- a/cms/modules/container/translations/sfs_cms_modules.en.yaml +++ b/cms/modules/container/translations/sfs_cms_modules.en.yaml @@ -6,7 +6,6 @@ container: _group: filters: "Filters" others: "Others" - attributes: "Attributes" properties: "Properties" locale_filter.label: "Locales" site_filter.label: "Sites" diff --git a/cms/modules/container/translations/sfs_cms_modules.es.yaml b/cms/modules/container/translations/sfs_cms_modules.es.yaml index 0d2d06e6..058fc74e 100644 --- a/cms/modules/container/translations/sfs_cms_modules.es.yaml +++ b/cms/modules/container/translations/sfs_cms_modules.es.yaml @@ -6,7 +6,6 @@ container: _group: filters: "Filtros" others: "Otros" - attributes: "Atributos" properties: "Propiedades" locale_filter.label: "Idiomas" site_filter.label: "Sites" diff --git a/cms/modules/debug/config.yaml b/cms/modules/debug/config.yaml index 7d7ae1b6..efb0e717 100644 --- a/cms/modules/debug/config.yaml +++ b/cms/modules/debug/config.yaml @@ -3,4 +3,5 @@ module: group: 'basic' enabled: false edit_template: '@module/debug/edit.html.twig' + form_template: '@module/debug/form.html.twig' module_type: 'Softspring\CmsBundle\Form\Module\EmptyModuleType' diff --git a/cms/modules/debug/form.html.twig b/cms/modules/debug/form.html.twig new file mode 100644 index 00000000..e69de29b diff --git a/cms/modules/grid/config.yaml b/cms/modules/grid/config.yaml index 93b1cbe1..cbe5017f 100644 --- a/cms/modules/grid/config.yaml +++ b/cms/modules/grid/config.yaml @@ -2,6 +2,7 @@ module: revision: 1 group: 'container' edit_template: '@module/grid/edit.html.twig' + form_template: '@module/grid/form.html.twig' module_type: 'Softspring\CmsBundle\Form\Module\ContainerModuleType' module_options: module_collection_class: 'row' @@ -11,16 +12,26 @@ module: form_fields: id: type: 'id' + type_options: + attr: + data-edit-id-input: 'gridDivId' class: type: 'class' + type_options: + attr: + data-edit-class-input: 'gridDivClass' bg_color: type: 'color' + type_options: + attr: + data-edit-bgcolor-input: 'gridDivBgColor' node_row_class: type: 'choice' type_options: + default_value: 'col' choices: "grid.form.node_row_class.values.col": 'col' "grid.form.node_row_class.values.col-1": 'col-1' diff --git a/cms/modules/grid/edit.html.twig b/cms/modules/grid/edit.html.twig index 7fb7d7cb..ff7263b3 100644 --- a/cms/modules/grid/edit.html.twig +++ b/cms/modules/grid/edit.html.twig @@ -1,21 +1,22 @@ {% import '@SfsCms/macros/modules_edit.html.twig' as module %} -
- {{ form_row(form.modules, { - 'container': { - 'attr': { - 'id': form.id.vars.data, - 'class': 'py-5 '~form.class.vars.data|default(''), - 'data-edit-id-target': 'gridIdDiv', - 'data-edit-class-target': 'gridClassDiv', - 'data-edit-class-default': 'p-2', - 'data-edit-bgcolor-target': 'gridColorDiv', - 'data-edit-collection-node-class-target': 'gridCollection', - 'style': form.bg_color.vars.data ? 'background-color:'~form.bg_color.vars.data : '' - } - }, +{{ form_row(form.modules, { + 'container': { 'attr': { - 'data-module-row-class': form.node_row_class.vars.data|default(form.node_row_class_custom.vars.data|default('col mb-4')) + 'id': form.id.vars.data, + 'data-edit-id-target': 'gridDivId', + + 'class': 'py-5 '~(form.class.vars.data|default), + 'data-edit-class-target': 'gridDivClass', + 'data-edit-class-default': 'py-5', + + 'data-edit-bgcolor-target': 'gridDivBgColor', + 'style': form.bg_color.vars.data ? 'background-color:'~form.bg_color.vars.data : '', + + 'data-edit-collection-node-class-target': 'gridCollection', } - }) }} -
+ }, + 'attr': { + 'data-module-row-class': form.node_row_class.vars.data|default(form.node_row_class_custom.vars.data|default('col mb-4')) + } +}) }} \ No newline at end of file diff --git a/cms/modules/grid/form.html.twig b/cms/modules/grid/form.html.twig index 173317d3..8fc5980a 100644 --- a/cms/modules/grid/form.html.twig +++ b/cms/modules/grid/form.html.twig @@ -1,16 +1,11 @@ -{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'attributes', 'accordion': accordion } %} +{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'properties', 'accordion': accordion, 'open':true } %} {% block form %} -
- {{ form_row(form.id) }} +
+ {{ form_widget(form.id) }}
-
- {{ form_row(form.class) }} +
+ {{ form_widget(form.class) }}
- {% endblock %} -{% endembed %} - -{% embed '@SfsCms/forms/modules_form_block.html.twig' with { 'name': 'properties', 'accordion': accordion, 'open': true } %} - {% block form %}
{{ form_row(form.node_row_class) }}
diff --git a/cms/modules/grid/translations/sfs_cms_modules.en.yaml b/cms/modules/grid/translations/sfs_cms_modules.en.yaml index 7e5c1d62..a83272a9 100644 --- a/cms/modules/grid/translations/sfs_cms_modules.en.yaml +++ b/cms/modules/grid/translations/sfs_cms_modules.en.yaml @@ -7,6 +7,7 @@ grid: filters: "Filters" others: "Others" attributes: "Attributes" + properties: "Properties" locale_filter.label: "Locales" site_filter.label: "Sites" modules.label: "Modules" diff --git a/cms/modules/grid/translations/sfs_cms_modules.es.yaml b/cms/modules/grid/translations/sfs_cms_modules.es.yaml index 3084409b..40b06cd8 100644 --- a/cms/modules/grid/translations/sfs_cms_modules.es.yaml +++ b/cms/modules/grid/translations/sfs_cms_modules.es.yaml @@ -7,6 +7,7 @@ grid: filters: "Filtros" others: "Otros" attributes: "Atributos" + properties: "Propiedades" locale_filter.label: "Idiomas" site_filter.label: "Sites" modules.label: "Módulos" From df72b06ca11dd003a2f3a2b6b7933a9ee28d86fd Mon Sep 17 00:00:00 2001 From: "Javi H. Gil" Date: Mon, 27 Nov 2023 23:09:45 +0100 Subject: [PATCH 11/13] Fix preview-class function for containers --- assets/scripts/admin/content-edit/preview-class.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/scripts/admin/content-edit/preview-class.js b/assets/scripts/admin/content-edit/preview-class.js index 0b71d4a3..024e906c 100644 --- a/assets/scripts/admin/content-edit/preview-class.js +++ b/assets/scripts/admin/content-edit/preview-class.js @@ -11,8 +11,8 @@ window.addEventListener('load', (event) => { document.addEventListener('input', function (event) { if (!event.target || !event.target.hasAttribute('data-edit-class-input')) return; - let modulePreview = event.target.closest('.cms-module-edit').querySelector('.module-preview'); - let moduleForm = event.target.closest('.cms-module-edit').querySelector('.cms-module-form'); + let modulePreview = event.target.closest('.cms-module-edit').querySelector(':scope > .module-preview'); + let moduleForm = event.target.closest('.cms-module-edit').querySelector(':scope > .cms-module-form'); let htmlTargetElements = modulePreview.querySelectorAll("[data-edit-class-target='" + event.target.dataset.editClassInput + "']"); let htmlInputsElements = moduleForm.querySelectorAll("[data-edit-class-input='" + event.target.dataset.editClassInput + "']"); From cd218a243c5dac637125b2a0e4c8cc4e488e12a3 Mon Sep 17 00:00:00 2001 From: "Javi H. Gil" Date: Tue, 28 Nov 2023 15:12:51 +0100 Subject: [PATCH 12/13] Improve contenteditable style in admin --- assets/styles/admin-cms.scss | 6 ++++ templates/forms/types_theme.html.twig | 40 +++++++++++++++++++++++ templates/macros/modules_render.html.twig | 13 ++++++-- 3 files changed, 57 insertions(+), 2 deletions(-) diff --git a/assets/styles/admin-cms.scss b/assets/styles/admin-cms.scss index 8effe07b..4d6ce089 100644 --- a/assets/styles/admin-cms.scss +++ b/assets/styles/admin-cms.scss @@ -390,6 +390,12 @@ body { background-color: #f1f1f1; } +[contenteditable]:focus-visible { + outline: none !important; +} +[contenteditable]:focus { + box-shadow: 0 0 15px rgba($primary, .5) !important; +} .edit-content-linked-focus { box-shadow: 0 0 15px rgba($primary, .5); } \ No newline at end of file diff --git a/templates/forms/types_theme.html.twig b/templates/forms/types_theme.html.twig index 6f695172..5e8e138b 100644 --- a/templates/forms/types_theme.html.twig +++ b/templates/forms/types_theme.html.twig @@ -206,3 +206,43 @@ {{ form_row(form.target) }} {{ form_row(form.custom_target) }} {% endblock link_widget %} + +{% block spacing_widget %} +
+
+
 
+
 
+
{{ form_widget(form.marginTop, {'attr': {'style': 'width: 40px; padding: 0; display: inline-block'}}) }}
+
 
+
 
+
+
+
 
+
 
+
{{ form_widget(form.paddingTop, {'attr': {'style': 'width: 40px; padding: 0; display: inline-block'}}) }}
+
 
+
 
+
+
+
{{ form_widget(form.marginStart, {'attr': {'style': 'width: 40px; padding: 0; display: inline-block'}}) }}
+
{{ form_widget(form.paddingStart, {'attr': {'style': 'width: 40px; padding: 0; display: inline-block'}}) }}
+
 
+
{{ form_widget(form.paddingEnd, {'attr': {'style': 'width: 40px; padding: 0; display: inline-block'}}) }}
+
{{ form_widget(form.marginEnd, {'attr': {'style': 'width: 40px; padding: 0; display: inline-block'}}) }}
+
+
+
 
+
 
+
{{ form_widget(form.paddingBottom, {'attr': {'style': 'width: 40px; padding: 0; display: inline-block'}}) }}
+
 
+
 
+
+
+
 
+
 
+
{{ form_widget(form.marginBottom, {'attr': {'style': 'width: 40px; padding: 0; display: inline-block'}}) }}
+
 
+
 
+
+
+{% endblock spacing_widget %} \ No newline at end of file diff --git a/templates/macros/modules_render.html.twig b/templates/macros/modules_render.html.twig index 7a2632fd..a8552ca6 100644 --- a/templates/macros/modules_render.html.twig +++ b/templates/macros/modules_render.html.twig @@ -4,9 +4,18 @@ {% endapply %} {%- endmacro -%} -{%- macro class (classesValue, defaultClasses = '') -%} +{%- macro class (classesValues, defaultClasses = '') -%} {% apply spaceless %} - {% if classesValue|default or defaultClasses|default %}class="{{ (defaultClasses~' '~classesValue|default(''))|trim }}"{% endif %} + {% set classes = defaultClasses %} + {% if classesValues is not iterable %} + {% set classesValues = [classesValues] %} + {% endif %} + + {% for classesValue in classesValues %} + {% set classes = ((classes is empty ? '' : classes~' ') ~ classesValue)|trim %} + {% endfor %} + + {% if classes|default %}class="{{ classes|trim }}"{% endif %} {% endapply %} {%- endmacro -%} From 14b60d4ca3f555f3821248db607e17ccf2ae3289 Mon Sep 17 00:00:00 2001 From: "Javi H. Gil" Date: Tue, 28 Nov 2023 15:13:21 +0100 Subject: [PATCH 13/13] Add new SpacingType --- src/Form/Type/SpacingType.php | 113 ++++++++++++++++++++++++++++++++++ src/Utils/ModuleMigrator.php | 45 ++++++++++++++ 2 files changed, 158 insertions(+) create mode 100644 src/Form/Type/SpacingType.php diff --git a/src/Form/Type/SpacingType.php b/src/Form/Type/SpacingType.php new file mode 100644 index 00000000..1292e8f6 --- /dev/null +++ b/src/Form/Type/SpacingType.php @@ -0,0 +1,113 @@ +add('marginTop', ChoiceType::class, [ + 'choice_translation_domain' => false, + 'choices' => [ + '0' => '', + '1' => 'mt-1', + '2' => 'mt-2', + '3' => 'mt-3', + '4' => 'mt-4', + '5' => 'mt-5', + ] + ]); + + $builder->add('marginEnd', ChoiceType::class, [ + 'choice_translation_domain' => false, + 'choices' => [ + '0' => '', + '1' => 'me-1', + '2' => 'me-2', + '3' => 'me-3', + '4' => 'me-4', + '5' => 'me-5', + ] + ]); + + $builder->add('marginBottom', ChoiceType::class, [ + 'choice_translation_domain' => false, + 'choices' => [ + '0' => '', + '1' => 'mb-1', + '2' => 'mb-2', + '3' => 'mb-3', + '4' => 'mb-4', + '5' => 'mb-5', + ] + ]); + + $builder->add('marginStart', ChoiceType::class, [ + 'choice_translation_domain' => false, + 'choices' => [ + '0' => '', + '1' => 'ms-1', + '2' => 'ms-2', + '3' => 'ms-3', + '4' => 'ms-4', + '5' => 'ms-5', + ] + ]); + $builder->add('paddingTop', ChoiceType::class, [ + 'choice_translation_domain' => false, + 'choices' => [ + '0' => '', + '1' => 'pt-1', + '2' => 'pt-2', + '3' => 'pt-3', + '4' => 'pt-4', + '5' => 'pt-5', + ] + ]); + + $builder->add('paddingEnd', ChoiceType::class, [ + 'choice_translation_domain' => false, + 'choices' => [ + '0' => '', + '1' => 'pe-1', + '2' => 'pe-2', + '3' => 'pe-3', + '4' => 'pe-4', + '5' => 'pe-5', + ] + ]); + + $builder->add('paddingBottom', ChoiceType::class, [ + 'choice_translation_domain' => false, + 'choices' => [ + '0' => '', + '1' => 'pb-1', + '2' => 'pb-2', + '3' => 'pb-3', + '4' => 'pb-4', + '5' => 'pb-5', + ] + ]); + + $builder->add('paddingStart', ChoiceType::class, [ + 'choice_translation_domain' => false, + 'choices' => [ + '0' => '', + '1' => 'ps-1', + '2' => 'ps-2', + '3' => 'ps-3', + '4' => 'ps-4', + '5' => 'ps-5', + ] + ]); + } +} \ No newline at end of file diff --git a/src/Utils/ModuleMigrator.php b/src/Utils/ModuleMigrator.php index 305886ba..40eec920 100644 --- a/src/Utils/ModuleMigrator.php +++ b/src/Utils/ModuleMigrator.php @@ -41,4 +41,49 @@ public static function symfonyRouteToLink(?array $symfonyRoute): array 'custom_target' => null, ]; } + + public static function classToSpacing(string $class): array + { + $spacing = [ + 'marginTop' => '', + 'marginEnd' => '', + 'marginBottom' => '', + 'marginStart' => '', + 'paddingTop' => '', + 'paddingEnd' => '', + 'paddingBottom' => '', + 'paddingStart' => '', + ]; + + preg_match_all('/([mp][tbesxy]?\-[012345])/', $class, $matches); + + foreach ($matches[0] as $match) { + $class = str_replace($match, '', $class); + + $match = explode('-', $match); + $marginOrPadding = substr($match[0], 0, 1); + $p = substr($match[0], 1, 1); + $amount = $match[1]; + + $mp = ['m' => 'margin', 'p' => 'padding'][$marginOrPadding]; + $positions = [ + 't' => ['Top'], + 'b' => ['Bottom'], + 'e' => ['End'], + 's' => ['Start'], + '' => ['Top', 'End', 'Bottom', 'Start'], + 'y' => ['Top', 'Bottom'], + 'x' => ['End', 'Start'], + ][$p]; + + foreach ($positions as $position) { + $p = strtolower(substr($position, 0, 1)); + $spacing["$mp$position"] = "$marginOrPadding$p-$amount"; + } + } + + $class = implode(' ', array_filter(explode(' ', $class))); + + return [$class, $spacing]; + } }