From 1ed4670f549c0ecc40569a0fd65b04eb4d0791ef Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 1 Jul 2018 15:31:45 +0200
Subject: [PATCH] style update for list of previously uploaded files

---
 templates/multiFileField.hamlet    |  6 +++---
 templates/multiFileField.lucius    | 31 ++++++++++++++++++++++++++++++
 templates/standalone/inputs.julius | 11 ++---------
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/templates/multiFileField.hamlet b/templates/multiFileField.hamlet
index e12a1864f..62123a11e 100644
--- a/templates/multiFileField.hamlet
+++ b/templates/multiFileField.hamlet
@@ -1,9 +1,9 @@
 $newline never
 $forall FileUploadInfo{..} <- fileInfos
-  <div .file-checkbox__container :fuiChecked:.file-checkbox__container--checked>
-    <label .file-checkbox__label.reactive-label.btn for=#{fuiHtmlId}>#{fuiTitle}
+  <div .file-container :fuiChecked:.file-container--checked>
+    <label .file-container__label.btn for=#{fuiHtmlId}>#{fuiTitle}
     <div .checkbox>
-      <input .file-checkbox.js-file-checkbox id=#{fuiHtmlId} name=#{fieldName} :fuiChecked:checked value=#{toPathPiece fuiId} type="checkbox">
+      <input .file-container__checkbox.js-file-checkbox id=#{fuiHtmlId} name=#{fieldName} :fuiChecked:checked value=#{toPathPiece fuiId} type="checkbox">
       <label for=#{fuiHtmlId}>
 
 $# new files
diff --git a/templates/multiFileField.lucius b/templates/multiFileField.lucius
index 3ee5988e1..9f371dc11 100644
--- a/templates/multiFileField.lucius
+++ b/templates/multiFileField.lucius
@@ -22,3 +22,34 @@
   margin-top: 10px;
   font-weight: 600;
 }
+
+.file-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+
+  &.file-container--checked {
+
+    &::after {
+      content: none;
+    }
+
+    .file-container__label {
+      opacity: 1;
+    }
+  }
+
+  &::after {
+    /* TODO: get this from .msg-file */
+    content: '(wird entfernt)';
+    margin-left: 12px;
+  }
+
+  .checkbox {
+    margin-left: 12px;
+  }
+}
+
+.file-container__label {
+  opacity: 0.4;
+}
diff --git a/templates/standalone/inputs.julius b/templates/standalone/inputs.julius
index 027a5aa76..0c5624444 100644
--- a/templates/standalone/inputs.julius
+++ b/templates/standalone/inputs.julius
@@ -72,7 +72,7 @@
     // adds eventlistener(s)
     function addListener(container) {
       input.addEventListener('change', function(event) {
-        container.classList.toggle('file-checkbox__container--checked', this.checked);
+        container.classList.toggle('file-container--checked', this.checked);
       });
     }
 
@@ -80,18 +80,11 @@
     function setup() {
       var cont = input.parentNode;
       while (cont !== document.body) {
-        if (cont.classList.contains('file-checkbox__container')) {
+        if (cont.matches('.file-container')) {
           break;
         }
         cont = cont.parentNode;
       }
-
-      // take care of properly moving elements
-      if (input.parentNode.classList.contains('checkbox')) {
-        input.parentNode.classList.add('file-checkbox__checkbox');
-      } else {
-        input.classList.add('file-checkbox__checkbox');
-      }
       addListener(cont);
     }
     setup();