mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-05-05 04:06:44 +02:00
Code Issues Projects Releases Wiki Activity

Improved rendering

Browse Source
This commit is contained in:
Half-Shot 2026-04-09 17:08:16 +01:00
parent 033e1f1eac
commit 0c2ac8e520
4 changed files with 27 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts
View File

@ -102,21 +102,25 @@ export class UrlPreviewGroupViewModel
typeof response["og:description"] === "string" && response["og:description"].trim()
? response["og:description"].trim()
: undefined;
let siteName =
const siteName =
typeof response["og:site_name"] === "string" && response["og:site_name"].trim()
? response["og:site_name"].trim()
: undefined;
: new URL(link).hostname;
// If there is no title, or the title matches the description then only render one.
if (!title && description) {
title = description;
description = undefined;
} else if (!title && siteName) {
title = siteName;
siteName = undefined;
} else if (!title) {
title = link;
}
if (description && description.toLowerCase() === siteName.toLowerCase()) {
description = undefined;
}
return {
title,
description: description && decode(description),

19
packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
View File

@ -5,11 +5,15 @@
* Please see LICENSE files in the repository root for full details.
*/
button.preview {
background: #fff;
}
.preview {
display: flex;
position: relative;
width: 100%;
height: 255px;
height: 200px;
background-size: cover;
background-position: center;
border: none;
@ -33,7 +37,7 @@
}
.container {
max-width: 500px;
max-width: 478px;
display: flex;
border: 1px solid var(--cpd-color-border-interactive-secondary);
border-radius: 12px; /* Get radius from cpd */
@ -43,14 +47,23 @@
&.inline {
flex-direction: row;
gap: var(--cpd-space-4x);
padding: var(--cpd-space-3x) var(--cpd-space-4x);
.title {
margin: 0;
}
.siteAvatar {
margin: auto var(--cpd-space-2x);
margin: auto;
}
}
.textContent {
padding: var(--cpd-space-3x) var(--cpd-space-4x);
&.inline {
padding: 0;
}
display: flex;
flex-direction: column;
gap: var(--cpd-space-2x);

2
packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx
View File

@ -15,7 +15,7 @@ import imageFile from "../../../../../../static/element.png";
import imageFileWide from "../../../../../../static/wideImage.png";
export default {
title: "UrlPreviewGroupView/LinkPreview",
title: "Event/UrlPreviewGroupView/LinkPreview",
component: LinkPreview,
tags: ["autodocs"],
args: {

6
packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
View File

@ -100,7 +100,7 @@ export function LinkPreview({ onImageClick, ...preview }: LinkPreviewProps): JSX
</Text>
);
const useInline = !preview.image && !preview.author;
const useInline = !preview.image && !preview.author && !preview.description;
return (
<div className={classNames(styles.container, useInline && styles.inline)}>
@ -110,9 +110,9 @@ export function LinkPreview({ onImageClick, ...preview }: LinkPreviewProps): JSX
<Avatar type="square" size="48px" name={preview.title} id={preview.title} src={preview.siteIcon} />
</div>
)}
<div className={classNames(styles.textContent)}>
<div className={classNames(styles.textContent, useInline && styles.inline)}>
{preview.author && (
<Text as="span" size="md" weight="semibold">
<Text as="span" size="lg" weight="semibold">
{preview.author}
</Text>
)}