Merge pull request #205 from nossas/feature/ds-block-imagebackground

Feature/ds block imagebackground

app/adp/settings/base.py

@@ -21,6 +21,8 @@
 INSTALLED_APPS = [
     # "admin_styled",
     # "tailwind",
+    # Override third apps templates
+    "contrib.ds.admin_style",
     "djangocms_admin_style",
     "django.contrib.admin",
     "django.contrib.auth",

app/contrib/ds/admin_style/templates/admin/filer/widgets/admin_file.html

@@ -0,0 +1,83 @@
+{% load i18n filer_admin_tags static %}
+
+{% spaceless %}
+<div class="filer-widget">
+    <div class="clearfix"></div>
+
+    <div class="dz-preview dz-file-preview hidden js-filer-dropzone-template">
+        <span class="filerFile">
+            <div class="dz-thumbnail"><img class="quiet" data-dz-thumbnail></div>
+            <span data-dz-name class="dz-name"></span>
+            <span class="filerClearer fa fa-close filer-icon filer-icon-remove-selection" title="{% translate 'Clear' %}"
+                 data-dz-remove data-no-icon-file="{% static 'filer/icons/file-unknown.svg' %}"></span>
+            <div class="dz-progress js-filer-dropzone-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
+        </span>
+    </div>
+
+    <div class="js-filer-dropzone filer-dropzone{% if object %} js-object-attached{% endif %}"
+         data-url="{% url 'admin:filer-ajax_upload' %}"
+         data-max-files="1"
+         {% if max_filesize %}}data-max-filesize="{{ max_filesize|safe }}"{% endif %}>
+        <div class="z-index-fix"></div>
+        <div class="dz-default dz-message js-filer-dropzone-message{% if object %} hidden{% endif %}">
+            <span class="icon filer-icon filer-icon-arrow-down fa fa-arrow-down"></span><span>{% translate "or drop your file here" %}</span>
+        </div>
+
+        <span class="filerFile js-file-selector">
+            <div class="file-edit-area">
+                <div class="file-object-file">
+                {% if object %}
+                    {% if object.file.exists %}
+                        <a href="{{ object.url }}" target="_blank">{% file_icon object size='80x80' %}</a>
+                        <div class="file-desc-object">
+                        <span class="description_text">{{ object.label }}</span>
+                    {% else %}
+                        <div class="file-desc-object">
+                        {% file_icon object %}
+                        <span class="description_text">{% translate 'File is missing' %}</span>
+                    {% endif %}
+                {% else %}
+                    <img class="thumbnail_img hidden quiet" alt="{% translate 'no file selected' %}">
+                    &nbsp;<span class="description_text"></span>
+                {% endif %}
+
+                    <a class="filerClearer {% if not object %}hidden{% endif %}" title="{% translate 'Clear' %}"
+                        data-no-icon-file="{% static 'filer/icons/file-unknown.svg' %}" href="#">
+                        <span class="fa fa-close filer-icon filer-icon-remove-selection"></span>
+                    </a>
+                    {% if object %}
+                    </div>
+                    {% endif %}
+                </div>
+
+                <div class="file-controls">
+                    <a href="{{ change_url }}?_edit_from_widget=1" class="js-related-edit related-lookup {% if object %}related-lookup-change{% endif %} edit" id="{{ id }}_change"
+                        title="{% translate 'Edit' %}">
+                        <span class="edit-file"><span class="fa fa-pencil cms-icon cms-icon-settings"></span></span>
+                    </a>
+
+                    <a href="{{ lookup_url }}" class="js-related-lookup related-lookup {% if object %}related-lookup-change{% endif %} lookup" id="{{ id }}_lookup"
+                    title="{% translate 'Lookup' %}">
+                        <span class="choose-file"><span class="fa fa-search cms-icon cms-icon-search"></span>{% translate 'Choose File' %}</span>
+                        <span class="replace-file"><span class="fa fa-search cms-icon cms-icon-search"></span></span>
+                    </a>
+                </div>
+            </div>
+
+            <br>
+
+            <div class="hidden">{{ hidden_input }}</div>
+            <script type="text/javascript" id="{{id}}_javascript">
+                django.jQuery(document).ready(function(){
+                    var plus = django.jQuery('#add_{{ id }}');
+                    if (plus.length){
+                        plus.remove();
+                    }
+                    // Delete this javascript once loaded to avoid the "add new" link duplicates it
+                    django.jQuery('#{{id}}_javascript').remove();
+                });
+            </script>
+        </span>
+    </div>
+</div>
+{% endspaceless %}

app/contrib/ds/blocks/cms_plugins.py

