cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-25 16:40:58 -05:00
Code Issues Projects Releases Packages Wiki Activity

Fix: image attachments not having minimum width

Browse source
This commit is contained in:
bree 2021-07-09 11:09:55 -04:00
parent 3ea32b596a
commit c1dc2b9a1d
No known key found for this signature in database
GPG key ID: 1B2E56B9EC985B96
2 changed files with 8 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/common/messaging/attachments/Attachment.module.scss
View file

@ -26,6 +26,7 @@
max-width: min(480px, 100%, var(--width-px)); max-width: min(480px, 100%, var(--width-px));
object-fit: contain; object-fit: contain;
object-position: top left;
} }
&.image { &.image {
@ -37,6 +38,10 @@
&.tall { &.tall {
height: min(100%, var(--height-px)); height: min(100%, var(--height-px));
width: 100%; width: 100%;
&.loaded {
width: auto;
}
} }
} }

3
src/components/common/messaging/attachments/Attachment.tsx
View file

@ -24,6 +24,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
const { openScreen } = useIntermediate(); const { openScreen } = useIntermediate();
const { filename, metadata } = attachment; const { filename, metadata } = attachment;
const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_")); const [spoiler, setSpoiler] = useState(filename.startsWith("SPOILER_"));
const [loaded, setLoaded] = useState(false);
const url = client.generateFileURL( const url = client.generateFileURL(
attachment, attachment,
@ -55,6 +56,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
className={classNames( className={classNames(
styles.attachment, styles.attachment,
styles.image, styles.image,
loaded && styles.loaded,
metadata.width > metadata.height metadata.width > metadata.height
? styles.long ? styles.long
: styles.tall, : styles.tall,
@ -68,6 +70,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
onClick={() => onClick={() =>
openScreen({ id: "image_viewer", attachment }) openScreen({ id: "image_viewer", attachment })
} }
onLoad={() => setLoaded(true)}
onMouseDown={(ev) => onMouseDown={(ev) =>
ev.button === 1 && window.open(url, "_blank") ev.button === 1 && window.open(url, "_blank")
} }