fix(ds): layout adjusts

nossas · May 17, 2024 · aa9e60c · aa9e60c
1 parent c33acf3
commit aa9e60c
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 12 deletions.
diff --git a/app/contrib/ds/admin_style/templates/admin/filer/widgets/admin_file.html b/app/contrib/ds/admin_style/templates/admin/filer/widgets/admin_file.html
@@ -20,7 +20,7 @@
          {% 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>
+            <span class="icon filer-icon filer-icon-arrow-down fa fa-upload"></span><span> Selecione um arquivo ou arraste-o para cá</span>
         </div>
 
         <span class="filerFile js-file-selector">
@@ -51,14 +51,16 @@
                 </div>
 
                 <div class="file-controls">
+                    {% if object.file.exists %}
                     <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>
+                    {% endif %}
 
                     <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="choose-file text-input-file"><span class="fa fa-search cms-icon cms-icon-search"></span>Selecione arquivo</span>
                         <span class="replace-file"><span class="fa fa-search cms-icon cms-icon-search"></span></span>
                     </a>
                 </div>

diff --git a/app/contrib/ds/blocks/migrations/0009_alter_block_background_size.py b/app/contrib/ds/blocks/migrations/0009_alter_block_background_size.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2 on 2024-05-17 18:02
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('blocks', '0008_alter_block_background_size'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='block',
+            name='background_size',
+            field=models.CharField(choices=[('cover', 'Preencher Área'), ('contain', 'Redimensionar'), ('initial', 'Tamanho Original')], default='cover', help_text='Escolha como a imagem de fundo deve ser exibida', max_length=8, verbose_name='Tamanho'),
+        ),
+    ]
diff --git a/app/contrib/ds/blocks/models.py b/app/contrib/ds/blocks/models.py
@@ -44,9 +44,9 @@ class BlockLayout(models.TextChoices):
     flex = "d-flex", _("Flexível")
 
 class BackgroundSize(models.TextChoices):
-    contain = "contain"
-    cover = "cover"
-    initial = "initial"
+    cover = "cover", _("Preencher Área")
+    contain = "contain", _("Redimensionar")
+    initial = "initial", _("Tamanho Original")
 
 
 class BlockAbstractModel(models.Model):
@@ -88,6 +88,8 @@ class BlockAbstractModel(models.Model):
             on_delete=models.SET_NULL,
     )
     background_size = models.CharField(
+        verbose_name=_("Tamanho"),
+        help_text=_("Escolha como a imagem de fundo deve ser exibida"),
         choices=BackgroundSize.choices,
         max_length=8,
         default=BackgroundSize.cover

diff --git a/app/contrib/ds/blocks/templates/blocks/plugin/change_form.html b/app/contrib/ds/blocks/templates/blocks/plugin/change_form.html
@@ -128,15 +128,34 @@ <h2>Estrutura</h2>
           <div class="field field-{{field.name}}">
             <label class="form-label">{{ field.label }} </label>
             <span class="help-text">{{ field.help_text }}</span>
-            {{field}}    
+            {{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>
+            <div class="field field-{{field.name}}">
+              <label class="form-label">{{ field.label }} </label>
+              <span class="help-text">{{ field.help_text }}</span>
+              <div class="form-radio">
+                {% with choice=field.field.choices.0 %}
+                <div class="form-check">
+                  <input class="form-check-input" type="radio" id="{{field.name}}_{{choice.0}}" name="{{field.name}}" value="{{choice.0}}"{% if field.value == choice.0 %} checked{% endif %} />
+                  <label class="form-check-label" for="{{field.name}}_{{choice.0}}">{{ choice.1 }} {% include "blocks/plugin/tooltip.html" with message="Ajusta a imagem para cobrir toda a área podendo cortar partes da imagem." direction="left" %}</label>
+                </div>
+                {% endwith %}
+                {% with choice=field.field.choices.1 %}
+                <div class="form-check">
+                  <input class="form-check-input" type="radio" id="{{field.name}}_{{choice.0}}" name="{{field.name}}" value="{{choice.0}}"{% if field.value == choice.0 %} checked{% endif %} />
+                  <label class="form-check-label" for="{{field.name}}_{{choice.0}}">{{ choice.1 }} {% include "blocks/plugin/tooltip.html" with message="Ajusta a imagem para caber inteiramente no container, sem cortes." direction="left" %}</label>
+                </div>
+                {% endwith %}
+                {% with choice=field.field.choices.2 %}
+                <div class="form-check">
+                  <input class="form-check-input" type="radio" id="{{field.name}}_{{choice.0}}" name="{{field.name}}" value="{{choice.0}}"{% if field.value == choice.0 %} checked{% endif %} />
+                  <label class="form-check-label" for="{{field.name}}_{{choice.0}}">{{ choice.1 }} {% include "blocks/plugin/tooltip.html" with message="Mantém o tamanho original da imagem." direction="left" %}</label>
+                </div>
+                {% endwith %}
+                </div>
+            </div>
           {% endwith %}
           {% with field=adminform.form.background_color %}
             <div class="field field-{{field.name}}">

diff --git a/app/contrib/ds/static/ds/css/input_file.scss b/app/contrib/ds/static/ds/css/input_file.scss
@@ -23,10 +23,19 @@
 .file-controls {
     display: flex;
     flex-direction: row;
+    --dca-primary: blue;
 }
 
 .file-desc-object {
     display: flex;
     flex-direction: row;
     gap: 10px;
-}
+}
+
+.text-input-file {
+    max-width: 100%;
+    font-size: 1em;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }