feat: Auto translation for Angular SDK

GetStream · Sep 16, 2022 · 873f7c4 · 873f7c4
1 parent 4f0676d
commit 873f7c4
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 0 deletions.
diff --git a/src/v1/Message.scss b/src/v1/Message.scss
@@ -8,6 +8,24 @@
    */
   .str-chat__message-inner {
     min-width: 0;
+
+    .str-chat__translation-notice {
+      button {
+        cursor: pointer;
+        padding: 0.25rem 0;
+        margin: 0;
+        font-size: 14px;
+        line-height: 16px;
+        color: var(--lighten-grey);
+        border: none;
+        background: none;
+
+        &:active,
+        &:hover {
+          background: var(--grey-whisper);
+        }
+      }
+    }
   }
 
   .quoted-message {

diff --git a/src/v2/styles/Message/Message-layout.scss b/src/v2/styles/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;

diff --git a/src/v2/styles/Message/Message-theme.scss b/src/v2/styles/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);