matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-11-04 11:51:45 +03:00
Code Activity

Merge pull request #5637 from williamkray/wreck/clean-thumbnail-changes

Browse Source 
Improve URL preview formatting and image upload thumbnail size
This commit is contained in:
J. Ryan Stinnett
2021-02-17 11:37:37 +00:00
committed by GitHub
parent ec4a39a694 fec2309451
commit 5c1b38a48c
4 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
res/css/views/messages/_MVideoBody.scss
View File

@@ -17,7 +17,7 @@ limitations under the License.
span.mx_MVideoBody {
video.mx_MVideoBody {
max-width: 100%;
height: auto;
max-height: 300px;
border-radius: 4px;
}
}

5
res/css/views/rooms/_LinkPreviewWidget.scss
View File

@@ -19,6 +19,8 @@ limitations under the License.
margin-right: 15px;
margin-bottom: 15px;
display: flex;
flex-direction: column;
max-width: 360px;
border-left: 4px solid $preview-widget-bar-color;
color: $preview-widget-fg-color;
}
@@ -55,6 +57,9 @@ limitations under the License.
cursor: pointer;
width: 18px;
height: 18px;
padding: 0px 5px 5px 5px;
margin-left: auto;
margin-right: 0px;
img {
flex: 0 0 40px;

2
src/components/views/messages/MImageBody.js
View File

@@ -362,7 +362,7 @@ export default class MImageBody extends React.Component {
}
// The maximum height of the thumbnail as it is rendered as an <img>
const maxHeight = Math.min(this.props.maxImageHeight || 600, infoHeight);
const maxHeight = Math.min(this.props.maxImageHeight || 240, infoHeight);
// The maximum width of the thumbnail, as dictated by its natural
// maximum height.
const maxWidth = infoWidth * maxHeight / infoHeight;

10
src/components/views/rooms/LinkPreviewWidget.js
View File

@@ -107,7 +107,7 @@ export default class LinkPreviewWidget extends React.Component {
if (!SettingsStore.getValue("showImages")) {
image = null; // Don't render a button to show the image, just hide it outright
}
const imageMaxWidth = 100; const imageMaxHeight = 100;
const imageMaxWidth = 320; const imageMaxHeight = 240;
if (image && image.startsWith("mxc://")) {
image = MatrixClientPeg.get().mxcUrlToHttp(image, imageMaxWidth, imageMaxHeight);
}
@@ -134,6 +134,10 @@ export default class LinkPreviewWidget extends React.Component {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
return (
<div className="mx_LinkPreviewWidget">
<AccessibleButton className="mx_LinkPreviewWidget_cancel" onClick={this.props.onCancelClick} aria-label={_t("Close preview")}>
<img className="mx_filterFlipColor" alt="" role="presentation"
src={require("../../../../res/img/cancel.svg")} width="18" height="18" />
</AccessibleButton>
{ 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></div>
@@ -142,10 +146,6 @@ export default class LinkPreviewWidget extends React.Component {
{ description }
</div>
</div>
<AccessibleButton className="mx_LinkPreviewWidget_cancel" onClick={this.props.onCancelClick} aria-label={_t("Close preview")}>
<img className="mx_filterFlipColor" alt="" role="presentation"
src={require("../../../../res/img/cancel.svg")} width="18" height="18" />
</AccessibleButton>
</div>
);
}