diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss index e5c29ba9e0..8e650eaff4 100644 --- a/res/css/views/messages/_MImageBody.scss +++ b/res/css/views/messages/_MImageBody.scss @@ -19,21 +19,6 @@ limitations under the License. margin-right: 34px; } -.mx_MImageBody_hidden { - position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 0; - text-align: center; - border: 1px dashed $input-border-color; - - // To center the text in the middle of the frame - display: flex; - align-items: center; - justify-content: center; -} - .mx_MImageBody_thumbnail { position: absolute; width: 100%; @@ -74,3 +59,36 @@ limitations under the License. color: $imagebody-giflabel-color; pointer-events: none; } + +.mx_HiddenImagePlaceholder { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + + // To center the text in the middle of the frame + display: flex; + align-items: center; + justify-content: center; + text-align: center; + + cursor: pointer; + background-color: $header-panel-bg-color; + + .mx_HiddenImagePlaceholder_button { + color: $accent-color; + + img { + margin-right: 8px; + } + + span { + vertical-align: text-bottom; + } + } +} + +.mx_EventTile:hover .mx_HiddenImagePlaceholder { + background-color: $primary-bg-color; +} diff --git a/res/img/feather-customised/eye.svg b/res/img/feather-customised/eye.svg new file mode 100644 index 0000000000..fd06bf7b21 --- /dev/null +++ b/res/img/feather-customised/eye.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js index 4f165ea7bd..848cad6fb6 100644 --- a/src/components/views/messages/MImageBody.js +++ b/src/components/views/messages/MImageBody.js @@ -346,11 +346,7 @@ export default class MImageBody extends React.Component { /> ); if (!this.state.showImage) { - imageElement = ( -
- {_t("Click to show image")} -
- ); + imageElement = ; } 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 = ( -
- {_t("Click to show image")} -
- ); - } + } + + if (!this.state.showImage) { + img = ; + 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 { ; } } + +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 ( +
+
+ + {_t("Show image")} +
+
+ ); + } +} diff --git a/src/components/views/messages/MStickerBody.js b/src/components/views/messages/MStickerBody.js index c3e734a385..1bd1c1f2eb 100644 --- a/src/components/views/messages/MStickerBody.js +++ b/src/components/views/messages/MStickerBody.js @@ -33,20 +33,16 @@ export default class MStickerBody extends MImageBody { // MStickerBody doesn't need a wrapping ``, but it does need extra padding // which is added by mx_MStickerBody_wrapper wrapImage(contentUrl, children) { - return
{ children }
; + let onClick = null; + if (!this.state.showImage) { + onClick = this.onClick; + } + return
{ children }
; } // Placeholder to show in place of the sticker image if // img onLoad hasn't fired yet. getPlaceholder() { - if (!this.state.showImage) { - return ( -
- {_t("Click to show sticker")} - - ); - } - const TintableSVG = sdk.getComponent('elements.TintableSvg'); return ; } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 4844d409bc..9fa2546bad 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1036,8 +1036,8 @@ "Decrypt %(text)s": "Decrypt %(text)s", "Download %(text)s": "Download %(text)s", "Invalid file%(extra)s": "Invalid file%(extra)s", - "Click to show image": "Click to show image", "Error decrypting image": "Error decrypting image", + "Show image": "Show image", "Click to show sticker": "Click to show sticker", "Error decrypting video": "Error decrypting video", "Agree": "Agree",