Skip to content

Commit a17a929

Browse files
maximehuranmaximehuran
authored
Merge pull request #260 from maximehuran/feature/some-improvements
Improve UI Elements
2 parents e15874d + f8f4fe5 commit a17a929

File tree

16 files changed

+262
-36
lines changed

16 files changed

+262
-36
lines changed

‎src/Form/Type/UiElement/AnchorType.php‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<?php
2+
3+
/*
4+
* This file is part of Monsieur Biz' Rich Editor plugin for Sylius.
5+
*
6+
* (c) Monsieur Biz <[email protected]>
7+
*
8+
* For the full copyright and license information, please view the LICENSE.txt
9+
* file that was distributed with this source code.
10+
*/
11+
12+
declare(strict_types=1);
13+
14+
namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement;
15+
16+
use Symfony\Component\Form\AbstractType;
17+
use Symfony\Component\Form\Extension\Core\Type\TextType;
18+
use Symfony\Component\Form\FormBuilderInterface;
19+
use Symfony\Component\Validator\Constraints as Assert;
20+
21+
final class AnchorType extends AbstractType
22+
{
23+
/**
24+
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
25+
*/
26+
public function buildForm(FormBuilderInterface $builder, array $options): void
27+
{
28+
$builder
29+
->add('name', TextType::class, [
30+
'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.anchor.field.name',
31+
'required' => true,
32+
'constraints' => [
33+
new Assert\NotBlank(),
34+
new Assert\Length(['min' => 1, 'max' => 255]),
35+
],
36+
])
37+
;
38+
}
39+
}

‎src/Form/Type/UiElement/QuoteType.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515

1616
use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\AlignmentType;
1717
use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\WysiwygType;
18+
use MonsieurBiz\SyliusRichEditorPlugin\WysiwygEditor\EditorInterface;
1819
use Symfony\Component\Form\AbstractType;
1920
use Symfony\Component\Form\Extension\Core\Type\TextType as FormTextType;
2021
use Symfony\Component\Form\FormBuilderInterface;
@@ -38,6 +39,7 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
3839
->add('content', WysiwygType::class, [
3940
'required' => true,
4041
'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.quote.field.content',
42+
'editor_toolbar_type' => EditorInterface::TOOLBAR_TYPE_MINIMAL,
4143
'constraints' => [
4244
new Assert\NotBlank([]),
4345
],

‎src/Form/Type/UiElement/SeparatorType.php‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,14 @@ class SeparatorType extends AbstractType
2828

2929
public const DOTTED_STYLE = 'dotted';
3030

31+
public const THICKNESS_FINE = 'fine';
32+
33+
public const THICKNESS_MEDIUM = 'medium';
34+
35+
public const THICKNESS_THICK = 'thick';
36+
37+
public const THICKNESS_VERY_THICK = 'very-thick';
38+
3139
/**
3240
* @inheritdoc
3341
*/
@@ -46,6 +54,15 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
4654
'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.separator.field.style.choices.dotted' => self::DOTTED_STYLE,
4755
],
4856
])
57+
->add('thickness', ChoiceType::class, [
58+
'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.separator.field.thickness.label',
59+
'choices' => [
60+
'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.separator.field.thickness.choices.fine' => self::THICKNESS_FINE,
61+
'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.separator.field.thickness.choices.medium' => self::THICKNESS_MEDIUM,
62+
'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.separator.field.thickness.choices.thick' => self::THICKNESS_THICK,
63+
'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.separator.field.thickness.choices.very_thick' => self::THICKNESS_VERY_THICK,
64+
],
65+
])
4966
->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event): void {
5067
/** @var array $data */
5168
$data = $event->getData();

‎src/Form/Type/UiElement/VideoType.php‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\AlignmentType;
2020
use MonsieurBiz\SyliusRichEditorPlugin\MonsieurBizSyliusRichEditorPlugin;
2121
use Symfony\Component\Form\AbstractType;
22+
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
2223
use Symfony\Component\Form\Extension\Core\Type\FileType;
2324
use Symfony\Component\Form\FormBuilderInterface;
2425
use Symfony\Component\Form\FormEvent;
@@ -54,6 +55,15 @@ public function addFields(FormBuilderInterface $builder, array $options): void
5455
'attr' => ['data-image' => 'true'],
5556
])
5657
->add('align', AlignmentType::class)
58+
->add('controls', CheckboxType::class, [
59+
'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.video.field.controls',
60+
'required' => false,
61+
'data' => $options['data']['controls'] ?? true,
62+
])
63+
->add('autoplay', CheckboxType::class, [
64+
'label' => 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.video.field.autoplay',
65+
'required' => false,
66+
])
5767
;
5868
}
5969

