Extend banner administration for description box

- create NumberSlider form widget with jQuery UI
- extend SliderItem, SliderItemData, SliderItemDataFixture for description, rgbBackgroundColor, opacity

assets/js/admin/components/NumberSlider.js

@@ -0,0 +1,29 @@
+import 'jquery-ui/ui/widgets/slider';
+import Register from '../../common/utils/Register';
+
+export default class NumberSlider {
+
+    constructor ($sliderContainer) {
+
+        $sliderContainer.children('.js-number-slider__slider').slider({
+            min: 0,
+            max: 1,
+            step: 0.01,
+            slide: function (event, ui) {
+                $(this).next('.js-number-slider__input').val(ui.value);
+            },
+            create: function (event, ui) {
+                $(this).slider('value', $(this).next('.js-number-slider__input').val());
+            }
+        });
+    }
+
+    static init ($container) {
+        $container.filterAllNodes('.js-number-slider').each(function () {
+            // eslint-disable-next-line no-new
+            new NumberSlider($(this));
+        });
+    }
+}
+
+(new Register()).registerCallback(NumberSlider.init, 'NumberSlider.init');

assets/js/admin/components/index.js

@@ -35,6 +35,7 @@ import './MailTemplate';
 import './MailWhitelist';
 import './MassAction';
 import './MassActionConfirm';
+import './NumberSlider';
 import './OpeningHoursCollection';
 import './OrderPreview';
 import './OrderItems';

assets/styles/admin/libs/number-slider/number-slider-custom.less

@@ -0,0 +1,21 @@
+.js-number-slider .js-number-slider__slider {
+    width: @input-width / 2;
+    display: inline-block;
+    margin-right: @input-width / 10;
+    vertical-align: middle;
+    margin-bottom: 1em;
+}
+.js-number-slider input {
+    width: @input-width / 2.5;
+    display: inline-block;
+
+}
+.js-number-slider .ui-slider-handle.ui-state-default {
+    background: @color-orange;
+    border: 1px solid @color-grey;
+    color: #fff;
+}
+.js-number-slider .ui-slider-handle.ui-state-active {
+    background: @color-grey;
+    border: 1px solid @color-yellow;
+}

assets/styles/admin/main.less

@@ -34,6 +34,8 @@
 @import "~@claviska/jquery-minicolors/jquery.minicolors.css";
 @import "libs/colorpicker/colorpicker-custom.less";
 @import "~jquery-ui-styles/themes/base/datepicker.css";
+@import "~jquery-ui-styles/themes/base/slider.css";
+@import "libs/number-slider/number-slider-custom.less";
 @import "~magnific-popup/dist/magnific-popup.css";
 @import "libs/magnific/magnific-popup-custom.less";
 @import "~select2/dist/css/select2.css";

src/Form/Admin/Slider/SliderItemFormType.php

@@ -6,14 +6,17 @@
 
 use Shopsys\FormTypesBundle\YesNoType;
 use Shopsys\FrameworkBundle\Component\Image\Processing\ImageProcessor;
+use Shopsys\FrameworkBundle\Form\ColorPickerType;
 use Shopsys\FrameworkBundle\Form\DisplayOnlyType;
 use Shopsys\FrameworkBundle\Form\DomainType;
 use Shopsys\FrameworkBundle\Form\GroupType;
 use Shopsys\FrameworkBundle\Form\ImageUploadType;
+use Shopsys\FrameworkBundle\Form\NumberSliderType;
 use Shopsys\FrameworkBundle\Model\Slider\SliderItem;
 use Shopsys\FrameworkBundle\Model\Slider\SliderItemData;
 use Symfony\Component\Form\AbstractType;
 use Symfony\Component\Form\Extension\Core\Type\SubmitType;
+use Symfony\Component\Form\Extension\Core\Type\TextareaType;
 use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\Form\Extension\Core\Type\UrlType;
 use Symfony\Component\Form\FormBuilderInterface;
@@ -81,6 +84,37 @@ public function buildForm(FormBuilderInterface $builder, array $options)
                 ],
                 'label' => t('Link'),
             ])
