Message bounce angular (#274)

### 🎯 Goal - React + Angular: Hide unstyled UI components related to mark unread in theme-v1 - Angular: Hide unstyled UI components related to message bounce flow in theme-v1 - Angular: CSS update after edit message modal was moved up in DOM tree - theme-v1 + theme-v2 - Code reformats :( ### 🛠 Implementation details _Provide a description of the implementation_ ### 🎨 UI Changes _Add relevant screenshots_ Make sure to test with both Angular and React (with both `MessageList` and `VirtualizedMessageList` components) SDKs
GetStream · Feb 26, 2024 · b9573b1 · b9573b1
1 parent 6e8d673
commit b9573b1
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 51 deletions.
diff --git a/src/v1/Message.scss b/src/v1/Message.scss
@@ -83,7 +83,7 @@
   /* group styling */
   &--top,
   &--single {
-    padding-top: calc(var(--md-p)/2);
+    padding-top: calc(var(--md-p) / 2);
 
     .str-chat__message {
       &-attachment--img,
@@ -176,7 +176,7 @@
   }
 
   &--bottom {
-    padding-bottom: calc(var(--md-p)/2);
+    padding-bottom: calc(var(--md-p) / 2);
 
     .str-chat__message {
       &-attachment--img,
@@ -217,7 +217,7 @@
   }
 
   &--single {
-    padding-bottom: calc(var(--md-m)/2);
+    padding-bottom: calc(var(--md-m) / 2);
   }
 
   &--top,
@@ -233,14 +233,16 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
         }
       }
 
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
           }
         }
       }
@@ -251,21 +253,25 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: var(--border-radius) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: var(--border-radius) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
 
           &--has-attachment {
-            border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+            border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius)
+              var(--border-radius) calc(var(--border-radius-sm) / 2);
           }
         }
       }
 
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) var(--border-radius)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
 
             &--has-attachment {
-              border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+              border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+                calc(var(--border-radius-sm) / 2) var(--border-radius);
             }
           }
         }
@@ -278,14 +284,16 @@
     .str-chat__message {
       &-text {
         &-inner {
-          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2);
+          border-radius: calc(var(--border-radius-sm) / 2) var(--border-radius) var(--border-radius)
+            calc(var(--border-radius-sm) / 2);
         }
       }
 
       &--me {
         .str-chat__message-text {
           &-inner {
-            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+            border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+              calc(var(--border-radius-sm) / 2) var(--border-radius);
 
             &--has-attachment {
               margin: 0;
@@ -296,7 +304,8 @@
         .str-chat__message-attachment-card {
           margin: 0;
           padding: 0;
-          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2) calc(var(--border-radius-sm) / 2) var(--border-radius);
+          border-radius: var(--border-radius) calc(var(--border-radius-sm) / 2)
+            calc(var(--border-radius-sm) / 2) var(--border-radius);
         }
       }
     }
@@ -741,11 +750,6 @@
             padding: 3px 0;
           }
         }
-
-        &--options.str-chat-angular__message-simple__actions__action--options--editing {
-          position: relative;
-          display: flex;
-        }
       }
     }
 

diff --git a/src/v1/MessageActions.scss b/src/v1/MessageActions.scss
@@ -135,12 +135,3 @@
     }
   }
 }
-
-// Used by Angular SDK to display edit message modal
-.str-chat__message-edit-in-progress {
-  .ngxp__container {
-    transform: initial !important;
-    will-change: initial !important;
-    z-index: 2;
-  }
-}
diff --git a/src/v1/_base.scss b/src/v1/_base.scss
@@ -31,12 +31,19 @@
         bottom: 0;
         opacity: 0;
 
-        &[aria-hidden="true"] {
+        &[aria-hidden='true'] {
           visibility: hidden;
         }
       }
     }
   }
+
+  // New features are not implemented in theme-v1, corresponding HTML code is hidden
+  .str-chat__unread-messages-notification,
+  .str-chat__unread-messages-separator-wrapper,
+  .str-chat__message-bounce-prompt {
+    display: none;
+  }
 }
 
 .clearfix {

diff --git a/src/v2/styles/EditMessageForm/EditMessageForm-layout.scss b/src/v2/styles/EditMessageForm/EditMessageForm-layout.scss
@@ -23,7 +23,7 @@
   }
 }
 
-.str-chat__message {
+.str-chat-angular__edit-message-form {
   .str-chat__message-input-angular-host {
     max-height: 100%;
     min-height: 0;
@@ -32,21 +32,19 @@
     max-width: 100%;
   }
 
-  .str-chat__message-edit-in-progress {
-    .str-chat__modal--open {
-      .str-chat__modal__inner {
-        height: 40%;
-        max-height: 80%;
-        min-width: 90%;
-        max-width: 90%;
-        width: 90%;
-        flex-basis: min-content;
+  .str-chat__modal--open {
+    .str-chat__modal__inner {
+      height: 40%;
+      max-height: 80%;
+      min-width: 90%;
+      max-width: 90%;
+      width: 90%;
+      flex-basis: min-content;
 
-        @media only screen and (min-device-width: 768px) {
-          min-width: 40%;
-          max-width: 60%;
-          width: min-content;
-        }
+      @media only screen and (min-device-width: 768px) {
+        min-width: 40%;
+        max-width: 60%;
+        width: min-content;
       }
     }
   }

diff --git a/src/v2/styles/Message/Message-layout.scss b/src/v2/styles/Message/Message-layout.scss
@@ -328,7 +328,6 @@
     display: none;
   }
 
-  .str-chat__message-edit-in-progress.str-chat__message-options,
   .str-chat__message-actions-open.str-chat__message-options {
     display: flex;
   }

diff --git a/src/v2/styles/MessageActionsBox/MessageActionsBox-layout.scss b/src/v2/styles/MessageActionsBox/MessageActionsBox-layout.scss
@@ -27,11 +27,3 @@
     display: block;
   }
 }
-
-.str-chat__message-edit-in-progress {
-  .ngxp__container {
-    transform: initial !important;
-    will-change: initial !important;
-    z-index: initial;
-  }
-}