abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-06 08:38:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve ImageViewer styles

Browse Source
This commit is contained in:
bree
2021-07-06 03:03:05 -04:00
parent f202008414
commit 3f001df7cb
2 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/context/intermediate/popovers/ImageViewer.module.scss
View File

@@ -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;
}
}

17
src/context/intermediate/popovers/ImageViewer.tsx
View File

@@ -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} />
</>
)}