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