[#1870] Corrected file-upload spacing and added fullwidth button

src/open_inwoner/components/templates/components/Form/FileInput.html

@@ -2,13 +2,19 @@
 
 {% get_solo 'openzaak.OpenZaakConfig' as openzaak_config %}
 
-<div class="form__control file-input">
+<div class="form__control file-input" aria-live="polite">
     {% render_card direction="vertical" %}
         {% icon icon="upload" icon_position="before" outlined=True %}
         <input class="file-input__input" id="{{ field.auto_id }}" name="file" type="file"{% if field.field.required %} required{% endif %}{% if multiple %} multiple{% endif %} data-max-size="{{ openzaak_config.max_upload_size }}">
-        <label class="button button--primary" for="{{ field.auto_id }}">
+        <label class="button button--primary file-input__empty" for="{{ field.auto_id }}">
             {% if multiple %}{% trans 'Sleep of selecteer bestanden' %}{% else %}{% trans 'Sleep of selecteer bestand' %}{% endif %}
         </label>
+        <div class="file-input__selected">
+            <label class="button button--borderless" for="{{ field.auto_id }}">
+            {% icon icon="add_circle_outlined" icon_position="before" outlined=True %}
+                {% if multiple %}{% trans 'Selecteer meer bestanden' %}{% else %}{% trans 'Selecteer ander bestand' %}{% endif %}
+            </label>
+        </div>
     {% endrender_card %}
 
     {% if field.help_text %}<p class="p p--small p--upload-info">{{ field.help_text }}</p>{% endif %}

src/open_inwoner/components/templates/components/Form/FormActions.html

@@ -3,5 +3,5 @@
     {% if secondary_text %}{% button href=secondary_href secondary=secondary text=secondary_text icon=secondary_icon icon_position=secondary_icon_position form_id=form_id %}{% endif %}
     {% if secondary_name %}{% button name=secondary_name type="submit" secondary=secondary text=secondary_text icon=secondary_icon icon_position=secondary_icon_position form_id=form_id %}{% endif %}
     {% if secondary_value %}{% button name=secondary_name value=secondary_value type="submit" secondary=secondary text=secondary_text icon=secondary_icon icon_position=secondary_icon_position form_id=form_id %}{% endif %}
-    {% button text=primary_text icon=primary_icon primary=primary type="submit" icon_position="after" hide_text=hide_primary_text transparent=transparent form_id=form_id %}
+    {% button text=primary_text icon=primary_icon primary=primary type="submit" icon_position="after" hide_text=hide_primary_text transparent=transparent form_id=form_id extra_classes="button--fullwidth" %}
 </div>

src/open_inwoner/js/components/form/FileInput.js

@@ -25,12 +25,28 @@ export class FileInput extends Component {
 
   /**
    * Return the input associated with the file input.
-   * @return {HTMLInputElement}
+   * @return HTMLInputElement
    */
   getInput() {
     return this.node.querySelector(`${FileInput.selector}__input`)
   }
 
+  /**
+   * Return the label when zero files are selected.
+   * @return {HTMLInputElement}
+   */
+  getLabelEmpty() {
+    return this.node.querySelector(`${FileInput.selector}__empty`)
+  }
+
+  /**
+   * Return the label if more than 0 files are selected.
+   * @return {HTMLInputElement}
+   */
+  getLabelSelected() {
+    return this.node.querySelector(`${FileInput.selector}__selected`)
+  }
+
   /**
    * Return the element associated with the files section.
    * @return {HTMLDivElement}
@@ -41,15 +57,15 @@ export class FileInput extends Component {
 
   /**
    * Return the element associated with the file list.
-   * @return {HTMLUListElement} File list element.
+   * @return {HTMLUListElement}
    */
   getFilesList() {
     return this.node.querySelector(`${FileInput.selector} .file-list__list`)
   }
 
   /**
    * Returns the element associated with the help section.
-   * @return {HTMLDivElement} Help section element.
+   * @return {HTMLDivElement}
    */
   getUploadHelpElement() {
     return document.querySelector('.p--upload-help')
@@ -92,7 +108,7 @@ export class FileInput extends Component {
 
   /**
    * Gets called when files are dropped on the card (drop zone).
-   * @param {DragEvent} e - The drag event.
+   * @param {DragEvent} e
    */
   onDrop(e) {
     e.preventDefault()
@@ -124,7 +140,7 @@ export class FileInput extends Component {
 
   /**
    * Gets called when click event is received on the files list, it originates from a delete button, handle the deletion accordingly.
-   * @param {PointerEvent} e - The click event.
+   * @param {PointerEvent} e
    */
   onClick(e) {
     e.preventDefault()
@@ -153,15 +169,15 @@ export class FileInput extends Component {
 
   /**
    * Generic no op (no operation) event handler. Calls `preventDefault()` on given event.
-   * @param {Event} e - The event.
+   * @param {Event} e
    */
   noop(e) {
     e.preventDefault()
   }
 
   /**
    * Adds files in dataTransfer to input, only the first item is added if not `[multiple]`.
-   * @param {File[]} files - Array of files to add.
+   * @param {File[]} files
    */
   addFiles(files) {
     const input = this.getInput()
@@ -180,9 +196,14 @@ export class FileInput extends Component {
   render() {
     const { files } = this.getInput()
     const filesSection = this.getFilesSection()
+    const additionalLabel = this.getLabelSelected()
+    const emptyLabel = this.getLabelEmpty()
 
-    // Only show files section when files are selected.
+    // Only show these sections when files are selected.
     filesSection.toggleAttribute('hidden', !files.length)
+    additionalLabel.toggleAttribute('hidden', !files.length)
+    // Hide label when no files are selected
+    emptyLabel.toggleAttribute('hidden', files.length > 0)
 
     // Populate the file list.
     const html = [...files].map((file) => this.renderFileHTML(file)).join('')
@@ -191,8 +212,8 @@ export class FileInput extends Component {
 
   /**
    * Returns the HTML to be used for a file.
-   * @param {File} file - The file to render HTML for.
-   * @return {string} HTML for the file.
+   * @param {File} file
+   * @return {string}
    */
   renderFileHTML(file) {
     const { name, size, type } = file

src/open_inwoner/scss/components/Button/Button.scss

@@ -63,6 +63,11 @@
     }
   }
 
+  &--fullwidth {
+    display: block;
+    width: 100%;
+  }
+
   &#{&}--primary {
     background-color: var(--color-primary);
     border: 1px solid var(--color-primary);
@@ -169,6 +174,10 @@
   > .link__text {
     width: 100%;
   }
+
+  &[hidden] {
+    display: none;
+  }
 }
 
 .h2 + .button,

src/open_inwoner/scss/components/Cases/CaseDetail.scss

@@ -17,7 +17,7 @@
   #document-upload {
     color: var(--color-gray-dark);
     gap: 0;
-    padding: 0 0 var(--row-height-giant) 0;
+    padding: 0 0 var(--row-height) 0;
 
     &:invalid [type='submit'] {
       @extend .button--disabled;
@@ -29,20 +29,12 @@
       justify-content: center;
       pointer-events: none;
       width: 100%;
-
-      @media (min-width: 768px) {
-        width: initial;
-      }
     }
 
     .file-list,
     .form__actions {
       display: block;
       margin: 0;
-
-      @media (min-width: 768px) {
-        display: grid;
-      }
     }
 
     .p--upload-info {

src/open_inwoner/scss/components/Form/FileInput.scss

@@ -19,6 +19,21 @@
   .card__body {
     box-sizing: border-box;
     padding: var(--row-height);
+
+    .button--borderless {
+      display: flex;
+      gap: var(--spacing-medium);
+      color: var(--color-primary);
+      font-weight: bold;
+
+      [class*='icon'] {
+        color: var(--color-primary);
+        font-size: var(--font-size-body);
+        position: static !important;
+        transform: none !important;
+        height: var(--font-size-body);
+      }
+    }
   }
 
   [class*='icon'] {

src/open_inwoner/scss/components/Form/FileInputDefault.scss

@@ -15,7 +15,7 @@ input[type='file'] {
   @media (min-width: 768px) {
     display: flex;
     flex-direction: column;
-    min-width: var(--form-width);
+    min-width: var(--mobile-xs-width);
   }
 }
 

src/open_inwoner/templates/pages/cases/document_form.html

@@ -5,6 +5,6 @@
     {% csrf_token %}
     {% input form.type no_label=True no_help=True class="label input" id="id_type" extra_classes="file-type__select" %}
     {% file_input form.files %}
-    {% form_actions primary_text=_("Upload documenten") primary_icon="arrow_forward" enctype="multipart/form-data" %}
+    {% form_actions primary_text=_("Upload documenten") enctype="multipart/form-data" %}
     <p class="p--upload-error p--small p--upload-info p--upload-help">{% trans "Verwijder eerst bestanden die niet voldoen aan de voorwaarden" %}</p>
 {% endrender_form %}