OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix centering issue with sticker placeholder (#8404)

pull/28217/head
Michael Telatynski 2022-04-25 18:36:32 +01:00 committed by GitHub
parent e3735311ab
commit f85e178fc1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
res/css/views/messages/_MStickerBody.scss
View File

@ -33,3 +33,10 @@ limitations under the License.
align-items: center;
justify-content: center;
}
.mx_MStickerBody_placeholder {
// centering
position: absolute;
left: calc(50% - 40px);
top: calc(50% - 40px);
}

4
src/components/views/messages/MImageBody.tsx
View File

@ -138,7 +138,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
}
};
private onImageEnter = (e: React.MouseEvent<HTMLImageElement>): void => {
protected onImageEnter = (e: React.MouseEvent<HTMLImageElement>): void => {
this.setState({ hover: true });
if (!this.state.showImage || !this.state.isAnimated || SettingsStore.getValue("autoplayGifs")) {
@ -148,7 +148,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
imgElement.src = this.state.contentUrl;
};
private onImageLeave = (e: React.MouseEvent<HTMLImageElement>): void => {
protected onImageLeave = (e: React.MouseEvent<HTMLImageElement>): void => {
this.setState({ hover: false });
if (!this.state.showImage || !this.state.isAnimated || SettingsStore.getValue("autoplayGifs")) {

14
src/components/views/messages/MStickerBody.tsx
View File

@ -39,11 +39,19 @@ export default class MStickerBody extends MImageBody {
return <div className="mx_MStickerBody_wrapper" onClick={onClick}> { children } </div>;
}
// Placeholder to show in place of the sticker image if
// img onLoad hasn't fired yet.
// Placeholder to show in place of the sticker image if img onLoad hasn't fired yet.
protected getPlaceholder(width: number, height: number): JSX.Element {
if (this.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
return <img src={require("../../../../res/img/icons-show-stickers.svg").default} width="75" height="75" />;
return (
<img
className="mx_MStickerBody_placeholder"
src={require("../../../../res/img/icons-show-stickers.svg").default}
width="80"
height="80"
onMouseEnter={this.onImageEnter}
onMouseLeave={this.onImageLeave}
/>
);
}
// Tooltip to show on mouse over