matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-11-05 23:10:41 +03:00
Code Activity

Apply lipstick to hidden image design

Browse Source
This commit is contained in:
Travis Ralston
2019-10-01 17:00:01 -06:00
parent daef5f7574
commit 4b0596b6b7
5 changed files with 71 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -346,11 +346,7 @@ export default class MImageBody extends React.Component {
/>
);
if (!this.state.showImage) {
imageElement = (
<div className="mx_MImageBody_hidden">
<span>{_t("Click to show image")}</span>
</div>
);
imageElement = <HiddenImagePlaceholder />;
}
return this.wrapImage(contentUrl, imageElement);
}
@@ -381,7 +377,7 @@ export default class MImageBody extends React.Component {
placeholder = this.getPlaceholder();
}
const showPlaceholder = Boolean(placeholder);
let showPlaceholder = Boolean(placeholder);
if (thumbUrl && !this.state.imgError) {
// Restrict the width of the thumbnail here, otherwise it will fill the container
@@ -396,13 +392,11 @@ export default class MImageBody extends React.Component {
onMouseEnter={this.onImageEnter}
onMouseLeave={this.onImageLeave} />
);
if (!this.state.showImage) {
img = (
<div style={{ maxWidth: maxWidth + "px" }} className="mx_MImageBody_hidden">
<span>{_t("Click to show image")}</span>
</div>
);
}
}
if (!this.state.showImage) {
img = <HiddenImagePlaceholder style={{ maxWidth: maxWidth + "px" }} />;
showPlaceholder = false; // because we're hiding the image, so don't show the sticker icon.
}
if (this._isGif() && !SettingsStore.getValue("autoplayGifsAndVideos") && !this.state.hover) {
@@ -488,3 +482,22 @@ export default class MImageBody extends React.Component {
</span>;
}
}
export class HiddenImagePlaceholder extends React.PureComponent {
static propTypes = {
hover: PropTypes.bool,
};
render() {
let className = 'mx_HiddenImagePlaceholder';
if (this.props.hover) className += ' mx_HiddenImagePlaceholder_hover';
return (
<div className={className}>
<div className='mx_HiddenImagePlaceholder_button'>
<img src={require("../../../../res/img/feather-customised/eye.svg")} width={17} height={12} />
<span>{_t("Show image")}</span>
</div>
</div>
);
}
}