diff --git a/src/components/common/ChannelIcon.tsx b/src/components/common/ChannelIcon.tsx index 9145d5f1..01c48bf4 100644 --- a/src/components/common/ChannelIcon.tsx +++ b/src/components/common/ChannelIcon.tsx @@ -57,6 +57,7 @@ export default function ChannelIcon( {...imgProps} width={size} height={size} + loading="lazy" aria-hidden="true" square={isServerChannel} src={iconURL ?? fallback} diff --git a/src/components/common/ServerIcon.tsx b/src/components/common/ServerIcon.tsx index 5b9dad8d..168af8ae 100644 --- a/src/components/common/ServerIcon.tsx +++ b/src/components/common/ServerIcon.tsx @@ -61,8 +61,9 @@ export default function ServerIcon( {...imgProps} width={size} height={size} - aria-hidden="true" src={iconURL} + loading="lazy" + aria-hidden="true" /> ); } diff --git a/src/components/common/messaging/attachments/Attachment.module.scss b/src/components/common/messaging/attachments/Attachment.module.scss index 111be64c..00888785 100644 --- a/src/components/common/messaging/attachments/Attachment.module.scss +++ b/src/components/common/messaging/attachments/Attachment.module.scss @@ -3,67 +3,15 @@ grid-auto-columns: min(100%, 480px); grid-auto-flow: row dense; + margin: .125rem 0 .125rem; width: max-content; max-width: 100%; - - border-radius: 6px; - margin: .125rem 0 .125rem; &[data-spoiler="true"] { filter: blur(30px); pointer-events: none; } - &[data-has-content="true"] { - margin-top: 4px; - } - - &.image, &.video > video { - cursor: pointer; - - aspect-ratio: var(--width) / var(--height); - max-height: min(640px, var(--height-px)); - max-width: min(480px, 100%, var(--width-px)); - - object-fit: contain; - object-position: top left; - } - - &.image { - &.long { - width: min(100%, var(--width-px)); - height: auto; - } - - &.tall { - height: min(100%, var(--height-px)); - width: 100%; - - &.loaded { - width: auto; - } - } - } - - &.video { - .actions { - padding: 10px 12px; - border-radius: 6px 6px 0 0; - } - - video { - border-radius: 0 0 6px 6px; - - &.long { - height: auto; - } - - &.tall { - width: auto; - } - } - } - &.audio { gap: 4px; padding: 6px; @@ -125,52 +73,20 @@ } } -.actions.imageAction { - grid-template: - "name icon external download" auto - "size icon external download" auto - / minmax(20px, 1fr) min-content min-content; +.margin { + margin-top: 4px; } -.actions { - display: grid; - grid-template: - "icon name external download" auto - "icon size external download" auto - / min-content minmax(20px, 1fr) min-content; +.container { + max-width: 100%; + overflow: hidden; + width: fit-content; - align-items: center; - column-gap: 12px; - - width: 100%; - padding: 8px; - overflow: none; - - color: var(--foreground); - background: var(--secondary-background); - - span { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - } - - .filesize { - grid-area: size; - - font-size: 10px; - color: var(--secondary-foreground); - } - - .downloadIcon { - grid-area: download; - } - - .externalType { - grid-area: external; - } - - .iconType { - grid-area: icon; + > :first-child { + width: min(480px, 100%, var(--width)); } } + +.container, .attachment, .image { + border-radius: 6px; +} diff --git a/src/components/common/messaging/attachments/Attachment.tsx b/src/components/common/messaging/attachments/Attachment.tsx index 1b563829..d3a9980e 100644 --- a/src/components/common/messaging/attachments/Attachment.tsx +++ b/src/components/common/messaging/attachments/Attachment.tsx @@ -8,9 +8,9 @@ import { useContext, useState } from "preact/hooks"; import { useIntermediate } from "../../../../context/intermediate/Intermediate"; import { AppContext } from "../../../../context/revoltjs/RevoltClient"; -import { MessageAreaWidthContext } from "../../../../pages/channels/messaging/MessageArea"; import AttachmentActions from "./AttachmentActions"; import TextFile from "./TextFile"; +import { SizedGrid } from "./Grid"; interface Props { attachment: AttachmentRJS; @@ -35,6 +35,44 @@ export default function Attachment({ attachment, hasContent }: Props) { switch (metadata.type) { case "Image": { return ( + + {filename} + openScreen({ id: "image_viewer", attachment }) + } + onMouseDown={(ev) => + ev.button === 1 && window.open(url, "_blank") + } /> + + ) + } + case "Video": { + return ( +
+ + + +
+ ) + } + + + + + /*return (
spoiler && setSpoiler(false)}> @@ -51,8 +89,8 @@ export default function Attachment({ attachment, hasContent }: Props) { width={metadata.width} height={metadata.height} loading="lazy" - data-spoiler={spoiler} data-has-content={hasContent} + data-spoiler={spoiler} className={classNames( styles.attachment, styles.image, @@ -70,14 +108,14 @@ export default function Attachment({ attachment, hasContent }: Props) { onClick={() => openScreen({ id: "image_viewer", attachment }) } - onLoad={() => setLoaded(true)} onMouseDown={(ev) => ev.button === 1 && window.open(url, "_blank") } + onLoad={() => setLoaded(true)} />
); - } + }*/ case "Audio": { return (
); } - case "Video": { + /*case "Video": { return (
); - } + }*/ case "Text": { return (
, 'children' | 'as' | 'style'> & { + style?: JSX.CSSProperties, + children?: Children, + width: number, + height: number, +}; + +export function SizedGrid(props: Props) { + const { width, height, children, style, ...divProps } = props; + + return ( + + { children } + + ) +} diff --git a/src/components/common/user/UserIcon.tsx b/src/components/common/user/UserIcon.tsx index e5cd3dca..15e1a002 100644 --- a/src/components/common/user/UserIcon.tsx +++ b/src/components/common/user/UserIcon.tsx @@ -87,7 +87,7 @@ export default function UserIcon( width="32" height="32" mask={mask ?? (status ? "url(#user)" : undefined)}> - {} + {} {props.status && ( diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx index c4f76f33..e10a730f 100644 --- a/src/components/navigation/left/ServerListSidebar.tsx +++ b/src/components/navigation/left/ServerListSidebar.tsx @@ -132,7 +132,8 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>` ` } svg { - width: 56.5px; + width: 57px; + height: 117px; margin-top: 4px; display: relative; @@ -151,10 +152,10 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>` function Swoosh() { return ( - - - - + + + + )