make broken image not clickable

css/base.css

@@ -511,6 +511,10 @@ table.permission-editor td.checkbox {
   cursor: pointer;
 }
 
+.image-clickable {
+  cursor: pointer;
+}
+
 /* END of top-level layout */
 
 /* Sidepanel styles */
@@ -1306,8 +1310,8 @@ i.search {
  * (group chat only)
  */
 .chat-box .author {
-    font-size: 80%;
-    color:#777;
+  font-size: 80%;
+  color:#777;
 }
 
 /* Inline image styles */
@@ -1316,7 +1320,6 @@ i.search {
   max-height: 24rem;
   overflow: hidden;
   border-radius: 0.1rem;
-  cursor: pointer;
   display: block;
 }
 

src/config.js

@@ -33,7 +33,7 @@ export const REM_SIZE = 13;
 export const AVATAR_SIZE = 128;
 
 // Size of the broken_image shown in MessagesView
-export const BROKEN_IMAGE_SIZE = 48;
+export const BROKEN_IMAGE_SIZE = 32;
 
 // Number of chat messages to fetch in one call.
 export const MESSAGES_PAGE = 24;

src/widgets/chat-message.jsx

@@ -159,12 +159,16 @@ function draftyFormatter(style, data, values, key) {
         // Additional processing for images
         if (data) {
           attr.className = 'inline-image';
-          attr.onClick = this.handlePreviewImage;
           let dim = fitImageSize(data.width, data.height,
             Math.min(this.props.viewportWidth - REM_SIZE * 4, REM_SIZE * 36), REM_SIZE * 24, false);
           dim = dim || {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
           attr.style = { width: dim.dstWidth + 'px', height: dim.dstHeight + 'px' };
-          attr.src = attr.src || 'img/broken_image.png';
+          if (attr.src) {
+            attr.onClick = this.handlePreviewImage;
+            attr.className += ' image-clickable';
+          } else {
+            attr.src = 'img/broken_image.png';
+          }
         }
         break;
       case 'BN':

umd/index.dev.js

@@ -182,7 +182,7 @@ var MIN_TAG_LENGTH = 4;
 var MEDIA_BREAKPOINT = 640;
 var REM_SIZE = 13;
 var AVATAR_SIZE = 128;
-var BROKEN_IMAGE_SIZE = 48;
+var BROKEN_IMAGE_SIZE = 32;
 var MESSAGES_PAGE = 24;
 var MAX_INBAND_ATTACHMENT_SIZE = 195840;
 var MAX_EXTERN_ATTACHMENT_SIZE = 1 << 23;
@@ -5959,7 +5959,6 @@ function draftyFormatter(style, data, values, key) {
       case 'IM':
         if (data) {
           attr.className = 'inline-image';
-          attr.onClick = this.handlePreviewImage;
           var dim = Object(_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_7__["fitImageSize"])(data.width, data.height, Math.min(this.props.viewportWidth - _config_js__WEBPACK_IMPORTED_MODULE_6__["REM_SIZE"] * 4, _config_js__WEBPACK_IMPORTED_MODULE_6__["REM_SIZE"] * 36), _config_js__WEBPACK_IMPORTED_MODULE_6__["REM_SIZE"] * 24, false);
           dim = dim || {
             dstWidth: _config_js__WEBPACK_IMPORTED_MODULE_6__["BROKEN_IMAGE_SIZE"],
@@ -5969,7 +5968,13 @@ function draftyFormatter(style, data, values, key) {
             width: dim.dstWidth + 'px',
             height: dim.dstHeight + 'px'
           };
-          attr.src = attr.src || 'img/broken_image.png';
+
+          if (attr.src) {
+            attr.onClick = this.handlePreviewImage;
+            attr.className += ' image-clickable';
+          } else {
+            attr.src = 'img/broken_image.png';
+          }
         }
 
         break;