From 002d565b3f8e4b060d7662133f137cffaf37b345 Mon Sep 17 00:00:00 2001
From: bree <me@bree.dev>
Date: Tue, 6 Jul 2021 03:03:05 -0400
Subject: [PATCH] Improve `ImageViewer` styles
---
.../popovers/ImageViewer.module.scss | 12 +++++++++++-
.../intermediate/popovers/ImageViewer.tsx | 17 ++++++++++++++---
2 files changed, 25 insertions(+), 4 deletions(-)
diff --git a/src/context/intermediate/popovers/ImageViewer.module.scss b/src/context/intermediate/popovers/ImageViewer.module.scss
index 0a9f360..51b8310 100644
--- a/src/context/intermediate/popovers/ImageViewer.module.scss
+++ b/src/context/intermediate/popovers/ImageViewer.module.scss
@@ -1,6 +1,16 @@
.viewer {
+ display: flex;
+ flex-direction: column;
+ border-end-end-radius: 4px;
+ border-end-start-radius: 4px;
+ overflow: hidden;
+
img {
+ width: auto;
+ height: auto;
max-width: 90vw;
- max-height: 90vh;
+ max-height: 75vh;
+ border-bottom: thin solid var(--tertiary-foreground);
+ object-fit: contain;
}
}
diff --git a/src/context/intermediate/popovers/ImageViewer.tsx b/src/context/intermediate/popovers/ImageViewer.tsx
index ca4f6ba..4518abc 100644
--- a/src/context/intermediate/popovers/ImageViewer.tsx
+++ b/src/context/intermediate/popovers/ImageViewer.tsx
@@ -22,7 +22,10 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
return "https://jan.revolt.chat/proxy?url=" + encodeURIComponent(url);
}
- if (attachment && attachment.metadata.type !== "Image") return null;
+ if (attachment?.metadata.type !== "Image") {
+ return null;
+ }
+
const client = useContext(AppContext);
return (
@@ -30,13 +33,21 @@ export function ImageViewer({ attachment, embed, onClose }: Props) {
<div className={styles.viewer}>
{attachment && (
<>
- <img src={client.generateFileURL(attachment)} />
+ <img
+ src={client.generateFileURL(attachment)}
+ width={attachment.metadata.width}
+ height={attachment.metadata.height}
+ />
<AttachmentActions attachment={attachment} />
</>
)}
{embed && (
<>
- <img src={proxyImage(embed.url)} />
+ <img
+ src={proxyImage(embed.url)}
+ width={attachment.metadata.width}
+ height={attachment.metadata.height}
+ />
<EmbedMediaActions embed={embed} />
</>
)}
--
GitLab