Merge pull request #260 from maximehuran/feature/some-improvements

Improve UI Elements
monsieurbiz · Feb 15, 2025 · a17a929 · a17a929
2 parents e15874d + f8f4fe5
commit a17a929
Show file tree

Hide file tree

Showing 16 changed files with 262 additions and 36 deletions.
diff --git a/src/Form/Type/UiElement/AnchorType.php b/src/Form/Type/UiElement/AnchorType.php
@@ -0,0 +1,39 @@
+<?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\UiElement;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\FormBuilderInterface;
+use Symfony\Component\Validator\Constraints as Assert;
+
+final class AnchorType extends AbstractType
+{
+    /**
+     * @SuppressWarnings(PHPMD.UnusedFormalParameter)
+     */
+    public function buildForm(FormBuilderInterface $builder, array $options): void
+    {
+        $builder
+            ->add('name', TextType::class, [
+                'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.anchor.field.name',
+                'required' => true,
+                'constraints' => [
+                    new Assert\NotBlank(),
+                    new Assert\Length(['min' => 1, 'max' => 255]),
+                ],
+            ])
+        ;
+    }
+}
diff --git a/src/Form/Type/UiElement/QuoteType.php b/src/Form/Type/UiElement/QuoteType.php
@@ -15,6 +15,7 @@
 
 use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\AlignmentType;
 use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\WysiwygType;
+use MonsieurBiz\SyliusRichEditorPlugin\WysiwygEditor\EditorInterface;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\TextType as FormTextType;
 use Symfony\Component\Form\FormBuilderInterface;
@@ -38,6 +39,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
             ->add('content', WysiwygType::class, [
                 'required' => true,
                 'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.quote.field.content',
+                'editor_toolbar_type' => EditorInterface::TOOLBAR_TYPE_MINIMAL,
                 'constraints' => [
                     new Assert\NotBlank([]),
                 ],

diff --git a/src/Form/Type/UiElement/SeparatorType.php b/src/Form/Type/UiElement/SeparatorType.php
@@ -28,6 +28,14 @@ class SeparatorType extends AbstractType
 
     public const DOTTED_STYLE = 'dotted';
 
+    public const THICKNESS_FINE = 'fine';
+
+    public const THICKNESS_MEDIUM = 'medium';
+
+    public const THICKNESS_THICK = 'thick';
+
+    public const THICKNESS_VERY_THICK = 'very-thick';
+
     /**
      * @inheritdoc
      */
@@ -46,6 +54,15 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                     'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.separator.field.style.choices.dotted' => self::DOTTED_STYLE,
                 ],
             ])
+            ->add('thickness', ChoiceType::class, [
+                'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.separator.field.thickness.label',
+                'choices' => [
+                    'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.separator.field.thickness.choices.fine' => self::THICKNESS_FINE,
+                    'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.separator.field.thickness.choices.medium' => self::THICKNESS_MEDIUM,
+                    'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.separator.field.thickness.choices.thick' => self::THICKNESS_THICK,
+                    'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.separator.field.thickness.choices.very_thick' => self::THICKNESS_VERY_THICK,
+                ],
+            ])
             ->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event): void {
                 /** @var array $data */
                 $data = $event->getData();

diff --git a/src/Form/Type/UiElement/VideoType.php b/src/Form/Type/UiElement/VideoType.php
@@ -19,6 +19,7 @@
 use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\AlignmentType;
 use MonsieurBiz\SyliusRichEditorPlugin\MonsieurBizSyliusRichEditorPlugin;
 use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
 use Symfony\Component\Form\Extension\Core\Type\FileType;
 use Symfony\Component\Form\FormBuilderInterface;
 use Symfony\Component\Form\FormEvent;
@@ -54,6 +55,15 @@ public function addFields(FormBuilderInterface $builder, array $options): void
                 'attr' => ['data-image' => 'true'],
             ])
             ->add('align', AlignmentType::class)
+            ->add('controls', CheckboxType::class, [
+                'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.video.field.controls',
+                'required' => false,
+                'data' => $options['data']['controls'] ?? true,
+            ])
+            ->add('autoplay', CheckboxType::class, [
+                'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.video.field.autoplay',
+                'required' => false,
+            ])
         ;
     }
 

diff --git a/src/Resources/config/richeditor.yaml b/src/Resources/config/richeditor.yaml
@@ -8,7 +8,7 @@ monsieurbiz_sylius_richeditor:
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.html.description'
             icon: html5
             wireframe: html
