summaryrefslogtreecommitdiffstats
path: root/extensions/BugModal
diff options
context:
space:
mode:
authorByron Jones <glob@mozilla.com>2015-04-01 05:09:11 +0200
committerByron Jones <glob@mozilla.com>2015-04-01 05:09:11 +0200
commitae43a6a2e60c07a474debe60c4a1f08753d42b35 (patch)
tree7bd2eef9ec1f78f09451c6fc3cbe2672c220cdcb /extensions/BugModal
parentb527e84a026f0211391f93b487b33009f7cb0bce (diff)
downloadbugzilla-ae43a6a2e60c07a474debe60c4a1f08753d42b35.tar.gz
bugzilla-ae43a6a2e60c07a474debe60c4a1f08753d42b35.tar.xz
Bug 1146777: use lightbox for images
Diffstat (limited to 'extensions/BugModal')
-rw-r--r--extensions/BugModal/lib/MonkeyPatches.pm11
-rw-r--r--extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl9
-rw-r--r--extensions/BugModal/template/en/default/bug_modal/attachments.html.tmpl13
-rw-r--r--extensions/BugModal/web/bug_modal.css54
-rw-r--r--extensions/BugModal/web/bug_modal.js56
-rw-r--r--extensions/BugModal/web/image.pngbin0 -> 1675 bytes
6 files changed, 140 insertions, 3 deletions
diff --git a/extensions/BugModal/lib/MonkeyPatches.pm b/extensions/BugModal/lib/MonkeyPatches.pm
index 1d902b2a9..596746b32 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 08849ef17..2e7b3c87b 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 %]
<pre class="comment-text [%= "bz_private" IF comment.is_private %]" id="ct-[% comment.count FILTER none %]"
[% IF comment.collapsed +%] style="display:none"[% END ~%]
- >[% comment.body_full FILTER quoteUrls(bug, comment) %]</pre>
+ >[% FILTER collapse %]
+ [% IF comment.is_about_attachment && comment.attachment.is_image ~%]
+ <a href="attachment.cgi?id=[% comment.attachment.id FILTER none %]"
+ title="[% comment.attachment.description FILTER html %]"
+ class="lightbox"><img src="extensions/BugModal/web/image.png" width="16" height="16"></a>
+ [% END %]
+ [% END %]
+ [%~ comment.body_full FILTER quoteUrls(bug, comment) ~%]</pre>
[% 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 3055cc861..f9209d3bf 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 %]>
<td class="attach-desc-td">
<div class="attach-desc">
- <a href="attachment.cgi?id=[% attachment.id FILTER none %]">
- [%~ attachment.description FILTER html %]</a>
+ [% IF attachment.is_image %]
+ <a href="attachment.cgi?id=[% attachment.id FILTER none %]"
+ title="[% attachment.description FILTER html %]"
+ class="lightbox">
+ <img src="extensions/BugModal/web/image.png" width="16" height="16">
+ [%~ attachment.description FILTER html %]
+ </a>
+ [% ELSE %]
+ <a href="attachment.cgi?id=[% attachment.id FILTER none %]">
+ [%~ attachment.description FILTER html %]</a>
+ [% END %]
</div>
<div>
<span class="attach-time">[% INCLUDE bug_modal/rel_time.html.tmpl ts=attachment.attached %]</span>
diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
index 75a772d2a..85bae0e9d 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 2411f4c15..ec53c32c2 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 = $('<div>')
+ .prop('id', 'lb_overlay')
+ .css({ opacity: 0 })
+ .appendTo('body');
+ var overlay2 = $('<div>')
+ .prop('id', 'lb_overlay2')
+ .css({ top: $(window).scrollTop() + 5 })
+ .appendTo('body');
+ var title = $('<div>')
+ .prop('id', 'lb_text')
+ .appendTo(overlay2);
+ var img = $('<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 = $('<button>')
+ .prop('id', 'lb_close_btn')
+ .prop('type', 'button')
+ .addClass('minor')
+ .text('Close')
+ .appendTo(overlay2);
+ title.append(el.title);
+ overlay.add(overlay2).click(lb_close);
+ img.add(overlay).animate({ opacity: 1 }, 200);
+}
+
+function lb_close(event) {
+ event.preventDefault();
+ $(document).unbind('keyup.lb');
+ $('#lb_overlay, #lb_overlay2, #lb_close_btn, #lb_img, #lb_text').remove();
+}
+
// no-ops
function initHidingOptionsForIE() {}
function showFieldWhen() {}
diff --git a/extensions/BugModal/web/image.png b/extensions/BugModal/web/image.png
new file mode 100644
index 000000000..9db05af46
--- /dev/null
+++ b/extensions/BugModal/web/image.png
Binary files differ