💄 [#1309] Added file-input toggle, file info and file error styles

Author: jiromaykin

src/open_inwoner/js/components/upload-document/show-file-info.js

@@ -71,11 +71,15 @@ if (fileUploadInput) {
     })
   }
 
-  // pseudocode:
-  // if input with type = hidden exists inside uploadform, then remove the node "form__control file-type__select"
-  //close() {
-  //     this.node.parentElement.removeChild(this.node)
-  //   }
+  // if there is only 1 case-type, remove select and its surrounding label
+  document
+    .querySelectorAll('.file-type__select')
+    .forEach(function (selectType) {
+      console.log(selectType)
+      if (selectType.querySelector('input[type="hidden"]')) {
+        selectType.style.display = 'none'
+      }
+    })
 
   // Firefox focus bug fix
   fileUploadInput.addEventListener('focus', function () {

src/open_inwoner/scss/components/Form/DocumentUpload.scss

@@ -31,7 +31,7 @@
   }
 }
 
-// styled file-input site wide
+/// File-input site wide
 input[type='file'] {
   background-color: var(--color-white);
   color: var(--color-primary-lighter);
@@ -46,7 +46,7 @@ input[type='file'] {
   cursor: pointer;
 }
 
-// styled file-input clientbutton site wide
+/// File-input button site wide
 input[type='file']::file-selector-button {
   color: var(--color-white);
   background-color: var(--color-primary);
@@ -72,45 +72,13 @@ input[type='file']::file-selector-button {
 }
 
 .form__open-upload {
-  //.upload-interface {
-  //  display: block;
-  //  width: 0;
-  //  height: 0;
-  //  opacity: 0;
-  //  padding: 0;
-  //  margin: 0;
-  //}
-
   .file-type__select {
     max-width: var(--mobile-xs-width);
   }
   .form__control > .label *[class*='icon'] {
     top: 69%;
   }
 
-  .upload__button *[class*='icon'] {
-    margin-right: var(--spacing-medium);
-  }
-  .upload__button,
-  .upload-button--disabled {
-    max-width: var(--mobile-xs-width);
-    display: flex;
-    margin-top: var(--spacing-medium);
-  }
-
-  &.upload--open {
-    .upload-interface {
-      display: block;
-      width: 100%;
-      height: initial;
-      opacity: 1;
-    }
-    .upload__button,
-    .upload-button--disabled {
-      //display: none;
-    }
-  }
-
   .input-file {
     position: relative;
     max-width: var(--mobile-xs-width);
@@ -122,7 +90,7 @@ input[type='file']::file-selector-button {
       color: orange;
     }
 
-    //styled hidden file-input for cases
+    /// Hidden file-input for cases
     .inputfile {
       display: inline-block;
       margin-top: var(--spacing-large);
@@ -132,6 +100,7 @@ input[type='file']::file-selector-button {
       overflow: hidden;
       z-index: 200;
     }
+
     .inputfile + label {
       display: inline-block;
       position: absolute;
@@ -147,6 +116,7 @@ input[type='file']::file-selector-button {
       width: 200px;
       z-index: -1;
     }
+
     .inputfile:focus + label,
     .inputfile.has-focus + label,
     .inputfile:hover + label,
@@ -155,16 +125,19 @@ input[type='file']::file-selector-button {
       top: -5px;
       transition: all 0.3s, background-color 0.3s;
     }
+
     .inputfile + label *[class*='icons'] {
       width: 1.3em;
       height: 1em;
       vertical-align: middle;
       color: white;
       margin-top: -0.15em;
     }
+
     .inputfile + label {
       cursor: pointer; /* "hand" cursor */
     }
+
     .inputfile:focus + label {
       outline: 2px solid orange;
       outline: -webkit-focus-ring-color auto 5px;