Client: Media message styling

diff --git a/client/assets/css/style.css b/client/assets/css/style.css
index 61af74b36b1083c4fd2b964ea5651aa193ad7688..90c6cdd00150e6b5bbce97424777075f1f980312 100644 (file)
--- 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 df83a45d2697838b0d76b5650d2b9836937989f2..fbccdd5dcc8915ff8c6e006f6bcd19da2ff43c2c 100644 (file)
--- a/client/assets/dev/view.js
+++ b/client/assets/dev/view.js
@@ -1204,29 +1204,46 @@ _kiwi.view.MediaMessage = Backbone.View.extend({
     },\r
 \r
     initialize: function () {\r
+        // Get the URL from the data\r
         this.url = this.$el.data('url');\r
     },\r
 \r
+    // Close the media content and remove it from display\r
     close: function () {\r
-        this.$el.find('.media_content').remove();\r
+        var that = this;\r
+        this.$content.slideUp('fast', function () {\r
+            that.$content.remove();\r
+        });\r
     },\r
 \r
+    // Open the media content within its wrapper\r
     open: function () {\r
-        var $content = $('<div class="media_content"><a class="media_close">[x]</a></div>');\r
-        $content.append('<a href="' + this.url + '" target="_blank"><img height="100" src="' + this.url + '" /></a>');\r
+        // Create the content div if we haven't already\r
+        if (!this.$content) {\r
+            this.$content = $('<div class="media_content"><a class="media_close"><i class="icon-chevron-up"></i> Close media</a><br /></div>');\r
+            this.$content.append('<a href="' + this.url + '" target="_blank"><img height="100" src="' + this.url + '" /></a>');\r
+        }\r
 \r
-        this.$el.append($content);\r
+        // Now show the content if not already\r
+        if (!this.$content.is(':visible')) {\r
+            // Hide it first so the slideDown always plays\r
+            this.$content.hide();\r
+\r
+            // Add the media content and slide it into view\r
+            this.$el.append(this.$content);\r
+            this.$content.slideDown();\r
+        }\r
     }\r
 \r
 }, {\r
 \r
-    // Build the HTML from a URL\r
+    // Build the closed media HTML from a URL\r
     buildHtml: function (url) {\r
         var html = '';\r
 \r
         // Is it an image?\r
         if (url.match(/(\.jpe?g|\.gif|\.bmp|\.png)\??$/i)) {\r
-            html += '<span class="media" data-url="' + url + '" title="Open Image"><a class="open"><i class="icon-play"></i></a></span>';\r
+            html += '<span class="media" data-url="' + url + '" title="Open Image"><a class="open"><i class="icon-chevron-right"></i></a></span>';\r
         }\r
 \r
         return html;\r