+            ->add('description', TextareaType::class, [
+                'required' => false,
+                'label' => t('Description'),
+            ])
+            ->add('rgbBackgroundColor', ColorPickerType::class, [
+                'required' => true,
+                'constraints' => [
+                    new Constraints\NotBlank(['message' => 'Please enter description box background color']),
+                    new Constraints\Regex([
+                        'pattern' => '/^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/',
+                        'message' => 'Description background color must be a valid hexadecimal color code e.g. #fff or #ffffff',
+                    ]),
+                ],
+                'label' => t('Description background color'),
+            ])
+            ->add('opacity', NumberSliderType::class, [
+                'required' => true,
+                'constraints' => [
+                    new Constraints\NotBlank(['message' => 'Please enter description box opacity']),
+                    new Constraints\Range([
+                        'min' => 0,
+                        'max' => 1,
+                        'notInRangeMessage' => 'Opacity must be between {{ min }} and {{ max }}',
+                    ]),
+                    new Constraints\Regex([
+                        'pattern' => '/^\d(\.\d{1,2})?$/',
+                        'message' => 'Opacity must be a number with up to two decimal places',
+                    ]),
+                ],
+                'label' => t('Description opacity'),
+            ])
             ->add('hidden', YesNoType::class, [
                 'required' => false,
                 'constraints' => [

src/Form/NumberSliderType.php

@@ -0,0 +1,19 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Shopsys\FrameworkBundle\Form;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\NumberType;
+
+class NumberSliderType extends AbstractType
+{
+    /**
+     * {@inheritdoc}
+     */
+    public function getParent(): ?string
+    {
+        return NumberType::class;
+    }
+}

src/Migrations/Version20241031100638.php

@@ -0,0 +1,30 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Shopsys\FrameworkBundle\Migrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Shopsys\MigrationBundle\Component\Doctrine\Migrations\AbstractMigration;
+
+class Version20241031100638 extends AbstractMigration
+{
+    /**
+     * @param \Doctrine\DBAL\Schema\Schema $schema
+     */
+    public function up(Schema $schema): void
+    {
+        $this->sql('ALTER TABLE slider_items ADD COLUMN description TEXT DEFAULT NULL');
+        $this->sql('ALTER TABLE slider_items ADD COLUMN rgb_background_color VARCHAR(7) NOT NULL DEFAULT \'#808080\'');
+        $this->sql('ALTER TABLE slider_items ADD COLUMN opacity NUMERIC(3, 2) NOT NULL DEFAULT 0.8');
+        $this->sql('ALTER TABLE slider_items ALTER rgb_background_color DROP DEFAULT');
+        $this->sql('ALTER TABLE slider_items ALTER opacity DROP DEFAULT;');
+    }
+
+    /**
+     * @param \Doctrine\DBAL\Schema\Schema $schema
+     */
+    public function down(Schema $schema): void
+    {
+    }
+}

src/Model/Slider/SliderItem.php

@@ -56,6 +56,24 @@ class SliderItem implements OrderableEntityInterface
      */
     protected $hidden;
 
+    /**
+     * @var string
+     * @ORM\Column(type="text", nullable=true)
+     */
+    protected $description;
+
+    /**
+     * @var string
+     * @ORM\Column(type="string", length=7)
+     */
+    protected $rgbBackgroundColor;
+
+    /**
+     * @var float
+     * @ORM\Column(type="decimal", precision=3, scale=2)
+     */
+    protected $opacity;
+
     /**
      * @param \Shopsys\FrameworkBundle\Model\Slider\SliderItemData $sliderItemData
      */
@@ -81,6 +99,9 @@ protected function setData(SliderItemData $sliderItemData): void
         $this->name = $sliderItemData->name;
         $this->link = $sliderItemData->link;
         $this->hidden = $sliderItemData->hidden;
+        $this->description = $sliderItemData->description;
+        $this->rgbBackgroundColor = $sliderItemData->rgbBackgroundColor;
+        $this->opacity = $sliderItemData->opacity;
     }
 
     /**
@@ -138,4 +159,28 @@ public function isHidden()
     {
         return $this->hidden;
     }
+
+    /**
+     * @return string
+     */
+    public function getDescription()
+    {
+        return $this->description;
+    }
+
+    /**
+     * @return string
+     */
+    public function getRgbBackgroundColor()
+    {
+        return $this->rgbBackgroundColor;
+    }
+
+    /**
+     * @return float
+     */
+    public function getOpacity()
+    {
+        return $this->opacity;
+    }
 }

src/Model/Slider/SliderItemData.php

@@ -31,8 +31,25 @@ class SliderItemData
      */
     public $domainId;
 
+    /**
+     * @var string|null
+     */
+    public $description;
+
+    /**
+     * @var string
+     */
+    public $rgbBackgroundColor;
+
+    /**
+     * @var float
+     */
+    public $opacity;
+
     public function __construct()
     {
         $this->hidden = false;
+        $this->rgbBackgroundColor = '#808080';
+        $this->opacity = 0.8;
     }
 }

src/Model/Slider/SliderItemDataFactory.php

@@ -58,5 +58,8 @@ protected function fillFromSliderItem(SliderItemData $sliderItemData, SliderItem
         $sliderItemData->hidden = $sliderItem->isHidden();
         $sliderItemData->domainId = $sliderItem->getDomainId();
         $sliderItemData->image = $this->imageUploadDataFactory->createFromEntityAndType($sliderItem);
+        $sliderItemData->description = $sliderItem->getDescription();
+        $sliderItemData->rgbBackgroundColor = $sliderItem->getRgbBackgroundColor();
+        $sliderItemData->opacity = $sliderItem->getOpacity();
     }
 }

