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",