make quotes stay empty when there object isEmpty()

js/models/conversations.js

@@ -1148,13 +1148,17 @@
           'with timestamp',
           now
         );
+        // be sure an empty quote is marked as undefined rather than being empty
+        // otherwise upgradeMessageSchema() will return an object with an empty array
+        // and this.get('quote') will be true, even if there is no quote.
+        const editedQuote = _.isEmpty(quote) ? undefined : quote;
 
         const conversationType = this.get('type');
         const messageWithSchema = await upgradeMessageSchema({
           type: 'outgoing',
           body,
           conversationId: destination,
-          quote,
+          quote: editedQuote,
           preview,
           attachments,
           sent_at: now,

js/models/messages.js

@@ -722,6 +722,7 @@
     getPropsForQuote(options = {}) {
       const { noClick } = options;
       const quote = this.get('quote');
+
       if (!quote) {
         return null;
       }

stylesheets/_modules.scss

@@ -127,8 +127,30 @@
   margin-top: -10px;
   margin-bottom: -10px;
 
-  border-radius: 16px;
+  border-radius: $session_message-container-border-radius;
   overflow: hidden;
+  // no background by default for the attachment container
+  @include themify($themes) {
+    background: themed('inboxBackground');
+  }
+}
+
+.module-message--outgoing {
+  .module-message__attachment-container--with-content-below,
+  .module-message__attachment-container--with-content-above {
+    @include themify($themes) {
+      background: themed('sentMessageBackground');
+    }
+  }
+}
+
+.module-message--incoming {
+  .module-message__attachment-container--with-content-below,
+  .module-message__attachment-container--with-content-above {
+    @include themify($themes) {
+      background: themed('receivedMessageBackground');
+    }
+  }
 }
 
 .module-message__attachment-container--with-content-below {
@@ -281,8 +303,8 @@
   margin-inline-end: -12px;
   margin-top: -10px;
   margin-bottom: 5px;
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
+  border-top-left-radius: $session_message-container-border-radius;
+  border-top-right-radius: $session_message-container-border-radius;
 }
 
 .module-message__link-preview--with-content-above {
@@ -293,8 +315,8 @@
 
 .module-message__link-preview__content {
   padding: 8px;
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
+  border-top-left-radius: $session_message-container-border-radius;
+  border-top-right-radius: $session_message-container-border-radius;
   background-color: $color-white;
   display: flex;
   flex-direction: row;
@@ -411,18 +433,13 @@
   font-size: 11px;
   line-height: 16px;
   letter-spacing: 0.3px;
-  color: $color-gray-60;
   text-transform: uppercase;
   user-select: none;
 }
 
 .module-message__metadata__badge {
   font-weight: bold;
-}
-
-.module-message__metadata__date--incoming,
-.module-message__metadata__badge--incoming {
-  color: $color-white-08;
+  padding-inline-end: 5px;
 }
 
 .module-message__metadata__date--with-image-no-caption {
@@ -493,8 +510,8 @@
   text-align: center;
   padding: 10px;
 
-  border-bottom-left-radius: 16px;
-  border-bottom-right-radius: 16px;
+  border-bottom-left-radius: $session_message-container-border-radius;
+  border-bottom-right-radius: $session_message-container-border-radius;
 }
 
 .module-message__author-avatar {
@@ -1800,16 +1817,16 @@
 }
 
 .module-image--curved-top-left {
-  border-top-left-radius: 16px;
+  border-top-left-radius: $session_message-container-border-radius;
 }
 .module-image--curved-top-right {
-  border-top-right-radius: 16px;
+  border-top-right-radius: $session_message-container-border-radius;
 }
 .module-image--curved-bottom-left {
-  border-bottom-left-radius: 16px;
+  border-bottom-left-radius: $session_message-container-border-radius;
 }
 .module-image--curved-bottom-right {
-  border-bottom-right-radius: 16px;
+  border-bottom-right-radius: $session_message-container-border-radius;
 }
 .module-image--small-curved-top-left {
   border-top-left-radius: 10px;

stylesheets/_session.scss

@@ -419,9 +419,11 @@ label {
 
 .module-message__attachment-container,
 .module-image--curved-bottom-right,
+.module-image--curved-top-left,
+.module-image--curved-top-right,
 .module-image--curved-bottom-left {
-  border-top-left-radius: 0px;
-  border-top-right-radius: 0px;
+  border-top-left-radius: $session_message-container-border-radius;
+  border-top-right-radius: $session_message-container-border-radius;
   border-bottom-left-radius: $session_message-container-border-radius;
   border-bottom-right-radius: $session_message-container-border-radius;
 }

stylesheets/_session_theme.scss

@@ -41,11 +41,7 @@
       }
     }
 
-    .module-message__author,
-    .module-message__metadata,
-    .module-message__metadata__date,
-    .module-message__metadata__badge,
-    .module-message__metadata__badge--separator {
+    .module-message__author {
       @include themify($themes) {
         @include session-color-subtle(themed('receivedMessageText'));
       }
@@ -79,11 +75,7 @@
       }
     }
 
-    .module-message__author,
-    .module-message__metadata,
-    .module-message__metadata__date,
-    .module-message__metadata__badge,
-    .module-message__metadata__badge--separator {
+    .module-message__author {
       @include themify($themes) {
         @include session-color-subtle(themed('sentMessageText'));
       }
@@ -91,26 +83,30 @@
   }
 }
 
-.message {
-  &-highlighted {
+.session-message-wrapper {
+  &.message-highlighted {
     animation: highlightedMessageAnimation 1s ease-in-out;
   }
 
-  &-selected {
+  &.message-selected {
     .module-message {
       &__container {
         @include themify($themes) {
           box-shadow: themed('sessionShadow');
         }
       }
+    }
+  }
 
-      &__author {
-        color: $session-color-white;
+  // when no caption, we have to force white as we have a black shadow on the back
+  .module-message__metadata--with-image-no-caption {
+    .message-read-receipt-container {
+      .session-icon.check {
+        fill: white;
       }
     }
   }
-
-  &-read-receipt-container {
+  .message-read-receipt-container {
     margin-inline-start: 5px;
     .session-icon.check {
       @include themify($themes) {

stylesheets/_theme_dark.scss

@@ -297,10 +297,6 @@
     color: $color-gray-25;
   }
 
-  .module-message__metadata__date--with-image-no-caption {
-    color: $color-white-08;
-  }
-
   .module-message__metadata__status-icon--sending {
     @include color-svg('../images/sending.svg', $color-white-08);
   }

ts/components/conversation/ImageGrid.tsx

@@ -15,7 +15,7 @@ import { Image } from './Image';
 
 import { LocalizerType } from '../../types/Util';
 
-interface Props {
+type Props = {
   attachments: Array<AttachmentType>;
   withContentAbove?: boolean;
   withContentBelow?: boolean;
@@ -25,215 +25,147 @@ interface Props {
 
   onError: () => void;
   onClickAttachment?: (attachment: AttachmentType) => void;
-}
+};
 
-export class ImageGrid extends React.Component<Props> {
+export const ImageGrid = (props: Props) => {
   // tslint:disable-next-line max-func-body-length */
-  public render() {
-    const {
-      attachments,
-      bottomOverlay,
-      i18n,
-      onError,
-      onClickAttachment,
-      withContentAbove,
-      withContentBelow,
-    } = this.props;
+  const {
+    attachments,
+    bottomOverlay,
+    i18n,
+    onError,
+    onClickAttachment,
+    withContentAbove,
+    withContentBelow,
+  } = props;
 
-    const curveTopLeft = !Boolean(withContentAbove);
-    const curveTopRight = curveTopLeft;
+  const curveTopLeft = !Boolean(withContentAbove);
+  const curveTopRight = curveTopLeft;
 
-    const curveBottom = !Boolean(withContentBelow);
-    const curveBottomLeft = curveBottom;
-    const curveBottomRight = curveBottom;
+  const curveBottom = !Boolean(withContentBelow);
+  const curveBottomLeft = curveBottom;
+  const curveBottomRight = curveBottom;
 
-    const withBottomOverlay = Boolean(bottomOverlay && curveBottom);
+  const withBottomOverlay = Boolean(bottomOverlay && curveBottom);
 
-    if (!attachments || !attachments.length) {
-      return null;
-    }
+  if (!attachments || !attachments.length) {
+    return null;
+  }
 
-    if (attachments.length === 1 || !areAllAttachmentsVisual(attachments)) {
-      const { height, width } = getImageDimensions(attachments[0]);
+  if (attachments.length === 1 || !areAllAttachmentsVisual(attachments)) {
+    const { height, width } = getImageDimensions(attachments[0]);
 
-      return (
-        <div
-          className={classNames(
-            'module-image-grid',
-            'module-image-grid--one-image'
-          )}
-        >
-          <Image
-            alt={getAlt(attachments[0], i18n)}
-            i18n={i18n}
-            bottomOverlay={withBottomOverlay}
-            curveTopLeft={curveTopLeft}
-            curveTopRight={curveTopRight}
-            curveBottomLeft={curveBottomLeft}
-            curveBottomRight={curveBottomRight}
-            attachment={attachments[0]}
-            playIconOverlay={isVideoAttachment(attachments[0])}
-            height={height}
-            width={width}
-            url={getUrl(attachments[0])}
-            onClick={onClickAttachment}
-            onError={onError}
-          />
-        </div>
-      );
-    }
+    return (
+      <div
+        className={classNames(
+          'module-image-grid',
+          'module-image-grid--one-image'
+        )}
+      >
+        <Image
+          alt={getAlt(attachments[0], i18n)}
+          i18n={i18n}
+          bottomOverlay={withBottomOverlay}
+          curveTopLeft={curveTopLeft}
+          curveTopRight={curveTopRight}
+          curveBottomLeft={curveBottomLeft}
+          curveBottomRight={curveBottomRight}
+          attachment={attachments[0]}
+          playIconOverlay={isVideoAttachment(attachments[0])}
+          height={height}
+          width={width}
+          url={getUrl(attachments[0])}
+          onClick={onClickAttachment}
+          onError={onError}
+        />
+      </div>
+    );
+  }
 
-    if (attachments.length === 2) {
-      return (
-        <div className="module-image-grid">
-          <Image
-            alt={getAlt(attachments[0], i18n)}
-            i18n={i18n}
-            attachment={attachments[0]}
-            bottomOverlay={withBottomOverlay}
-            curveTopLeft={curveTopLeft}
-            curveBottomLeft={curveBottomLeft}
-            playIconOverlay={isVideoAttachment(attachments[0])}
-            height={149}
-            width={149}
-            url={getThumbnailUrl(attachments[0])}
-            onClick={onClickAttachment}
-            onError={onError}
-          />
+  if (attachments.length === 2) {
+    return (
+      <div className="module-image-grid">
+        <Image
+          alt={getAlt(attachments[0], i18n)}
+          i18n={i18n}
+          attachment={attachments[0]}
+          bottomOverlay={withBottomOverlay}
+          curveTopLeft={curveTopLeft}
+          curveBottomLeft={curveBottomLeft}
+          playIconOverlay={isVideoAttachment(attachments[0])}
+          height={149}
+          width={149}
+          url={getThumbnailUrl(attachments[0])}
+          onClick={onClickAttachment}
+          onError={onError}
+        />
+        <Image
+          alt={getAlt(attachments[1], i18n)}
+          i18n={i18n}
+          bottomOverlay={withBottomOverlay}
+          curveTopRight={curveTopRight}
+          curveBottomRight={curveBottomRight}
+          playIconOverlay={isVideoAttachment(attachments[1])}
+          height={149}
+          width={149}
+          attachment={attachments[1]}
+          url={getThumbnailUrl(attachments[1])}
+          onClick={onClickAttachment}
+          onError={onError}
+        />
+      </div>
+    );
+  }
+
+  if (attachments.length === 3) {
+    return (
+      <div className="module-image-grid">
+        <Image
+          alt={getAlt(attachments[0], i18n)}
+          i18n={i18n}
+          bottomOverlay={withBottomOverlay}
+          curveTopLeft={curveTopLeft}
+          curveBottomLeft={curveBottomLeft}
+          attachment={attachments[0]}
+          playIconOverlay={isVideoAttachment(attachments[0])}
+          height={200}
+          width={199}
+          url={getUrl(attachments[0])}
+          onClick={onClickAttachment}
+          onError={onError}
+        />
+        <div className="module-image-grid__column">
           <Image
             alt={getAlt(attachments[1], i18n)}
             i18n={i18n}
-            bottomOverlay={withBottomOverlay}
             curveTopRight={curveTopRight}
-            curveBottomRight={curveBottomRight}
-            playIconOverlay={isVideoAttachment(attachments[1])}
-            height={149}
-            width={149}
+            height={99}
+            width={99}
             attachment={attachments[1]}
+            playIconOverlay={isVideoAttachment(attachments[1])}
             url={getThumbnailUrl(attachments[1])}
             onClick={onClickAttachment}
             onError={onError}
           />
-        </div>
-      );
-    }
-
-    if (attachments.length === 3) {
-      return (
-        <div className="module-image-grid">
           <Image
-            alt={getAlt(attachments[0], i18n)}
+            alt={getAlt(attachments[2], i18n)}
             i18n={i18n}
             bottomOverlay={withBottomOverlay}
-            curveTopLeft={curveTopLeft}
-            curveBottomLeft={curveBottomLeft}
-            attachment={attachments[0]}
-            playIconOverlay={isVideoAttachment(attachments[0])}
-            height={200}
-            width={199}
-            url={getUrl(attachments[0])}
+            curveBottomRight={curveBottomRight}
+            height={99}
+            width={99}
+            attachment={attachments[2]}
+            playIconOverlay={isVideoAttachment(attachments[2])}
+            url={getThumbnailUrl(attachments[2])}
             onClick={onClickAttachment}
             onError={onError}
           />
-          <div className="module-image-grid__column">
-            <Image
-              alt={getAlt(attachments[1], i18n)}
-              i18n={i18n}
-              curveTopRight={curveTopRight}
-              height={99}
-              width={99}
-              attachment={attachments[1]}
-              playIconOverlay={isVideoAttachment(attachments[1])}
-              url={getThumbnailUrl(attachments[1])}
-              onClick={onClickAttachment}
-              onError={onError}
-            />
-            <Image
-              alt={getAlt(attachments[2], i18n)}
-              i18n={i18n}
-              bottomOverlay={withBottomOverlay}
-              curveBottomRight={curveBottomRight}
-              height={99}
-              width={99}
-              attachment={attachments[2]}
-              playIconOverlay={isVideoAttachment(attachments[2])}
-              url={getThumbnailUrl(attachments[2])}
-              onClick={onClickAttachment}
-              onError={onError}
-            />
-          </div>
         </div>
-      );
-    }
-
-    if (attachments.length === 4) {
-      return (
-        <div className="module-image-grid">
-          <div className="module-image-grid__column">
-            <div className="module-image-grid__row">
-              <Image
-                alt={getAlt(attachments[0], i18n)}
-                i18n={i18n}
-                curveTopLeft={curveTopLeft}
-                attachment={attachments[0]}
-                playIconOverlay={isVideoAttachment(attachments[0])}
-                height={149}
-                width={149}
-                url={getThumbnailUrl(attachments[0])}
-                onClick={onClickAttachment}
-                onError={onError}
-              />
-              <Image
-                alt={getAlt(attachments[1], i18n)}
-                i18n={i18n}
-                curveTopRight={curveTopRight}
-                playIconOverlay={isVideoAttachment(attachments[1])}
-                height={149}
-                width={149}
-                attachment={attachments[1]}
-                url={getThumbnailUrl(attachments[1])}
-                onClick={onClickAttachment}
-                onError={onError}
-              />
-            </div>
-            <div className="module-image-grid__row">
-              <Image
-                alt={getAlt(attachments[2], i18n)}
-                i18n={i18n}
-                bottomOverlay={withBottomOverlay}
-                curveBottomLeft={curveBottomLeft}
-                playIconOverlay={isVideoAttachment(attachments[2])}
-                height={149}
-                width={149}
-                attachment={attachments[2]}
-                url={getThumbnailUrl(attachments[2])}
-                onClick={onClickAttachment}
-                onError={onError}
-              />
-              <Image
-                alt={getAlt(attachments[3], i18n)}
-                i18n={i18n}
-                bottomOverlay={withBottomOverlay}
-                curveBottomRight={curveBottomRight}
-                playIconOverlay={isVideoAttachment(attachments[3])}
-                height={149}
-                width={149}
-                attachment={attachments[3]}
-                url={getThumbnailUrl(attachments[3])}
-                onClick={onClickAttachment}
-                onError={onError}
-              />
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    const moreMessagesOverlay = attachments.length > 5;
-    const moreMessagesOverlayText = moreMessagesOverlay
-      ? `+${attachments.length - 5}`
-      : undefined;
+      </div>
+    );
+  }
 
+  if (attachments.length === 4) {
     return (
       <div className="module-image-grid">
         <div className="module-image-grid__column">
@@ -270,8 +202,8 @@ export class ImageGrid extends React.Component<Props> {
               bottomOverlay={withBottomOverlay}
               curveBottomLeft={curveBottomLeft}
               playIconOverlay={isVideoAttachment(attachments[2])}
-              height={99}
-              width={99}
+              height={149}
+              width={149}
               attachment={attachments[2]}
               url={getThumbnailUrl(attachments[2])}
               onClick={onClickAttachment}
@@ -281,32 +213,98 @@ export class ImageGrid extends React.Component<Props> {
               alt={getAlt(attachments[3], i18n)}
               i18n={i18n}
               bottomOverlay={withBottomOverlay}
+              curveBottomRight={curveBottomRight}
               playIconOverlay={isVideoAttachment(attachments[3])}
-              height={99}
-              width={98}
+              height={149}
+              width={149}
               attachment={attachments[3]}
               url={getThumbnailUrl(attachments[3])}
               onClick={onClickAttachment}
               onError={onError}
             />
-            <Image
-              alt={getAlt(attachments[4], i18n)}
-              i18n={i18n}
-              bottomOverlay={withBottomOverlay}
-              curveBottomRight={curveBottomRight}
-              playIconOverlay={isVideoAttachment(attachments[4])}
-              height={99}
-              width={99}
-              darkOverlay={moreMessagesOverlay}
-              overlayText={moreMessagesOverlayText}
-              attachment={attachments[4]}
-              url={getThumbnailUrl(attachments[4])}
-              onClick={onClickAttachment}
-              onError={onError}
-            />
           </div>
         </div>
       </div>
     );
   }
-}
+
+  const moreMessagesOverlay = attachments.length > 5;
+  const moreMessagesOverlayText = moreMessagesOverlay
+    ? `+${attachments.length - 5}`
+    : undefined;
+
+  return (
+    <div className="module-image-grid">
+      <div className="module-image-grid__column">
+        <div className="module-image-grid__row">
+          <Image
+            alt={getAlt(attachments[0], i18n)}
+            i18n={i18n}
+            curveTopLeft={curveTopLeft}
+            attachment={attachments[0]}
+            playIconOverlay={isVideoAttachment(attachments[0])}
+            height={149}
+            width={149}
+            url={getThumbnailUrl(attachments[0])}
+            onClick={onClickAttachment}
+            onError={onError}
+          />
+          <Image
+            alt={getAlt(attachments[1], i18n)}
+            i18n={i18n}
+            curveTopRight={curveTopRight}
+            playIconOverlay={isVideoAttachment(attachments[1])}
+            height={149}
+            width={149}
+            attachment={attachments[1]}
+            url={getThumbnailUrl(attachments[1])}
+            onClick={onClickAttachment}
+            onError={onError}
+          />
+        </div>
+        <div className="module-image-grid__row">
+          <Image
+            alt={getAlt(attachments[2], i18n)}
+            i18n={i18n}
+            bottomOverlay={withBottomOverlay}
+            curveBottomLeft={curveBottomLeft}
+            playIconOverlay={isVideoAttachment(attachments[2])}
+            height={99}
+            width={99}
+            attachment={attachments[2]}
+            url={getThumbnailUrl(attachments[2])}
+            onClick={onClickAttachment}
+            onError={onError}
+          />
+          <Image
+            alt={getAlt(attachments[3], i18n)}
+            i18n={i18n}
+            bottomOverlay={withBottomOverlay}
+            playIconOverlay={isVideoAttachment(attachments[3])}
+            height={99}
+            width={98}
+            attachment={attachments[3]}
+            url={getThumbnailUrl(attachments[3])}
+            onClick={onClickAttachment}
+            onError={onError}
+          />
+          <Image
+            alt={getAlt(attachments[4], i18n)}
+            i18n={i18n}
+            bottomOverlay={withBottomOverlay}
+            curveBottomRight={curveBottomRight}
+            playIconOverlay={isVideoAttachment(attachments[4])}
+            height={99}
+            width={99}
+            darkOverlay={moreMessagesOverlay}
+            overlayText={moreMessagesOverlayText}
+            attachment={attachments[4]}
+            url={getThumbnailUrl(attachments[4])}
+            onClick={onClickAttachment}
+            onError={onError}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

ts/session/utils/Attachments.ts

@@ -136,13 +136,19 @@ export class AttachmentUtils {
     previews: Array<RawPreview>,
     openGroup?: OpenGroup
   ): Promise<Array<Preview>> {
-    const promises = (previews || []).map(async item => ({
-      ...item,
-      image: await this.upload({
-        attachment: item.image,
-        openGroup,
-      }),
-    }));
+    const promises = (previews || []).map(async item => {
+      // some links does not have an image associated, and it makes the whole message fail to send
+      if (!item.image) {
+        return item;
+      }
+      return {
+        ...item,
+        image: await this.upload({
+          attachment: item.image,
+          openGroup,
+        }),
+      };
+    });
     return Promise.all(promises);
   }