From d7b16c27fbb013b13ffea4a7091364acab8a8fed Mon Sep 17 00:00:00 2001 From: Zita Szupera Date: Fri, 27 May 2022 12:38:27 +0200 Subject: [PATCH] feat: Message input - theme-v2 #93 --- docs/theming/component-variables.mdx | 110 ++++++++++++++-- src/v1/MessageInputFlat.scss | 30 +++-- src/v1/SendButton.scss | 6 + .../AttachmentPreviewList-layout.scss | 100 +++++++++++++++ .../AttachmentPreviewList-theme.scss | 97 ++++++++++++++ src/v2/styles/Channel/Channel-layout.scss | 1 + src/v2/styles/Channel/Channel-theme.scss | 9 +- .../MessageInput/MessageInput-layout.scss | 87 +++++++++++++ .../MessageInput/MessageInput-theme.scss | 120 ++++++++++++++++++ src/v2/styles/_theme-variables.scss | 14 +- src/v2/styles/index.layout.scss | 2 + src/v2/styles/index.scss | 8 +- src/vendor/react-file-utils.scss | 11 +- 13 files changed, 569 insertions(+), 26 deletions(-) create mode 100644 src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss create mode 100644 src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss create mode 100644 src/v2/styles/MessageInput/MessageInput-layout.scss create mode 100644 src/v2/styles/MessageInput/MessageInput-theme.scss diff --git a/docs/theming/component-variables.mdx b/docs/theming/component-variables.mdx index b4b95e17..8d48bc99 100644 --- a/docs/theming/component-variables.mdx +++ b/docs/theming/component-variables.mdx @@ -38,7 +38,7 @@ This page contains information about the component variables. | `--str-chat__channel-list-load-more-disabled-color` | The text/icon color of the load more button in disabled state | | `--str-chat__channel-list-empty-indicator-color` | The icon color for the empty list state | -Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/ChannelList/ChannelList-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/ChannelList/ChannelList-theme.scss) +Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/ChannelList/ChannelList-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/ChannelList/ChannelList-theme.scss) ## Channel preview @@ -63,7 +63,7 @@ Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/style | `--str-chat__channel-preview-unread-badge-border-inline-start` | Left (right in RTL layout) border of the unread badge | | `--str-chat__channel-preview-unread-badge-border-inline-start` | Right (lrft in RTL layout) border of the unread badge | -Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/ChannelPreview/ChannelPreview-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/ChannelPreview/ChannelPreview-theme.scss) +Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss) ## Channel @@ -82,7 +82,7 @@ Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/style | `--str-chat__channel-empty-color` | The text color used when no channel is selected | | `--str-chat__channel-loading-state-color` | The color of the loading indicator | -Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/Channel/Channel-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/Channel/Channel-theme.scss) +Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/Channel/Channel-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/Channel/Channel-theme.scss) ## Channel header @@ -99,7 +99,7 @@ Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/style | `--str-chat__channel-header-box-shadow` | Box shadow applied to the component | | `--str-chat__channel-header-info-color` | The text/icon color used to display member information about the channel | -Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/ChannelHeader/ChannelHeader-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/ChannelHeader/ChannelHeader-theme.scss) +Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/ChannelHeader/ChannelHeader-theme.scss) ## Message list @@ -127,7 +127,7 @@ Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/style | `--str-chat__jump-to-latest-message-unread-count-color` | The text/icon color of the unread messages count on the jump to latest message button | | `--str-chat__jump-to-latest-message-unread-count-background-color` | The background color of the unread messages count on the jump to latest message button | -Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/MessageList/MessageList-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/MessageList/CMessageList-theme.scss) +Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/MessageList/MessageList-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/MessageList/CMessageList-theme.scss) ## Thread @@ -155,6 +155,100 @@ Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/style | `--str-chat__thread-header-box-shadow` | Box shadow applied to the thread header | | `--str-chat__thread-header-info-color` | The text/icon color used to display less emphasized text in the channel header | +## Message input + +| Name | Description | +| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | +| `--str-chat__message-input-font-family` | The font used in the component | +| `--str-chat__message-input-color` | The text/icon color of the component | +| `--str-chat__message-input-background-color` | The background color of the component | +| `--str-chat__message-inputr-border-radius` | The border radius used for the borders of the component | +| `--str-chat__message-inputr-border-block-start` | Top border of the component | +| `--str-chat__message-input-border-block-end` | Bottom border of the component | +| `--str-chat__message-input-border-inline-start` | Left (right in RTL layout) border of the component | +| `--str-chat__message-input-border-inline-start` | Right (lrft in RTL layout) border of the component | +| `--str-chat__message-input-box-shadow` | Box shadow applied to the component | +| `--str-chat__message-textarea-font-family` | The font used in the textarea | +| `--str-chat__message-textarea-color` | The text/icon color of the textarea | +| `--str-chat__message-textarea-background-color` | The background color of the textarea | +| `--str-chat__message-textarea-border-radius` | The border radius used for the borders of the textarea | +| `--str-chat__message-textarea-border-block-start` | Top border of the textarea | +| `--str-chat__message-textarea-border-block-end` | Bottom border of the textarea | +| `--str-chat__message-textarea-border-inline-start` | Left (right in RTL layout) border of the textarea | +| `--str-chat__message-textarea-border-inline-start` | Right (lrft in RTL layout) border of the textarea | +| `--str-chat__message-textarea-box-shadow` | Box shadow applied to the textarea | +| `--str-chat__message-send-font-family` | The font used in the send button | +| `--str-chat__message-send-color` | The text/icon color of the send button | +| `--str-chat__message-send-background-color` | The background color of the send button | +| `--str-chat__message-send-border-radius` | The border radius used for the borders of the send button | +| `--str-chat__message-send-border-block-start` | Top border of the send button | +| `--str-chat__message-send-border-block-end` | Bottom border of the send button | +| `--str-chat__message-send-border-inline-start` | Left (right in RTL layout) border of the send button | +| `--str-chat__message-send-border-inline-start` | Right (lrft in RTL layout) border of the send button | +| `--str-chat__message-send-box-shadow` | Box shadow applied to the send button | +| `--str-chat__message-send-disabled-color` | The color of the send button in disabled state | +| `--str-chat__message-send-disabled-background-color` | The background color of the send button in disabled state | +| `--str-chat__message-input-not-allowed-color` | Thex text color of the message that is displayed when the use can't send messages | +| `--str-chat__cooldown-font-family` | The font used in the cooldown timer | +| `--str-chat__cooldown-color` | The text/icon color of the cooldown timer | +| `--str-chat__cooldown-background-color` | The background color of the cooldown timer | +| `--str-chat__cooldown-border-radius` | The border radius used for the borders of the cooldown timer | +| `--str-chat__cooldown-border-block-start` | Top border of the cooldown timer | +| `--str-chat__cooldown-border-block-end` | Bottom border of the cooldown timer | +| `--str-chat__cooldown-border-inline-start` | Left (right in RTL layout) border of the cooldown timer | +| `--str-chat__cooldown-border-inline-start` | Right (lrft in RTL layout) border of the cooldown timer | +| `--str-chat__cooldown-box-shadow` | Box shadow applied to the cooldown timer | +| `--str-chat__message-input-tools-font-family` | The font used in the tool buttons of the message input (such as attachment upload button) | +| `--str-chat__message-input-tools-color` | The text/icon color of the tool buttons of the message input (such as attachment upload button) | +| `--str-chat__message-input-tools-background-color` | The background color of the tool buttons of the message input (such as attachment upload button) | +| `--str-chat__message-input-tools-border-radius` | The border radius used for the borders of the tool buttons of the message input (such as attachment upload button) | +| `--str-chat__message-input-tools-border-block-start` | Top border of the tool buttons of the message input (such as attachment upload button) | +| `--str-chat__message-input-tools-border-block-end` | Bottom border of the tool buttons of the message input (such as attachment upload button) | +| `--str-chat__message-input-tools-border-inline-start` | Left (right in RTL layout) border of the tool buttons of the message input (such as attachment upload button) | +| `--str-chat__message-input-tools-border-inline-start` | Right (lrft in RTL layout) border of the tool buttons of the message input (such as attachment upload button) | +| `--str-chat__message-input-tools-box-shadow` | Box shadow applied to the tool buttons of the message input (such as attachment upload button) | + +Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/MessageInput/MessageInput-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/MessageInput/MessageInput-theme.scss) + +## Attachment preview + +| Name | Description | +| ----------------------------------------------------------- | ----------------------------------------------------------- | +| `--str-chat__attachment-preview-list-font-family` | The font used in the component | +| `--str-chat__attachment-preview-list-color` | The text/icon color of the component | +| `--str-chat__attachment-preview-list-background-color` | The background color of the component | +| `--str-chat__attachment-preview-list-border-radius` | The border radius used for the borders of the component | +| `--str-chat__attachment-preview-list-border-block-start` | Top border of the component | +| `--str-chat__attachment-preview-list-border-block-end` | Bottom border of the component | +| `--str-chat__attachment-preview-list-border-inline-start` | Left (right in RTL layout) border of the component | +| `--str-chat__attachment-preview-list-border-inline-start` | Right (lrft in RTL layout) border of the component | +| `--str-chat__attachment-preview-list-box-shadow` | Box shadow applied to the component | +| `--str-chat__attachment-preview-list-close-icon-background` | Background color of the delete icon | +| `--str-chat__attachment-preview-list-close-icon-color` | Color of the delete icon | +| `--str-chat__attachment-preview-list-retry-icon-color` | Color of the retry icon | +| `--str-chat__attachment-preview-list-download-icon-color` | Color of the download icon | +| `--str-chat__attachment-preview-list-preview-overlay-color` | Overlay color (for the loading indicator and retry button) | +| `--str-chat__attachment-preview-image-font-family` | The font used in the image preview | +| `--str-chat__attachment-preview-image-color` | The text/icon color of the image preview | +| `--str-chat__attachment-preview-image-background-color` | The background color of the image preview | +| `--str-chat__attachment-preview-image-border-radius` | The border radius used for the borders of the image preview | +| `--str-chat__attachment-preview-image-border-block-start` | Top border of the image preview | +| `--str-chat__attachment-preview-image-border-block-end` | Bottom border of the image preview | +| `--str-chat__attachment-preview-image-border-inline-start` | Left (right in RTL layout) border of the image preview | +| `--str-chat__attachment-preview-image-border-inline-start` | Right (lrft in RTL layout) border of the image preview | +| `--str-chat__attachment-preview-image-box-shadow` | Box shadow applied to the image preview | +| `--str-chat__attachment-preview-file-font-family` | The font used in the file preview | +| `--str-chat__attachment-preview-file-color` | The text/icon color of the file preview | +| `--str-chat__attachment-preview-file-background-color` | The background color of the file preview | +| `--str-chat__attachment-preview-file-border-radius` | The border radius used for the borders of the file preview | +| `--str-chat__attachment-preview-file-border-block-start` | Top border of the file preview | +| `--str-chat__attachment-preview-file-border-block-end` | Bottom border of the file preview | +| `--str-chat__attachment-preview-file-border-inline-start` | Left (right in RTL layout) border of the file preview | +| `--str-chat__attachment-preview-file-border-inline-start` | Right (lrft in RTL layout) border of the file preview | +| `--str-chat__attachment-preview-file-box-shadow` | Box shadow applied to the file preview | + +Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss) + ## Avatar | Name | Description | @@ -169,7 +263,7 @@ Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/style | `--str-chat__avatar-border-inline-start` | Right (lrft in RTL layout) border of the component | | `--str-chat__avatar-box-shadow` | Box shadow applied to the component | -Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/Avatar/Avatar-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/Avatar/Avatar-theme.scss) +Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/Avatar/Avatar-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/Avatar/Avatar-theme.scss) ## Loading indicator @@ -200,7 +294,7 @@ You can override the following variables if you want to adjust the style of all | `--str-chat__cta-button-disabled-background-color` | The background color of the button in disabled state | | `--str-chat__cta-button-disabled-color` | The text/icon color of the button in disabled state | -Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/common/CTAButton/CTAButton-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/common/CTAButton/CTAButton-theme.scss) +Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/common/CTAButton/CTAButton-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/common/CTAButton/CTAButton-theme.scss) ## Circle floating action button @@ -223,4 +317,4 @@ You can override the following variables if you want to adjust the style of all | `--str-chat__circle-fab-more-box-shadow` | Box shadow applied to the button | | `--str-chat__circle-fab-pressed-background-color` | The background color of the button in pressed state | -Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/common/CircleFAButton/CircleFAButton-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/common/CircleFAButton/CircleFAButton-theme.scss) +Defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/common/CircleFAButton/CircleFAButton-theme.scss](https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/common/CircleFAButton/CircleFAButton-theme.scss) diff --git a/src/v1/MessageInputFlat.scss b/src/v1/MessageInputFlat.scss index 91de9cb6..b412659d 100644 --- a/src/v1/MessageInputFlat.scss +++ b/src/v1/MessageInputFlat.scss @@ -139,13 +139,6 @@ background: var(--white); } - .str-chat-angular__cooldown { - position: absolute; - top: 50%; - transform: translateY(-50%); - left: 25px; - } - &-emojiselect { position: absolute; top: calc(100% - 45px); @@ -173,8 +166,23 @@ } &-cooldown { - font-size: var(--xl-font); - font-weight: var(--font-weight-bold); + display: flex; + align-items: center; + justify-content: flex-end; + padding-left: var(--xs-p); + + .str-chat__message-input-cooldown-text { + font-size: var(--xl-font); + font-weight: var(--font-weight-bold); + display: flex; + align-items: center; + justify-content: center; + width: 50px; + height: 50px; + background-color: var(--grey); + color: var(--white); + border-radius: var(--border-radius-round); + } } &--textarea-wrapper { @@ -254,6 +262,10 @@ opacity: 0.9; height: 25px; width: 25px; + + path { + fill: var(--white-snow); + } } } } diff --git a/src/v1/SendButton.scss b/src/v1/SendButton.scss index 5061aebc..bea077c8 100644 --- a/src/v1/SendButton.scss +++ b/src/v1/SendButton.scss @@ -11,4 +11,10 @@ @media screen and (min-width: 768px) { display: none; } + + .str-chat__send-button-angular { + svg path { + fill: var(--primary-color); + } + } } diff --git a/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss b/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss new file mode 100644 index 00000000..26f237d5 --- /dev/null +++ b/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-layout.scss @@ -0,0 +1,100 @@ +@use '../utils'; + +.str-chat__attachment-preview-list { + $preview-height: calc(var(--str-chat__spacing-px) * 72); + + @include utils.flex-row-center; + padding: var(--str-chat__spacing-1_5); + width: 100%; + + .str-chat__attachment-list-scroll-container { + overflow-y: hidden; + overflow-x: auto; + width: 100%; + max-width: 100%; + display: flex; + align-items: center; + justify-content: flex-start; + column-gap: var(--str-chat__spacing-2); + } + + @mixin overlay { + @include utils.flex-row-center; + position: absolute; + width: 100%; + height: 100%; + } + + .str-chat__attachment-preview-image { + position: relative; + height: $preview-height; + width: $preview-height; + + .str-chat__attachment-preview-image-loading { + @include overlay; + } + + .str-chat__attachment-preview-thumbnail { + object-fit: cover; + height: $preview-height; + width: $preview-height; + word-break: break-all; + overflow: hidden; + } + } + + .str-chat__attachment-preview-file { + @include utils.flex-row-center; + height: $preview-height; + width: calc(var(--str-chat__spacing-px) * 200); + position: relative; + padding: var(--str-chat__spacing-4); + column-gap: var(--str-chat__spacing-2); + + .str-chat__attachment-preview-file-end { + display: flex; + flex-direction: column; + align-items: start; + justify-content: center; + overflow-y: visible; + overflow-x: clip; + + .str-chat__attachment-preview-file-name { + @include utils.ellipsis-text; + max-width: 100%; + } + + .str-chat__attachment-preview-file-download { + line-height: calc(var(--str-chat__spacing-px) * 16); + + svg { + width: calc(var(--str-chat__spacing-px) * 16); + height: calc(var(--str-chat__spacing-px) * 16); + } + } + } + } + + .str-chat__attachment-preview-delete { + position: absolute; + top: 0; + inset-inline-end: 0; + cursor: pointer; + z-index: 1; + + svg { + width: calc(var(--str-chat__spacing-px) * 24); + height: calc(var(--str-chat__spacing-px) * 24); + } + } + + .str-chat__attachment-preview-error { + @include overlay; + cursor: pointer; + } +} + +.str-chat__attachment-preview-list-angular-host { + width: 100%; + max-width: 100%; +} diff --git a/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss b/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss new file mode 100644 index 00000000..83a273ee --- /dev/null +++ b/src/v2/styles/AttachmentPreviewList/AttachmentPreviewList-theme.scss @@ -0,0 +1,97 @@ +@use '../utils'; + +.str-chat { + --str-chat__attachment-preview-list-font-family: var(--str-chat__font-family); + --str-chat__attachment-preview-list-border-radius: var(--str-chat__border-radius-md); + --str-chat__attachment-preview-list-color: var(--str-chat__text-color); + --str-chat__attachment-preview-list-background-color: transparent; + --str-chat__attachment-preview-list-border-block-start: none; + --str-chat__attachment-preview-list-border-block-end: none; + --str-chat__attachment-preview-list-border-inline-start: none; + --str-chat__attachment-preview-list-border-inline-end: none; + --str-chat__attachment-preview-list-box-shadow: none; + --str-chat__attachment-preview-close-icon-background: var(--str-chat__text-low-emphasis-color); + --str-chat__attachment-preview-close-icon-color: var(--str-chat__on-disabled-color); + --str-chat__attachment-preview-retry-icon-color: var(--str-chat__primary-color); + --str-chat__attachment-preview-download-icon-color: var(--str-chat__text-low-emphasis-color); + --str-chat__attachment-preview-overlay-color: var(--str-chat__overlay-color); + + --str-chat__attachment-preview-image-font-family: var(--str-chat__font-family); + --str-chat__attachment-preview-image-border-radius: var(--str-chat__border-radius-sm); + --str-chat__attachment-preview-image-color: var(--str-chat__text-color); + --str-chat__attachment-preview-image-background-color: transparent; + --str-chat__attachment-preview-image-border-block-start: none; + --str-chat__attachment-preview-image-border-block-end: none; + --str-chat__attachment-preview-image-border-inline-start: none; + --str-chat__attachment-preview-image-border-inline-end: none; + --str-chat__attachment-preview-image-box-shadow: none; + + --str-chat__attachment-preview-file-font-family: var(--str-chat__font-family); + --str-chat__attachment-preview-file-border-radius: var(--str-chat__border-radius-md); + --str-chat__attachment-preview-file-color: var(--str-chat__text-color); + --str-chat__attachment-preview-file-background-color: transparent; + --str-chat__attachment-preview-file-border-block-start: 1px solid var(--str-chat__surface-color); + --str-chat__attachment-preview-file-border-block-end: 1px solid var(--str-chat__surface-color); + --str-chat__attachment-preview-file-border-inline-start: 1px solid var(--str-chat__surface-color); + --str-chat__attachment-preview-file-border-inline-end: 1px solid var(--str-chat__surface-color); + --str-chat__attachment-preview-file-box-shadow: none; +} + +.str-chat__attachment-preview-list { + @include utils.component-layer-overrides('attachment-preview-list'); + + .str-chat__attachment-preview-image { + @include utils.component-layer-overrides('attachment-preview-image'); + + .str-chat__attachment-preview-thumbnail, + .str-chat__attachment-preview-image-loading { + border-radius: var(--str-chat__attachment-preview-image-border-radius); + background-color: var(--str-chat__attachment-preview-overlay-color); + } + } + + .str-chat__attachment-preview-file { + @include utils.component-layer-overrides('attachment-preview-file'); + + .str-chat__attachment-preview-file-name { + font-size: 1rem; + line-height: 1.25rem; + font-weight: 500; + } + + .str-chat__attachment-preview-file-download { + svg path { + fill: var(--str-chat__attachment-preview-download-icon-color); + } + } + } + + .str-chat__attachment-preview-delete { + svg { + path { + fill: var(--str-chat__attachment-preview-close-icon-color); + } + + rect, + circle { + fill: var(--str-chat__attachment-preview-close-icon-background); + } + } + } + + .str-chat__attachment-preview-error { + background-color: var(--str-chat__attachment-preview-overlay-color); + + svg path { + fill: var(--str-chat__attachment-preview-retry-icon-color); + } + + &.str-chat__attachment-preview-error-image { + border-radius: var(--str-chat__attachment-preview-image-border-radius); + } + + &.str-chat__attachment-preview-error-file { + border-radius: var(--str-chat__attachment-preview-file-border-radius); + } + } +} diff --git a/src/v2/styles/Channel/Channel-layout.scss b/src/v2/styles/Channel/Channel-layout.scss index bc870f9d..7b2cef4f 100644 --- a/src/v2/styles/Channel/Channel-layout.scss +++ b/src/v2/styles/Channel/Channel-layout.scss @@ -15,6 +15,7 @@ display: flex; flex-direction: column; width: 100%; + min-width: 0; } } } diff --git a/src/v2/styles/Channel/Channel-theme.scss b/src/v2/styles/Channel/Channel-theme.scss index 2041afd5..a2d77a3a 100644 --- a/src/v2/styles/Channel/Channel-theme.scss +++ b/src/v2/styles/Channel/Channel-theme.scss @@ -62,7 +62,14 @@ .str-chat__loading-channel-message-input, .str-chat__loading-channel-message-send { @include utils.loading-item-background('channel'); - border-radius: var(--str-chat__border-radius-circle); + } + + .str-chat__loading-channel-message-input { + border-radius: var(--str-chat__message-textarea-border-radius); + } + + .str-chat__loading-channel-message-send { + border-radius: var(--str-chat__message-send-border-radius); } } } diff --git a/src/v2/styles/MessageInput/MessageInput-layout.scss b/src/v2/styles/MessageInput/MessageInput-layout.scss new file mode 100644 index 00000000..08858e3c --- /dev/null +++ b/src/v2/styles/MessageInput/MessageInput-layout.scss @@ -0,0 +1,87 @@ +@use '../utils'; + +.str-chat__message-input { + $send-button-size: calc(var(--str-chat__spacing-px) * 40); + + width: 100%; + height: 100%; + max-height: 100%; + display: flex; + align-items: end; + justify-content: center; + padding: var(--str-chat__spacing-1) var(--str-chat__spacing-2); + + .str-chat__file-input-container { + @include utils.flex-row-center; + width: calc(var(--str-chat__spacing-px) * 40); + height: calc(var(--str-chat__spacing-px) * 40); + cursor: pointer; + + .str-chat__file-input { + display: none; + } + + .str-chat__file-input-label { + cursor: pointer; + } + } + + .str-chat__message-textarea-container { + @include utils.flex-col-center; + width: 100%; + min-width: 0; + max-height: 100%; + + .str-chat__message-textarea-with-emoji-picker { + width: 100%; + min-height: 0; + max-height: 100%; + display: flex; + padding: var(--str-chat__spacing-2) var(--str-chat__spacing-5); + + .str-chat__message-textarea { + width: 100%; + display: flex; + max-height: 100%; + overflow-y: auto; + overflow-x: hidden; + } + } + } + + .str-chat__message-textarea-angular-host { + @include utils.flex-row-center; + width: 100%; + } + + .str-chat__send-button { + @include utils.flex-row-center; + cursor: pointer; + padding: 0; + width: $send-button-size; + height: $send-button-size; + min-width: $send-button-size; + + svg { + width: calc(var(--str-chat__spacing-px) * 32); + height: calc(var(--str-chat__spacing-px) * 32); + } + } + + .str-chat__message-input-cooldown { + @include utils.flex-row-center; + margin-inline-start: var(--str-chat__spacing-2); + margin-block: calc(var(--str-chat__spacing-2) / 2); + min-width: calc(#{$send-button-size} - var(--str-chat__spacing-2)); + min-height: calc(#{$send-button-size} - var(--str-chat__spacing-2)); + } + + .str-chat__message-input-not-allowed { + align-self: center; + padding: var(--str-chat__spacing-3); + } +} + +.str-chat__message-input-angular-host { + max-height: 50%; +} diff --git a/src/v2/styles/MessageInput/MessageInput-theme.scss b/src/v2/styles/MessageInput/MessageInput-theme.scss new file mode 100644 index 00000000..64aa036c --- /dev/null +++ b/src/v2/styles/MessageInput/MessageInput-theme.scss @@ -0,0 +1,120 @@ +@use '../utils'; + +.str-chat { + --str-chat__message-input-font-family: var(--str-chat__font-family); + --str-chat__message-input-border-radius: 0; + --str-chat__message-input-color: var(--str-chat__text-color); + --str-chat__message-input-background-color: var(--str-chat__secondary-background-color); + --str-chat__message-input-border-block-start: none; + --str-chat__message-input-border-block-end: none; + --str-chat__message-input-border-inline-start: none; + --str-chat__message-input-border-inline-end: none; + --str-chat__message-input-box-shadow: none; + + --str-chat__message-textarea-font-family: var(--str-chat__font-family); + --str-chat__message-textarea-border-radius: var(--str-chat__border-radius-md); + --str-chat__message-textarea-color: var(--str-chat__text-color); + --str-chat__message-textarea-background-color: transparent; + --str-chat__message-textarea-border-block-start: 1px solid var(--str-chat__surface-color); + --str-chat__message-textarea-border-block-end: 1px solid var(--str-chat__surface-color); + --str-chat__message-textarea-border-inline-start: 1px solid var(--str-chat__surface-color); + --str-chat__message-textarea-border-inline-end: 1px solid var(--str-chat__surface-color); + --str-chat__message-textarea-box-shadow: none; + + --str-chat__message-send-font-family: var(--str-chat__font-family); + --str-chat__message-send-border-radius: var(--str-chat__border-radius-circle); + --str-chat__message-send-color: var(--str-chat__primary-color); + --str-chat__message-send-background-color: transparent; + --str-chat__message-send-border-block-start: 0; + --str-chat__message-send-border-block-end: 0; + --str-chat__message-send-border-inline-start: 0; + --str-chat__message-send-border-inline-end: 0; + --str-chat__message-send-box-shadow: none; + --str-chat__message-send-disabled-color: var(--str-chat__disabled-color); + --str-chat__message-send-disabled-background-color: transparent; + + --str-chat__message-input-tools-font-family: var(--str-chat__font-family); + --str-chat__message-input-tools-border-radius: var(--str-chat__border-radius-circle); + --str-chat__message-input-tools-color: var(--str-chat__text-low-emphasis-color); + --str-chat__message-input-tools-background-color: transparent; + --str-chat__message-input-tools-border-block-start: 0; + --str-chat__message-input-tools-border-block-end: 0; + --str-chat__message-input-tools-border-inline-start: 0; + --str-chat__message-input-tools-border-inline-end: 0; + --str-chat__message-input-tools-box-shadow: none; + + --str-chat__message-input-not-allowed-color: var(--str-chat__disabled-color); + + --str-chat__cooldown-font-family: var(--str-chat__font-family); + --str-chat__cooldown-border-radius: var(--str-chat__border-radius-circle); + --str-chat__cooldown-color: var(--str-chat__on-disabled-color); + --str-chat__cooldown-background-color: var(--str-chat__disabled-color); + --str-chat__cooldown-border-block-start: 0; + --str-chat__cooldown-border-block-end: 0; + --str-chat__cooldown-border-inline-start: 0; + --str-chat__cooldown-border-inline-end: 0; + --str-chat__cooldown-box-shadow: none; +} + +.str-chat__message-input { + @include utils.component-layer-overrides('message-input'); + + .str-chat__file-input-container { + @include utils.component-layer-overrides('message-input-tools'); + + svg path { + fill: var(--str-chat__message-input-tools-color); + } + } + + .str-chat__attachment-preview-image-error { + svg path { + fill: var(--str-chat__primary-color); + } + } + + .str-chat__message-textarea-container { + @include utils.component-layer-overrides('message-textarea'); + + .str-chat__message-textarea { + resize: none; + border: none; + color: var(--str-chat__message-textarea-color); + font-family: var(--str-chat__message-textarea-font-family); + background-color: transparent; + box-shadow: none; + outline: none; + font-size: 1rem; + line-height: 1.25rem; + } + } + + .str-chat__send-button { + @include utils.component-layer-overrides('message-send'); + + svg path { + fill: var(--str-chat__message-send-color); + } + + &:disabled { + background-color: var(--str-chat__message-send-disabled-background-color); + + svg path { + fill: var(--str-chat__message-send-disabled-color); + } + } + } + + .str-chat__message-input-cooldown { + @include utils.component-layer-overrides('cooldown'); + font-size: 1rem; + line-height: 1.25rem; + font-weight: 500; + } + + .str-chat__message-input-not-allowed { + color: var(--str-chat__message-input-not-allowed-color); + font-size: 1rem; + line-height: 1.25rem; + } +} diff --git a/src/v2/styles/_theme-variables.scss b/src/v2/styles/_theme-variables.scss index 8b03fc95..1ce38dac 100644 --- a/src/v2/styles/_theme-variables.scss +++ b/src/v2/styles/_theme-variables.scss @@ -1,3 +1,9 @@ +// Since Angular uses dynamic components it's not enough the hide the message input for theme-v1/v2, we have to remove it from the DOM tree +// Angular component lifecycle requires us to place this on the root level +:root { + --str-chat__theme-version: 2; +} + .str-chat { // used for elements where sizing is necessary (such as icons, avatar) --str-chat__spacing-px: 1px; @@ -74,8 +80,8 @@ --str-chat__yellow100: #fff8e5; --str-chat__border-radius-xs: 8px; - --str-chat__border-radius-sm: 16px; - --str-chat__border-radius-md: 20px; + --str-chat__border-radius-sm: 14px; + --str-chat__border-radius-md: 18px; --str-chat__border-radius-circle: 999px; // https://systemfontstack.com/ @@ -96,7 +102,7 @@ --str-chat__text-color: var(--str-chat__grey950); --str-chat__text-low-emphasis-color: var(--str-chat__grey500); --str-chat__disabled-color: var(--str-chat__grey400); - --str-chat__on-disabled-color: var(--str-chat__grey5); + --str-chat__on-disabled-color: var(--str-chat__grey50); --str-chat__danger-color: var(--str-chat__red600); --str-chat__online-indicator-color: var(--str-chat__green500); --str-chat__message-highlight-color: var(--str-chat__yellow100); @@ -123,5 +129,5 @@ --str-chat__message-highlight-color: var(--str-chat__yellow900); --str-chat__unread-badge-color: var(--str-chat__red400); --str-chat__on-unread-badge-color: var(--str-chat__grey50); - --str-chat__overlay-color: rgba(77, 26, 26, 0.9); + --str-chat__overlay-color: rgba(0, 0, 0, 0.85); } diff --git a/src/v2/styles/index.layout.scss b/src/v2/styles/index.layout.scss index 785ee12e..32db1628 100755 --- a/src/v2/styles/index.layout.scss +++ b/src/v2/styles/index.layout.scss @@ -2,6 +2,7 @@ @use 'theme-variables'; @use 'Avatar/Avatar-layout'; +@use 'AttachmentPreviewList/AttachmentPreviewList-layout'; @use 'Channel/Channel-layout'; @use 'ChannelHeader/ChannelHeader-layout'; @use 'ChannelList/ChannelList-layout'; @@ -9,5 +10,6 @@ @use 'common/CTAButton/CTAButton-layout'; @use 'common/CircleFAButton/CircleFAButton-layout'; @use 'LoadingIndicator/LoadingIndicator-layout'; +@use 'MessageInput/MessageInput-layout'; @use 'MessageList/MessageList-layout'; @use 'Thread/Thread-layout'; diff --git a/src/v2/styles/index.scss b/src/v2/styles/index.scss index ea14edd1..adc540e6 100644 --- a/src/v2/styles/index.scss +++ b/src/v2/styles/index.scss @@ -1,10 +1,12 @@ @use 'index.layout.scss'; @use 'common/CTAButton/CTAButton-theme'; @use 'common/CircleFAButton/CircleFAButton-theme'; +@use 'Avatar/Avatar-theme'; +@use 'AttachmentPreviewList/AttachmentPreviewList-theme'; +@use 'Channel/Channel-theme.scss'; +@use 'ChannelHeader/ChannelHeader-theme'; @use 'ChannelList/ChannelList-theme'; @use 'ChannelPreview/ChannelPreview-theme'; -@use 'Avatar/Avatar-theme'; +@use 'MessageInput/MessageInput-theme'; @use 'MessageList/MessageList-theme'; -@use 'ChannelHeader/ChannelHeader-theme'; @use 'Thread/Thread-theme'; -@use 'Channel/Channel-theme.scss'; diff --git a/src/vendor/react-file-utils.scss b/src/vendor/react-file-utils.scss index 620334c4..aa29be54 100644 --- a/src/vendor/react-file-utils.scss +++ b/src/vendor/react-file-utils.scss @@ -107,6 +107,8 @@ .rfu-file-previewer__close-button { position: relative; z-index: 10000; + height: 24px; + width: 24px; } .rfu-file-previewer__failed { @@ -125,6 +127,8 @@ .rfu-file-previewer__retry { text-decoration: none; background: #63e5a4; + width: 24px; + height: 24px; } .rfu-file-upload-button { @@ -167,7 +171,6 @@ } .rfu-icon-button svg { - margin: 4px; position: relative; z-index: 50; fill: #a0b2b8; @@ -277,6 +280,12 @@ .rfu-image-previewer__retry { z-index: 90; + width: 24px; + height: 24px; + + svg path { + fill: white; + } } .rfu-image-upload-button {