@@ -27,7 +27,7 @@ class BlockPlugin(CMSPluginBase):
         ),
         (
             _("Estrutura"),
-            {"fields": (("element", "layout", "is_container"),)},
+            {"fields": (("element", "layout", "is_container", "background_image"),)},
         ),
         (
             None,
@@ -116,8 +116,15 @@ def render(self, context, instance, placeholder):
             if instance.attributes
             else None
         )
+
         if background_color:
             css_styles.append(f"background-color:{background_color}")
+
+        if instance.background_image:
+            css_styles.append(f"background-image:url('{instance.background_image.url}')")
+            css_styles.append(f"background-size:{instance.background_size}") 
+            css_styles.append("background-repeat:no-repeat")
+            css_styles.append("background-position:center")
 
         padding_attrs = [("padding_top", "pt"), ("padding_bottom", "pb"), ("padding_left", "pl"), ("padding_right", "pr")]
 

app/contrib/ds/blocks/forms.py

@@ -5,6 +5,7 @@
 from colorfield.widgets import ColorWidget
 from django_jsonform.forms.fields import JSONFormField
 from entangled.forms import EntangledModelFormMixin
+from filer.fields.image import FilerImageField
 
 from .models import (
     Block,
@@ -111,11 +112,12 @@ class BlockForm(
     ContainerFormMixin,
     forms.ModelForm,
 ):
+
     template = forms.CharField(widget=forms.HiddenInput(), required=False)
 
     class Meta:
         model = Block
-        untangled_fields = ["template", "element", "layout", "is_container"]
+        untangled_fields = ["template", "element", "layout", "is_container", "background_image", "background_size"]
         entangled_fields = {"attributes": []}
 
 
@@ -137,8 +139,11 @@ class BlockTemplateForm(BlockForm):
 
     class Meta:
         model = Block
-        untangled_fields = ["template", "element", "layout", "is_container"]
+        untangled_fields = ["template", "element", "layout", "is_container", "background_image", "background_size"]
         entangled_fields = {"attributes": []}
+        help_texts = {
+            'background_image': 'Selecione uma imagem para o background do bloco.'
+        }
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)

app/contrib/ds/blocks/migrations/0006_block_background_image.py

@@ -0,0 +1,22 @@
+# Generated by Django 4.2 on 2024-05-10 20:44
+
+from django.conf import settings
+from django.db import migrations
+import django.db.models.deletion
+import filer.fields.image
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.FILER_IMAGE_MODEL),
+        ('blocks', '0005_alter_block_options_alter_block_element_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='block',
+            name='background_image',
+            field=filer.fields.image.FilerImageField(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to=settings.FILER_IMAGE_MODEL, verbose_name='Imagem de fundo'),
+        ),
+    ]

app/contrib/ds/blocks/migrations/0007_block_background_size.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2 on 2024-05-15 20:47
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('blocks', '0006_block_background_image'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='block',
+            name='background_size',
+            field=models.CharField(choices=[('contain', 'Contain'), ('cover', 'Cover'), ('initial', 'Initial')], default='contain', max_length=8),
+        ),
+    ]

app/contrib/ds/blocks/migrations/0008_alter_block_background_size.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2 on 2024-05-16 14:53
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('blocks', '0007_block_background_size'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='block',
+            name='background_size',
+            field=models.CharField(choices=[('contain', 'Contain'), ('cover', 'Cover'), ('initial', 'Initial')], default='cover', max_length=8),
+        ),
+    ]

app/contrib/ds/blocks/models.py

@@ -2,6 +2,7 @@
 from django.utils.translation import gettext_lazy as _
 
 from cms.models import CMSPlugin
+from filer.fields.image import FilerImageField
 
 
 class AlignmentItems(models.TextChoices):
@@ -42,6 +43,11 @@ class BlockLayout(models.TextChoices):
     grid = "grid", _("Em grade")
     flex = "d-flex", _("Flexível")
 
