Léger changements de styles et de templates.

Resources/js/widget/file_upload.js

@@ -58,6 +58,8 @@
                 $this.find('.icon')
                     .removeClass('fa-circle-o-notch fa-spin fa-file-o')
                     .addClass('fa-exclamation-triangle');
+                $this.find('.description').remove();
+                $this.find('.id').remove();
             },
             updateDisplay = function() {
                 var hasEntry = false;

Resources/less/file_upload.less

@@ -4,18 +4,17 @@ All rights reserved.
 */
 
 @import "variables.less";
-@import "bootstrap/less/mixins.less";
 
 .fileinput-entry {
-    .cancel, .delete {
-        margin-left: 0.5em;
+    & > * {
+        margin: 0 0.2em;
     }
     .description {
         display: inline;
         width: auto;
         height: auto;
         padding: @padding-xs-vertical @padding-xs-horizontal;
-        margin: 0;
+        //margin: 0;
     }
     .progress {
         height: (@line-height-computed / 2);
@@ -24,9 +23,25 @@ All rights reserved.
     .progress-text {
         float: right;
     }
+    .error {
+        display: none;
+    }
+    .size {
+        &:before { content: '('; }
+        &:after  { content: ')'; }
+    }
     &.alert {
         padding: @padding-xs-vertical @padding-xs-horizontal;
         margin-bottom: 0;
+        .name:after {
+            content: " :";
+        }
+        .error {
+            display: inline;
+        }
+        .size, .description {
+            display: none;
+        }
     }
 }
 

Resources/views/Form/file_upload.html.twig

@@ -2,8 +2,9 @@
 {% block file_upload_progress_prototype %}
     <div class="template-upload fileinput-entry">
         <div class="progress-text" style="display: none"></div>
-        <i class="fa fa-circle-o-notch fa-spin icon"></i>&nbsp;<span class="name"></span>&nbsp;(<span class="size"></span>)
-        <span class="error" style="display: none"></span>
+        <i class="fa fa-circle-o-notch fa-spin icon"></i>&nbsp;<span class="name"></span>
+        <span class="size"></span>
+        <span class="error"></span>
         <a href="#" class="danger cancel" title="{% trans %}button.cancel{% endtrans %}">
             {{- irstea_icon('remove') -}}
         </a>
@@ -19,12 +20,10 @@
         <input class="id" type="hidden" name="{{ full_name }}{% if multiple %}[{{index|default('__index__')}}]{% endif %}[id]" value="{{ file.id|default }}"/>
         <i class="fa fa-file{% if file.icon|default(false) %}-{{ file.icon }}{% endif %}-o icon"></i>&nbsp;<span class="name">
             <a{% if file %} href="{{ path('file_upload_get_content', {id: file.id, token: csrf_token}) }}"{% endif %}>{{ file.name|default }}</a>
-    </span>
-        (<span class="size">
-            {{- file.size|default -}}
-        </span>)
+        </span>
+        <span class="size">{{ file.size|default }}</span>
         <input class="form-control description" type="text" placeholder="{% trans %}form.file_upload.description.placeholder{% endtrans %}" name="{{ full_name }}{% if multiple %}[{{index|default('__index__')}}]{% endif %}[description]" value="{{ file.description|default }}"/>
-        <span class="error danger" style="display: none">ERROR</span>
+        <span class="error"></span>
         <a href="#" class="danger delete {%- if disabled or read_only %} disabled{% endif -%}" title="{% trans %}button.delete{% endtrans %}">
             {{- irstea_icon('remove') -}}
         </a>