diff --git a/src/components/middle/message/WebPage.scss b/src/components/middle/message/WebPage.scss index d5960eb2c..d9e20961b 100644 --- a/src/components/middle/message/WebPage.scss +++ b/src/components/middle/message/WebPage.scss @@ -50,6 +50,7 @@ &.interactive { cursor: var(--custom-cursor, pointer); + &:active { background-color: var(--background-active-color); } @@ -90,6 +91,15 @@ flex-grow: 1; align-items: flex-start; position: relative; + + &_interactive { + cursor: pointer; + transition: opacity 0.15s; + + &:hover { + opacity: 0.75; + } + } } .media-inner { diff --git a/src/components/middle/message/WebPage.tsx b/src/components/middle/message/WebPage.tsx index 863db209c..de9370d8d 100644 --- a/src/components/middle/message/WebPage.tsx +++ b/src/components/middle/message/WebPage.tsx @@ -95,6 +95,7 @@ const WebPage: FC = ({ const handleMediaClick = useLastCallback(() => { onMediaClick!(); }); + const handleContainerClick = useLastCallback((e: React.MouseEvent) => { onContainerClick?.(e); }); @@ -149,6 +150,10 @@ const WebPage: FC = ({ } const isMediaInteractive = (photo || video) && onMediaClick && !isSquarePhoto; + function handleTextClick() { + window.open(url, '_blank', 'noopener'); + } + const className = buildClassName( 'WebPage', inPreview && 'in-preview', @@ -193,7 +198,10 @@ const WebPage: FC = ({ )} {isArticle && ( -
+
{!inPreview && title && (

{renderText(title)}