🎨 [#1795] Removed tag and made some file-upload styles conforming to …

…design
maykinmedia · Nov 20, 2023 · 57f273f · 57f273f
1 parent 8bcc307
commit 57f273f
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 100 deletions.
diff --git a/src/open_inwoner/components/templates/components/Button/Button.html b/src/open_inwoner/components/templates/components/Button/Button.html
@@ -21,7 +21,7 @@
         {% endif %}
     </a>
 {% else %}
-    <{{ tag }}
+    <button
         class="{{ classes }}"
         type="{{type}}"
         name="{{ name }}"
@@ -42,5 +42,5 @@
         {% else %}
             {% if not hide_text %}{{text}}{% endif %}
         {% endif %}
-    </{{ tag }}>
+    </button>
 {% endif %}
diff --git a/src/open_inwoner/components/templates/components/Form/FileInput.html b/src/open_inwoner/components/templates/components/Form/FileInput.html
@@ -4,8 +4,17 @@
 <div class="form__control file-input">
     {% 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">
-        {% button primary=True tag='label' text=text|default:_('Sleep of selecteer bestand') extra_attributes='for='|add:field.auto_id %}
+        <div class="inputfile-group">
+            <input class="file-input__input" id="{{ field.auto_id }}" name="file" type="file">
+            <label class="label" for="{{ field.auto_id }}">
+                <span class="input-button input-button--emptied"><span class="button button--primary" href="#document-upload" aria-label="_('Sleep of selecteer bestand')">{% trans 'Sleep of selecteer bestand' %}</span></span>
+                <span class="input-button input-button--selected"><span class="button button--textless button--icon button--transparent" href="#document-upload" aria-label="_('Selecteer bestand')">
+                {% icon icon="control_point" icon_position="before" primary=True outlined=True %}
+                {% trans 'Selecteer bestand' %}
+                </span></span>
+            </label>
+        </div>
+
     {% endrender_card %}
 
     {% if field.help_text %}<p class="p p--muted p--small">{{ field.help_text }}</p>{% endif %}

diff --git a/src/open_inwoner/components/templatetags/button_tags.py b/src/open_inwoner/components/templatetags/button_tags.py
@@ -58,7 +58,6 @@ def button(text, **kwargs):
         - icon: string | the icon that you want to display.
         - icon_position: enum[before, after] | where the icon should be positioned to the text.
         - icon_outlined: bool | if the outlined icons should be used.
-        - tag: string | The tag to use (if not a link, defaults to button)
         - text_icon: string | An additional icon to show before the (current value) text.
         - type: string | the type of button that should be used.
         - title: string | The HTML title attribute if different than the text.
@@ -130,5 +129,4 @@ def get_classes():
 
     kwargs["classes"] = get_classes()
     kwargs["text"] = text
-    kwargs["tag"] = kwargs.get("tag", "button")
     return {**kwargs}
diff --git a/src/open_inwoner/js/components/upload-document/file-uploader.js b/src/open_inwoner/js/components/upload-document/file-uploader.js
diff --git a/src/open_inwoner/scss/components/File/File.scss b/src/open_inwoner/scss/components/File/File.scss
@@ -20,7 +20,13 @@
     box-sizing: border-box;
   }
 
+  &__file .link:hover {
+    color: var(--font-color-body);
+    text-decoration: none;
+  }
+
   &__file .p {
+    max-width: var(--mobile-xs-width);
     width: 100%;
     white-space: nowrap;
     overflow: hidden;

diff --git a/src/open_inwoner/scss/components/Form/FileInput.scss b/src/open_inwoner/scss/components/Form/FileInput.scss
@@ -1,7 +1,14 @@
 .file-input {
-  .card:first-child {
-    text-align: center;
-    position: relative;
+  .card {
+    &:first-child {
+      text-align: center;
+      position: relative;
+    }
+
+     .label .input-button > .button {
+       padding-bottom: var(--spacing-medium);
+      position: static;
+    }
   }
 
   &--drag-active .card:first-child {
@@ -24,9 +31,21 @@
   }
 
   &__input {
+    left: 0;
     position: absolute;
     opacity: 0;
     pointer-events: none;
+    width: 100%;
+    height: var(--row-height-giant);
+  }
+
+  .input-button {
+    display: inline-block;
+
+    &--selected {
+      //display: none; TODO: toggle this with JS
+      cursor: pointer;
+    }
   }
 
   > .p {

diff --git a/src/open_inwoner/templates/pages/cases/status_inner.html b/src/open_inwoner/templates/pages/cases/status_inner.html
@@ -81,12 +81,6 @@ <h3 class="status-list__notification-h3"><span class="link">{{ case.end_statusty
                 </aside>
             {% endif %}
 
-            {#  Documents. #}
-            {% if case.documents %}
-                <h2 class="h2" id="documents">{% trans 'Documenten' %}</h2>
-                {% case_document_list case.documents %}
-            {% endif %}
-
             {% if case.internal_upload_enabled %}
                 <h2 class="h2" id="documents-upload">{% trans "Document uploaden" %}</h2>
 
@@ -119,6 +113,12 @@ <h2 class="h2" id="documents-upload">{% trans "Document toevoegen" %}</h2>
                 {% endbutton_row %}
             {% endif %}
 
+            {#  Documents. #}
+            {% if case.documents %}
+                <h2 class="h2" id="documents">{% trans 'Documenten' %}</h2>
+                {% case_document_list case.documents %}
+            {% endif %}
+
             {#  Contact moment form #}
             {% if case.contact_form_enabled %}
                 <section id="cases-contact-form" class="form_contact">