+class BackgroundSize(models.TextChoices):
+    contain = "contain"
+    cover = "cover"
+    initial = "initial"
+
 
 class BlockAbstractModel(models.Model):
     """
@@ -75,6 +81,17 @@ class BlockAbstractModel(models.Model):
         verbose_name=_("Container"),
         default=False,
     )
+    background_image = FilerImageField(
+            verbose_name=("Imagem de fundo"),
+            blank=True,
+            null=True,
+            on_delete=models.SET_NULL,
+    )
+    background_size = models.CharField(
+        choices=BackgroundSize.choices,
+        max_length=8,
+        default=BackgroundSize.cover
+    )
     attributes = models.JSONField(null=True, blank=True)
 
     class Meta:

app/contrib/ds/blocks/templates/blocks/plugin/change_form.html

@@ -123,13 +123,29 @@ <h2>Estrutura</h2>
         {% endwith %}
       </div>
       <div class="form-row-flex">
-        {% with field=adminform.form.background_color %}
-        <div class="field field-{{field.name}}">
-          <label class="form-label">{{ field.label }}</label>
-          <span class="help-text">{{ field.help_text }}</span>
-          {{field}}
+        <div class="form-col-flex">
+          {% with field=adminform.form.background_image %}
+          <div class="field field-{{field.name}}">
+            <label class="form-label">{{ field.label }} </label>
+            <span class="help-text">{{ field.help_text }}</span>
+            {{field}}    
+          </div>
+          {% endwith %}
+          {% with field=adminform.form.background_size %}
+          <div class="field field-{{field.name}}">
+            <label class="form-label">{{ field.label }} </label>
+            <span class="help-text">{{ field.help_text }}</span>
+            {{field}}
+          </div>
+          {% endwith %}
+          {% with field=adminform.form.background_color %}
+            <div class="field field-{{field.name}}">
+              <label class="form-label">{{ field.label }}</label>
+              <span class="help-text">{{ field.help_text }}</span>
+              {{field}}
+            </div>
+          {% endwith %}
         </div>
-        {% endwith %}
         {% comment %} Espaçamento {% endcomment %}
         <div class="field field-padding">
           <label class="form-label">Espaçamentos {% include "blocks/plugin/tooltip.html" with message="Ajuste o 'Espaçamento Interno' para controlar o espaço entre o conteúdo de um elemento e suas bordas." direction="left" image="padding" %}</label>

app/contrib/ds/blocks/tests/test_forms.py

@@ -0,0 +1,28 @@
+import pytest
+
+from django import forms
+
+from contrib.ds.blocks.forms import BlockForm, BlockTemplateForm
+
+
+base_fields = [
+    "template",
+    "element",
+    "layout",
+    "is_container",
+    "background_image",
+    "background_size",
+]
+
+
+def test_fields_block_tempalte_form():
+    assert base_fields == BlockTemplateForm.Meta.untangled_fields
+
+
+def test_fields_block_form():
+    assert base_fields == BlockForm.Meta.untangled_fields
+
+
+def test_template_hidden_on_block_form():
+    form = BlockForm()
+    assert isinstance(form.fields["template"].widget, forms.HiddenInput)

app/contrib/ds/blocks/tests/test_render_plugins.py

@@ -7,6 +7,7 @@
 from ..cms_plugins import BlockPlugin
 from ..forms import BlockForm, BlockTemplateForm
 from ..models import BlockElement, BlockLayout
+from contrib.ds.tests.helpers import get_filer_image
 
 
 # Create your tests here.
@@ -21,10 +22,19 @@ def setUp(self):
         self.placeholder = self.home.placeholders.get(slot="content")
         self.superuser = self.get_superuser()
 
+        self.image = get_filer_image()
+        self.background_size = "cover"
+
     def tearDown(self):
         self.home.delete()
         self.superuser.delete()
 
+        if self.image:
+            self.image.delete()
+            del self.image
+            with self.assertRaises(AttributeError):
+                print(self.image)
+
     def test_block_plugin(self):
         plugin = add_plugin(
             placeholder=self.placeholder,
@@ -365,3 +375,19 @@ def test_setup_initial_fields_on_template_block_form(self):
         self.assertEqual(form.fields["is_container"].initial, True)
         self.assertEqual(form.fields["padding_top"].initial, "4")
         self.assertEqual(form.fields["padding_bottom"].initial, "4")
+
+    def test_background_image_block_render_html(self):
+        model_instance = add_plugin(
+            placeholder=self.placeholder,
+            plugin_type="BlockPlugin",
+            language=self.language,
+            background_image=self.image,
+        )
+        model_instance.full_clean()
+
+        renderer = ContentRenderer(request=RequestFactory())
+
+        html = renderer.render_plugin(model_instance, {})
+        expected_html = f"""<div style="background-image:url('{self.image.url}');background-size:{self.background_size};background-repeat:no-repeat;background-position:center"></div>"""
+
+        self.assertHTMLEqual(html, expected_html)

app/contrib/ds/static/ds/css/change_form.scss

@@ -43,10 +43,12 @@ fieldset.module {
         border: none;
         margin-bottom: 0;
     }
+}
 
-    .field-padding {
-        grid-column: 2 / span 2;
-    }
+.form-col-flex {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
 }
 
 .form-radio, .field-custom-radio-widget, .field-padding-widget, .field-radio-inline-widget, .field-gap-widget {
@@ -247,4 +249,6 @@ input:checked + .slider:before {
     display: flex;
     gap: 10px;
     align-items: start;
-}
+}
+
+@import "./input_file.scss";