mirror of
https://github.com/element-hq/element-web
synced 2024-11-26 03:05:51 +03:00
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
GitHub
parent
37d8cfbc50
commit
0909bfeb38
2 changed files with 63 additions and 52 deletions
|
|
@ -15,53 +15,62 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
.mx_LinkPreviewWidget {
|
||||
margin-top: 15px;
|
||||
margin-right: 15px;
|
||||
margin-bottom: 15px;
|
||||
margin: $spacing-16 0 $spacing-16 auto;
|
||||
display: flex;
|
||||
border-left: 2px solid $preview-widget-bar-color;
|
||||
column-gap: $spacing-4;
|
||||
border-inline-start: 2px solid $preview-widget-bar-color;
|
||||
border-radius: 2px;
|
||||
color: $info-plinth-fg-color;
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget_image {
|
||||
flex: 0 0 100px;
|
||||
margin-left: 15px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget_caption {
|
||||
margin-left: 15px;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden; // cause it to wrap rather than clip
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget_title {
|
||||
font-weight: bold;
|
||||
white-space: normal;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
|
||||
.mx_LinkPreviewWidget_siteName {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget_description {
|
||||
margin-top: 8px;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_useCompactLayout {
|
||||
.mx_LinkPreviewWidget {
|
||||
.mx_MatrixChat_useCompactLayout & {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
// Exclude mx_LinkPreviewGroup_hide from wrapping
|
||||
.mx_LinkPreviewWidget_wrapImageCaption {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: $spacing-8;
|
||||
|
||||
.mx_LinkPreviewWidget_image,
|
||||
.mx_LinkPreviewWidget_caption {
|
||||
margin-inline-start: $spacing-16;
|
||||
min-width: 0; // Prevent blowout
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget_image {
|
||||
flex: 0 0 100px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget_caption {
|
||||
flex: 1;
|
||||
overflow: hidden; // cause it to wrap rather than clip
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget_title,
|
||||
.mx_LinkPreviewWidget_description {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget_title {
|
||||
font-weight: bold;
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
.mx_LinkPreviewWidget_siteName {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LinkPreviewWidget_description {
|
||||
margin-top: $spacing-8;
|
||||
word-wrap: break-word;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
|
|||
Loading…
Reference in a new issue