feat(title): improve title element

monsieurbiz · Feb 20, 2025 · 3ccd590 · 3ccd590
1 parent 47ad0bc
commit 3ccd590
Show file tree

Hide file tree

Showing 7 changed files with 203 additions and 2 deletions.
diff --git a/src/Form/Type/TagType.php b/src/Form/Type/TagType.php
@@ -0,0 +1,50 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz' Rich Editor plugin for Sylius.
+ *
+ * (c) Monsieur Biz <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE.txt
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type;
+
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class TagType extends ChoiceType
+{
+    public const TAG_H1 = 'h1';
+
+    public const TAG_H2 = 'h2';
+
+    public const TAG_H3 = 'h3';
+
+    public const TAG_H4 = 'h4';
+
+    public const TAG_H5 = 'h5';
+
+    public const TAG_H6 = 'h6';
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        parent::configureOptions($resolver);
+        $resolver->setDefaults([
+            'label' => 'monsieurbiz_richeditor_plugin.form.tag.label',
+            'help' => 'monsieurbiz_richeditor_plugin.form.tag.label_help',
+            'choices' => [
+                'monsieurbiz_richeditor_plugin.form.tag.default' => '',
+                'monsieurbiz_richeditor_plugin.form.tag.h1' => self::TAG_H1,
+                'monsieurbiz_richeditor_plugin.form.tag.h2' => self::TAG_H2,
+                'monsieurbiz_richeditor_plugin.form.tag.h3' => self::TAG_H3,
+                'monsieurbiz_richeditor_plugin.form.tag.h4' => self::TAG_H4,
+                'monsieurbiz_richeditor_plugin.form.tag.h5' => self::TAG_H5,
+                'monsieurbiz_richeditor_plugin.form.tag.h6' => self::TAG_H6,
+            ],
+        ]);
+    }
+}
diff --git a/src/Form/Type/TextSizeType.php b/src/Form/Type/TextSizeType.php
@@ -0,0 +1,50 @@
+<?php
+
+/*
+ * This file is part of Monsieur Biz' Rich Editor plugin for Sylius.
+ *
+ * (c) Monsieur Biz <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE.txt
+ * file that was distributed with this source code.
+ */
+
+declare(strict_types=1);
+
+namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type;
+
+use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class TextSizeType extends ChoiceType
+{
+    public const SIZE_XS = 'xs';
+
+    public const SIZE_S = 's';
+
+    public const SIZE_M = 'm';
+
+    public const SIZE_L = 'l';
+
+    public const SIZE_XL = 'xl';
+
+    public const SIZE_XXL = 'xxl';
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        parent::configureOptions($resolver);
+        $resolver->setDefaults([
+            'label' => 'monsieurbiz_richeditor_plugin.form.text_size.label',
+            'help' => 'monsieurbiz_richeditor_plugin.form.text_size.label_help',
+            'choices' => [
+                'monsieurbiz_richeditor_plugin.form.text_size.default' => '',
+                'monsieurbiz_richeditor_plugin.form.text_size.xs' => self::SIZE_XS,
+                'monsieurbiz_richeditor_plugin.form.text_size.s' => self::SIZE_S,
+                'monsieurbiz_richeditor_plugin.form.text_size.m' => self::SIZE_M,
+                'monsieurbiz_richeditor_plugin.form.text_size.l' => self::SIZE_L,
+                'monsieurbiz_richeditor_plugin.form.text_size.xl' => self::SIZE_XL,
+                'monsieurbiz_richeditor_plugin.form.text_size.xxl' => self::SIZE_XXL,
+            ],
+        ]);
+    }
+}
diff --git a/src/Form/Type/UiElement/TitleType.php b/src/Form/Type/UiElement/TitleType.php
@@ -14,6 +14,9 @@
 namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement;
 
 use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\AlignmentType;
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\LevelType;
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\TagType;
+use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\TextSizeType;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\Validator\Constraints as Assert;
@@ -33,8 +36,18 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                     new Assert\NotBlank([]),
                 ],
             ])
+            ->add('text_size', TextSizeType::class, [
+                'required' => false,
+            ])
+            ->add('tag', TagType::class, [
+                'required' => false,
+            ])
             ->add('align', AlignmentType::class, [
                 'show_justify' => true,
+                'required' => false,
+            ])
+            ->add('level', LevelType::class, [
+                'required' => false,
             ])
         ;
     }

diff --git a/src/Resources/translations/messages.en.yml b/src/Resources/translations/messages.en.yml
@@ -156,6 +156,25 @@ monsieurbiz_richeditor_plugin:
         primary: 'Primary'
         secondary: 'Secondary'
         tertiary: 'Tertiary'
