From edd984e0f501a7530f620b5184a8a2baa98b436a Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Thu, 19 Nov 2020 11:56:34 +1100 Subject: [PATCH] make quotes stay empty when there object isEmpty() --- js/models/conversations.js | 6 +- js/models/messages.js | 1 + stylesheets/_modules.scss | 51 ++- stylesheets/_session.scss | 6 +- stylesheets/_session_theme.scss | 30 +- stylesheets/_theme_dark.scss | 4 - ts/components/conversation/ImageGrid.tsx | 406 +++++++++++------------ ts/session/utils/Attachments.ts | 20 +- 8 files changed, 272 insertions(+), 252 deletions(-) diff --git a/js/models/conversations.js b/js/models/conversations.js index 16eab95e5..e203a9af4 100644 --- a/js/models/conversations.js +++ b/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, diff --git a/js/models/messages.js b/js/models/messages.js index cde3964f4..2c1ea257e 100644 --- a/js/models/messages.js +++ b/js/models/messages.js @@ -722,6 +722,7 @@ getPropsForQuote(options = {}) { const { noClick } = options; const quote = this.get('quote'); + if (!quote) { return null; } diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index c7d832432..9480288bb 100644 --- a/stylesheets/_modules.scss +++ b/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; diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss index 87b356160..c47ef7404 100644 --- a/stylesheets/_session.scss +++ b/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; } diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index 14166b3ce..153da53d5 100644 --- a/stylesheets/_session_theme.scss +++ b/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) { diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 9e955a5cb..0702294da 100644 --- a/stylesheets/_theme_dark.scss +++ b/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); } diff --git a/ts/components/conversation/ImageGrid.tsx b/ts/components/conversation/ImageGrid.tsx index d79a510dc..c2ef47412 100644 --- a/ts/components/conversation/ImageGrid.tsx +++ b/ts/components/conversation/ImageGrid.tsx @@ -15,7 +15,7 @@ import { Image } from './Image'; import { LocalizerType } from '../../types/Util'; -interface Props { +type Props = { attachments: Array; withContentAbove?: boolean; withContentBelow?: boolean; @@ -25,215 +25,147 @@ interface Props { onError: () => void; onClickAttachment?: (attachment: AttachmentType) => void; -} +}; -export class ImageGrid extends React.Component { +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 ( -
- {getAlt(attachments[0], -
- ); - } + return ( +
+ {getAlt(attachments[0], +
+ ); + } - if (attachments.length === 2) { - return ( -
- {getAlt(attachments[0], + if (attachments.length === 2) { + return ( +
+ {getAlt(attachments[0], + {getAlt(attachments[1], +
+ ); + } + + if (attachments.length === 3) { + return ( +
+ {getAlt(attachments[0], +
{getAlt(attachments[1], -
- ); - } - - if (attachments.length === 3) { - return ( -
{getAlt(attachments[0], -
- {getAlt(attachments[1], - {getAlt(attachments[2], -
- ); - } - - if (attachments.length === 4) { - return ( -
-
-
- {getAlt(attachments[0], - {getAlt(attachments[1], -
-
- {getAlt(attachments[2], - {getAlt(attachments[3], -
-
-
- ); - } - - const moreMessagesOverlay = attachments.length > 5; - const moreMessagesOverlayText = moreMessagesOverlay - ? `+${attachments.length - 5}` - : undefined; +
+ ); + } + if (attachments.length === 4) { return (
@@ -270,8 +202,8 @@ export class ImageGrid extends React.Component { 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 { 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} /> - {getAlt(attachments[4],
); } -} + + const moreMessagesOverlay = attachments.length > 5; + const moreMessagesOverlayText = moreMessagesOverlay + ? `+${attachments.length - 5}` + : undefined; + + return ( +
+
+
+ {getAlt(attachments[0], + {getAlt(attachments[1], +
+
+ {getAlt(attachments[2], + {getAlt(attachments[3], + {getAlt(attachments[4], +
+
+
+ ); +}; diff --git a/ts/session/utils/Attachments.ts b/ts/session/utils/Attachments.ts index a6cfe3d54..f81ec0625 100644 --- a/ts/session/utils/Attachments.ts +++ b/ts/session/utils/Attachments.ts @@ -136,13 +136,19 @@ export class AttachmentUtils { previews: Array, openGroup?: OpenGroup ): Promise> { - 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); }