Mirrors/thelounge
2
0
Fork 0
mirror of https://github.com/thelounge/thelounge synced 2024-11-23 04:23:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1368 from thelounge/astorije/rm-viewer-blur

Browse source 
Remove background blur filter/transition when opening the image viewer
This commit is contained in:
Jérémie Astori 2017-07-24 19:21:27 -04:00 committed by GitHub
commit 8dcb4700e3
2 changed files with 16 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
client/css/style.css
View file

@ -347,9 +347,6 @@ kbd {
#wrap { #wrap {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
/* Needed to transition blurred background when image viewer is open */
transition: filter .2s;
} }
#viewport { #viewport {
@ -2045,18 +2042,14 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background: rgba(0, 0, 0, .8); background: black;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: opacity .2s, visibility .2s; transition: opacity .2s, visibility .2s;
z-index: 999; z-index: 999;
} }
.image-viewer-opened #wrap { #image-viewer.opened {
filter: blur(4px);
}
.image-viewer-opened #image-viewer {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }

26
client/js/renderPreview.js
View file

@ -79,6 +79,8 @@ function handleImageInPreview(content, container) {
/* Image viewer */ /* Image viewer */
const imageViewer = $("#image-viewer");
// FIXME Remove #input focus when this is open // FIXME Remove #input focus when this is open
// See https://github.com/thelounge/lounge/issues/1342 // See https://github.com/thelounge/lounge/issues/1342
$("#viewport").on("click", ".toggle-thumbnail", function() { $("#viewport").on("click", ".toggle-thumbnail", function() {
@ -91,7 +93,7 @@ $("#viewport").on("click", ".toggle-thumbnail", function() {
return false; return false;
}); });
$("#image-viewer").on("click", function() { imageViewer.on("click", function() {
closeImageViewer(); closeImageViewer();
}); });
@ -101,13 +103,13 @@ $(document).keydown(function(e) {
closeImageViewer(); closeImageViewer();
break; break;
case 37: // Left arrow case 37: // Left arrow
if ($(document.body).hasClass("image-viewer-opened")) { if (imageViewer.hasClass("opened")) {
$("#image-viewer .previous-image-btn").click(); imageViewer.find(".previous-image-btn").click();
} }
break; break;
case 39: // Right arrow case 39: // Right arrow
if ($(document.body).hasClass("image-viewer-opened")) { if (imageViewer.hasClass("opened")) {
$("#image-viewer .next-image-btn").click(); imageViewer.find(".next-image-btn").click();
} }
break; break;
} }
@ -141,7 +143,7 @@ function openImageViewer(link) {
.find(".toggle-content.show .toggle-thumbnail").first(); .find(".toggle-content.show .toggle-thumbnail").first();
nextImage.addClass("next-image"); nextImage.addClass("next-image");
$("#image-viewer").html(templates.image_viewer({ imageViewer.html(templates.image_viewer({
image: link.find("img").attr("src"), image: link.find("img").attr("src"),
link: link.attr("href"), link: link.attr("href"),
type: link.parent().hasClass("toggle-type-image") ? "image" : "link", type: link.parent().hasClass("toggle-type-image") ? "image" : "link",
@ -149,23 +151,23 @@ function openImageViewer(link) {
hasNextImage: nextImage.length > 0, hasNextImage: nextImage.length > 0,
})); }));
$(document.body).addClass("image-viewer-opened"); imageViewer.addClass("opened");
} }
$("#image-viewer").on("click", ".previous-image-btn", function() { imageViewer.on("click", ".previous-image-btn", function() {
$(".previous-image").click(); $(".previous-image").click();
return false; return false;
}); });
$("#image-viewer").on("click", ".next-image-btn", function() { imageViewer.on("click", ".next-image-btn", function() {
$(".next-image").click(); $(".next-image").click();
return false; return false;
}); });
function closeImageViewer() { function closeImageViewer() {
$(document.body) imageViewer
.removeClass("image-viewer-opened") .removeClass("opened")
.one("transitionend", function() { .one("transitionend", function() {
$("#image-viewer").empty(); imageViewer.empty();
}); });
} }