+    tag:
+        label: 'HTML Tag'
+        label_help: 'The HTML tag to use for this title. By default, it is a <div> tag.'
+        default: 'Default (div)'
+        h1: '<h1>'
+        h2: '<h2>'
+        h3: '<h3>'
+        h4: '<h4>'
+        h5: '<h5>'
+        h6: '<h6>'
+    text_size:
+        label: 'Text size'
+        default: 'Default (Extra large)'
+        xs: 'Extra Small'
+        s: 'Small'
+        m: 'Medium'
+        l: 'Large'
+        xl: 'Extra Large'
+        xxl: 'Extra Extra Large'
     clipboard: 'Clipboard'
     paste_from_clipboard: 'Paste from clipboard'
     paste_all_from_clipboard: 'Paste all elements'

diff --git a/src/Resources/translations/messages.fr.yml b/src/Resources/translations/messages.fr.yml
@@ -156,6 +156,25 @@ monsieurbiz_richeditor_plugin:
         primary: 'Primaire'
         secondary: 'Secondaire'
         tertiary: 'Tertiaire'
+    tag:
+        label: 'Balise HTML'
+        label_help: 'La balise HTML à utiliser pour ce titre. Par défaut, c''est une balise <div>'
+        default: 'Par défaut (div)'
+        h1: '<h1>'
+        h2: '<h2>'
+        h3: '<h3>'
+        h4: '<h4>'
+        h5: '<h5>'
+        h6: '<h6>'
+    text_size:
+        label: 'Taille du texte'
+        default: 'Défaut (Très grand)'
+        xs: 'Très petit'
+        s: 'Petit'
+        m: 'Moyen'
+        l: 'Grand'
+        xl: 'Très grand'
+        xxl: 'Extra grand'
     clipboard: 'Presse-papier'
     paste_from_clipboard: 'Coller depuis le presse-papier'
     paste_all_from_clipboard: 'Coller tous les éléments'

diff --git a/src/Resources/views/Admin/UiElement/title.html.twig b/src/Resources/views/Admin/UiElement/title.html.twig
@@ -3,9 +3,34 @@
     type: title
     element fields :
         content
+        text_size
+        tag
+        level
         align
 #}
+
 {% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
+{% set tag = element.tag is defined and element.tag is not empty ? element.tag : 'div' %}
+
+{% set textSize = element.text_size is defined and element.text_size is not empty ? element.text_size : '' %}
+{% set textSizeMap = {
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_XS')): 'tiny',
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_S')): 'small',
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_M')): 'medium',
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_L')): 'large',
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_XL')): 'huge',
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_XXL')): 'very huge',
+} %}
+{% set textSize = textSizeMap[textSize]|default(textSizeMap[constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_XL')]) %}
+
+{% set titleColor = element.level is defined and element.level is not empty ? element.level : '' %}
+{% set titleColorMap = {
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LevelType::PRIMARY_LEVEL')): '#000000',
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LevelType::SECONDARY_LEVEL')): '#666666',
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LevelType::TERTIARY_LEVEL')): '#999999',
+} %}
+{% set titleColor = titleColorMap[titleColor]|default('') %}
+
 {% if element is not empty %}
-    <div class="ui huge header" style="text-align: {{align}};">{{ element.content }}</div>
+    <{{tag}} class="ui {{ textSize }} header" style="text-align: {{align}};{% if titleColor %}color: {{titleColor}};{% endif %}">{{ element.content }}</{{tag}}>
 {% endif %}
diff --git a/src/Resources/views/Shop/UiElement/title.html.twig b/src/Resources/views/Shop/UiElement/title.html.twig
@@ -3,9 +3,34 @@
     type: title
     element fields :
         content
+        text_size
+        tag
+        level
         align
 #}
+
 {% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
+{% set tag = element.tag is defined and element.tag is not empty ? element.tag : 'div' %}
+
+{% set textSize = element.text_size is defined and element.text_size is not empty ? element.text_size : '' %}
+{% set textSizeMap = {
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_XS')): 'tiny',
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_S')): 'small',
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_M')): 'medium',
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_L')): 'large',
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_XL')): 'huge',
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_XXL')): 'very huge',
+} %}
+{% set textSize = textSizeMap[textSize]|default(textSizeMap[constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_XL')]) %}
+
+{% set titleColor = element.level is defined and element.level is not empty ? element.level : '' %}
+{% set titleColorMap = {
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LevelType::PRIMARY_LEVEL')): '#000000',
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LevelType::SECONDARY_LEVEL')): '#666666',
+    (constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LevelType::TERTIARY_LEVEL')): '#999999',
+} %}
+{% set titleColor = titleColorMap[titleColor]|default('') %}
+
 {% if element is not empty %}
-    <div class="ui huge header" style="text-align: {{align}};">{{ element.content }}</div>
+    <{{tag}} class="ui {{ textSize }} header" style="text-align: {{align}};{% if titleColor %}color: {{titleColor}};{% endif %}">{{ element.content }}</{{tag}}>
 {% endif %}