2 files changed, 126 insertions, 0 deletions

diff --git a/public/css/gogs.css b/public/css/gogs.css
index 710d0c20..cc48f211 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -1794,4 +1794,46 @@ 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;
+}
+
+#attachments-button {
+    float: left;
+}
+
+#attached {
+    height: 18px;
+    margin: 10px 10px 15px 10px;
+}
+
+#attached-list .label {
+    margin-right: 10px;
+}
+
+#issue-create-form #attached {
+    margin-bottom: 0;
 }
\ No newline at end of file
diff --git a/public/js/app.js b/public/js/app.js
index 7d4e7839..7ffcbd4a 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -520,6 +520,90 @@ 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)$/i) == 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 $attachedList = $("#attached-list");
+        var $addButton = $("#attachments-button");
+
+        var fileInput = $("#attachments-input")[0];
+
+        fileInput.addEventListener("change", function(event) {
+            $attachedList.empty();
+            $attachedList.append("<b>Attachments:</b> ");
+
+            for (var index = 0; index < fileInput.files.length; index++) {
+                var file = fileInput.files[index];
+
+                var $span = $("<span></span>");
+
+                $span.addClass("label");
+                $span.addClass("label-default");
+
+                $span.append(file.name.toLowerCase());
+                $attachedList.append($span);
+            }
+        });
+
+        $addButton.on("click", function() {
+            fileInput.click();
+            return false;
+        });
+    }());
+
     // issue edit mode
     (function () {
         $("#issue-edit-btn").on("click", function () {