Merge pull request #105 from Setono/colors

Add color and background color to the callout
Setono · Jan 24, 2024 · ac16ecb · ac16ecb
2 parents f161ac1 + 59e04e5
commit ac16ecb
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 2 deletions.
diff --git a/src/Form/Type/CalloutType.php b/src/Form/Type/CalloutType.php
@@ -75,6 +75,14 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
                 },
                 'placeholder' => 'setono_sylius_callout.form.callout.select_position',
             ])
+            ->add('color', TextType::class, [
+                'label' => 'setono_sylius_callout.form.callout.color',
+                'required' => false,
+            ])
+            ->add('backgroundColor', TextType::class, [
+                'label' => 'setono_sylius_callout.form.callout.background_color',
+                'required' => false,
+            ])
             ->add('enabled', CheckboxType::class, [
                 'label' => 'setono_sylius_callout.form.callout.enabled',
                 'required' => false,

diff --git a/src/Model/Callout.php b/src/Model/Callout.php
@@ -39,6 +39,10 @@ class Callout implements CalloutInterface
 
     protected ?string $position = self::DEFAULT_KEY;
 
+    protected ?string $color = null;
+
+    protected ?string $backgroundColor = null;
+
     /** @var Collection<array-key, BaseChannelInterface> */
     protected Collection $channels;
 
@@ -142,6 +146,26 @@ public function setPosition(?string $position): void
         $this->position = $position;
     }
 
+    public function getColor(): ?string
+    {
+        return $this->color;
+    }
+
+    public function setColor(?string $color): void
+    {
+        $this->color = $color;
+    }
+
+    public function getBackgroundColor(): ?string
+    {
+        return $this->backgroundColor;
+    }
+
+    public function setBackgroundColor(?string $backgroundColor): void
+    {
+        $this->backgroundColor = $backgroundColor;
+    }
+
     public function getText(): ?string
     {
         return $this->getCalloutTranslation()->getText();

diff --git a/src/Model/CalloutInterface.php b/src/Model/CalloutInterface.php
@@ -57,6 +57,14 @@ public function getPosition(): ?string;
 
     public function setPosition(?string $position): void;
 
+    public function getColor(): ?string;
+
+    public function setColor(?string $color): void;
+
+    public function getBackgroundColor(): ?string;
+
+    public function setBackgroundColor(?string $backgroundColor): void;
+
     public function getText(): ?string;
 
     public function setText(string $text): void;

diff --git a/src/Resources/config/doctrine/model/Callout.orm.xml b/src/Resources/config/doctrine/model/Callout.orm.xml
@@ -17,6 +17,8 @@
         <field name="priority" type="integer"/>
         <field name="elements" type="json"/>
         <field name="position" type="string"/>
+        <field name="color" type="string" nullable="true"/>
+        <field name="backgroundColor" type="string" nullable="true"/>
         <field name="enabled" type="boolean"/>
         <field name="createdAt" column="created_at" type="datetime">
             <gedmo:timestampable on="create"/>

diff --git a/src/Resources/config/validation/Callout.xml b/src/Resources/config/validation/Callout.xml
@@ -72,5 +72,49 @@
                 </option>
             </constraint>
         </property>
+
+        <property name="color">
+            <constraint name="CssColor">
+                <option name="formats">
+                    <value>hex_long</value>
+                    <value>hex_long_with_alpha</value>
+                    <value>hex_short</value>
+                    <value>hex_short_with_alpha</value>
+                    <value>basic_named_colors</value>
+                    <value>extended_named_colors</value>
+                    <value>system_colors</value>
+                    <value>keywords</value>
+                    <value>rgb</value>
+                    <value>rgba</value>
+                    <value>hsl</value>
+                    <value>hsla</value>
+                </option>
+                <option name="groups">
+                    <value>setono_sylius_callout</value>
+                </option>
+            </constraint>
+        </property>
+
+        <property name="backgroundColor">
+            <constraint name="CssColor">
+                <option name="formats">
+                    <value>hex_long</value>
+                    <value>hex_long_with_alpha</value>
+                    <value>hex_short</value>
+                    <value>hex_short_with_alpha</value>
+                    <value>basic_named_colors</value>
+                    <value>extended_named_colors</value>
+                    <value>system_colors</value>
+                    <value>keywords</value>
+                    <value>rgb</value>
+                    <value>rgba</value>
+                    <value>hsl</value>
+                    <value>hsla</value>
+                </option>
+                <option name="groups">
+                    <value>setono_sylius_callout</value>
+                </option>
+            </constraint>
+        </property>
     </class>
 </constraint-mapping>
diff --git a/src/Resources/translations/messages.en.yml b/src/Resources/translations/messages.en.yml
@@ -1,8 +1,10 @@
 setono_sylius_callout:
     form:
         callout:
+            background_color: Background color
             channels: Channels
             code: Code
+            color: Color
             elements: Element
             element_labels:
                 default: Default

diff --git a/src/Resources/views/Admin/Callout/_form.html.twig b/src/Resources/views/Admin/Callout/_form.html.twig
@@ -24,8 +24,21 @@
         </div>
         <div class="ui segment">
             <h4 class="ui dividing header">{{ 'setono_sylius_callout.form.callout.layout'|trans }}</h4>
-            {{ form_row(form.elements) }}
-            {{ form_row(form.position) }}
+
+            <div class="ui two column stackable grid">
+                <div class="column">
+                    <div class="ui segment">
+                        {{ form_row(form.elements) }}
+                        {{ form_row(form.position) }}
+                    </div>
+                </div>
+                <div class="column">
+                    <div class="ui segment">
+                        {{ form_row(form.color) }}
+                        {{ form_row(form.backgroundColor) }}
+                    </div>
+                </div>
+            </div>
         </div>
         <div class="ui segment">
             <h4 class="ui dividing header">{{ 'setono_sylius_callout.form.callout.rules'|trans }}</h4>