Merge pull request #626 from taigaio/brettp-attachment_previews

Added attachment previews for images.

AUTHORS.rst

@@ -27,3 +27,4 @@ answer newbie questions, and generally made Taiga that much better:
 - Florian Bezagu
 - Ryan Swanstrom
 - Chris Wilson <chris.wilson@aridhia.com>
+- Brett Profitt <brett.profitt@gmail.com>

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Add custom videoconference system.
 - Make burndown chart collapsible at the backlog panel.
 - Ability to choose a theme (thanks to [@astagi](https://github.com/astagi))
+- Inline viewing of image attachments (thanks to [@brettp](https://github.com/brettp)).
 - i18n.
   - Add polish (pl) translation.
   - Add russian (ru) translation.

app/coffee/modules/common/attachments.coffee

@@ -245,7 +245,7 @@ AttachmentsDirective = ($config, $confirm, $templates, $translate) ->
 module.directive("tgAttachments", ["$tgConfig", "$tgConfirm", "$tgTemplate", "$translate", AttachmentsDirective])
 
 
-AttachmentDirective = ($template, $compile, $translate) ->
+AttachmentDirective = ($template, $compile, $translate, $rootScope) ->
     template = $template.get("attachment/attachment.html", true)
     templateEdit = $template.get("attachment/attachment-edit.html", true)
 
@@ -315,6 +315,12 @@ AttachmentDirective = ($template, $compile, $translate) ->
             $scope.$apply ->
                 $ctrl.removeAttachment(attachment)
 
+        $el.on "click", "div.attachment-name a", (event) ->
+            if null != attachment.name.match(/\.(jpe?g|png|gif|gifv|webm)/i)
+                event.preventDefault()
+                $scope.$apply ->
+                    $rootScope.$broadcast("attachment:preview", attachment)
+
         $scope.$on "$destroy", ->
             $el.off()
 
@@ -330,4 +336,4 @@ AttachmentDirective = ($template, $compile, $translate) ->
         restrict: "AE"
     }
 
-module.directive("tgAttachment", ["$tgTemplate", "$compile", "$translate", AttachmentDirective])
+module.directive("tgAttachment", ["$tgTemplate", "$compile", "$translate", "$rootScope", AttachmentDirective])

app/coffee/modules/common/lightboxes.coffee

@@ -624,3 +624,36 @@ WatchersLightboxDirective = ($repo, lightboxService, lightboxKeyboardNavigationS
     }
 
 module.directive("tgLbWatchers", ["$tgRepo", "lightboxService", "lightboxKeyboardNavigationService", "$tgTemplate", "$compile", WatchersLightboxDirective])
+
+
+#############################################################################
+## Attachment Preview Lighbox
+#############################################################################
+
+AttachmentPreviewLightboxDirective = ($repo, lightboxService, lightboxKeyboardNavigationService, $template, $compile) ->
+    link = ($scope, $el, attrs) ->
+        template = $template.get("common/lightbox/lightbox-attachment-preview.html", true)
+
+        $scope.$on "attachment:preview", (event, attachment) ->
+            lightboxService.open($el)
+            render(attachment)
+
+        $scope.$on "$destroy", ->
+            $el.off()
+
+        render = (attachment) ->
+            ctx = {
+                url: attachment.url,
+                title: attachment.description,
+                name: attachment.name
+            }
+
+            html = template(ctx)
+            html = $compile(html)($scope)
+            $el.html(html)
+
+    return {
+        link: link
+    }
+
+module.directive("tgLbAttachmentPreview", ["$tgRepo", "lightboxService", "lightboxKeyboardNavigationService", "$tgTemplate", "$compile", AttachmentPreviewLightboxDirective])

app/partials/attachment/attachments.jade

@@ -26,3 +26,5 @@ section.attachments
             span.text(data-type="show", translate="ATTACHMENT.SHOW_DEPRECATED")
             span.text.hidden(data-type="hide", translate="ATTACHMENT.HIDE_DEPRECATED")
             span.more-attachments-num(translate="ATTACHMENT.COUNT_DEPRECATED", translate-values="{counter: '{{ctrl.deprecatedAttachmentsCount}}'}")
+
+    div.lightbox.lightbox-block(tg-lb-attachment-preview)

app/partials/common/lightbox/lightbox-attachment-preview.jade

@@ -0,0 +1,6 @@
+.attachment-preview
+    a.close(href="", title="{{'COMMON.CLOSE' | translate}}")
+        span.icon.icon-delete
+
+    a(href!="<%- url %>", title!="<%- title %>", target="_blank", download!="<%- name %>")
+        img(src!="<%- url %>")

app/styles/modules/common/attachments.scss

@@ -183,3 +183,8 @@
         color: $gray-light;
     }
 }
+
+.attachment-preview img {
+    max-height: 95vh;
+    max-width: 95vw;
+}