Skip to content

Commit 3ccd590

Browse files
maximehuranmaximehuran
committed
feat(title): improve title element
1 parent 47ad0bc commit 3ccd590

File tree

7 files changed

+203
-2
lines changed

7 files changed

+203
-2
lines changed

‎src/Form/Type/TagType.php‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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;
15+
16+
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
17+
use Symfony\Component\OptionsResolver\OptionsResolver;
18+
19+
class TagType extends ChoiceType
20+
{
21+
public const TAG_H1 = 'h1';
22+
23+
public const TAG_H2 = 'h2';
24+
25+
public const TAG_H3 = 'h3';
26+
27+
public const TAG_H4 = 'h4';
28+
29+
public const TAG_H5 = 'h5';
30+
31+
public const TAG_H6 = 'h6';
32+
33+
public function configureOptions(OptionsResolver $resolver): void
34+
{
35+
parent::configureOptions($resolver);
36+
$resolver->setDefaults([
37+
'label' => 'monsieurbiz_richeditor_plugin.form.tag.label',
38+
'help' => 'monsieurbiz_richeditor_plugin.form.tag.label_help',
39+
'choices' => [
40+
'monsieurbiz_richeditor_plugin.form.tag.default' => '',
41+
'monsieurbiz_richeditor_plugin.form.tag.h1' => self::TAG_H1,
42+
'monsieurbiz_richeditor_plugin.form.tag.h2' => self::TAG_H2,
43+
'monsieurbiz_richeditor_plugin.form.tag.h3' => self::TAG_H3,
44+
'monsieurbiz_richeditor_plugin.form.tag.h4' => self::TAG_H4,
45+
'monsieurbiz_richeditor_plugin.form.tag.h5' => self::TAG_H5,
46+
'monsieurbiz_richeditor_plugin.form.tag.h6' => self::TAG_H6,
47+
],
48+
]);
49+
}
50+
}

‎src/Form/Type/TextSizeType.php‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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;
15+
16+
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
17+
use Symfony\Component\OptionsResolver\OptionsResolver;
18+
19+
class TextSizeType extends ChoiceType
20+
{
21+
public const SIZE_XS = 'xs';
22+
23+
public const SIZE_S = 's';
24+
25+
public const SIZE_M = 'm';
26+
27+
public const SIZE_L = 'l';
28+
29+
public const SIZE_XL = 'xl';
30+
31+
public const SIZE_XXL = 'xxl';
32+
33+
public function configureOptions(OptionsResolver $resolver): void
34+
{
35+
parent::configureOptions($resolver);
36+
$resolver->setDefaults([
37+
'label' => 'monsieurbiz_richeditor_plugin.form.text_size.label',
38+
'help' => 'monsieurbiz_richeditor_plugin.form.text_size.label_help',
39+
'choices' => [
40+
'monsieurbiz_richeditor_plugin.form.text_size.default' => '',
41+
'monsieurbiz_richeditor_plugin.form.text_size.xs' => self::SIZE_XS,
42+
'monsieurbiz_richeditor_plugin.form.text_size.s' => self::SIZE_S,
43+
'monsieurbiz_richeditor_plugin.form.text_size.m' => self::SIZE_M,
44+
'monsieurbiz_richeditor_plugin.form.text_size.l' => self::SIZE_L,
45+
'monsieurbiz_richeditor_plugin.form.text_size.xl' => self::SIZE_XL,
46+
'monsieurbiz_richeditor_plugin.form.text_size.xxl' => self::SIZE_XXL,
47+
],
48+
]);
49+
}
50+
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@
1414
namespace MonsieurBiz\SyliusRichEditorPlugin\Form\Type\UiElement;
1515

1616
use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\AlignmentType;
17+
use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\LevelType;
18+
use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\TagType;
19+
use MonsieurBiz\SyliusRichEditorPlugin\Form\Type\TextSizeType;
1720
use Symfony\Component\Form\AbstractType;
1821
use Symfony\Component\Form\FormBuilderInterface;
1922
use Symfony\Component\Validator\Constraints as Assert;
@@ -33,8 +36,18 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
3336
new Assert\NotBlank([]),
3437
],
3538
])
39+
->add('text_size', TextSizeType::class, [
40+
'required' => false,
41+
])
42+
->add('tag', TagType::class, [
43+
'required' => false,
44+
])
3645
->add('align', AlignmentType::class, [
3746
'show_justify' => true,
47+
'required' => false,
48+
])
49+
->add('level', LevelType::class, [
50+
'required' => false,
3851
])
3952
;
4053
}

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,25 @@ monsieurbiz_richeditor_plugin:
156156
primary: 'Primary'
157157
secondary: 'Secondary'
158158
tertiary: 'Tertiary'
159+
tag:
160+
label: 'HTML Tag'
161+
label_help: 'The HTML tag to use for this title. By default, it is a <div> tag.'
162+
default: 'Default (div)'
163+
h1: '<h1>'
164+
h2: '<h2>'
165+
h3: '<h3>'
166+
h4: '<h4>'
167+
h5: '<h5>'
168+
h6: '<h6>'
169+
text_size:
170+
label: 'Text size'
171+
default: 'Default (Extra large)'
172+
xs: 'Extra Small'
173+
s: 'Small'
174+
m: 'Medium'
175+
l: 'Large'
176+
xl: 'Extra Large'
177+
xxl: 'Extra Extra Large'
159178
clipboard: 'Clipboard'
160179
paste_from_clipboard: 'Paste from clipboard'
161180
paste_all_from_clipboard: 'Paste all elements'

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,6 +156,25 @@ monsieurbiz_richeditor_plugin:
156156
primary: 'Primaire'
157157
secondary: 'Secondaire'
158158
tertiary: 'Tertiaire'
159+
tag:
160+
label: 'Balise HTML'
161+
label_help: 'La balise HTML à utiliser pour ce titre. Par défaut, c''est une balise <div>'
162+
default: 'Par défaut (div)'
163+
h1: '<h1>'
164+
h2: '<h2>'
165+
h3: '<h3>'
166+
h4: '<h4>'
167+
h5: '<h5>'
168+
h6: '<h6>'
169+
text_size:
170+
label: 'Taille du texte'
171+
default: 'Défaut (Très grand)'
172+
xs: 'Très petit'
173+
s: 'Petit'
174+
m: 'Moyen'
175+
l: 'Grand'
176+
xl: 'Très grand'
177+
xxl: 'Extra grand'
159178
clipboard: 'Presse-papier'
160179
paste_from_clipboard: 'Coller depuis le presse-papier'
161180
paste_all_from_clipboard: 'Coller tous les éléments'

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,34 @@
33
type: title
44
element fields :
55
content
6+
text_size
7+
tag
8+
level
69
align
710
#}
11+
812
{% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
13+
{% set tag = element.tag is defined and element.tag is not empty ? element.tag : 'div' %}
14+
15+
{% set textSize = element.text_size is defined and element.text_size is not empty ? element.text_size : '' %}
16+
{% set textSizeMap = {
17+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_XS')): 'tiny',
18+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_S')): 'small',
19+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_M')): 'medium',
20+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_L')): 'large',
21+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_XL')): 'huge',
22+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_XXL')): 'very huge',
23+
} %}
24+
{% set textSize = textSizeMap[textSize]|default(textSizeMap[constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_XL')]) %}
25+
26+
{% set titleColor = element.level is defined and element.level is not empty ? element.level : '' %}
27+
{% set titleColorMap = {
28+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LevelType::PRIMARY_LEVEL')): '#000000',
29+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LevelType::SECONDARY_LEVEL')): '#666666',
30+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LevelType::TERTIARY_LEVEL')): '#999999',
31+
} %}
32+
{% set titleColor = titleColorMap[titleColor]|default('') %}
33+
934
{% if element is not empty %}
10-
<div class="ui huge header" style="text-align: {{align}};">{{ element.content }}</div>
35+
<{{tag}} class="ui {{ textSize }} header" style="text-align: {{align}};{% if titleColor %}color: {{titleColor}};{% endif %}">{{ element.content }}</{{tag}}>
1136
{% endif %}

‎src/Resources/views/Shop/UiElement/title.html.twig‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,34 @@
33
type: title
44
element fields :
55
content
6+
text_size
7+
tag
8+
level
69
align
710
#}
11+
812
{% set align = element.align is defined and element.align is not empty ? element.align : 'inherit' %}
13+
{% set tag = element.tag is defined and element.tag is not empty ? element.tag : 'div' %}
14+
15+
{% set textSize = element.text_size is defined and element.text_size is not empty ? element.text_size : '' %}
16+
{% set textSizeMap = {
17+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_XS')): 'tiny',
18+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_S')): 'small',
19+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_M')): 'medium',
20+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_L')): 'large',
21+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_XL')): 'huge',
22+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_XXL')): 'very huge',
23+
} %}
24+
{% set textSize = textSizeMap[textSize]|default(textSizeMap[constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\TextSizeType::SIZE_XL')]) %}
25+
26+
{% set titleColor = element.level is defined and element.level is not empty ? element.level : '' %}
27+
{% set titleColorMap = {
28+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LevelType::PRIMARY_LEVEL')): '#000000',
29+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LevelType::SECONDARY_LEVEL')): '#666666',
30+
(constant('MonsieurBiz\\SyliusRichEditorPlugin\\Form\\Type\\LevelType::TERTIARY_LEVEL')): '#999999',
31+
} %}
32+
{% set titleColor = titleColorMap[titleColor]|default('') %}
33+
934
{% if element is not empty %}
10-
<div class="ui huge header" style="text-align: {{align}};">{{ element.content }}</div>
35+
<{{tag}} class="ui {{ textSize }} header" style="text-align: {{align}};{% if titleColor %}color: {{titleColor}};{% endif %}">{{ element.content }}</{{tag}}>
1136
{% endif %}

0 commit comments

Comments
 (0)