[#2703] Moved file-input post-button inside component

maykinmedia · Aug 29, 2024 · 67e6df8 · 67e6df8
1 parent b9e1ac8
commit 67e6df8
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/src/open_inwoner/components/templates/components/Form/FileInput.html b/src/open_inwoner/components/templates/components/Form/FileInput.html
@@ -16,6 +16,10 @@
     {% if field.help_text %}<p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--small utrecht-paragraph--oip-centered">{{ field.help_text }}</p>{% endif %}
     {% if field.errors %}{% errors errors=field.errors %}{% endif %}
 
+    <div class="form__actions--post">
+    {% form_actions primary_text=_("Upload documenten") enctype="multipart/form-data" fullwidth=True %}
+    </div>
+
     <div class="file-list" aria-live="polite">
         <div class="file-list-selection" hidden><h4 class="utrecht-heading-3 file-list-selection__heading">{% if multiple %}{% trans 'Geselecteerde bestanden' %}{% else %}{% trans 'Geselecteerd bestand' %}{% endif %}</h4></div>
         <ul class="file-list__list" aria-live="polite" data-label-delete="{% trans 'Verwijderen' %}"></ul>

diff --git a/src/open_inwoner/scss/components/Form/FileInput.scss b/src/open_inwoner/scss/components/Form/FileInput.scss
@@ -44,7 +44,7 @@
     }
   }
 
-  [class*='icon'] {
+  [class*='icons'] {
     color: var(--color-gray-dark);
     pointer-events: none;
     position: static !important;

diff --git a/src/open_inwoner/scss/components/Form/Form.scss b/src/open_inwoner/scss/components/Form/Form.scss
@@ -239,8 +239,8 @@
   &__control {
     position: relative;
 
-    *[class*='icon'],
-    *[class*='Icon'] {
+    *[class*='icons'],
+    *[class*='Icons'] {
       width: auto !important;
       position: absolute;
       right: 5px;

diff --git a/src/open_inwoner/templates/pages/cases/document_form.html b/src/open_inwoner/templates/pages/cases/document_form.html
@@ -5,8 +5,8 @@
 {% render_form id="document-upload" form=form method="POST" hxencoding="multipart/form-data" hxpost=hxpost_document_action hxtarget="#form_upload" submit_text=_("Bestand uploaden") extra_classes="case-detail-form" %}
     {% csrf_token %}
     {% input form.type no_label=True no_help=True class="label input" id="id_type" extra_classes="file-type__select" %}
+    {# Select and POST states in fileInput component #}
     {% file_input form.files max_upload_size=openzaak_config.max_upload_size allowed_file_extensions=openzaak_config.allowed_file_extensions %}
-    {% form_actions primary_text=_("Upload documenten") enctype="multipart/form-data" fullwidth=True %}
     <div class="non-field-error" hidden>
         <p class="utrecht-paragraph utrecht-paragraph--oip utrecht-paragraph--small utrecht-paragraph--oip-centered">{% trans "Verwijder eerst bestanden die niet voldoen aan de voorwaarden" %}</p>
     </div>