stream-chat-angular 4.0.0-theming-v2.11 → 4.0.0

package/src/assets/styles/v2/scss/AttachmentList/AttachmentList-layout.scss

@@ -1,19 +1,40 @@
 @use '../utils';
 
 .str-chat {
-  // The margin applied to every attachment in the attachment list
+  /* The margin applied to every attachment in the attachment list */
   --str-chat__attachment-margin: var(--str-chat__spacing-0_5);
+
+  /* The maximum allowed width of attachments */
+  --str-chat__attachment-max-width: unset;
+
+  /* The height of scraped images, the default value is optimized for 1.91:1 aspect ratio */
+  --str-chat__scraped-image-height: unset;
+
+  /* The height of scraped videos, the default value is optimized for 16:9 aspect ratio */
+  --str-chat__scraped-video-height: unset;
+
+  /* The height of GIFs */
+  --str-chat__gif-height: calc(var(--str-chat__spacing-px) * 200);
+
+  /* The height of videos */
+  --str-chat__video-height: calc(var(--str-chat__spacing-px) * 300);
 }
 
 .str-chat__attachment-list {
+  --str-chat__attachment-max-width: calc(
+    var(--str-chat__message-max-width) - calc(2 * var(--str-chat__attachment-margin))
+  );
+
+  --str-chat__scraped-image-height: calc(var(--str-chat__attachment-max-width) * calc(1 / 1.91));
+
+  --str-chat__scraped-video-height: calc(var(--str-chat__attachment-max-width) * calc(9 / 16));
+
   display: flex;
   flex-direction: column;
   align-items: stretch;
   min-width: 0;
 
   .str-chat__message-attachment--card {
-    max-width: calc(var(--str-chat__message-max-width) - var(--str-chat__attachment-margin));
-
     .str-chat__message-attachment-card--header {
       position: relative;
     }
@@ -28,33 +49,97 @@
   }
 
   .str-chat__message-attachment--image,
-  .str-chat__message-attachment-card--header,
-  .str-chat__message-attachment--video {
+  .str-chat__message-attachment--video,
+  .str-chat__message-attachment-card--header {
+    width: auto;
     display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  // Scraped images
+  .str-chat__message-attachment-card--header {
+    height: var(--str-chat__scraped-image-height);
 
-    img,
-    video {
-      max-width: calc(var(--str-chat__message-max-width) - 2 * var(--str-chat__attachment-margin));
-      max-height: var(--str-chat__message-max-width);
+    img {
       object-fit: cover;
+      max-height: 100%;
+      max-width: 100%;
       width: 100%;
       height: 100%;
+      cursor: default;
     }
   }
 
-  .str-chat__message-attachment--image {
-    margin: var(--str-chat__attachment-margin);
+  // image enlargement available in React SDK only
+  .str-chat__message-attachment-card-react--header {
+    img {
+      cursor: zoom-in;
+    }
+  }
+
+  .str-chat__message-attachment-card--giphy {
+    .str-chat__message-attachment-card--header {
+      height: var(--str-chat__gif-height);
+
+      img {
+        object-fit: contain;
+        max-height: 100%;
+        max-width: 100%;
+        cursor: default;
+      }
+    }
 
+    // image enlargement available in React SDK only
+    .str-chat__message-attachment-card-react--header {
+      img {
+        cursor: zoom-in;
+      }
+    }
+  }
+
+  // Images uploaded from files
+  .str-chat__message-attachment--image:not(.str-chat__message-attachment--card) {
     img {
+      max-width: var(--str-chat__attachment-max-width);
+      max-height: var(--str-chat__attachment-max-width);
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
       cursor: zoom-in;
     }
   }
 
-  .str-chat__message-attachment--video {
-    margin: var(--str-chat__attachment-margin);
+  // Video files: uploaded from files and scraped
+  .str-chat__message-attachment--video:not(.str-chat__message-attachment--card),
+  .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header {
+    max-width: var(--str-chat__attachment-max-width);
+    display: flex;
+
+    .str-chat__player-wrapper {
+      height: 100%;
+      width: 100%;
+      min-width: 0;
+
+      .react-player,
+      .str-chat__video-angular {
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+
+  .str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
+    height: var(--str-chat__video-height);
   }
 
-  .str-chat__message-attachment--giphy {
+  .str-chat__message-attachment-card--video .str-chat__message-attachment-card--header {
+    height: var(--str-chat__scraped-video-height);
+  }
+
+  .str-chat__message-attachment--video:not(.str-chat__message-attachment--card),
+  .str-chat__message-attachment--image:not(.str-chat__message-attachment--card) {
     margin: var(--str-chat__attachment-margin);
   }
 
@@ -63,13 +148,12 @@
     grid-template-columns: 50% 50%;
     overflow: hidden;
     gap: var(--str-chat__spacing-0_5);
-    max-width: var(--str-chat__message-max-width);
-    max-height: var(--str-chat__message-max-width);
+    max-width: var(--str-chat__attachment-max-width);
+    height: var(--str-chat__attachment-max-width);
     margin: var(--str-chat__attachment-margin);
 
     &.str-chat__gallery-two-rows {
       grid-template-rows: 50% 50%;
-      aspect-ratio: 1;
     }
 
     .str-chat__gallery-image {
@@ -112,6 +196,18 @@
     }
   }
 
+  .str-chat__gallery .str-chat__message-attachment--svg-image,
+  .str-chat__message-attachment--image.str-chat__message-attachment--svg-image {
+    $padding: var(--str-chat__spacing-6);
+    padding: $padding;
+
+    img {
+      object-fit: contain;
+      max-width: calc(var(--str-chat__attachment-max-width) - #{$padding});
+      max-height: calc(var(--str-chat__attachment-max-width) - #{$padding});
+    }
+  }
+
   .str-chat__message-attachment-file--item,
   .str-chat__message-attachment-audio-widget {
     @include utils.flex-row-center;
@@ -165,13 +261,14 @@
     }
 
     .str-chat__message-attachment-audio-widget--progress-track {
-      width: 120px;
+      max-width: calc(var(--str-chat__spacing-px) * 120);
     }
 
     .str-chat__message-attachment-audio-widget--text-second-row {
       display: flex;
       align-items: center;
-      grid-column-gap: 20px;
+      width: 100%;
+      grid-column-gap: var(--str-chat__spacing-5);
       padding-top: var(--str-chat__spacing-2_5);
 
       .str-chat__message-attachment-file--item-size {
@@ -182,13 +279,14 @@
 
   .str-chat__message-attachment-audio-widget--progress-track {
     position: relative;
-    height: 2px;
+    height: calc(var(--str-chat__spacing-px) * 5);
     flex: 1;
+    cursor: pointer;
 
     .str-chat__message-attachment-audio-widget--progress-indicator {
       position: absolute;
       inset-inline-start: 0;
-      height: 2px;
+      height: inherit;
     }
   }
 
@@ -206,6 +304,7 @@
 
   .str-chat__message-attachment-card {
     min-width: 0;
+    max-width: var(--str-chat__attachment-max-width);
     margin: var(--str-chat__attachment-margin);
 
     .str-chat__message-attachment-card--content {
@@ -231,7 +330,7 @@
         .str-chat__message-attachment-card-audio-widget--first-row {
           display: flex;
           align-items: center;
-          column-gap: calc(var(--str-chat__spacing-px) * 14);
+          column-gap: var(--str-chat__spacing-3_5);
         }
       }
     }
@@ -264,6 +363,10 @@
   /* stylelint-disable-next-line length-zero-no-unit */
   --str-chat__attachment-margin: 0px;
 
+  * {
+    cursor: pointer !important;
+  }
+
   .str-chat__message-attachment-card {
     .str-chat__message-attachment-card--source-link,
     .str-chat__message-attachment-card--content {
@@ -271,11 +374,15 @@
     }
   }
 
-  .str-chat__message-attachment-file--item {
-    padding: 0;
+  .str-chat__message-attachment-file--item-download {
+    display: none;
+  }
+}
 
-    .str-chat__message-attachment-file--item-download {
-      display: none;
+.str-chat__message {
+  .str-chat__quoted-message-preview {
+    .str-chat__message-attachment-file--item {
+      padding: 0;
     }
   }
 }

package/src/assets/styles/v2/scss/AttachmentList/AttachmentList-theme.scss

@@ -25,30 +25,30 @@
   /* Box shadow applied to the component */
   --str-chat__attachment-list-box-shadow: none;
 
-  /* The border radius used for the borders of image attachments */
+  /* The border radius used for the borders of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
   --str-chat__image-attachment-border-radius: calc(
     var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin)
   );
 
-  /* The text/icon color of image attachments */
+  /* The text/icon color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
   --str-chat__image-attachment-color: var(--str-chat__text-color);
 
-  /* The background color of image attachments */
-  --str-chat__image-attachment-background-color: transparent;
+  /* The background color of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
+  --str-chat__image-attachment-background-color: var(--str-chat__text-low-emphasis-color);
 
-  /* Top border of image attachments */
+  /* Top border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
   --str-chat__image-attachment-border-block-start: none;
 
-  /* Bottom border of image attachments */
+  /* Bottom border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
   --str-chat__image-attachment-border-block-end: none;
 
-  /* Left (right in RTL layout) border of image attachments */
+  /* Left (right in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
   --str-chat__image-attachment-border-inline-start: none;
 
-  /* Right (left in RTL layout) border of image attachments */
+  /* Right (left in RTL layout) border of image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
   --str-chat__image-attachment-border-inline-end: none;
 
-  /* Box shadow applied to image gallery attachments */
+  /* Box shadow applied to image/video attachments (images/videos uploaded from files, scraped media, GIFs) */
   --str-chat__image-attachment-box-shadow: none;
 
   /* The border radius used for the borders of image gallery attachments */
@@ -257,17 +257,9 @@
   @include utils.component-layer-overrides('attachment-list');
 
   .str-chat__message-attachment--image,
-  .str-chat__message-attachment-card--header {
-    img,
-    iframe {
-      @include utils.component-layer-overrides('image-attachment');
-    }
-  }
-
+  .str-chat__message-attachment-card--header,
   .str-chat__message-attachment--video {
-    video {
-      @include utils.component-layer-overrides('image-attachment');
-    }
+    @include utils.component-layer-overrides('image-attachment');
   }
 
   .str-chat__gallery {
@@ -290,6 +282,11 @@
     }
   }
 
+  .str-chat__message-attachment--svg-image {
+    background-image: repeating-conic-gradient(#d4d5d7 0% 25%, #f4f4f4 0% 50%);
+    background-size: 24px 24px;
+  }
+
   .str-chat__message-attachment-file--item {
     @include utils.component-layer-overrides('file-attachment');
   }
@@ -319,9 +316,11 @@
 
   .str-chat__message-attachment-audio-widget--progress-track {
     background-color: var(--str-chat__disabled-color);
+    border-radius: calc(var(--str-chat__spacing-px) * 5);
 
     .str-chat__message-attachment-audio-widget--progress-indicator {
       background-color: var(--str-chat__primary-color);
+      border-radius: inherit;
     }
   }
 
@@ -357,7 +356,8 @@
 
     .str-chat__message-attachment-card-audio-widget {
       background-color: var(--str-chat__audio-attachment-widget-background-color);
-      border-radius: 0 0 14px 14px;
+      border-radius: 0 0 calc(var(--str-chat__spacing-px) * 14)
+        calc(var(--str-chat__spacing-px) * 14);
 
       .str-chat__message-attachment-audio-widget--title {
         color: var(--str-chat__text-color);
@@ -385,9 +385,16 @@
   }
 
   .str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy {
-    img {
+    .str-chat__message-attachment-card--header {
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
   }
 }
+
+.str-chat__message-attachment-card.str-chat__message-attachment-card--audio {
+  .str-chat__message-attachment-card--header {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+}

package/src/assets/styles/v2/scss/Autocomplete/Autocomplete-layout.scss

@@ -20,7 +20,7 @@
   padding: var(--str-chat__spacing-2) 0;
 
   .str-chat__suggestion-list {
-    max-height: calc(var(--str-chat__spacing-px) * 292);
+    max-height: calc(var(--str-chat__spacing-px) * 320);
 
     display: flex;
     flex-direction: column;
@@ -50,3 +50,13 @@
     width: 100%;
   }
 }
+
+.str-chat__emoji-item {
+  @include utils.flex-row-center;
+  padding: var(--str-chat__spacing-2_5);
+  column-gap: var(--str-chat__spacing-2);
+
+  .str-chat__emoji-item--name {
+    width: 100%;
+  }
+}

package/src/assets/styles/v2/scss/Autocomplete/Autocomplete-theme.scss

@@ -110,6 +110,33 @@
 
   /* The text color of the at sign inside a user mention itome in the autocomplete list */
   --str-chat__mention-list-user-item-at-sign-color: var(--str-chat__primary-color);
+
+  /* The font used in the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-font-family: var(--str-chat__font-family);
+
+  /* The border radius used for the borders of the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-border-radius: 0;
+
+  /* The text/icon color of the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-color: var(--str-chat__text-color);
+
+  /* The background color of the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-background-color: transparent;
+
+  /* Top border of the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-border-block-start: none;
+
+  /* Bottom border of the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-border-inline-end: none;
+
+  /* Box shadow of the emoji suggestion item in the autocomplete list */
+  --str-chat__mention-list-emoji-item-box-shadow: none;
 }
 
 // Class defined by Angular mentions
@@ -156,6 +183,14 @@
   }
 }
 
+.str-chat__emoji-item {
+  @include utils.component-layer-overrides('mention-list-emoji-item');
+
+  .str-chat__emoji-item--name {
+    font: var(--str-chat__subtitle-text);
+  }
+}
+
 // TODO?: rename to autocomplete? or create new file
 .str-chat__suggestion-list-container {
   @include utils.component-layer-overrides('suggestion-list-container');

package/src/assets/styles/v2/scss/Avatar/Avatar-layout.scss

@@ -1,6 +1,8 @@
 .str-chat__avatar {
   .str-chat__avatar-fallback {
     text-align: center;
+    height: inherit;
+    width: inherit;
   }
 }
 

package/src/assets/styles/v2/scss/ChannelPreview/ChannelPreview-theme.scss

@@ -73,11 +73,9 @@
   .str-chat__channel-preview-end-first-row {
     @include utils.channel-preview-display-name-theme;
 
-    .str-chat__channel-preview-messenger--name {
-      .str-chat__channel-preview-unread-badge {
-        @include utils.component-layer-overrides('channel-preview-unread-badge');
-        font-size: 80%;
-      }
+    .str-chat__channel-preview-unread-badge {
+      @include utils.component-layer-overrides('channel-preview-unread-badge');
+      font-size: 80%;
     }
 
     .str-chat__channel-preview-messenger--last-message {

package/src/assets/styles/v2/scss/ChannelSearch/ChannelSearch-layout.scss

@@ -17,6 +17,7 @@
     align-items: center;
     flex: 1;
     padding: var(--str-chat__spacing-2_5);
+    min-width: 0;
 
     .str-chat__channel-search-input--icon,
     .str-chat__channel-search-input--clear-button {
@@ -35,6 +36,7 @@
 
     input {
       flex: 1;
+      min-width: 0;
     }
   }
 }
@@ -67,4 +69,3 @@
     padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
   }
 }
-

package/src/assets/styles/v2/scss/Message/Message-layout.scss

@@ -6,6 +6,23 @@
 
   /* The maximum allowed width of the message component */
   --str-chat__message-max-width: calc(var(--str-chat__spacing-px) * 480);
+
+  /* The maximum allowed width of the message component, if it has attachments */
+  --str-chat__message-with-attachment-max-width: calc(var(--str-chat__spacing-px) * 300);
+
+  /* The maximum allowed width of quoted messages inside the message component */
+  --str-chat__quoted-message-max-width: calc(var(--str-chat__spacing-px) * 180);
+
+  /* The maximum allowed width of quoted messages inside the message input component */
+  --str-chat__quoted-message-inside-message-input-max-width: calc(
+    var(--str-chat__spacing-px) * 200
+  );
+
+  /* The maximum allowed height of quoted messages inside the message input component */
+  --str-chat__quoted-message-inside-message-input-max-height: calc(
+    var(--str-chat__quoted-message-inside-message-input-max-width) +
+      calc(var(--str-chat__spacing-px) * 50)
+  );
 }
 
 .str-chat__message {
@@ -15,7 +32,7 @@
 }
 
 .str-chat__message.str-chat__message--has-attachment {
-  --str-chat__message-max-width: calc(var(--str-chat__spacing-px) * 300);
+  --str-chat__message-max-width: var(--str-chat__message-with-attachment-max-width);
 
   .str-chat__message-bubble {
     max-width: var(--str-chat__message-max-width);
@@ -23,9 +40,11 @@
 }
 
 .str-chat__quoted-message-preview {
-  --str-chat__message-max-width: calc(var(--str-chat__spacing-px) * 180);
+  --str-chat__message-max-width: var(--str-chat__quoted-message-max-width);
 
   .str-chat__quoted-message-bubble {
+    // Turn off pointer events so they don't interfere with jump to message
+    pointer-events: none;
     max-width: var(--str-chat__message-max-width);
   }
 }
@@ -97,10 +116,10 @@
 
     .str-chat__message-options {
       grid-area: options;
-      display: flex;
-      align-items: center;
+      align-items: start;
       justify-content: flex-end;
       flex-direction: row-reverse;
+      width: calc(3 * var(--str-chat__message-options-button-size));
 
       .str-chat__message-actions-box-button,
       .str-chat__message-reply-in-thread-button,
@@ -128,6 +147,10 @@
 
       .str-chat__message-text {
         @include chat-bubble-spacing;
+
+        p {
+          white-space: pre-line;
+        }
       }
     }
   }
@@ -156,6 +179,11 @@
     column-gap: var(--str-chat__spacing-0_5);
     position: relative;
 
+    .str-chat__message-status-tooltip-container {
+      display: flex;
+      justify-content: center;
+    }
+
     svg {
       width: calc(var(--str-chat__spacing-px) * 15);
       height: calc(var(--str-chat__spacing-px) * 15);
@@ -191,6 +219,7 @@
     display: flex;
     column-gap: var(--str-chat__spacing-1);
     min-width: 0;
+    width: 100%;
   }
 
   // Fixes emoji display in Chrome on non-retina display (only detected in Angular SDK) https://bugs.chromium.org/p/chromium/issues/detail?id=596223
@@ -225,24 +254,41 @@
   }
 }
 
-.str-chat__message-inner {
-  @mixin visible {
-    // Changing opacity instead of visibility because of a strange Safari behavior/bug
-    opacity: 1;
-    pointer-events: auto;
+.str-chat__li {
+  &:hover {
+    .str-chat__message-options {
+      display: flex;
+    }
   }
+}
 
-  &:hover .str-chat__message-options {
-    @include visible;
+.str-chat__message-inner {
+  .str-chat__message-options {
+    display: none;
   }
 
   .str-chat__message-edit-in-progress.str-chat__message-options {
-    @include visible;
+    display: flex;
   }
+}
 
-  .str-chat__message-options {
-    opacity: 0;
-    pointer-events: none;
+.str-chat__message--other .str-chat__message-inner {
+  margin-inline-end: calc(var(--str-chat__message-options-button-size) * 3);
+}
+
+.str-chat__li:hover {
+  .str-chat__message--other .str-chat__message-inner {
+    margin-inline-end: 0;
+  }
+}
+
+.str-chat__message--me .str-chat__message-inner {
+  margin-inline-start: calc(var(--str-chat__message-options-button-size) * 3);
+}
+
+.str-chat__li:hover {
+  .str-chat__message--me .str-chat__message-inner {
+    margin-inline-start: 0;
   }
 }
 
@@ -311,17 +357,21 @@
 }
 
 .str-chat__message-input {
-  .str-chat__quoted-message-bubble {
-    max-height: calc(var(--str-chat__message-max-width) + calc(var(--str-chat__spacing-px) * 70));
+  .str-chat__quoted-message-preview {
+    --str-chat__message-max-width: var(--str-chat__quoted-message-inside-message-input-max-width);
 
-    .str-chat__quoted-message-text {
-      max-height: 100%;
-      min-height: 0;
+    .str-chat__quoted-message-bubble {
+      max-height: var(--str-chat__quoted-message-inside-message-input-max-height);
 
-      p {
+      .str-chat__quoted-message-text {
         max-height: 100%;
-        overflow-y: auto;
-        overflow-x: hidden;
+        min-height: 0;
+
+        p {
+          max-height: 100%;
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
       }
     }
   }