From 087b753457acf7990eeab6a0674b78ff03318a50 Mon Sep 17 00:00:00 2001 From: jiroghianni Date: Thu, 30 Nov 2023 10:02:34 +0100 Subject: [PATCH] [#1870] Corrected file-upload spacing and added fullwidth button --- .../templates/components/Form/FileInput.html | 10 ++++- .../components/Form/FormActions.html | 2 +- .../js/components/form/FileInput.js | 41 ++++++++++++++----- .../scss/components/Button/Button.scss | 9 ++++ .../scss/components/Cases/CaseDetail.scss | 10 +---- .../scss/components/Form/FileInput.scss | 15 +++++++ .../components/Form/FileInputDefault.scss | 2 +- .../templates/pages/cases/document_form.html | 2 +- 8 files changed, 67 insertions(+), 24 deletions(-) diff --git a/src/open_inwoner/components/templates/components/Form/FileInput.html b/src/open_inwoner/components/templates/components/Form/FileInput.html index 8fff7490bc..4ca10be202 100644 --- a/src/open_inwoner/components/templates/components/Form/FileInput.html +++ b/src/open_inwoner/components/templates/components/Form/FileInput.html @@ -2,13 +2,19 @@ {% get_solo 'openzaak.OpenZaakConfig' as openzaak_config %} -
+
{% render_card direction="vertical" %} {% icon icon="upload" icon_position="before" outlined=True %} -
diff --git a/src/open_inwoner/js/components/form/FileInput.js b/src/open_inwoner/js/components/form/FileInput.js index c8d6cb3846..e2115789cc 100644 --- a/src/open_inwoner/js/components/form/FileInput.js +++ b/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,7 +57,7 @@ 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`) @@ -49,7 +65,7 @@ export class FileInput extends Component { /** * 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,7 +169,7 @@ 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() @@ -161,7 +177,7 @@ export class FileInput extends Component { /** * 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 diff --git a/src/open_inwoner/scss/components/Button/Button.scss b/src/open_inwoner/scss/components/Button/Button.scss index 28f7045ad3..1974b4618c 100644 --- a/src/open_inwoner/scss/components/Button/Button.scss +++ b/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, diff --git a/src/open_inwoner/scss/components/Cases/CaseDetail.scss b/src/open_inwoner/scss/components/Cases/CaseDetail.scss index 103da341b3..cf7dce003f 100644 --- a/src/open_inwoner/scss/components/Cases/CaseDetail.scss +++ b/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 { diff --git a/src/open_inwoner/scss/components/Form/FileInput.scss b/src/open_inwoner/scss/components/Form/FileInput.scss index b55832cab6..ae77579a14 100644 --- a/src/open_inwoner/scss/components/Form/FileInput.scss +++ b/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'] { diff --git a/src/open_inwoner/scss/components/Form/FileInputDefault.scss b/src/open_inwoner/scss/components/Form/FileInputDefault.scss index c75537b11c..82bce3ba6a 100644 --- a/src/open_inwoner/scss/components/Form/FileInputDefault.scss +++ b/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); } } diff --git a/src/open_inwoner/templates/pages/cases/document_form.html b/src/open_inwoner/templates/pages/cases/document_form.html index 3cb7880d63..4ac2da2592 100644 --- a/src/open_inwoner/templates/pages/cases/document_form.html +++ b/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" %}

{% trans "Verwijder eerst bestanden die niet voldoen aan de voorwaarden" %}

{% endrender_form %}