From c944fac426a9678f4bc2c4121c2c6a94c9e66036 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 20 Jul 2021 10:08:09 +1000 Subject: [PATCH 1/6] Transparent background for images. --- stylesheets/_modules.scss | 6 ++---- stylesheets/_session_theme.scss | 21 +++++++++++++++++---- stylesheets/_theme_dark.scss | 2 +- ts/components/conversation/Message.tsx | 9 ++++++--- 4 files changed, 26 insertions(+), 12 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 8d9c4933c..c7dbe3eae 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -130,9 +130,6 @@ 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 { @@ -1284,7 +1281,8 @@ .module-image { overflow: hidden; - background-color: $color-white; + // background-color: $color-white; + background-color: rgba(0, 0, 0, 0); position: relative; display: inline-block; margin: 1px; diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index cb3597fed..40356df68 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -25,8 +25,14 @@ } &__container--incoming { - @include themify($themes) { - background: themed('receivedMessageBackground'); + &--opaque { + @include themify($themes) { + background: themed('receivedMessageBackground'); + } + } + + &--transparent { + background: none; } .module-message__text { @@ -49,8 +55,15 @@ } &__container--outgoing { - @include themify($themes) { - background: themed('sentMessageBackground'); + &--opaque { + @include themify($themes) { + background: themed('sentMessageBackground'); + } + } + + + &--transparent { + background: none; } .module-message__text { diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss index 54639d58e..e0e93674c 100644 --- a/stylesheets/_theme_dark.scss +++ b/stylesheets/_theme_dark.scss @@ -401,7 +401,7 @@ // Module: Image .module-image { - background-color: $color-black; + background: none; } .module-image__border-overlay { diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 2fd928ccf..630f6fac7 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -671,8 +671,8 @@ class MessageInner extends React.PureComponent { return Boolean( displayImage && - ((isImage(attachments) && hasImage(attachments)) || - (isVideo(attachments) && hasVideoScreenshot(attachments))) + ((isImage(attachments) && hasImage(attachments)) || + (isVideo(attachments) && hasVideoScreenshot(attachments))) ); } @@ -781,7 +781,10 @@ class MessageInner extends React.PureComponent {
Date: Tue, 20 Jul 2021 10:12:10 +1000 Subject: [PATCH 2/6] formatting and linting. --- stylesheets/_session_theme.scss | 1 - ts/components/conversation/Message.tsx | 10 +++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index 40356df68..3e66d9c02 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -61,7 +61,6 @@ } } - &--transparent { background: none; } diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 630f6fac7..407574d58 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -671,8 +671,8 @@ class MessageInner extends React.PureComponent { return Boolean( displayImage && - ((isImage(attachments) && hasImage(attachments)) || - (isVideo(attachments) && hasVideoScreenshot(attachments))) + ((isImage(attachments) && hasImage(attachments)) || + (isVideo(attachments) && hasVideoScreenshot(attachments))) ); } @@ -782,9 +782,9 @@ class MessageInner extends React.PureComponent { className={classNames( 'module-message__container', `module-message__container--${direction}`, - isShowingImage ? - `module-message__container--${direction}--transparent` : - `module-message__container--${direction}--opaque` + isShowingImage + ? `module-message__container--${direction}--transparent` + : `module-message__container--${direction}--opaque` )} style={{ width: isShowingImage ? width : undefined, From ee7e6e47feee3aa8ba5a33fe304a42d6413cea2c Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 20 Jul 2021 10:50:06 +1000 Subject: [PATCH 3/6] applying to outgoing messages --- stylesheets/_modules.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index c7dbe3eae..577e93568 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -135,18 +135,14 @@ .module-message--outgoing { .module-message__attachment-container--with-content-below, .module-message__attachment-container--with-content-above { - @include themify($themes) { - background: themed('sentMessageBackground'); - } + background: none; } } .module-message--incoming { .module-message__attachment-container--with-content-below, .module-message__attachment-container--with-content-above { - @include themify($themes) { - background: themed('receivedMessageBackground'); - } + background: none; } } From 0aaf40637c0c1211f8c1576c16875e83ae970826 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 20 Jul 2021 10:50:06 +1000 Subject: [PATCH 4/6] applying to outgoing messages --- stylesheets/_modules.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 8d9c4933c..d7edcd82a 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -138,18 +138,14 @@ .module-message--outgoing { .module-message__attachment-container--with-content-below, .module-message__attachment-container--with-content-above { - @include themify($themes) { - background: themed('sentMessageBackground'); - } + background: none; } } .module-message--incoming { .module-message__attachment-container--with-content-below, .module-message__attachment-container--with-content-above { - @include themify($themes) { - background: themed('receivedMessageBackground'); - } + background: none; } } From 4cdc852ea3366ece00c7dca5705b01d8e759ce9c Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 20 Jul 2021 10:12:10 +1000 Subject: [PATCH 5/6] cherry-pick conflicts. --- stylesheets/_session_theme.scss | 10 ++++++++-- ts/components/conversation/Message.tsx | 5 ++++- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/stylesheets/_session_theme.scss b/stylesheets/_session_theme.scss index cb3597fed..b45449ccf 100644 --- a/stylesheets/_session_theme.scss +++ b/stylesheets/_session_theme.scss @@ -49,8 +49,14 @@ } &__container--outgoing { - @include themify($themes) { - background: themed('sentMessageBackground'); + &--opaque { + @include themify($themes) { + background: themed('sentMessageBackground'); + } + } + + &--transparent { + background: none; } .module-message__text { diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 2fd928ccf..407574d58 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -781,7 +781,10 @@ class MessageInner extends React.PureComponent {
Date: Tue, 20 Jul 2021 11:09:27 +1000 Subject: [PATCH 6/6] minor style tweak. --- stylesheets/_modules.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 577e93568..36472975d 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -1277,8 +1277,7 @@ .module-image { overflow: hidden; - // background-color: $color-white; - background-color: rgba(0, 0, 0, 0); + background: none; position: relative; display: inline-block; margin: 1px;