imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add option to display tooltip on link hover (#8394)

Browse source 
* Add option to display tooltip on link hover

This makes it possible for platforms like Electron apps, which lack
a built-in URL preview in the status bar, to enable tooltip previews
of links.

Relates to: vector-im/element-web#6532
Signed-off-by: Johannes Marbach <johannesm@element.io>

* Gracefully handle missing platform

* Use public access modifier

Co-authored-by: Travis Ralston <travpc@gmail.com>

* Use exact inequality

Co-authored-by: Travis Ralston <travpc@gmail.com>

* Document getAbsoluteUrl

* Appease the linter

* Clarify performance impact in comment

Co-authored-by: Travis Ralston <travpc@gmail.com>

* Use URL instead of anchor element hack

* Wrap anchor in tooltip target and only allow focus on anchor

* Use optional chaining

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Use double quotes for consistency

* Accumulate and unmount tooltips and extract tooltipify.tsx

* Fix indentation

* Blur tooltip target on click

* Remove space

* Mention platform flag in comment

* Add (simplistic) tests

* Fix lint errors

* Fix lint errors ... for real

* Replace snapshot tests with structural assertions

* Add missing semicolon

* Add tooltips in link previews

* Fix copyright

Co-authored-by: Travis Ralston <travpc@gmail.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Johannes Marbach 2022-07-06 11:43:30 +02:00 • committed by GitHub
parent 530b51a5ac
commit 6f21a155a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 223 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/views/rooms/LinkPreviewWidget.tsx
View file

@ -25,6 +25,8 @@ import Modal from "../../../Modal";
import * as ImageUtils from "../../../ImageUtils";
import { mediaFromMxc } from "../../../customisations/Media";
import ImageView from '../elements/ImageView';
import LinkWithTooltip from '../elements/LinkWithTooltip';
import PlatformPeg from '../../../PlatformPeg';
interface IProps {
link: string;
@ -118,13 +120,20 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
// opaque string. This does not allow any HTML to be injected into the DOM.
const description = AllHtmlEntities.decode(p["og:description"] || "");
const anchor = <a href={this.props.link} target="_blank" rel="noreferrer noopener">{ p["og:title"] }</a>;
const needsTooltip = PlatformPeg.get()?.needsUrlTooltips() && this.props.link !== p["og:title"].trim();
return (
<div className="mx_LinkPreviewWidget">
<div className="mx_LinkPreviewWidget_wrapImageCaption">
{ img }
<div className="mx_LinkPreviewWidget_caption">
<div className="mx_LinkPreviewWidget_title">
<a href={this.props.link} target="_blank" rel="noreferrer noopener">{ p["og:title"] }</a>
{ needsTooltip ? <LinkWithTooltip
tooltip={new URL(this.props.link, window.location.href).toString()}
>
{ anchor }
</LinkWithTooltip> : anchor }
{ p["og:site_name"] && <span className="mx_LinkPreviewWidget_siteName">
{ (" - " + p["og:site_name"]) }
</span> }