‎src/Resources/config/richeditor.yaml‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ monsieurbiz_sylius_richeditor:
88
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.html.description'
99
icon: html5
1010
wireframe: html
11-
tags: [ default ]
11+
tags: [ default, html ]
1212
classes:
1313
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\HtmlType
1414
templates:
@@ -20,7 +20,7 @@ monsieurbiz_sylius_richeditor:
2020
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.text.description'
2121
icon: font
2222
wireframe: text-paragraph
23-
tags: [ default ]
23+
tags: [ default, text ]
2424
classes:
2525
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\TextType
2626
templates:
@@ -32,7 +32,7 @@ monsieurbiz_sylius_richeditor:
3232
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.quote.description'
3333
icon: quote left
3434
wireframe: text-quote
35-
tags: [ default ]
35+
tags: [ default, quote ]
3636
classes:
3737
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\QuoteType
3838
templates:
@@ -44,7 +44,7 @@ monsieurbiz_sylius_richeditor:
4444
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.image.description'
4545
icon: file image
4646
wireframe: image
47-
tags: [ default ]
47+
tags: [ default, image ]
4848
classes:
4949
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\ImageType
5050
templates:
@@ -56,7 +56,7 @@ monsieurbiz_sylius_richeditor:
5656
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.video.description'
5757
icon: film
5858
wireframe: video-default
59-
tags: [ default ]
59+
tags: [ default, video ]
6060
classes:
6161
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\VideoType
6262
templates:
@@ -68,7 +68,7 @@ monsieurbiz_sylius_richeditor:
6868
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.button.description'
6969
icon: hand pointer
7070
wireframe: button
71-
tags: [ default ]
71+
tags: [ default, button ]
7272
classes:
7373
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\ButtonLinkType # ButtonLink because ButtonType make a button field displayed
7474
templates:
@@ -80,7 +80,7 @@ monsieurbiz_sylius_richeditor:
8080
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.title.description'
8181
icon: heading
8282
wireframe: title
83-
tags: [ default ]
83+
tags: [ default, title ]
8484
classes:
8585
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\TitleType
8686
templates:
@@ -91,7 +91,7 @@ monsieurbiz_sylius_richeditor:
9191
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.h1.description'
9292
icon: heading
9393
wireframe: title-h1
94-
tags: [ default ]
94+
tags: [ default, title, title-h1 ]
9595
classes:
9696
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\TitleType
9797
templates:
@@ -102,7 +102,7 @@ monsieurbiz_sylius_richeditor:
102102
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.h2.description'
103103
icon: heading
104104
wireframe: title-h2
105-
tags: [ default ]
105+
tags: [ default, title, title-h2 ]
106106
classes:
107107
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\TitleType
108108
templates:
@@ -113,7 +113,7 @@ monsieurbiz_sylius_richeditor:
113113
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.h3.description'
114114
icon: heading
115115
wireframe: title-h3
116-
tags: [ default ]
116+
tags: [ default, title, title-h3 ]
117117
classes:
118118
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\TitleType
119119
templates:
@@ -125,19 +125,30 @@ monsieurbiz_sylius_richeditor:
125125
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.separator.description'
126126
icon: minus
127127
wireframe: divider
128-
tags: [ default ]
128+
tags: [ default, separator ]
129129
classes:
130130
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\SeparatorType
131131
templates:
132132
admin_render: '@MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/separator.html.twig'
133133
front_render: '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/separator.html.twig'
134+
monsieurbiz.anchor:
135+
alias: anchor
136+
title: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.anchor.title'
137+
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.anchor.description'
138+
icon: 'anchor'
139+
classes:
140+
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\AnchorType
141+
templates:
142+
admin_render: '@MonsieurBizSyliusRichEditorPlugin/Admin/UiElement/anchor.html.twig'
143+
front_render: '@MonsieurBizSyliusRichEditorPlugin/Shop/UiElement/anchor.html.twig'
144+
tags: [default, anchor]
134145
monsieurbiz.youtube:
135146
alias: youtube
136147
title: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.youtube.title'
137148
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.youtube.description'
138149
icon: youtube
139150
wireframe: video-youtube
140-
tags: [ default ]
151+
tags: [ default, youtube ]
141152
classes:
142153
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\YoutubeType
143154
templates:
@@ -149,7 +160,7 @@ monsieurbiz_sylius_richeditor:
149160
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.image_collection.description'
150161
icon: images
151162
wireframe: image-collection
152-
tags: [ default ]
163+
tags: [ default, image-collection ]
153164
classes:
154165
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\ImageCollectionType
155166
templates:
@@ -161,7 +172,7 @@ monsieurbiz_sylius_richeditor:
161172
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.column.description'
162173
icon: columns
163174
wireframe: column
164-
tags: [ default, layout ]
175+
tags: [ default, layout, column ]
165176
classes:
166177
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\ColumnType
167178
templates:
@@ -173,7 +184,7 @@ monsieurbiz_sylius_richeditor:
173184
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.row.description'
174185
icon: bars
175186
wireframe: row
176-
tags: [ default, layout ]
187+
tags: [ default, layout, row ]
177188
classes:
178189
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\RowType
179190
templates:
@@ -185,7 +196,7 @@ monsieurbiz_sylius_richeditor:
185196
description: 'monsieurbiz_richeditor_plugin.ui_element.monsieurbiz.markdown.description'
186197
icon: file code
187198
wireframe: markdown
188-
tags: [ default ]
199+
tags: [ default, markdown ]
189200
classes:
190201
form: MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement\MarkdownType
191202
templates:

