Show attachments in issues/comments and add preview for images

2 files changed, 80 insertions, 0 deletions

diff --git a/public/css/gogs.css b/public/css/gogs.css
index 710d0c20b1..e78d7f940c 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -1794,4 +1794,29 @@ body {
     color: #444;
     font-weight: bold;
     line-height: 30px;
+}
+
+.issue-main .attachments {
+    margin: 0px 10px 10px 10px;
+}
+
+.issue-main .attachments .attachment-label {
+    margin-right: 5px;
+}
+
+.attachment-preview {
+    position: absolute;
+    top: 0px;
+    bottom: 0px;
+    
+    margin: 5px;
+    padding: 8px;
+
+    background: #fff;
+    border: 1px solid #d8d8d8;
+    box-shadow: 0 0 5px 1px #d8d8d8;
+}
+
+.attachment-preview-img {
+    border: 1px solid #d8d8d8;
 }
\ No newline at end of file
diff --git a/public/js/app.js b/public/js/app.js
index 16d1d5dab1..3d4ed62362 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -520,6 +520,61 @@ function initIssue() {
         });
     }());
 
+    // Preview for images.
+    (function() {
+        var $hoverElement = $("<div></div>");
+        var $hoverImage = $("<img />");
+
+        $hoverElement.addClass("attachment-preview");
+        $hoverElement.hide();
+
+        $hoverImage.addClass("attachment-preview-img");
+
+        $hoverElement.append($hoverImage);
+        $(document.body).append($hoverElement); 
+
+        var over = function() {
+            var $this = $(this);
+
+            if ($this.text().match(/\.(png|jpg|jpeg|gif)$/) == false) {
+                return;
+            }
+
+            if ($hoverImage.attr("src") != $this.attr("href")) {
+                $hoverImage.attr("src", $this.attr("href"));
+                $hoverImage.load(function() {
+                    var height = this.height;
+                    var width = this.width;
+
+                    if (height > 300) {
+                        var factor = 300 / height;
+
+                        height = factor * height;
+                        width = factor * width;
+                    }
+
+                    $hoverImage.css({"height": height, "width": width});
+
+                    var offset = $this.offset();
+                    var left = offset.left, top = offset.top + $this.height() + 5;
+
+                    $hoverElement.css({"top": top + "px", "left": left + "px"});
+                    $hoverElement.css({"height": height + 16, "width": width + 16});
+                    $hoverElement.show();
+                });            
+            } else {
+                $hoverElement.show();
+            }
+        };
+
+        var out = function() {
+            $hoverElement.hide();
+        };
+
+        $(".issue-main .attachments .attachment").hover(over, out);
+    }());
+
+    // Upload.
     (function() {
         var $attached = $("#attached");
         var $attachments = $("input[name=attachments]");