From 0d8bf233c27dfa6079782b28d60ec36c2bfc4fa9 Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Sat, 13 Jul 2024 00:32:25 +0200 Subject: [PATCH 1/5] Moved initial styling, needs adjustments --- src/v2/styles/ChatView/ChatView-layout.scss | 86 ++++++++ src/v2/styles/ChatView/ChatView-theme.scss | 0 .../MessageList/MessageList-layout.scss | 6 - .../VirtualizedMessageList-layout.scss | 12 - src/v2/styles/Thread/Thread-layout.scss | 16 +- .../styles/ThreadList/ThreadList-layout.scss | 206 ++++++++++++++++++ .../styles/ThreadList/ThreadList-theme.scss | 0 src/v2/styles/index.layout.scss | 2 + 8 files changed, 309 insertions(+), 19 deletions(-) create mode 100644 src/v2/styles/ChatView/ChatView-layout.scss create mode 100644 src/v2/styles/ChatView/ChatView-theme.scss create mode 100644 src/v2/styles/ThreadList/ThreadList-layout.scss create mode 100644 src/v2/styles/ThreadList/ThreadList-theme.scss diff --git a/src/v2/styles/ChatView/ChatView-layout.scss b/src/v2/styles/ChatView/ChatView-layout.scss new file mode 100644 index 00000000..e08bdb9c --- /dev/null +++ b/src/v2/styles/ChatView/ChatView-layout.scss @@ -0,0 +1,86 @@ +.str-chat { + --str-chat-selector-background-color: var(--str-chat__secondary-background-color); + --str-chat-selector-border-color: var(--str-chat__surface-color); + + --str-chat-selector-button-color-default: var(--str-chat__text-low-emphasis-color); + --str-chat-selector-button-color-selected: var(--str-chat__text-color); + --str-chat-selector-button-background-color-default: transparent; + --str-chat-selector-button-background-color-selected: var(--str-chat__surface-color); + + --str-chat-unread-count-badge-color: var(--str-chat__on-unread-badge-color); + --str-chat-unread-count-badge-background-color: var(--str-chat__danger-color); +} + +.str-chat__chat-view { + display: flex; + width: 100%; + height: 100%; + + &__selector { + display: flex; + flex-direction: column; + padding-inline: 8px; + padding-block: 16px; + gap: 20px; + border-right: 1px solid var(--str-chat-selector-border-color); + background-color: var(--str-chat-selector-background-color); + + &-button { + all: unset; + display: flex; + flex-direction: column; + align-items: center; + background: var(--str-chat-selector-button-background-color-default); + color: var(--str-chat-selector-button-color-default); + padding-inline: 10px; + padding-block: 10px; + border-radius: 8px; + gap: 4px; + font-weight: 400; + font-size: 12px; + line-height: 1; + box-sizing: border-box; + cursor: pointer; + position: relative; + + --str-chat-icon-color: var(--str-chat-selector-button-color-default); + --str-chat-icon-height: 20px; + --str-chat-icon-width: 20px; + + &[aria-selected='true'] { + --str-chat-icon-color: var(--str-chat-selector-button-color-selected); + color: var(--str-chat-selector-button-color-selected); + background: var(--str-chat-selector-button-background-color-selected); + } + } + + .str-chat__unread-count-badge { + font-size: 12px; + line-height: 1; + font-weight: 700; + padding: 5px 7px; + background: var(--str-chat-unread-count-badge-background-color); + color: var(--str-chat-unread-count-badge-color); + border-radius: 9999px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + font-variant-numeric: tabular-nums; + + position: absolute; + right: 10px; + top: 6px; + } + } + + &__channels { + display: flex; + flex-grow: 1; + } + + &__threads { + display: flex; + flex-grow: 1; + } +} diff --git a/src/v2/styles/ChatView/ChatView-theme.scss b/src/v2/styles/ChatView/ChatView-theme.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/v2/styles/MessageList/MessageList-layout.scss b/src/v2/styles/MessageList/MessageList-layout.scss index fadb71b2..cd388cfa 100644 --- a/src/v2/styles/MessageList/MessageList-layout.scss +++ b/src/v2/styles/MessageList/MessageList-layout.scss @@ -52,12 +52,6 @@ } } -.str-chat__thread { - .str-chat__main-panel-inner { - height: auto; - } -} - .str-chat__main-panel { .str-chat__ul { .str-chat__li:first-of-type { diff --git a/src/v2/styles/MessageList/VirtualizedMessageList-layout.scss b/src/v2/styles/MessageList/VirtualizedMessageList-layout.scss index e8149533..9f282583 100644 --- a/src/v2/styles/MessageList/VirtualizedMessageList-layout.scss +++ b/src/v2/styles/MessageList/VirtualizedMessageList-layout.scss @@ -55,15 +55,3 @@ padding-block-end: var(--str-chat__spacing-0_5); } } - - -.str-chat__thread--virtualized { - .str-chat__main-panel-inner { - height: 100%; - - // the first message in virtualized thread has to be separated from the top by padding, not margin - .str-chat__virtual-list-message-wrapper:first-of-type { - padding-block-start: var(--str-chat__spacing-4); - } - } -} \ No newline at end of file diff --git a/src/v2/styles/Thread/Thread-layout.scss b/src/v2/styles/Thread/Thread-layout.scss index 0b71b474..99b6f55d 100644 --- a/src/v2/styles/Thread/Thread-layout.scss +++ b/src/v2/styles/Thread/Thread-layout.scss @@ -1,5 +1,6 @@ @use '../utils'; +// FIXME: figure out why does this "container" exist when __thread is completely valid .str-chat__thread-container { height: 100%; display: flex; @@ -40,12 +41,25 @@ } } } +} - .str-chat__thread-list { +.str-chat__thread { + .str-chat__main-panel-inner { height: auto; } } +.str-chat__thread--virtualized { + .str-chat__main-panel-inner { + height: 100%; + + // the first message in virtualized thread has to be separated from the top by padding, not margin + .str-chat__virtual-list-message-wrapper:first-of-type { + padding-block-start: var(--str-chat__spacing-4); + } + } +} + .str-chat__parent-message-li { padding: var(--str-chat__spacing-2); } diff --git a/src/v2/styles/ThreadList/ThreadList-layout.scss b/src/v2/styles/ThreadList/ThreadList-layout.scss new file mode 100644 index 00000000..61700345 --- /dev/null +++ b/src/v2/styles/ThreadList/ThreadList-layout.scss @@ -0,0 +1,206 @@ +.str-chat { + --str-chat-thread-list-border-color: var(--str-chat__surface-color); + --str-chat-thread-list-container-background-color: var(--str-chat__secondary-background-color); + + --str-chat-unread-threads-banner-background-color: var(--str-chat__text-color); + --str-chat-unread-threads-banner-color: var(--str-chat__opaque-surface-text-color); + + --str-chat-thread-list-item-background-color-default: var(--str-chat__secondary-background-color); + --str-chat-thread-list-item-background-color-selected: var(--str-chat__surface-color); + + --str-chat-thread-list-item-text-color: var(--str-chat__text-color); + --str-chat-thread-list-item-text-low-emphasis-color: var(--str-chat__text-low-emphasis-color); + + --str-chat-thread-list-item-unread-count-background-color: var(--str-chat__danger-color); + --str-chat-thread-list-item-unread-count-color: var(--str-chat__on-unread-badge-color); + + --str-chat-thread-list-empty-placeholder-background-color: var(--str-chat__secondary-background-color); + --str-chat-thread-list-empty-placeholder-color: var(--str-chat__text-low-emphasis-color); +} + +.str-chat__thread-list-container { + width: 40%; + display: flex; + flex-direction: column; + flex-grow: 1; + background-color: var(--str-chat-thread-list-container-background-color); +} + +.str-chat__unread-threads-banner { + font-size: 16px; + font-weight: 400; + + margin: 8px; + border-radius: 16px; + padding: 16px; + background: var(--str-chat-unread-threads-banner-background-color); + color: var(--str-chat-unread-threads-banner-color); + display: flex; + align-items: center; + justify-content: space-between; + + &__button { + all: unset; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + + --str-chat-icon-color: var(--str-chat-unread-threads-banner-color); + --str-chat-icon-width: 16px; + --str-chat-icon-heigh: 22px; + } +} + +.str-chat__thread-list { + --str-chat-icon-color: var(--str-chat-thread-list-item-text-color); + + border-right: 1px solid var(--str-chat-thread-list-border-color); + color: var(--str-chat-thread-list-item-text-color); + + .str-chat__thread-list-item { + all: unset; + box-sizing: border-box; + padding-block: 14px; + padding-inline: 8px; + gap: 6px; + width: 100%; + display: flex; + flex-direction: column; + cursor: pointer; + background-color: var(--str-chat-thread-list-item-background-color-default); + + &[aria-selected='true'] { + background-color: var(--str-chat-thread-list-item-background-color-selected); + + .str-chat__thread-list-item__parent-message-text, + .str-chat__thread-list-item__latest-reply-text-and-timestamp { + color: inherit; + } + } + + .str-chat__thread-list-item__channel { + --str-chat-icon-height: 14px; + --str-chat-icon-width: 14px; + + display: flex; + gap: 5px; + + .str-chat__icon { + margin-top: 2px; + flex-shrink: 0; + } + } + + .str-chat__thread-list-item__thread-status-symbol { + font-size: 14px; + line-height: 1; + } + + .str-chat__thread-list-item__channel-text { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 14px; + font-weight: 400; + line-height: 1; + } + + .str-chat__thread-list-item__parent-message { + display: flex; + gap: 3px; + justify-content: space-between; + align-items: center; + height: 15px; + } + + .str-chat__thread-list-item__parent-message-text { + font-size: 12px; + font-weight: 400; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: var(--str-chat-thread-list-item-text-low-emphasis-color); + } + + .str-chat__thread-list-item__unread-count { + font-size: 12px; + line-height: 1; + font-weight: 700; + padding: 5px 7px; + background: var(--str-chat-thread-list-item-unread-count-background-color); + color: var(--str-chat-thread-list-item-unread-count-color); + border-radius: 9999px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + font-variant-numeric: tabular-nums; + } + + .str-chat__thread-list-item__latest-reply { + display: flex; + align-items: center; + gap: 5px; + --str-chat__avatar-size: 49px; + } + + .str-chat__thread-list-item__latest-reply-details { + display: flex; + flex-direction: column; + flex-grow: 1; + gap: 4px; + width: 0; + } + + .str-chat__thread-list-item__latest-reply-created-by { + font-weight: 500; + font-size: 16px; + } + + .str-chat__thread-list-item__latest-reply-text-and-timestamp { + display: flex; + font-size: 14px; + font-weight: 400; + justify-content: space-between; + color: var(--str-chat-thread-list-item-text-low-emphasis-color); + } + + .str-chat__thread-list-item__latest-reply-text { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .str-chat__thread-list-item__latest-reply-timestamp { + white-space: nowrap; + } + } + + .str-chat__thread-list-loading-indicator { + display: flex; + align-items: center; + justify-content: center; + padding-block: 14px; + padding-inline: 8px; + } +} + +.str-chat__thread-list-empty-placeholder { + --str-chat-icon-height: 95px; + --str-chat-icon-width: 95px; + --str-chat-icon-color: var(--str-chat-thread-list-empty-placeholder-color); + + background-color: var(--str-chat-thread-list-empty-placeholder-background-color); + color: var(--str-chat-thread-list-empty-placeholder-color); + font-size: 20px; + font-weight: 500; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + gap: 16px; +} diff --git a/src/v2/styles/ThreadList/ThreadList-theme.scss b/src/v2/styles/ThreadList/ThreadList-theme.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/v2/styles/index.layout.scss b/src/v2/styles/index.layout.scss index 36b98318..eab3afec 100755 --- a/src/v2/styles/index.layout.scss +++ b/src/v2/styles/index.layout.scss @@ -35,3 +35,5 @@ @use 'Thread/Thread-layout'; @use 'Tooltip/Tooltip-layout'; @use 'TypingIndicator/TypingIndicator-layout'; +@use 'ThreadList/ThreadList-layout'; +@use 'ChatView/ChatView-layout'; From ab532ccf68c2ac6967fa5f665710c440e21eb955 Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Wed, 17 Jul 2024 00:48:18 +0200 Subject: [PATCH 2/5] Adjusted styling, still needs theming/layout separation --- src/v2/styles/Avatar/Avatar-layout.scss | 12 +++- src/v2/styles/Avatar/Avatar-theme.scss | 5 ++ src/v2/styles/ChatView/ChatView-layout.scss | 26 +-------- .../styles/ThreadList/ThreadList-layout.scss | 43 ++++++--------- .../UnreadCountBadge-layout.scss | 55 +++++++++++++++++++ src/v2/styles/index.layout.scss | 1 + 6 files changed, 91 insertions(+), 51 deletions(-) create mode 100644 src/v2/styles/UnreadCountBadge/UnreadCountBadge-layout.scss diff --git a/src/v2/styles/Avatar/Avatar-layout.scss b/src/v2/styles/Avatar/Avatar-layout.scss index 7ed00b54..dd3de81f 100644 --- a/src/v2/styles/Avatar/Avatar-layout.scss +++ b/src/v2/styles/Avatar/Avatar-layout.scss @@ -34,6 +34,9 @@ .str-chat__avatar { position: relative; + display: flex; + align-items: center; + justify-content: center; height: var(--str-chat__avatar-size); line-height: var(--str-chat__avatar-size); width: var(--str-chat__avatar-size); @@ -44,6 +47,11 @@ font-size: calc(var(--str-chat__avatar-size) * 0.5); } + &.str-chat__avatar--no-letters { + --str-chat-icon-width: calc(var(--str-chat__avatar-size) * 0.33); + --str-chat-icon-height: calc(var(--str-chat__avatar-size) * 0.33); + } + &.str-chat__avatar--multiple-letters, &.stream-chat__avatar--multiple-letters { font-size: calc(var(--str-chat__avatar-size) * 0.3); @@ -52,7 +60,7 @@ .str-chat__avatar-image { height: 100%; width: 100%; - object-fit: cover;; + object-fit: cover; } .str-chat__avatar-fallback { @@ -74,4 +82,4 @@ flex-shrink: 0; width: calc(var(--str-chat__spacing-px) * 49); height: calc(var(--str-chat__spacing-px) * 49); -} \ No newline at end of file +} diff --git a/src/v2/styles/Avatar/Avatar-theme.scss b/src/v2/styles/Avatar/Avatar-theme.scss index bd679bd5..8fba350b 100644 --- a/src/v2/styles/Avatar/Avatar-theme.scss +++ b/src/v2/styles/Avatar/Avatar-theme.scss @@ -38,6 +38,11 @@ display: block; } + &.str-chat__avatar--no-letters { + @include utils.component-layer-overrides('avatar'); + --str-chat-icon-color: var(--str-chat__avatar-color); + } + .str-chat__avatar-fallback { @include utils.component-layer-overrides('avatar'); text-transform: uppercase; diff --git a/src/v2/styles/ChatView/ChatView-layout.scss b/src/v2/styles/ChatView/ChatView-layout.scss index e08bdb9c..f44b50e7 100644 --- a/src/v2/styles/ChatView/ChatView-layout.scss +++ b/src/v2/styles/ChatView/ChatView-layout.scss @@ -6,9 +6,6 @@ --str-chat-selector-button-color-selected: var(--str-chat__text-color); --str-chat-selector-button-background-color-default: transparent; --str-chat-selector-button-background-color-selected: var(--str-chat__surface-color); - - --str-chat-unread-count-badge-color: var(--str-chat__on-unread-badge-color); - --str-chat-unread-count-badge-background-color: var(--str-chat__danger-color); } .str-chat__chat-view { @@ -26,7 +23,7 @@ background-color: var(--str-chat-selector-background-color); &-button { - all: unset; + border: none; display: flex; flex-direction: column; align-items: center; @@ -47,31 +44,14 @@ --str-chat-icon-height: 20px; --str-chat-icon-width: 20px; + --str-chat-unread-count-badge-absolute-offset-vertical: 25%; + &[aria-selected='true'] { --str-chat-icon-color: var(--str-chat-selector-button-color-selected); color: var(--str-chat-selector-button-color-selected); background: var(--str-chat-selector-button-background-color-selected); } } - - .str-chat__unread-count-badge { - font-size: 12px; - line-height: 1; - font-weight: 700; - padding: 5px 7px; - background: var(--str-chat-unread-count-badge-background-color); - color: var(--str-chat-unread-count-badge-color); - border-radius: 9999px; - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - font-variant-numeric: tabular-nums; - - position: absolute; - right: 10px; - top: 6px; - } } &__channels { diff --git a/src/v2/styles/ThreadList/ThreadList-layout.scss b/src/v2/styles/ThreadList/ThreadList-layout.scss index 61700345..bc1abe9f 100644 --- a/src/v2/styles/ThreadList/ThreadList-layout.scss +++ b/src/v2/styles/ThreadList/ThreadList-layout.scss @@ -2,8 +2,8 @@ --str-chat-thread-list-border-color: var(--str-chat__surface-color); --str-chat-thread-list-container-background-color: var(--str-chat__secondary-background-color); - --str-chat-unread-threads-banner-background-color: var(--str-chat__text-color); - --str-chat-unread-threads-banner-color: var(--str-chat__opaque-surface-text-color); + --str-chat-unseen-threads-banner-background-color: var(--str-chat__text-color); + --str-chat-unseen-threads-banner-color: var(--str-chat__opaque-surface-text-color); --str-chat-thread-list-item-background-color-default: var(--str-chat__secondary-background-color); --str-chat-thread-list-item-background-color-selected: var(--str-chat__surface-color); @@ -11,10 +11,9 @@ --str-chat-thread-list-item-text-color: var(--str-chat__text-color); --str-chat-thread-list-item-text-low-emphasis-color: var(--str-chat__text-low-emphasis-color); - --str-chat-thread-list-item-unread-count-background-color: var(--str-chat__danger-color); - --str-chat-thread-list-item-unread-count-color: var(--str-chat__on-unread-badge-color); - - --str-chat-thread-list-empty-placeholder-background-color: var(--str-chat__secondary-background-color); + --str-chat-thread-list-empty-placeholder-background-color: var( + --str-chat__secondary-background-color + ); --str-chat-thread-list-empty-placeholder-color: var(--str-chat__text-low-emphasis-color); } @@ -26,15 +25,15 @@ background-color: var(--str-chat-thread-list-container-background-color); } -.str-chat__unread-threads-banner { +.str-chat__unseen-threads-banner { font-size: 16px; font-weight: 400; margin: 8px; border-radius: 16px; padding: 16px; - background: var(--str-chat-unread-threads-banner-background-color); - color: var(--str-chat-unread-threads-banner-color); + background: var(--str-chat-unseen-threads-banner-background-color); + color: var(--str-chat-unseen-threads-banner-color); display: flex; align-items: center; justify-content: space-between; @@ -48,7 +47,7 @@ width: 24px; height: 24px; - --str-chat-icon-color: var(--str-chat-unread-threads-banner-color); + --str-chat-icon-color: var(--str-chat-unseen-threads-banner-color); --str-chat-icon-width: 16px; --str-chat-icon-heigh: 22px; } @@ -61,7 +60,8 @@ color: var(--str-chat-thread-list-item-text-color); .str-chat__thread-list-item { - all: unset; + border: none; + align-items: stretch; box-sizing: border-box; padding-block: 14px; padding-inline: 8px; @@ -125,26 +125,14 @@ color: var(--str-chat-thread-list-item-text-low-emphasis-color); } - .str-chat__thread-list-item__unread-count { - font-size: 12px; - line-height: 1; - font-weight: 700; - padding: 5px 7px; - background: var(--str-chat-thread-list-item-unread-count-background-color); - color: var(--str-chat-thread-list-item-unread-count-color); - border-radius: 9999px; - flex-shrink: 0; - display: flex; - align-items: center; - justify-content: center; - font-variant-numeric: tabular-nums; - } - .str-chat__thread-list-item__latest-reply { display: flex; align-items: center; gap: 5px; + --str-chat__avatar-size: 49px; + --str-chat__avatar-background-color: var(--str-chat__secondary-surface-color); + --str-chat__avatar-color: var(--str-chat__text-low-emphasis-color); } .str-chat__thread-list-item__latest-reply-details { @@ -156,6 +144,7 @@ } .str-chat__thread-list-item__latest-reply-created-by { + display: flex; font-weight: 500; font-size: 16px; } @@ -165,6 +154,8 @@ font-size: 14px; font-weight: 400; justify-content: space-between; + align-items: baseline; + line-height: 16px; color: var(--str-chat-thread-list-item-text-low-emphasis-color); } diff --git a/src/v2/styles/UnreadCountBadge/UnreadCountBadge-layout.scss b/src/v2/styles/UnreadCountBadge/UnreadCountBadge-layout.scss new file mode 100644 index 00000000..37393c99 --- /dev/null +++ b/src/v2/styles/UnreadCountBadge/UnreadCountBadge-layout.scss @@ -0,0 +1,55 @@ +.str-chat { + --str-chat-unread-count-badge-color: var(--str-chat__on-unread-badge-color); + --str-chat-unread-count-badge-background-color: var(--str-chat__danger-color); + + --str-chat-unread-count-badge-absolute-offset-vertical: 50%; + --str-chat-unread-count-badge-absolute-offset-horizontal: 50%; +} + +.str-chat__unread-count-badge-container { + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.str-chat__unread-count-badge { + font-size: 12px; + min-width: 22px; + min-height: 22px; + line-height: 8px; + font-weight: 700; + background-color: var(--str-chat-unread-count-badge-background-color); + color: var(--str-chat-unread-count-badge-color); + border-radius: 9999px; + padding: 7px; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + font-variant-numeric: tabular-nums; + + &--top-right { + position: absolute; + translate: var(--str-chat-unread-count-badge-absolute-offset-horizontal) + calc(var(--str-chat-unread-count-badge-absolute-offset-vertical) * -1); + } + + &--bottom-left { + position: absolute; + translate: calc(var(--str-chat-unread-count-badge-absolute-offset-horizontal) * -1) + var(--str-chat-unread-count-badge-absolute-offset-vertical); + } + + &--bottom-right { + position: absolute; + translate: var(--str-chat-unread-count-badge-absolute-offset-horizontal) + var(--str-chat-unread-count-badge-absolute-offset-vertical); + } + + &--top-left { + position: absolute; + translate: calc(var(--str-chat-unread-count-badge-absolute-offset-horizontal) * -1) + calc(var(--str-chat-unread-count-badge-absolute-offset-vertical) * -1); + } +} diff --git a/src/v2/styles/index.layout.scss b/src/v2/styles/index.layout.scss index eab3afec..c8a4a4f6 100755 --- a/src/v2/styles/index.layout.scss +++ b/src/v2/styles/index.layout.scss @@ -37,3 +37,4 @@ @use 'TypingIndicator/TypingIndicator-layout'; @use 'ThreadList/ThreadList-layout'; @use 'ChatView/ChatView-layout'; +@use 'UnreadCountBadge/UnreadCountBadge-layout'; From 962201d69d1d359011eed6a7bd7166471636dfb5 Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Wed, 24 Jul 2024 11:28:25 +0200 Subject: [PATCH 3/5] Remove container width limitation --- src/v2/styles/ThreadList/ThreadList-layout.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/v2/styles/ThreadList/ThreadList-layout.scss b/src/v2/styles/ThreadList/ThreadList-layout.scss index bc1abe9f..78fe2118 100644 --- a/src/v2/styles/ThreadList/ThreadList-layout.scss +++ b/src/v2/styles/ThreadList/ThreadList-layout.scss @@ -18,7 +18,6 @@ } .str-chat__thread-list-container { - width: 40%; display: flex; flex-direction: column; flex-grow: 1; From e0fe71e623889c41f19ccfdbf1e6e40b9277e406 Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Wed, 28 Aug 2024 17:13:14 +0200 Subject: [PATCH 4/5] Separate layout from theme --- src/v2/styles/ChatView/ChatView-layout.scss | 22 ------ src/v2/styles/ChatView/ChatView-theme.scss | 30 ++++++++ .../styles/ThreadList/ThreadList-layout.scss | 47 ------------ .../styles/ThreadList/ThreadList-theme.scss | 73 +++++++++++++++++++ .../UnreadCountBadge-layout.scss | 6 -- .../UnreadCountBadge-theme.scss | 10 +++ src/v2/styles/index.scss | 3 + 7 files changed, 116 insertions(+), 75 deletions(-) create mode 100644 src/v2/styles/UnreadCountBadge/UnreadCountBadge-theme.scss diff --git a/src/v2/styles/ChatView/ChatView-layout.scss b/src/v2/styles/ChatView/ChatView-layout.scss index f44b50e7..f243a910 100644 --- a/src/v2/styles/ChatView/ChatView-layout.scss +++ b/src/v2/styles/ChatView/ChatView-layout.scss @@ -1,13 +1,3 @@ -.str-chat { - --str-chat-selector-background-color: var(--str-chat__secondary-background-color); - --str-chat-selector-border-color: var(--str-chat__surface-color); - - --str-chat-selector-button-color-default: var(--str-chat__text-low-emphasis-color); - --str-chat-selector-button-color-selected: var(--str-chat__text-color); - --str-chat-selector-button-background-color-default: transparent; - --str-chat-selector-button-background-color-selected: var(--str-chat__surface-color); -} - .str-chat__chat-view { display: flex; width: 100%; @@ -19,16 +9,11 @@ padding-inline: 8px; padding-block: 16px; gap: 20px; - border-right: 1px solid var(--str-chat-selector-border-color); - background-color: var(--str-chat-selector-background-color); &-button { - border: none; display: flex; flex-direction: column; align-items: center; - background: var(--str-chat-selector-button-background-color-default); - color: var(--str-chat-selector-button-color-default); padding-inline: 10px; padding-block: 10px; border-radius: 8px; @@ -40,17 +25,10 @@ cursor: pointer; position: relative; - --str-chat-icon-color: var(--str-chat-selector-button-color-default); --str-chat-icon-height: 20px; --str-chat-icon-width: 20px; --str-chat-unread-count-badge-absolute-offset-vertical: 25%; - - &[aria-selected='true'] { - --str-chat-icon-color: var(--str-chat-selector-button-color-selected); - color: var(--str-chat-selector-button-color-selected); - background: var(--str-chat-selector-button-background-color-selected); - } } } diff --git a/src/v2/styles/ChatView/ChatView-theme.scss b/src/v2/styles/ChatView/ChatView-theme.scss index e69de29b..0997d68d 100644 --- a/src/v2/styles/ChatView/ChatView-theme.scss +++ b/src/v2/styles/ChatView/ChatView-theme.scss @@ -0,0 +1,30 @@ +.str-chat { + --str-chat-selector-background-color: var(--str-chat__secondary-background-color); + --str-chat-selector-border-color: var(--str-chat__surface-color); + + --str-chat-selector-button-color-default: var(--str-chat__text-low-emphasis-color); + --str-chat-selector-button-color-selected: var(--str-chat__text-color); + --str-chat-selector-button-background-color-default: transparent; + --str-chat-selector-button-background-color-selected: var(--str-chat__surface-color); +} + +.str-chat__chat-view { + &__selector { + border-right: 1px solid var(--str-chat-selector-border-color); + background-color: var(--str-chat-selector-background-color); + + &-button { + border: none; + background: var(--str-chat-selector-button-background-color-default); + color: var(--str-chat-selector-button-color-default); + + --str-chat-icon-color: var(--str-chat-selector-button-color-default); + + &[aria-selected='true'] { + --str-chat-icon-color: var(--str-chat-selector-button-color-selected); + color: var(--str-chat-selector-button-color-selected); + background: var(--str-chat-selector-button-background-color-selected); + } + } + } +} diff --git a/src/v2/styles/ThreadList/ThreadList-layout.scss b/src/v2/styles/ThreadList/ThreadList-layout.scss index 78fe2118..07dd40e0 100644 --- a/src/v2/styles/ThreadList/ThreadList-layout.scss +++ b/src/v2/styles/ThreadList/ThreadList-layout.scss @@ -1,27 +1,7 @@ -.str-chat { - --str-chat-thread-list-border-color: var(--str-chat__surface-color); - --str-chat-thread-list-container-background-color: var(--str-chat__secondary-background-color); - - --str-chat-unseen-threads-banner-background-color: var(--str-chat__text-color); - --str-chat-unseen-threads-banner-color: var(--str-chat__opaque-surface-text-color); - - --str-chat-thread-list-item-background-color-default: var(--str-chat__secondary-background-color); - --str-chat-thread-list-item-background-color-selected: var(--str-chat__surface-color); - - --str-chat-thread-list-item-text-color: var(--str-chat__text-color); - --str-chat-thread-list-item-text-low-emphasis-color: var(--str-chat__text-low-emphasis-color); - - --str-chat-thread-list-empty-placeholder-background-color: var( - --str-chat__secondary-background-color - ); - --str-chat-thread-list-empty-placeholder-color: var(--str-chat__text-low-emphasis-color); -} - .str-chat__thread-list-container { display: flex; flex-direction: column; flex-grow: 1; - background-color: var(--str-chat-thread-list-container-background-color); } .str-chat__unseen-threads-banner { @@ -29,10 +9,7 @@ font-weight: 400; margin: 8px; - border-radius: 16px; padding: 16px; - background: var(--str-chat-unseen-threads-banner-background-color); - color: var(--str-chat-unseen-threads-banner-color); display: flex; align-items: center; justify-content: space-between; @@ -46,20 +23,13 @@ width: 24px; height: 24px; - --str-chat-icon-color: var(--str-chat-unseen-threads-banner-color); --str-chat-icon-width: 16px; --str-chat-icon-heigh: 22px; } } .str-chat__thread-list { - --str-chat-icon-color: var(--str-chat-thread-list-item-text-color); - - border-right: 1px solid var(--str-chat-thread-list-border-color); - color: var(--str-chat-thread-list-item-text-color); - .str-chat__thread-list-item { - border: none; align-items: stretch; box-sizing: border-box; padding-block: 14px; @@ -69,16 +39,6 @@ display: flex; flex-direction: column; cursor: pointer; - background-color: var(--str-chat-thread-list-item-background-color-default); - - &[aria-selected='true'] { - background-color: var(--str-chat-thread-list-item-background-color-selected); - - .str-chat__thread-list-item__parent-message-text, - .str-chat__thread-list-item__latest-reply-text-and-timestamp { - color: inherit; - } - } .str-chat__thread-list-item__channel { --str-chat-icon-height: 14px; @@ -121,7 +81,6 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - color: var(--str-chat-thread-list-item-text-low-emphasis-color); } .str-chat__thread-list-item__latest-reply { @@ -130,8 +89,6 @@ gap: 5px; --str-chat__avatar-size: 49px; - --str-chat__avatar-background-color: var(--str-chat__secondary-surface-color); - --str-chat__avatar-color: var(--str-chat__text-low-emphasis-color); } .str-chat__thread-list-item__latest-reply-details { @@ -155,7 +112,6 @@ justify-content: space-between; align-items: baseline; line-height: 16px; - color: var(--str-chat-thread-list-item-text-low-emphasis-color); } .str-chat__thread-list-item__latest-reply-text { @@ -181,10 +137,7 @@ .str-chat__thread-list-empty-placeholder { --str-chat-icon-height: 95px; --str-chat-icon-width: 95px; - --str-chat-icon-color: var(--str-chat-thread-list-empty-placeholder-color); - background-color: var(--str-chat-thread-list-empty-placeholder-background-color); - color: var(--str-chat-thread-list-empty-placeholder-color); font-size: 20px; font-weight: 500; display: flex; diff --git a/src/v2/styles/ThreadList/ThreadList-theme.scss b/src/v2/styles/ThreadList/ThreadList-theme.scss index e69de29b..51dcaf81 100644 --- a/src/v2/styles/ThreadList/ThreadList-theme.scss +++ b/src/v2/styles/ThreadList/ThreadList-theme.scss @@ -0,0 +1,73 @@ +.str-chat { + --str-chat-thread-list-border-color: var(--str-chat__surface-color); + --str-chat-thread-list-container-background-color: var(--str-chat__secondary-background-color); + + --str-chat-unseen-threads-banner-background-color: var(--str-chat__text-color); + --str-chat-unseen-threads-banner-color: var(--str-chat__opaque-surface-text-color); + + --str-chat-thread-list-item-background-color-default: var(--str-chat__secondary-background-color); + --str-chat-thread-list-item-background-color-selected: var(--str-chat__surface-color); + + --str-chat-thread-list-item-text-color: var(--str-chat__text-color); + --str-chat-thread-list-item-text-low-emphasis-color: var(--str-chat__text-low-emphasis-color); + + --str-chat-thread-list-empty-placeholder-background-color: var( + --str-chat__secondary-background-color + ); + --str-chat-thread-list-empty-placeholder-color: var(--str-chat__text-low-emphasis-color); +} + +.str-chat__thread-list-container { + background-color: var(--str-chat-thread-list-container-background-color); +} + +.str-chat__unseen-threads-banner { + border-radius: 16px; + background: var(--str-chat-unseen-threads-banner-background-color); + color: var(--str-chat-unseen-threads-banner-color); + + &__button { + --str-chat-icon-color: var(--str-chat-unseen-threads-banner-color); + } +} + +.str-chat__thread-list { + --str-chat-icon-color: var(--str-chat-thread-list-item-text-color); + + border-right: 1px solid var(--str-chat-thread-list-border-color); + color: var(--str-chat-thread-list-item-text-color); + + .str-chat__thread-list-item { + border: none; + background-color: var(--str-chat-thread-list-item-background-color-default); + + &[aria-selected='true'] { + background-color: var(--str-chat-thread-list-item-background-color-selected); + + .str-chat__thread-list-item__parent-message-text, + .str-chat__thread-list-item__latest-reply-text-and-timestamp { + color: inherit; + } + } + + .str-chat__thread-list-item__parent-message-text { + color: var(--str-chat-thread-list-item-text-low-emphasis-color); + } + + .str-chat__thread-list-item__latest-reply { + --str-chat__avatar-background-color: var(--str-chat__secondary-surface-color); + --str-chat__avatar-color: var(--str-chat__text-low-emphasis-color); + } + + .str-chat__thread-list-item__latest-reply-text-and-timestamp { + color: var(--str-chat-thread-list-item-text-low-emphasis-color); + } + } +} + +.str-chat__thread-list-empty-placeholder { + --str-chat-icon-color: var(--str-chat-thread-list-empty-placeholder-color); + + background-color: var(--str-chat-thread-list-empty-placeholder-background-color); + color: var(--str-chat-thread-list-empty-placeholder-color); +} diff --git a/src/v2/styles/UnreadCountBadge/UnreadCountBadge-layout.scss b/src/v2/styles/UnreadCountBadge/UnreadCountBadge-layout.scss index 37393c99..c5352770 100644 --- a/src/v2/styles/UnreadCountBadge/UnreadCountBadge-layout.scss +++ b/src/v2/styles/UnreadCountBadge/UnreadCountBadge-layout.scss @@ -1,7 +1,4 @@ .str-chat { - --str-chat-unread-count-badge-color: var(--str-chat__on-unread-badge-color); - --str-chat-unread-count-badge-background-color: var(--str-chat__danger-color); - --str-chat-unread-count-badge-absolute-offset-vertical: 50%; --str-chat-unread-count-badge-absolute-offset-horizontal: 50%; } @@ -19,9 +16,6 @@ min-height: 22px; line-height: 8px; font-weight: 700; - background-color: var(--str-chat-unread-count-badge-background-color); - color: var(--str-chat-unread-count-badge-color); - border-radius: 9999px; padding: 7px; flex-shrink: 0; display: flex; diff --git a/src/v2/styles/UnreadCountBadge/UnreadCountBadge-theme.scss b/src/v2/styles/UnreadCountBadge/UnreadCountBadge-theme.scss new file mode 100644 index 00000000..a5070507 --- /dev/null +++ b/src/v2/styles/UnreadCountBadge/UnreadCountBadge-theme.scss @@ -0,0 +1,10 @@ +.str-chat { + --str-chat-unread-count-badge-color: var(--str-chat__on-unread-badge-color); + --str-chat-unread-count-badge-background-color: var(--str-chat__danger-color); +} + +.str-chat__unread-count-badge { + background-color: var(--str-chat-unread-count-badge-background-color); + color: var(--str-chat-unread-count-badge-color); + border-radius: 9999px; +} diff --git a/src/v2/styles/index.scss b/src/v2/styles/index.scss index a05ec7aa..dff6879d 100644 --- a/src/v2/styles/index.scss +++ b/src/v2/styles/index.scss @@ -37,3 +37,6 @@ @use 'Thread/Thread-theme'; @use 'Tooltip/Tooltip-theme'; @use 'TypingIndicator/TypingIndicator-theme'; +@use 'ThreadList/ThreadList-theme'; +@use 'ChatView/ChatView-theme'; +@use 'UnreadCountBadge/UnreadCountBadge-theme'; From 0de7db7febba86caad1d747819954a8ed6a8a4f4 Mon Sep 17 00:00:00 2001 From: Anton Arnautov Date: Thu, 29 Aug 2024 19:30:28 +0200 Subject: [PATCH 5/5] Fix lint issues --- src/v2/styles/Avatar/Avatar-theme.scss | 2 +- src/v2/styles/ChatView/ChatView-layout.scss | 9 ++++----- src/v2/styles/ChatView/ChatView-theme.scss | 3 ++- src/v2/styles/ThreadList/ThreadList-layout.scss | 10 +++++----- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/v2/styles/Avatar/Avatar-theme.scss b/src/v2/styles/Avatar/Avatar-theme.scss index 8fba350b..7e9be579 100644 --- a/src/v2/styles/Avatar/Avatar-theme.scss +++ b/src/v2/styles/Avatar/Avatar-theme.scss @@ -39,8 +39,8 @@ } &.str-chat__avatar--no-letters { - @include utils.component-layer-overrides('avatar'); --str-chat-icon-color: var(--str-chat__avatar-color); + @include utils.component-layer-overrides('avatar'); } .str-chat__avatar-fallback { diff --git a/src/v2/styles/ChatView/ChatView-layout.scss b/src/v2/styles/ChatView/ChatView-layout.scss index f243a910..be54345f 100644 --- a/src/v2/styles/ChatView/ChatView-layout.scss +++ b/src/v2/styles/ChatView/ChatView-layout.scss @@ -11,6 +11,10 @@ gap: 20px; &-button { + --str-chat-icon-height: 20px; + --str-chat-icon-width: 20px; + --str-chat-unread-count-badge-absolute-offset-vertical: 25%; + display: flex; flex-direction: column; align-items: center; @@ -24,11 +28,6 @@ box-sizing: border-box; cursor: pointer; position: relative; - - --str-chat-icon-height: 20px; - --str-chat-icon-width: 20px; - - --str-chat-unread-count-badge-absolute-offset-vertical: 25%; } } diff --git a/src/v2/styles/ChatView/ChatView-theme.scss b/src/v2/styles/ChatView/ChatView-theme.scss index 0997d68d..99925c20 100644 --- a/src/v2/styles/ChatView/ChatView-theme.scss +++ b/src/v2/styles/ChatView/ChatView-theme.scss @@ -14,11 +14,12 @@ background-color: var(--str-chat-selector-background-color); &-button { + --str-chat-icon-color: var(--str-chat-selector-button-color-default); + border: none; background: var(--str-chat-selector-button-background-color-default); color: var(--str-chat-selector-button-color-default); - --str-chat-icon-color: var(--str-chat-selector-button-color-default); &[aria-selected='true'] { --str-chat-icon-color: var(--str-chat-selector-button-color-selected); diff --git a/src/v2/styles/ThreadList/ThreadList-layout.scss b/src/v2/styles/ThreadList/ThreadList-layout.scss index 07dd40e0..ee75101c 100644 --- a/src/v2/styles/ThreadList/ThreadList-layout.scss +++ b/src/v2/styles/ThreadList/ThreadList-layout.scss @@ -15,6 +15,9 @@ justify-content: space-between; &__button { + --str-chat-icon-width: 16px; + --str-chat-icon-heigh: 22px; + all: unset; cursor: pointer; display: flex; @@ -22,9 +25,6 @@ justify-content: center; width: 24px; height: 24px; - - --str-chat-icon-width: 16px; - --str-chat-icon-heigh: 22px; } } @@ -84,11 +84,11 @@ } .str-chat__thread-list-item__latest-reply { + --str-chat__avatar-size: 49px; + display: flex; align-items: center; gap: 5px; - - --str-chat__avatar-size: 49px; } .str-chat__thread-list-item__latest-reply-details {