From 45896cc26680828090b6b051f6e2bdd2becaf9d5 Mon Sep 17 00:00:00 2001
From: chylex <info@chylex.com>
Date: Sun, 30 Oct 2016 23:35:54 +0100
Subject: [PATCH] Add styles and templates for embedded images and downloads

---
 src/renderer/scr.discord.js | 10 ++++++++++
 src/renderer/style.css      | 19 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/renderer/scr.discord.js b/src/renderer/scr.discord.js
index e513fe7..1f286c0 100644
--- a/src/renderer/scr.discord.js
+++ b/src/renderer/scr.discord.js
@@ -15,6 +15,8 @@ var DISCORD = (function(){
   var templateChannelServer;
   var templateChannelPrivate;
   var templateMessage;
+  var templateEmbedImage;
+  var templateEmbedDownload;
   
   return {
     setup: function(){
@@ -38,6 +40,14 @@ var DISCORD = (function(){
         "<div class='message'>{contents}</div>",
         "</div>"
       ].join(""));
+      
+      templateEmbedImage = new TEMPLATE([
+        "<a href='{url}' class='embed'><img src='{url}' title='(image attachment not found)'></a>"
+      ].join(""));
+      
+      templateEmbedDownload = new TEMPLATE([
+        "<a href='{url}' class='embed download'>Download {filename}</a>"
+      ].join(""));
     },
     
     getChannelHTML: function(channel){
diff --git a/src/renderer/style.css b/src/renderer/style.css
index 30f0f87..c6c27be 100644
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -166,7 +166,7 @@ body {
  * MESSAGE CONTENT *
  *******************/
 
-#messages .message {
+.message {
   margin-top: 6px;
   color: rgba(255, 255, 255, 0.7);
   font-size: 15px;
@@ -193,12 +193,29 @@ body {
   margin: 0;
 }
 
+.message .embed {
+  display: block;
+  margin-top: 8px;
+}
+
 .message img {
   max-height: 320px;
   max-width: calc(100vw - 299px);
   border-radius: 3px;
 }
 
+.message .download {
+  display: inline-block;
+  margin-right: 8px;
+  padding: 8px 9px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  border-radius: 3px;
+}
+
+.message .embed:first-child, .message .download + .download {
+  margin-top: 0;
+}
+
 .message code {
   background-color: #2E3136;
   border: 2px solid #282B30;