Improve LinkPreviewWidget (#8881)

* Use shorthand for margin values

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Merge style declarations

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Merge style declarations

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include mx_MatrixChat_useCompactLayout in mx_LinkPreviewWidget

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Include in mx_LinkPreviewWidget

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use spacing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use logical variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Prevent flex children blowout

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Wrap caption

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Set row-gap between image and caption

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Set column-gap between the caption and close button

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Rename the class name

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Decrease inline spacing

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-07-04 15:10:46 +09:00 committed by GitHub
parent 37d8cfbc50
commit 0909bfeb38
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 52 deletions

View file

@ -120,16 +120,18 @@ export default class LinkPreviewWidget extends React.Component<IProps> {
return (
<div className="mx_LinkPreviewWidget">
{ 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>
{ p["og:site_name"] && <span className="mx_LinkPreviewWidget_siteName">
{ (" - " + p["og:site_name"]) }
</span> }
</div>
<div className="mx_LinkPreviewWidget_description" ref={this.description}>
{ description }
<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>
{ p["og:site_name"] && <span className="mx_LinkPreviewWidget_siteName">
{ (" - " + p["og:site_name"]) }
</span> }
</div>
<div className="mx_LinkPreviewWidget_description" ref={this.description}>
{ description }
</div>
</div>
</div>
{ this.props.children }