From ae43a6a2e60c07a474debe60c4a1f08753d42b35 Mon Sep 17 00:00:00 2001 From: Byron Jones Date: Wed, 1 Apr 2015 11:09:11 +0800 Subject: [PATCH] Bug 1146777: use lightbox for images --- extensions/BugModal/lib/MonkeyPatches.pm | 11 ++++ .../bug_modal/activity_stream.html.tmpl | 9 ++- .../default/bug_modal/attachments.html.tmpl | 13 +++- extensions/BugModal/web/bug_modal.css | 54 +++++++++++++++++ extensions/BugModal/web/bug_modal.js | 56 ++++++++++++++++++ extensions/BugModal/web/image.png | Bin 0 -> 1675 bytes 6 files changed, 140 insertions(+), 3 deletions(-) create mode 100644 extensions/BugModal/web/image.png diff --git a/extensions/BugModal/lib/MonkeyPatches.pm b/extensions/BugModal/lib/MonkeyPatches.pm index 1d902b2a95..596746b32a 100644 --- a/extensions/BugModal/lib/MonkeyPatches.pm +++ b/extensions/BugModal/lib/MonkeyPatches.pm @@ -36,3 +36,14 @@ sub moz_nick { } 1; + +package Bugzilla::Attachment; +use strict; +use warnings; + +sub is_image { + my ($self) = @_; + return substr($self->contenttype, 0, 6) eq 'image/'; +} + +1; diff --git a/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl index 08849ef172..2e7b3c87b8 100644 --- a/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl +++ b/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl @@ -164,7 +164,14 @@ [% BLOCK comment_body %] + >[% FILTER collapse %] + [% IF comment.is_about_attachment && comment.attachment.is_image ~%] + + [% END %] + [% END %] + [%~ comment.body_full FILTER quoteUrls(bug, comment) ~%] [% END %] [% diff --git a/extensions/BugModal/template/en/default/bug_modal/attachments.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/attachments.html.tmpl index 3055cc8619..f9209d3bf4 100644 --- a/extensions/BugModal/template/en/default/bug_modal/attachments.html.tmpl +++ b/extensions/BugModal/template/en/default/bug_modal/attachments.html.tmpl @@ -20,8 +20,17 @@ " [% IF attachment.isobsolete %]style="display:none"[% END %]>
- - [%~ attachment.description FILTER html %] + [% IF attachment.is_image %] + + + [%~ attachment.description FILTER html %] + + [% ELSE %] + + [%~ attachment.description FILTER html %] + [% END %]
[% INCLUDE bug_modal/rel_time.html.tmpl ts=attachment.attached %] diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css index 75a772d2ae..85bae0e9d7 100644 --- a/extensions/BugModal/web/bug_modal.css +++ b/extensions/BugModal/web/bug_modal.css @@ -650,3 +650,57 @@ div.ui-tooltip { width: 100%; } +/* lightbox */ + +.lightbox img { + margin-right: 4px; + vertical-align: sub; +} + +#lb_img { + background-color: #fff; + border: 1px solid #666; + -webkit-box-shadow: 0 0 10px #555; + -moz-box-shadow: 0 0 10px #555; + box-shadow: 0 0 10px #555; + padding: 10px; + max-width: 90%; + margin: 20px auto; + cursor: pointer; +} + +#lb_overlay { + position: fixed; + background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); + width: 100%; + height: 100%; + top: 0px; + left: 0px; + text-align: center; + z-index: 2; +} + +#lb_overlay2 { + position: absolute; + left: 0px; + width: 100%; + text-align: center; + z-index: 2; +} + +#lb_text { + color: #fff; + font-weight: bold; + text-shadow: 1px 1px 1px #000; + position: fixed; + top: 4px; + left: 8px; + z-index: 3; + cursor: default; +} + +#lb_close_btn { + position: fixed; + top: 8px; + right: 8px; +} diff --git a/extensions/BugModal/web/bug_modal.js b/extensions/BugModal/web/bug_modal.js index 2411f4c15a..ec53c32c25 100644 --- a/extensions/BugModal/web/bug_modal.js +++ b/extensions/BugModal/web/bug_modal.js @@ -200,6 +200,15 @@ $(function() { }); } + // lightboxes + $('.lightbox, .comment-text .lightbox + span:first-of-type a:first-of-type') + .click(function(event) { + if (event.metaKey) + return; + event.preventDefault(); + lb_show(this); + }); + // // anything after this point is only executed for logged in users // @@ -725,6 +734,53 @@ function bugzilla_ajax(request, done_fn, error_fn) { }); } +// lightbox + +function lb_show(el) { + $(window).trigger('close'); + $(document).bind('keyup.lb', function(event) { + if (event.keyCode == 27) { + lb_close(event); + } + }); + var overlay = $('
') + .prop('id', 'lb_overlay') + .css({ opacity: 0 }) + .appendTo('body'); + var overlay2 = $('
') + .prop('id', 'lb_overlay2') + .css({ top: $(window).scrollTop() + 5 }) + .appendTo('body'); + var title = $('
') + .prop('id', 'lb_text') + .appendTo(overlay2); + var img = $('') + .prop('id', 'lb_img') + .prop('src', el.href) + .prop('alt', 'Loading...') + .css({ opacity: 0 }) + .appendTo(overlay2) + .click(function(event) { + event.stopPropagation(); + window.location.href = el.href; + }); + var close_btn = $('