From 8116e75aee14d35648f59fe4cf77dd0275acded1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 20 Jun 2021 16:16:39 +0200
Subject: [PATCH] Simplify showing/hiding attached file name

Note we have to render the `<p>` tag in one line because at the time of
writing browsers don't consider elements with whitespace inside as empty
[1].

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
---
 app/assets/javascripts/documentable.js             | 2 --
 app/assets/javascripts/imageable.js                | 2 --
 app/assets/stylesheets/mixins/uploads.scss         | 4 ++++
 app/components/documents/fields_component.html.erb | 4 +---
 app/components/images/fields_component.html.erb    | 4 +---
 5 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/documentable.js b/app/assets/javascripts/documentable.js
index b6b85ba8c..1a7cf33ff 100644
--- a/app/assets/javascripts/documentable.js
+++ b/app/assets/javascripts/documentable.js
@@ -92,7 +92,6 @@
     },
     clearFilename: function(data) {
       $(data.fileNameContainer).text("");
-      $(data.fileNameContainer).hide();
     },
     clearInputErrors: function(data) {
       $(data.errorContainer).find("small.error").remove();
@@ -102,7 +101,6 @@
     },
     setFilename: function(data, file_name) {
       $(data.fileNameContainer).text(file_name);
-      $(data.fileNameContainer).show();
     },
     setProgressBar: function(data, klass) {
       $(data.progressBar).find(".loading-bar").addClass(klass);
diff --git a/app/assets/javascripts/imageable.js b/app/assets/javascripts/imageable.js
index 7f0773907..5b784f475 100644
--- a/app/assets/javascripts/imageable.js
+++ b/app/assets/javascripts/imageable.js
@@ -92,7 +92,6 @@
     },
     clearFilename: function(data) {
       $(data.fileNameContainer).text("");
-      $(data.fileNameContainer).hide();
     },
     clearInputErrors: function(data) {
       $(data.errorContainer).find("small.error").remove();
@@ -105,7 +104,6 @@
     },
     setFilename: function(data, file_name) {
       $(data.fileNameContainer).text(file_name);
-      $(data.fileNameContainer).show();
     },
     setProgressBar: function(data, klass) {
       $(data.progressBar).find(".loading-bar").addClass(klass);
diff --git a/app/assets/stylesheets/mixins/uploads.scss b/app/assets/stylesheets/mixins/uploads.scss
index f7fd718fc..1aa737553 100644
--- a/app/assets/stylesheets/mixins/uploads.scss
+++ b/app/assets/stylesheets/mixins/uploads.scss
@@ -42,6 +42,10 @@
 
   .file-name {
     margin-top: 0;
+
+    &:empty {
+      display: none;
+    }
   }
 
   .loading-bar {
diff --git a/app/components/documents/fields_component.html.erb b/app/components/documents/fields_component.html.erb
index 9e8f3b5fc..c5dabe5c2 100644
--- a/app/components/documents/fields_component.html.erb
+++ b/app/components/documents/fields_component.html.erb
@@ -17,9 +17,7 @@
   </div>
 
   <div class="small-6 column">
-    <p class="file-name">
-      <%= document_attachment_file_name %>
-    </p>
+    <p class="file-name"><%= document_attachment_file_name %></p>
   </div>
 
   <div class="small-12 column">
diff --git a/app/components/images/fields_component.html.erb b/app/components/images/fields_component.html.erb
index 5e922c788..5681bca1a 100644
--- a/app/components/images/fields_component.html.erb
+++ b/app/components/images/fields_component.html.erb
@@ -19,9 +19,7 @@
   </div>
 
   <div class="small-6 column">
-    <p class="file-name">
-      <%= image_attachment_file_name %>
-    </p>
+    <p class="file-name"><%= image_attachment_file_name %></p>
   </div>
 
   <div class="small-12 column">