diff --git a/assets/js/admin/components/NumberSlider.js b/assets/js/admin/components/NumberSlider.js new file mode 100644 index 0000000000..1377a9fb11 --- /dev/null +++ b/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'); diff --git a/assets/js/admin/components/index.js b/assets/js/admin/components/index.js index 0f72c97888..8c8057b585 100644 --- a/assets/js/admin/components/index.js +++ b/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'; diff --git a/assets/styles/admin/libs/number-slider/number-slider-custom.less b/assets/styles/admin/libs/number-slider/number-slider-custom.less new file mode 100644 index 0000000000..29203b2872 --- /dev/null +++ b/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; +} diff --git a/assets/styles/admin/main.less b/assets/styles/admin/main.less index 2f61828422..1405082889 100644 --- a/assets/styles/admin/main.less +++ b/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"; diff --git a/src/Form/Admin/Slider/SliderItemFormType.php b/src/Form/Admin/Slider/SliderItemFormType.php index 8b251d4f41..607c0a40a1 100644 --- a/src/Form/Admin/Slider/SliderItemFormType.php +++ b/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' => [ diff --git a/src/Form/NumberSliderType.php b/src/Form/NumberSliderType.php new file mode 100644 index 0000000000..b82b0af72c --- /dev/null +++ b/src/Form/NumberSliderType.php @@ -0,0 +1,19 @@ +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 + { + } +} diff --git a/src/Model/Slider/SliderItem.php b/src/Model/Slider/SliderItem.php index 170439a6c8..aa8ce7ec8a 100644 --- a/src/Model/Slider/SliderItem.php +++ b/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; + } } diff --git a/src/Model/Slider/SliderItemData.php b/src/Model/Slider/SliderItemData.php index 169a9bf50e..f3d914c223 100644 --- a/src/Model/Slider/SliderItemData.php +++ b/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; } } diff --git a/src/Model/Slider/SliderItemDataFactory.php b/src/Model/Slider/SliderItemDataFactory.php index d01f104e78..3a28a4b3e1 100644 --- a/src/Model/Slider/SliderItemDataFactory.php +++ b/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(); } } diff --git a/src/Resources/translations/messages.cs.po b/src/Resources/translations/messages.cs.po index 031be00872..8e11adee14 100644 --- a/src/Resources/translations/messages.cs.po +++ b/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" diff --git a/src/Resources/translations/messages.en.po b/src/Resources/translations/messages.en.po index 28efa30b2b..090b524e9f 100644 --- a/src/Resources/translations/messages.en.po +++ b/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 "" diff --git a/src/Resources/translations/validators.cs.po b/src/Resources/translations/validators.cs.po index 5c62013238..0f95f88829 100644 --- a/src/Resources/translations/validators.cs.po +++ b/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." diff --git a/src/Resources/translations/validators.en.po b/src/Resources/translations/validators.en.po index c109fd195c..c72b176b34 100644 --- a/src/Resources/translations/validators.en.po +++ b/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 "" diff --git a/src/Resources/views/Admin/Form/numberSlider.html.twig b/src/Resources/views/Admin/Form/numberSlider.html.twig new file mode 100644 index 0000000000..d8592519a2 --- /dev/null +++ b/src/Resources/views/Admin/Form/numberSlider.html.twig @@ -0,0 +1,13 @@ +{% block number_slider_widget %} +
+
+
+
+
+ {% set attr = attr|merge({'class': ((attr.class|default('') ~ ' js-number-slider__input input')|trim)}) %} + +
+
+
+ +{% endblock number_slider_widget %}