src/Resources/translations/messages.cs.po

@@ -1201,9 +1201,15 @@ msgstr "Obchodní domy"
 msgid "Description"
 msgstr "Popis"
 
+msgid "Description background color"
+msgstr "Barva pozadí popisu"
+
 msgid "Description can be set on product detail of the main product."
 msgstr "Popis můžete nastavit na kartě hlavní varianty."
 
+msgid "Description opacity"
+msgstr "Průhlednost popisu"
+
 msgid "Disable"
 msgstr "Vypnout"
 

src/Resources/translations/messages.en.po

@@ -1201,9 +1201,15 @@ msgstr ""
 msgid "Description"
 msgstr ""
 
+msgid "Description background color"
+msgstr ""
+
 msgid "Description can be set on product detail of the main product."
 msgstr ""
 
+msgid "Description opacity"
+msgstr ""
+
 msgid "Disable"
 msgstr ""
 

src/Resources/translations/validators.cs.po

@@ -40,6 +40,9 @@ msgstr "Název státu nesmí být delší než {{ limit }} znaků"
 msgid "Country with code {{ country_code }} does not exists. Available country codes are {{ available_country_codes }}."
 msgstr "Kód státu {{ country_code }} neexistuje. Povolené kódy státu jsou {{ available_country_codes }}."
 
+msgid "Description background color must be a valid hexadecimal color code e.g. #fff or #ffffff"
+msgstr "Popis pozadí musí být platný hexadecimální kód barvy, například #fff nebo #ffffff"
+
 msgid "EAN cannot be longer than {{ limit }} characters"
 msgstr "EAN nesmí být delší než {{ limit }} znaků"
 
@@ -130,6 +133,12 @@ msgstr "Odkaz musí být validní URL adresa"
 msgid "Name cannot be longer than {{ limit }} characters"
 msgstr "Název nesmí být delší než {{ limit }} znaků"
 
+msgid "Opacity must be a number with up to two decimal places"
+msgstr "Průhlednost musí být číslo s až dvěma desetinnými místy"
+
+msgid "Opacity must be between {{ min }} and {{ max }}"
+msgstr "Průhlednost musí být mezi {{ min }} a {{ max }}"
+
 msgid "Opening hours setting is not valid"
 msgstr "Neplaté nastavení otevírací doby"
 
@@ -283,6 +292,12 @@ msgstr "Prosím zadejte výchozí cenovou skupinu"
 msgid "Please enter description"
 msgstr "Prosím zadejte popis"
 
+msgid "Please enter description box background color"
+msgstr "Prosím vyplňte barvu pozadí popisu"
+
+msgid "Please enter description box opacity"
+msgstr "Prosím vyplňte průhlednost popisu"
+
 msgid "Please enter discount percentage"
 msgstr "Vyplňte prosím procento slevy."
 

src/Resources/translations/validators.en.po

@@ -40,6 +40,9 @@ msgstr ""
 msgid "Country with code {{ country_code }} does not exists. Available country codes are {{ available_country_codes }}."
 msgstr ""
 
+msgid "Description background color must be a valid hexadecimal color code e.g. #fff or #ffffff"
+msgstr ""
+
 msgid "EAN cannot be longer than {{ limit }} characters"
 msgstr ""
 
@@ -130,6 +133,12 @@ msgstr ""
 msgid "Name cannot be longer than {{ limit }} characters"
 msgstr ""
 
+msgid "Opacity must be a number with up to two decimal places"
+msgstr ""
+
+msgid "Opacity must be between {{ min }} and {{ max }}"
+msgstr ""
+
 msgid "Opening hours setting is not valid"
 msgstr ""
 
@@ -283,6 +292,12 @@ msgstr ""
 msgid "Please enter description"
 msgstr ""
 
+msgid "Please enter description box background color"
+msgstr ""
+
+msgid "Please enter description box opacity"
+msgstr ""
+
 msgid "Please enter discount percentage"
 msgstr ""
 

src/Resources/views/Admin/Form/numberSlider.html.twig

@@ -0,0 +1,13 @@
+{% block number_slider_widget %}
+    <div class="form-line__side">
+         <div class="form-line__item">
+             <div class="js-number-slider">
+                 <div class="js-number-slider__slider">
+                 </div>
+                 {% set attr = attr|merge({'class': ((attr.class|default('') ~ ' js-number-slider__input input')|trim)}) %}
+                 <input type="text" {{ block('widget_attributes') }} {% if value is not empty %}value="{{ value }}" {% endif %}/>
+             </div>
+         </div>
+    </div>
+
+{% endblock number_slider_widget %}