PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

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
commit 5c1b38a48c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 12 additions and 7 deletions
Show stats 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 { span.mx_MVideoBody {
video.mx_MVideoBody { video.mx_MVideoBody {
max-width: 100%; max-width: 100%;
height: auto; max-height: 300px;
border-radius: 4px; border-radius: 4px;
} }
} }

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

@ -19,6 +19,8 @@ limitations under the License.
margin-right: 15px; margin-right: 15px;
margin-bottom: 15px; margin-bottom: 15px;
display: flex; display: flex;
flex-direction: column;
max-width: 360px;
border-left: 4px solid $preview-widget-bar-color; border-left: 4px solid $preview-widget-bar-color;
color: $preview-widget-fg-color; color: $preview-widget-fg-color;
} }
@ -55,6 +57,9 @@ limitations under the License.
cursor: pointer; cursor: pointer;
width: 18px; width: 18px;
height: 18px; height: 18px;
padding: 0px 5px 5px 5px;
margin-left: auto;
margin-right: 0px;
img { img {
flex: 0 0 40px; 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> // 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 // The maximum width of the thumbnail, as dictated by its natural
// maximum height. // maximum height.
const maxWidth = infoWidth * maxHeight / infoHeight; 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")) { if (!SettingsStore.getValue("showImages")) {
image = null; // Don't render a button to show the image, just hide it outright 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://")) { if (image && image.startsWith("mxc://")) {
image = MatrixClientPeg.get().mxcUrlToHttp(image, imageMaxWidth, imageMaxHeight); image = MatrixClientPeg.get().mxcUrlToHttp(image, imageMaxWidth, imageMaxHeight);
} }
@ -134,6 +134,10 @@ export default class LinkPreviewWidget extends React.Component {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
return ( return (
<div className="mx_LinkPreviewWidget"> <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 } { img }
<div className="mx_LinkPreviewWidget_caption"> <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> <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 } { description }
</div> </div>
</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> </div>
); );
} }