Attachments list improvements for upload-form

skins/elastic/styles/widgets/forms.less

@@ -651,11 +651,12 @@ html.touch .popupmenu.form {
 /*** Files upload widget with list of files, upload form and drop area ***/
 
 .file-upload {
-    // TODO
+    padding: 1rem 1rem 12rem;
+    margin: 0 1rem .25rem 1rem;
+    border-radius: .5rem;
+    border: .2rem dashed #ddd;
 
-    padding: 1em 1em 12em;
+    // TODO background image
-    margin: 1em;
-    background-color: #f4f4f4;
 
     .upload-form {
         text-align: center;
@@ -664,22 +665,43 @@ html.touch .popupmenu.form {
 
    .hint {
         margin-bottom: .5rem;
+        color: @color-form-hint;
     }
 
     .attachmentslist {
         li {
+            position: relative;
             display: flex;
+            padding-right: 1.8em;
 
             a.filename {
                 flex-grow: 1;
             }
+
+            a.delete,
+            a.cancelupload {
+                position: absolute;
+                right: 0;
+
+                &:before {
+                    margin: 0;
+                }
+            }
+
+            .inner {
+                display: none;
+            }
         }
     }
 
     &.droptarget {
-        &.hover {
-        }
         &.active {
+            border-color: darken(@color-toolbar-button-background-hover, 20%);
+        }
+
+        &.hover {
+            border-color: darken(@color-toolbar-button-background-hover, 20%);
+            background-color: @color-toolbar-button-background-hover;
         }
     }
 }

skins/elastic/styles/widgets/lists.less

@@ -749,7 +749,6 @@ html.touch {
         &:before {
             &:extend(.font-icon-class);
             content: @fa-var-file-o;
-            line-height: @attachmentslist-item-height;
             height: @attachmentslist-item-height;
         }
 
@@ -844,32 +843,28 @@ html.touch {
             color: @color-list-secondary;
         }
 
-        /* assume the filename is always first */
+        a {
-        a:first-child {
+            text-decoration: none;
-            .overflow-ellipsis;
+            line-height: @attachmentslist-item-height;
+            height: @attachmentslist-item-height;
+
+            // assume the filename is always first
+            &:first-child {
+                .overflow-ellipsis;
+            }
         }
 
+        a.cancelupload:before,
         a.delete:before {
             &:extend(.font-icon-class);
             content: @fa-var-trash;
-            text-decoration: none;
             line-height: @attachmentslist-item-height;
             height: @attachmentslist-item-height;
         }
 
-        &.uploading {
+        &.uploading:before {
-            &:before {
+            .animated-icon-class;
-                .animated-icon-class;
+            content: @fa-var-circle-o-notch;
-                content: @fa-var-circle-o-notch;
-                line-height: @attachmentslist-item-height;
-                height: @attachmentslist-item-height;
-            }
-
-            a.cancelupload:before {
-                float: right;
-                &:extend(.font-icon-class);
-                content: @fa-var-remove;
-            }
         }
     }
 }