diff --git a/app/assets/javascripts/discourse/app/lib/lightbox.js b/app/assets/javascripts/discourse/app/lib/lightbox.js
index 73c903ecfa..2cd78c0bd7 100644
--- a/app/assets/javascripts/discourse/app/lib/lightbox.js
+++ b/app/assets/javascripts/discourse/app/lib/lightbox.js
@@ -34,6 +34,7 @@ export default function (elem, siteSettings) {
mainClass: "mfp-zoom-in",
tClose: I18n.t("lightbox.close"),
tLoading: spinnerHTML,
+ prependTo: Ember.testing && document.getElementById("ember-testing"),
gallery: {
enabled: true,
@@ -106,6 +107,14 @@ export default function (elem, siteSettings) {
""
);
}
+ src.push(
+ '' +
+ renderIcon("string", "image") +
+ I18n.t("lightbox.open") +
+ ""
+ );
return src.join(" · ");
},
},
diff --git a/app/assets/javascripts/discourse/tests/acceptance/lightbox-test.js b/app/assets/javascripts/discourse/tests/acceptance/lightbox-test.js
new file mode 100644
index 0000000000..997279196f
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/acceptance/lightbox-test.js
@@ -0,0 +1,50 @@
+import { click, visit } from "@ember/test-helpers";
+import { cloneJSON } from "discourse-common/lib/object";
+import topicFixtures from "discourse/tests/fixtures/topic";
+import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
+import { test } from "qunit";
+
+acceptance("Lightbox", function (needs) {
+ needs.user();
+
+ needs.pretender((server, helper) => {
+ const topicResponse = cloneJSON(topicFixtures["/t/280/1.json"]);
+ topicResponse.post_stream.posts[0].cooked += `
`;
+
+ server.get("/t/280.json", () => helper.response(topicResponse));
+ server.get("/t/280/:post_number.json", () =>
+ helper.response(topicResponse)
+ );
+ });
+
+ test("Shows download and direct URL", async function (assert) {
+ await visit("/t/internationalization-localization/280");
+ await click(".lightbox");
+
+ assert.equal(
+ query(".mfp-title").textContent,
+ "image · 1500×842 234 KB · download · original image"
+ );
+
+ assert.equal(
+ query(".image-source-link:nth-child(1)").href,
+ "http://discourse.local/uploads/default/ad768537789cdf4679a18161ac0b0b6f0f4ccf9e"
+ );
+
+ assert.equal(
+ query(".image-source-link:nth-child(2)").href,
+ "http://discourse.local/uploads/default/original/1X/ad768537789cdf4679a18161ac0b0b6f0f4ccf9e.jpeg"
+ );
+
+ await click(".mfp-close");
+ });
+});
diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss
index e4fc9e5333..b96367f538 100644
--- a/app/assets/stylesheets/common/base/magnific-popup.scss
+++ b/app/assets/stylesheets/common/base/magnific-popup.scss
@@ -486,6 +486,17 @@ button {
}
}
+ .mfp-ready {
+ .mfp-content {
+ min-width: 300px;
+ }
+ }
+
+ .mfp-title,
+ .mfp-title .image-source-link {
+ display: inline-block;
+ }
+
.mfp-image-holder {
.mfp-content {
max-width: 100%;
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index aa3ad9939f..4fa86486cd 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -3648,6 +3648,7 @@ en:
lightbox:
download: "download"
+ open: "original image"
previous: "Previous (Left arrow key)"
next: "Next (Right arrow key)"
counter: "%curr% of %total%"
diff --git a/lib/svg_sprite/svg_sprite.rb b/lib/svg_sprite/svg_sprite.rb
index 0b1c3b757e..634937f0cc 100644
--- a/lib/svg_sprite/svg_sprite.rb
+++ b/lib/svg_sprite/svg_sprite.rb
@@ -137,6 +137,7 @@ module SvgSprite
"home",
"hourglass-start",
"id-card",
+ "image",
"info-circle",
"italic",
"key",