feat(angular): add message status and time to channel preview (#285)

### 🎯 Goal A customer was asking for this on Angular. The PR only affects Angular. ### 🛠 Implementation details Figma: https://www.figma.com/file/ekifwChR9tR7zRJg1QEzSM/Chat-UI-Kit-1.0-All-platforms?type=design&node-id=26955-59584&mode=design&t=8HmnWEBt1LkPvuOX-0 ### 🎨 UI Changes <img width="332" alt="channel-preview" src="https://github.com/GetStream/stream-chat-css/assets/6690098/ac568d4a-115f-4160-a24c-d7390f6cbda5"> Make sure to test with both Angular and React (with both `MessageList` and `VirtualizedMessageList` components) SDKs
GetStream · Apr 9, 2024 · fd5dd16 · fd5dd16
1 parent d7baea8
commit fd5dd16
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 0 deletions.
diff --git a/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss b/src/v2/styles/ChannelPreview/ChannelPreview-layout.scss
@@ -49,6 +49,24 @@
       }
     }
 
+    .str-chat__channel-preview-end-second-row {
+      @include utils.ellipsis-text-parent;
+      display: flex;
+      column-gap: var(--str-chat__spacing-1);
+      align-items: center;
+
+      .str-chat__channel-preview-messenger--last-message {
+        flex: 1;
+      }
+
+      .str-chat__channel-preview-messenger--status {
+        svg {
+          width: calc(var(--str-chat__spacing-px) * 15);
+          height: calc(var(--str-chat__spacing-px) * 15);
+        }
+      }
+    }
+
     .str-chat__channel-preview-messenger--name,
     .str-chat__channel-preview-messenger--last-message {
       @include utils.ellipsis-text;

diff --git a/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss b/src/v2/styles/ChannelPreview/ChannelPreview-theme.scss
@@ -56,6 +56,12 @@
 
   /* Right (left in RTL layout) border of the unread badge */
   --str-chat__channel-preview-unread-badge-border-inline-end: none;
+
+  /* The color of the message status indicator icon (only available in Angular) */
+  --str-chat__channel-preview-message-status-color: var(--str-chat__primary-color);
+
+  /* The color of the text that displays the message time (only available in Angular) */
+  --str-chat__channel-preview-message-time-color: var(--str-chat__message-secondary-color);
 }
 
 .str-chat__channel-preview {
@@ -90,6 +96,21 @@
       }
     }
   }
+
+  .str-chat__channel-preview-messenger--status {
+    color: var(--str-chat__channel-preview-message-status-color);
+
+    svg {
+      path {
+        fill: var(--str-chat__channel-preview-message-status-color);
+      }
+    }
+  }
+
+  .str-chat__channel-preview-messenger--time {
+    color: var(--str-chat__channel-preview-message-time-color);
+    font: var(--str-chat__caption-text);
+  }
 }
 
 .str-chat__channel-preview-loading {