From 593dbd2d42fd2409cf6aede77fb3f1130ef37db2 Mon Sep 17 00:00:00 2001
From: Javan Makhmali <javan@javan.us>
Date: Wed, 27 Aug 2014 17:42:14 -0400
Subject: [PATCH] Add some style to attachments (thanks @uptonic)

---
 assets/demo.html                            |  98 ++++++++++++++------
 assets/file_icon.png                        | Bin 0 -> 2696 bytes
 src/trix/views/file_attachment_view.coffee  |   2 +
 src/trix/views/image_attachment_view.coffee |   1 +
 4 files changed, 72 insertions(+), 29 deletions(-)
 create mode 100644 assets/file_icon.png

diff --git a/assets/demo.html b/assets/demo.html
index 4ead7de8..da179844 100644
--- a/assets/demo.html
+++ b/assets/demo.html
@@ -35,6 +35,75 @@
         padding: 0;
       }
 
+      figure.attachment {
+        position: relative;
+        padding: 0;
+        margin: 0;
+      }
+
+      figure.attachment.file {
+        border-radius: .4rem;
+        border: 1px solid rgba(0,0,0,0.15);
+        font-size: 1em;
+        overflow: hidden;
+        padding: 1rem 1.5rem;
+        position: relative;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      figure.attachment.file:before {
+        position: relative;
+        content: '';
+        display: inline-block;
+        height: 3.6rem;
+        width: 3rem;
+        vertical-align: middle;
+        z-index: 1;
+        background-image: url("/file_icon.png");
+        background-size: auto 100%;
+        background-repeat: no-repeat;
+      }
+
+      figure.attachment.file figcaption {
+        position: relative;
+        white-space: nowrap;
+        vertical-align: middle;
+        display: inline-block;
+        z-index: 1;
+      }
+
+      figure.attachment.file span.size {
+        color: #aa9c84;
+        margin-left: 1rem;
+      }
+
+      figure.attachment.image img {
+        position: relative;
+        z-index: 1;
+      }
+
+      figure.attachment progress[value] {
+        -webkit-appearance: none;
+        appearance: none;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+      }
+
+      figure.attachment progress[value]::-webkit-progress-bar {
+        background-color: transparent;
+        border-radius: .6rem;
+        width: 100%;
+      }
+
+      figure.attachment progress[value]::-webkit-progress-value {
+        background-color: #e6f6fc;
+        border-radius: .4rem 0 0 .4rem;
+      }
+
       #debug {
         white-space: pre-wrap;
       }
@@ -91,35 +160,6 @@
         display: block;
       }
 
-      .trix-editor figure.attachment {
-        font-family: monospace;
-        width: 100px;
-        margin: 2px 4px;
-        padding: 5px;
-        border: 1px solid #BDBDBD;
-        border-radius: 3px;
-        display: inline-block;
-      }
-
-      .trix-editor .attachment .extension {
-        background-color: #BDBDBD;
-        color: white;
-        border-radius: 3px;
-        text-transform: uppercase;
-        font-size: 2em;
-        text-align: center;
-        padding: 8px 0;
-        margin-bottom: 5px;
-      }
-
-      .trix-editor .attachment figcaption {
-        font-size: .8em;
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
       textarea.debug {
         width: 90%;
         max-width: 450px;
diff --git a/assets/file_icon.png b/assets/file_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..50efaa6723e304a7e1d0e2dd827648159334d655
GIT binary patch
literal 2696
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
D5zX<+

literal 0
HcmV?d00001

diff --git a/src/trix/views/file_attachment_view.coffee b/src/trix/views/file_attachment_view.coffee
index b8b10bf0..0ee9e73e 100644
--- a/src/trix/views/file_attachment_view.coffee
+++ b/src/trix/views/file_attachment_view.coffee
@@ -6,6 +6,8 @@
 class Trix.FileAttachmentView extends Trix.AttachmentView
   render: ->
     element = super
+    element.classList.add("file")
+
     caption = document.createElement("figcaption")
     caption.textContent = @attachmentPiece.getFilename()
 
diff --git a/src/trix/views/image_attachment_view.coffee b/src/trix/views/image_attachment_view.coffee
index d9d847e9..20eb0c61 100644
--- a/src/trix/views/image_attachment_view.coffee
+++ b/src/trix/views/image_attachment_view.coffee
@@ -3,6 +3,7 @@
 class Trix.ImageAttachmentView extends Trix.AttachmentView
   render: ->
     element = super
+    element.classList.add("image")
     image = document.createElement("img")
 
     if @attachmentPiece.isPending()