‎src/Resources/translations/messages.en.yml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@ monsieurbiz_richeditor_plugin:
6767
field:
6868
video: 'Video'
6969
image: 'Background image'
70+
controls: 'Show controls'
71+
autoplay: 'Autoplay (without sound)'
7072
monsieurbiz.separator:
7173
title: 'Separator Element'
7274
short_description: 'A separator element'
@@ -79,6 +81,18 @@ monsieurbiz_richeditor_plugin:
7981
solid: 'Solid'
8082
dashed: 'Dashed'
8183
dotted: 'Dotted'
84+
thickness:
85+
label: 'Thickness'
86+
choices:
87+
fine: 'Fine'
88+
medium: 'Medium'
89+
thick: 'Thick'
90+
very_thick: 'Very thick'
91+
anchor:
92+
title: Anchor
93+
description: Add an anchor to be accessible by link with `#`
94+
field:
95+
name: Anchor's name (Without `#`)
8296
monsieurbiz.button:
8397
title: 'Button Element'
8498
short_description: 'A button with a text and a link.'

‎src/Resources/translations/messages.fr.yml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@ monsieurbiz_richeditor_plugin:
6767
field:
6868
video: 'Vidéo'
6969
image: 'Image de fond'
70+
controls: 'Afficher les contrôles'
71+
autoplay: 'Lancer automatiquement la vidéo (sans le son)'
7072
monsieurbiz.separator:
7173
title: 'Lame Séparateur'
7274
short_description: 'Une lame permettant de faire séparateur'
@@ -79,6 +81,18 @@ monsieurbiz_richeditor_plugin:
7981
solid: 'Solide'
8082
dashed: 'Pointillé'
8183
dotted: 'Pointé'
84+
thickness:
85+
label: 'Épaisseur'
86+
choices:
87+
fine: 'Fine'
88+
medium: 'Moyenne'
89+
thick: 'Épaisse'
90+
very_thick: 'Très épaisse'
91+
monsieurbiz.anchor:
92+
title: Ancre
93+
description: Ajoute une ancre accessible avec un lien `#`
94+
field:
95+
name: Nom de l'ancre (Sans le `#`)
8296
monsieurbiz.button:
8397
title: 'Lame Bouton'
8498
short_description: 'Un bouton avec un texte et un lien.'

‎src/Resources/views/Admin/UiElement/anchor.html.twig‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{#
2+
UI Element template
3+
type: anchor
4+
element fields :
5+
name
6+
#}
7+
{% if element.name is defined and element.name is not empty %}
8+
<div id="{{ element.name | escape('html_attr') }}">
9+
#{{ element.name }}
10+
</div>
11+
{% endif %}

‎src/Resources/views/Admin/UiElement/image_collection.html.twig‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,37 @@
33
type: image_collection
44
element fields :
55
images
6+
image
7+
alt
8+
title
9+
link
10+
link_type
611
#}
7-
<div class="ui stackable two column grid">
12+
{% set imageCount = element.images|length %}
13+
{% set gridClasses = '' %}
14+
15+
{% if imageCount >= 5 %}
16+
{% set gridClasses = 'five column' %}
17+
{% elseif imageCount == 4 %}
18+
{% set gridClasses = 'four column' %}
19+
{% elseif imageCount == 3 %}
20+
{% set gridClasses = 'three column' %}
21+
{% elseif imageCount == 2 %}
22+
{% set gridClasses = 'two column' %}
23+
{% else %}
24+
{% set gridClasses = 'one column' %}
25+
{% endif %}
26+
27+
<div class="ui {{ gridClasses }} grid my-7.5 w-full">
828
{% for image in element.images %}
929
<div class="column">
1030
{% if image.link is not empty %}
11-
<a href="{{ image.link }}">
12-
<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('') }}" />
31+
{% set linkIsBlank = image.link_type is defined and image.link_type == constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LinkTypeType::TYPE_EXTERNAL') %}
32+
<a class="ui fluid image" href="{{ image.link }}"{% if linkIsBlank %} target="_blank" rel="noopener noreferrer"{% endif %}>
33+
<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('') }}" />
1334
</a>
1435
{% else %}
15-
<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('') }}" />
36+
<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('') }}" />
1637
{% endif %}
1738
</div>
1839
{% endfor %}

0 commit comments

Comments
 (0)