stream-chat-angular 4.4.0 → 4.5.0

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

@@ -71,6 +71,7 @@
     grid-template-areas:
       'avatar message'
       '. replies'
+      '. translation-notice'
       '. metadata';
     column-gap: var(--str-chat__spacing-2);
     grid-template-columns: auto 1fr;
@@ -81,6 +82,7 @@
     grid-template-areas:
       'message'
       'replies'
+      'translation-notice'
       'metadata';
     justify-items: end;
 
@@ -166,6 +168,16 @@
     }
   }
 
+  .str-chat__translation-notice {
+    grid-area: translation-notice;
+
+    button {
+      cursor: pointer;
+      padding: var(--str-chat__spacing-1) 0;
+      margin: 0;
+    }
+  }
+
   .str-chat__message-metadata {
     grid-area: metadata;
     display: flex;

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

@@ -165,6 +165,12 @@
 
   /* Box shadow applied to a date separator */
   --str-chat__date-separator-box-shadow: none;
+
+  /* The text color of the translation notice that is displayed if a message is translated with auto-translation */
+  --str-chat__translation-notice-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The hover color of the translation notice that is displayed if a message is translated with auto-translation */
+  --str-chat__translation-notice-active-background-color: var(--str-chat__tertiary-surface-color);
 }
 
 .str-chat__message--system {
@@ -237,6 +243,20 @@
     }
   }
 
+  .str-chat__translation-notice {
+    button {
+      font: var(--str-chat__body2-text);
+      color: var(--str-chat__translation-notice-color);
+      border: none;
+      background: none;
+
+      &:active,
+      &:hover {
+        background: var(--str-chat__translation-notice-active-background-color);
+      }
+    }
+  }
+
   .str-chat__message-metadata {
     color: var(--str-chat__message-secondary-color);
     font: var(--str-chat__caption-text);

package/src/assets/styles/v2/scss/index.scss

@@ -3,6 +3,7 @@
 @use 'global-theme-variables';
 
 @use 'vendor/emoji-mart.scss';
+@use 'vendor/react-image-gallery';
 
 @use 'common/CTAButton/CTAButton-theme';
 @use 'common/CircleFAButton/CircleFAButton-theme';
@@ -33,4 +34,3 @@
 @use 'Tooltip/Tooltip-theme';
 @use 'TypingIndicator/TypingIndicator-theme';
 
-@use '../../vendor/react-image-gallery';

package/src/assets/styles/v2/scss/vendor/react-image-gallery.scss

@@ -0,0 +1,232 @@
+$ig-small-screen: 768px !default;
+$ig-xsmall-screen: 480px !default;
+$ig-white: #fff !default;
+$ig-black: #000 !default;
+$ig-blue: #337ab7 !default;
+$ig-background-black: rgba(0, 0, 0, 0.4) !default;
+$ig-transparent: rgba(0, 0, 0, 0) !default;
+$ig-shadow: 0 2px 2px lighten($ig-black, 10%);
+
+@mixin vendor-prefix($name, $value) {
+  @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') {
+    #{$vendor}#{$name}: #{$value};
+  }
+}
+
+// SVG ICON STYLES
+.image-gallery-icon {
+  color: $ig-white;
+  transition: all 0.3s ease-out;
+  appearance: none;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  outline: none;
+  position: absolute;
+  z-index: 4;
+  filter: drop-shadow($ig-shadow);
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      color: $ig-blue;
+
+      .image-gallery-svg {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  &:focus {
+    // a11y support
+    outline: 2px solid $ig-blue;
+  }
+}
+
+.image-gallery-using-mouse {
+  .image-gallery-icon {
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.image-gallery-fullscreen-button {
+  bottom: 0;
+  padding: 20px;
+
+  .image-gallery-svg {
+    height: 28px;
+    width: 28px;
+  }
+
+  @media (max-width: $ig-small-screen) {
+    padding: 15px;
+
+    .image-gallery-svg {
+      height: 24px;
+      width: 24px;
+    }
+  }
+
+  @media (max-width: $ig-xsmall-screen) {
+    padding: 10px;
+
+    .image-gallery-svg {
+      height: 16px;
+      width: 16px;
+    }
+  }
+}
+
+.image-gallery-fullscreen-button {
+  right: 0;
+}
+
+.image-gallery-left-nav,
+.image-gallery-right-nav {
+  padding: 50px 10px;
+  top: 50%;
+  transform: translateY(-50%);
+
+  .image-gallery-svg {
+    height: 120px;
+    width: 60px;
+  }
+
+  @media (max-width: $ig-small-screen) {
+    .image-gallery-svg {
+      height: 72px;
+      width: 36px;
+    }
+  }
+
+  @media (max-width: $ig-xsmall-screen) {
+    .image-gallery-svg {
+      height: 48px;
+      width: 24px;
+    }
+  }
+
+  &[disabled] {
+    cursor: disabled;
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+.image-gallery-left-nav {
+  left: 0;
+}
+
+.image-gallery-right-nav {
+  right: 0;
+}
+// End of Icon styles
+
+.image-gallery {
+  @include vendor-prefix('user-select', none);
+  -webkit-tap-highlight-color: $ig-transparent;
+  position: relative;
+
+  &.fullscreen-modal {
+    background: $ig-black;
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: 5;
+
+    .image-gallery-content {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
+
+.image-gallery-content {
+  position: relative;
+  line-height: 0;
+  top: 0;
+
+  &.fullscreen {
+    background: $ig-black;
+
+    .image-gallery-slide .image-gallery-image {
+      max-width: 100%;
+    }
+  }
+
+  .image-gallery-slide .image-gallery-image {
+    max-height: calc(100vh - 80px); // 80 px for the thumbnail space
+    max-width: unset;
+    object-fit: contain;
+  }
+
+  &.left,
+  &.right {
+    .image-gallery-slide .image-gallery-image {
+      max-height: 100vh;
+    }
+  }
+}
+
+.image-gallery-slide-wrapper {
+  position: relative;
+
+  &.left,
+  &.right {
+    display: inline-block;
+    width: calc(100% - 110px); // 100px + 10px for margin
+
+    @media (max-width: $ig-small-screen) {
+      width: calc(100% - 87px); // 81px + 6px for margin
+    }
+  }
+
+  &.image-gallery-rtl {
+    direction: rtl;
+  }
+}
+
+.image-gallery-slides {
+  line-height: 0;
+  overflow: hidden;
+  position: relative;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.image-gallery-slide {
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+
+  &.center {
+    position: relative;
+  }
+
+  .image-gallery-image {
+    width: 100%;
+    object-fit: contain;
+  }
+}
+
+.image-gallery-index {
+  background: $ig-background-black;
+  color: $ig-white;
+  line-height: 1;
+  padding: 10px 20px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 4;
+
+  @media (max-width: $ig-small-screen) {
+    font-size: 0.8em;
+    padding: 5px 10px;
+  }
+}

package/src/assets/version.ts

@@ -1 +1 @@
-export const version = '4.4.0';
+export const version = '4.5.0';