From b025bb57ac1123b82b9e44be836c6f044dc81478 Mon Sep 17 00:00:00 2001
From: Darren <darren@darrenwhitlen.com>
Date: Fri, 23 Nov 2012 21:30:22 +0000
Subject: [PATCH] Client: Media message styling

---
 client/assets/css/style.css |  5 +++++
 client/assets/dev/view.js   | 29 +++++++++++++++++++++++------
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/client/assets/css/style.css b/client/assets/css/style.css
index 61af74b..90c6cdd 100644
--- a/client/assets/css/style.css
+++ b/client/assets/css/style.css
@@ -341,6 +341,11 @@ html, body { height:100%; }
 #kiwi.theme_relaxed .messages .msg.highlight { background:#D9D9D9; }
 
 
+#kiwi.theme_relaxed .messages .msg .media { margin-left:0.5em; }
+#kiwi.theme_relaxed .messages .msg .media .media_close { font-size:0.9em; }
+#kiwi.theme_relaxed .messages .msg .media .media_content { margin:10px 0 0 10px; }
+#kiwi.theme_relaxed .messages .msg .media .media_content img { padding:3px; border:1px solid gray; }
+
 
 #kiwi.theme_relaxed #memberlists {
     background-color: #DADADA;
diff --git a/client/assets/dev/view.js b/client/assets/dev/view.js
index df83a45..fbccdd5 100644
--- a/client/assets/dev/view.js
+++ b/client/assets/dev/view.js
@@ -1204,29 +1204,46 @@ _kiwi.view.MediaMessage = Backbone.View.extend({
     },
 
     initialize: function () {
+        // Get the URL from the data
         this.url = this.$el.data('url');
     },
 
+    // Close the media content and remove it from display
     close: function () {
-        this.$el.find('.media_content').remove();
+        var that = this;
+        this.$content.slideUp('fast', function () {
+            that.$content.remove();
+        });
     },
 
+    // Open the media content within its wrapper
     open: function () {
-        var $content = $('<div class="media_content"><a class="media_close">[x]</a></div>');
-        $content.append('<a href="' + this.url + '" target="_blank"><img height="100" src="' + this.url + '" /></a>');
+        // Create the content div if we haven't already
+        if (!this.$content) {
+            this.$content = $('<div class="media_content"><a class="media_close"><i class="icon-chevron-up"></i> Close media</a><br /></div>');
+            this.$content.append('<a href="' + this.url + '" target="_blank"><img height="100" src="' + this.url + '" /></a>');
+        }
 
-        this.$el.append($content);
+        // Now show the content if not already
+        if (!this.$content.is(':visible')) {
+            // Hide it first so the slideDown always plays
+            this.$content.hide();
+
+            // Add the media content and slide it into view
+            this.$el.append(this.$content);
+            this.$content.slideDown();
+        }
     }
 
 }, {
 
-    // Build the HTML from a URL
+    // Build the closed media HTML from a URL
     buildHtml: function (url) {
         var html = '';
 
         // Is it an image?
         if (url.match(/(\.jpe?g|\.gif|\.bmp|\.png)\??$/i)) {
-            html += '<span class="media" data-url="' + url + '" title="Open Image"><a class="open"><i class="icon-play"></i></a></span>';
+            html += '<span class="media" data-url="' + url + '" title="Open Image"><a class="open"><i class="icon-chevron-right"></i></a></span>';
         }
 
         return html;
-- 
2.25.1