abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-07 17:35:28 +00:00
Code Issues Packages Projects Releases 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
2 changed files with 8 additions and 0 deletions
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")
} }