imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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>
);
}
}