Apply lipstick to hidden image design

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

res/img/feather-customised/eye.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14">
+    <g fill="none" fill-rule="evenodd" stroke="#03B381" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
+        <path d="M0 6s3-6 8.25-6 8.25 6 8.25 6-3 6-8.25 6S0 6 0 6z"/>
+        <circle cx="8.25" cy="6" r="2.25"/>
+    </g>
+</svg>

src/components/views/messages/MImageBody.js

@@ -346,11 +346,7 @@ export default class MImageBody extends React.Component {
                     />
                 );
                 if (!this.state.showImage) {
-                    imageElement = (
+                    imageElement = <HiddenImagePlaceholder />;
-                        <div className="mx_MImageBody_hidden">
-                            <span>{_t("Click to show image")}</span>
-                        </div>
-                    );
                 }
                 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">
+        if (!this.state.showImage) {
-                        <span>{_t("Click to show image")}</span>
+            img = <HiddenImagePlaceholder style={{ maxWidth: maxWidth + "px" }} />;
-                    </div>
+            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>
+        );
+    }
+}

src/components/views/messages/MStickerBody.js

@@ -33,20 +33,16 @@ export default class MStickerBody extends MImageBody {
     // MStickerBody doesn't need a wrapping `<a href=...>`, but it does need extra padding
     // which is added by mx_MStickerBody_wrapper
     wrapImage(contentUrl, children) {
-        return <div className="mx_MStickerBody_wrapper"> { children } </div>;
+        let onClick = null;
+        if (!this.state.showImage) {
+            onClick = this.onClick;
+        }
+        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.
     getPlaceholder() {
-        if (!this.state.showImage) {
-            return (
-                <a className="mx_MStickerBody_hidden" onClick={this.onClick} href="#">
-                    <span>{_t("Click to show sticker")}</span>
-                </a>
-            );
-        }
-
         const TintableSVG = sdk.getComponent('elements.TintableSvg');
         return <TintableSVG src={require("../../../../res/img/icons-show-stickers.svg")} width="75" height="75" />;
     }

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",