styling for multi-file-inputs

messages/de.msg

@@ -75,3 +75,5 @@ SheetExercise: Aufgabenstellung
 SheetHint: Hinweise
 SheetSolution: Lösung
 SheetMarking: Korrekturhinweise
+
+MultiFileUploadInfo: (Mehrere Dateien mit Shift oder Strg auswählen)

templates/multiFileField.hamlet

@@ -9,6 +9,13 @@ $forall FileUploadInfo{..} <- fileInfos
 $# new files
 <input type="file" name=#{fieldName} id=#{fieldId} multiple :req:required="required">
 
+<div .file-input__multi-info>
+    _{MsgMultiFileUploadInfo}
+
 <div .file-input__unpack>
-  <label for=#{fieldId}_zip>ZIPs entpacken
+  <label for=#{fieldId}_zip>ZIPs automatisch entpacken
   <input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips}>
+  <span .unpack-zip-info-toggler>?
+
+$# TODO: make modal available in this scope
+$# ^{modal ".unpack-zip-info-toggler" (Just "Entpackt zips automatisch nach dem Upload und fügt den Inhalt im Stamm-Verzeichnis ein.")}

templates/multiFileField.lucius

@@ -0,0 +1,37 @@
+.file-input__unpack {
+  font-size: .9rem;
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+
+  .checkbox {
+    display: inline-block;
+    margin: 0 10px;
+  }
+}
+
+.file-input__multi-info {
+  font-size: .9rem;
+  font-style: italic;
+  margin-top: 10px;
+  color: var(--color-fontsec);
+}
+
+.unpack-zip-info-toggler {
+  background-color: var(--color-dark);
+  border-radius: 50%;
+  height: 1.5rem;
+  width: 1.5rem;
+  line-height: 1.5rem;
+  font-size: 1.2rem;
+  color: white;
+  display: inline-block;
+  text-align: center;
+  cursor: pointer;
+  margin: 0 10px;
+}
+
+.file-input__list {
+  margin-left: 15px;
+  margin-top: 10px;
+}

templates/standalone/inputs.julius

@@ -6,7 +6,7 @@
   // allows for multiple file uploads with separate inputs
   window.utils.initializeFileUpload = function(input) {
     var isMulti = input.hasAttribute('multiple');
-    var fileList = addFileList();
+    var fileList = isMulti ? addFileList() : null;
     var label = addFileLabel();
 
     function renderFileList(files) {
@@ -19,43 +19,45 @@
     }
 
     function updateLabel(files) {
-      if (isMulti) {
+      if (files.length) {
-        label.innerText = files.length + ' Dateien ausgwählt';
+        if (isMulti) {
+          label.innerText = files.length + ' Dateien ausgwählt';
+        } else {
+          label.innerHTML = files[0].name;
+        }
       } else {
-        label.innerHTML = files[0].name;
+        resetFileLabel();
       }
     }
 
     function addFileList() {
       var list = document.createElement('ol');
       list.classList.add('file-input__list');
-      input.parentElement.appendChild(list);
+      var unpackEl = input.parentElement.querySelector('.file-input__unpack');
+      if (unpackEl) {
+        input.parentElement.insertBefore(list, unpackEl);
+      } else {
+        input.parentElement.appendChild(list);
+      }
       return list;
     }
 
     function addFileLabel() {
       var label = document.createElement('label');
       label.classList.add('file-input__label');
-      // interpolate translated String here
-      label.innerText = 'Datei' + (isMulti ? 'en' : '') + ' auswählen';
       label.setAttribute('for', input.id);
       input.parentElement.insertBefore(label, input);
       return label;
     }
 
-    function addMultiInfo() {
+    function resetFileLabel() {
-      var info = document.createElement('div');
-      info.classList.add('file-input__info');
       // interpolate translated String here
-      info.innerText = '(Mehrere Dateien mit Shift oder Strg auswählen)';
+      label.innerText = 'Datei' + (isMulti ? 'en' : '') + ' auswählen';
-      input.parentElement.insertBefore(info, input);
     }
 
     // initial setup
+    resetFileLabel();
     input.classList.add('file-input__input--hidden');
-    if (isMulti) {
-      addMultiInfo();
-    }
     input.addEventListener('change', function() {
       if (isMulti) {
         renderFileList(input.files);
@@ -99,6 +101,7 @@
 
     if (!input.parentElement.classList.contains(type)) {
       var parentEl = input.parentElement;
+      var siblingEl = input.nextElementSibling;
       var wrapperEl = document.createElement('div');
       var labelEl = document.createElement('label');
       wrapperEl.classList.add(type);
@@ -106,7 +109,11 @@
       wrapperEl.appendChild(input);
       wrapperEl.appendChild(labelEl);
 
-      parentEl.appendChild(wrapperEl);
+      if (siblingEl) {
+        parentEl.insertBefore(wrapperEl, siblingEl);
+      } else {
+        parentEl.appendChild(wrapperEl);
+      }
     }
   }