-            tags: [ default ]
+            tags: [ default, html ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\HtmlType
             templates:
@@ -20,7 +20,7 @@ monsieurbiz_sylius_richeditor:
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.text.description'
             icon: font
             wireframe: text-paragraph 
-            tags: [ default ]
+            tags: [ default, text ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\TextType
             templates:
@@ -32,7 +32,7 @@ monsieurbiz_sylius_richeditor:
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.quote.description'
             icon: quote left
             wireframe: text-quote
-            tags: [ default ]
+            tags: [ default, quote ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\QuoteType
             templates:
@@ -44,7 +44,7 @@ monsieurbiz_sylius_richeditor:
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.image.description'
             icon: file image
             wireframe: image
-            tags: [ default ]
+            tags: [ default, image ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\ImageType
             templates:
@@ -56,7 +56,7 @@ monsieurbiz_sylius_richeditor:
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.video.description'
             icon: film
             wireframe: video-default
-            tags: [ default ]
+            tags: [ default, video ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\VideoType
             templates:
@@ -68,7 +68,7 @@ monsieurbiz_sylius_richeditor:
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.button.description'
             icon: hand pointer
             wireframe: button
-            tags: [ default ]
+            tags: [ default, button ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\ButtonLinkType # ButtonLink because ButtonType make a button field displayed
             templates:
@@ -80,7 +80,7 @@ monsieurbiz_sylius_richeditor:
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.title.description'
             icon: heading
             wireframe: title
-            tags: [ default ]
+            tags: [ default, title ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\TitleType
             templates:
@@ -91,7 +91,7 @@ monsieurbiz_sylius_richeditor:
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.h1.description'
             icon: heading
             wireframe: title-h1
-            tags: [ default ]
+            tags: [ default, title, title-h1 ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\TitleType
             templates:
@@ -102,7 +102,7 @@ monsieurbiz_sylius_richeditor:
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.h2.description'
             icon: heading
             wireframe: title-h2
-            tags: [ default ]
+            tags: [ default, title, title-h2 ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\TitleType
             templates:
@@ -113,7 +113,7 @@ monsieurbiz_sylius_richeditor:
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.h3.description'
             icon: heading
             wireframe: title-h3
-            tags: [ default ]
+            tags: [ default, title, title-h3 ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\TitleType
             templates:
@@ -125,19 +125,30 @@ monsieurbiz_sylius_richeditor:
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.separator.description'
             icon: minus
             wireframe: divider
-            tags: [ default ]
+            tags: [ default, separator ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\SeparatorType
             templates:
                 admin_render: '@MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/separator.html.twig'
                 front_render: '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/separator.html.twig'
+        monsieurbiz.anchor:
+            alias: anchor
+            title: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.anchor.title'
+            description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.anchor.description'
+            icon: 'anchor'
+            classes:
+                form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\AnchorType
+            templates:
+                admin_render: '@MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/anchor.html.twig'
+                front_render: '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/anchor.html.twig'
+            tags: [default, anchor]
         monsieurbiz.youtube:
             alias: youtube
             title: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.youtube.title'
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.youtube.description'
             icon: youtube
             wireframe: video-youtube
-            tags: [ default ]
+            tags: [ default, youtube ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\YoutubeType
             templates:
@@ -149,7 +160,7 @@ monsieurbiz_sylius_richeditor:
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.image_collection.description'
             icon: images
             wireframe: image-collection
-            tags: [ default ]
+            tags: [ default, image-collection ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\ImageCollectionType
             templates:
@@ -161,7 +172,7 @@ monsieurbiz_sylius_richeditor:
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.column.description'
             icon: columns
             wireframe: column
-            tags: [ default, layout ]
+            tags: [ default, layout, column ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\ColumnType
             templates:
@@ -173,7 +184,7 @@ monsieurbiz_sylius_richeditor:
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.row.description'
             icon: bars
             wireframe: row
-            tags: [ default, layout ]
+            tags: [ default, layout, row ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\RowType
             templates:
@@ -185,7 +196,7 @@ monsieurbiz_sylius_richeditor:
             description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.markdown.description'
             icon: file code
             wireframe: markdown
-            tags: [ default ]
+            tags: [ default, markdown ]
             classes:
                 form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\MarkdownType
             templates:

diff --git a/src/Resources/translations/messages.en.yml b/src/Resources/translations/messages.en.yml
@@ -67,6 +67,8 @@ monsieurbiz_richeditor_plugin:
       field:
         video: 'Video'
         image: 'Background image'
+        controls: 'Show controls'
+        autoplay: 'Autoplay (without sound)'
     monsieurbiz.separator:
       title: 'Separator Element'
       short_description: 'A separator element'
@@ -79,6 +81,18 @@ monsieurbiz_richeditor_plugin:
            solid: 'Solid'
            dashed: 'Dashed'
            dotted: 'Dotted'
+        thickness:
+         label: 'Thickness'
+         choices:
+           fine: 'Fine'
+           medium: 'Medium'
+           thick: 'Thick'
+           very_thick: 'Very thick'
+    anchor:
+        title: Anchor
+        description: Add an anchor to be accessible by link with `#`
+        field:
+            name: Anchor's name (Without `#`)
     monsieurbiz.button:
       title: 'Button Element'
       short_description: 'A button with a text and a link.'

diff --git a/src/Resources/translations/messages.fr.yml b/src/Resources/translations/messages.fr.yml
@@ -67,6 +67,8 @@ monsieurbiz_richeditor_plugin:
       field:
         video: 'Vidéo'
         image: 'Image de fond'
+        controls: 'Afficher les contrôles'
+        autoplay: 'Lancer automatiquement la vidéo (sans le son)'
     monsieurbiz.separator:
       title: 'Lame Séparateur'
       short_description: 'Une lame permettant de faire séparateur'
@@ -79,6 +81,18 @@ monsieurbiz_richeditor_plugin:
            solid: 'Solide'
            dashed: 'Pointillé'
            dotted: 'Pointé'
+        thickness:
+         label: 'Épaisseur'
+         choices:
+           fine: 'Fine'
+           medium: 'Moyenne'
+           thick: 'Épaisse'
+           very_thick: 'Très épaisse'
+    monsieurbiz.anchor:
+      title: Ancre
+      description: Ajoute une ancre accessible avec un lien `#`
+      field:
+        name: Nom de l'ancre (Sans le `#`)
     monsieurbiz.button:
       title: 'Lame Bouton'
       short_description: 'Un bouton avec un texte et un lien.'

diff --git a/src/Resources/views/Admin/UiElement/anchor.html.twig b/src/Resources/views/Admin/UiElement/anchor.html.twig
@@ -0,0 +1,11 @@
+{#
+    UI Element template
+    type: anchor
+    element fields :
+        name
+#}
+{% if element.name is defined and element.name is not empty %}
+<div id="{{ element.name | escape('html_attr') }}">
+    #{{ element.name }}
+</div>
+{% endif %}
diff --git a/src/Resources/views/Admin/UiElement/image_collection.html.twig b/src/Resources/views/Admin/UiElement/image_collection.html.twig
@@ -3,16 +3,37 @@
     type: image_collection
     element fields :
         images
+            image
+            alt
+            title
+            link
+            link_type
 #}
-<div class="ui stackable two column grid">
+{% set imageCount = element.images|length %}
+{% set gridClasses = '' %}
+
+{% if imageCount >= 5 %}
+    {% set gridClasses = 'five column' %}
+{% elseif imageCount == 4 %}
+    {% set gridClasses = 'four column' %}
+{% elseif imageCount == 3 %}
+    {% set gridClasses = 'three column' %}
+{% elseif imageCount == 2 %}
+    {% set gridClasses = 'two column' %}
+{% else %}
+    {% set gridClasses = 'one column' %}
+{% endif %}
+
+<div class="ui {{ gridClasses }} grid my-7.5 w-full">
     {% for image in element.images %}
         <div class="column">
             {% if image.link is not empty %}
-                <a href="{{ image.link }}">
-                    <img class="ui fluid image" src="{{ monsieurbiz_richeditor_get_media_without_upload_dir(image.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
+                {% set linkIsBlank = image.link_type is defined and image.link_type == constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LinkTypeType::TYPE_EXTERNAL') %}
+                <a class="ui fluid image" href="{{ image.link }}"{% if linkIsBlank %} target="_blank" rel="noopener noreferrer"{% endif %}>
+                    <img class="ui rounded image" src="{{ monsieurbiz_richeditor_get_media_without_upload_dir(image.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
                 </a>
             {% else %}
-                <img class="ui fluid image" src="{{ monsieurbiz_richeditor_get_media_without_upload_dir(image.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
+                <img class="ui fluid rounded image" src="{{ monsieurbiz_richeditor_get_media_without_upload_dir(image.image)|imagine_filter('monsieurbiz_rich_editor_image') }}" alt="{{ image.alt|default('') }}" title="{{ image.title|default('') }}" />
             {% endif %}
         </div>
     {% endfor %}