easemob-chat-uikit 1.3.0 → 1.4.0

package/components.scss

@@ -40,4 +40,4 @@
 @import './style/userSelect/style/style.scss';
 @import './style/chatroom/style/style.scss';
 @import './style/chatroomMember/style/style.scss';
-@import './style/chatroomMessage/style/style.scss';
+@import './style/chatroomMessage/style/style.scss';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easemob-chat-uikit",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "",
   "main": "ChatUI.umd.js",
   "type": "module",

package/style/chat/style/chat.scss

@@ -7,6 +7,7 @@ $chat-prefix-cls: #{$cui-prefix}-chat;
     flex: 1;
     flex-direction: column;
     background-color: $chat-bg;
+    overflow: hidden;
     &-messageList{
         flex: 1;
     }

package/style/chatroom/style/style.scss

@@ -14,14 +14,25 @@ $chatroom-prefix-cls: #{$cui-prefix}-chatroom;
         margin: 0;
         padding: 0;
     }
+
+    &-header-count{
+        @include Label(medium, $gray-1);
+        margin-left: 2px;
+    }
 }
 
+
+
 .#{$chatroom-prefix-cls}-dark{
     background-color: $gray-1;
     color: $gray-98;
     p{
         background: $gray-2;
     }
+
+    .#{$chatroom-prefix-cls}-header-count{
+        @include Label(medium, $gray-98);
+    }
 }
 
 .report-item{

package/style/chatroomMessage/style/style.scss

@@ -23,8 +23,6 @@ $chatroom-prefix-cls: #{$cui-prefix}-message-chatroom;
     height: fit-content;
     float: left;
     gap: 4px;
-
-    float: left;
     align-items: center;
     margin-right: 4px;
 

package/style/conversation/style/item.scss

@@ -76,6 +76,11 @@ $conversation-prefix-cls: #{$cui-prefix}-conversationItem;
         white-space: nowrap;
         height: 20px;
         cursor: default;
+        // white-space: normal;
+        word-break: break-all;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: calc(100% - 12px);
     }
 
     &-time{

package/style/pinnedMessage/style/style.scss

@@ -26,7 +26,7 @@ $status-prefix-cls: #{$cui-prefix}-message-base;
 .#{$pinned-msg-prefix-cls}-message-bubble {
   padding: 8px 0 12px 0;
   color: $gray-1;
-
+  padding-right: 56px;
   .#{$status-prefix-cls}-body {
     margin: 0;
   }

package/style/pinnedTextMessage/style/style.scss

@@ -0,0 +1,126 @@
+$pinned-msg-prefix-cls: #{$cui-prefix}-pinned-text-message;
+
+.#{$pinned-msg-prefix-cls} {
+    box-sizing: border-box;
+    display: flex;
+    overflow: hidden;
+    box-sizing: border-box;
+    background-color: $gray-2;
+    justify-content: space-between;
+    border-radius: 12px;
+    padding: 8px;
+    max-height: 56px;
+    transition: max-height 0.3s ease;
+    &-expand{
+        max-height: 116px;
+
+        .#{$pinned-msg-prefix-cls}-text{
+            overflow-y: auto;
+        }
+    }
+    &-text{
+        flex: 1;
+        word-break: break-all;
+        overflow-y: hidden;
+        @include Body(medium, $gray-98);
+        position: relative;
+
+        &-header{
+            display: flex;
+            gap: 4px;
+            float: left;
+            margin-right: 4px;
+        }
+        &-header+div{
+            text-align: left;
+        }
+
+        &-name{
+            @include Label(medium, $blue-5);
+        }
+    }
+
+    &-ellipsis{
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        background: $gray-2;
+        padding: 0 2px;
+    }
+
+    &-buttons {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        
+        &>div{
+            cursor: pointer;
+        }
+    }
+
+    &-button{
+        transition: transform 0.3s ease; /* 旋转动画 */
+        fill: $gray-98;
+        :hover{
+            fill: $blue-6;
+        }
+    }
+    &-button-expand{
+        transform: rotate(180deg);
+    }
+
+
+}
+
+.#{$pinned-msg-prefix-cls}-dark{
+    background-color: $gray-95;
+    .#{$pinned-msg-prefix-cls}-text{
+        @include Body(medium, $gray-1);
+
+        &-name{
+            @include Label(medium, $blue-8);
+            margin-right: 4px;
+        }
+    }
+    .#{$pinned-msg-prefix-cls}-button{
+        fill: $gray-3;
+    }
+    .#{$pinned-msg-prefix-cls}-ellipsis{
+        background: $gray-95;
+    }
+
+    .#{$pinned-msg-prefix-cls}-text::-webkit-scrollbar{
+        width: 2px; 
+        height: 2px;
+        color: $gray-3;
+    };
+
+    .#{$pinned-msg-prefix-cls}-text::-webkit-scrollbar-track {
+        background-color: $gray-8; /* 轨道背景色 */
+      }
+
+      .#{$pinned-msg-prefix-cls}-text::-webkit-scrollbar-thumb {
+        background-color: $gray-3;    /* 滑块颜色 */
+        border-radius: 10px;       /* 圆角 */
+      }
+}
+.cui-pinned-text-message-text::-webkit-scrollbar{
+    width: 2px; 
+    height: 2px;
+    color: $gray-2;
+};
+
+.cui-pinned-text-message-text::-webkit-scrollbar-track {
+    background-color: $gray-1; /* 轨道背景色 */
+  }
+  
+  .cui-pinned-text-message-text::-webkit-scrollbar-thumb {
+    background-color: $gray-98;    /* 滑块颜色 */
+    border-radius: 10px;       /* 圆角 */
+  }
+  
+  .cui-pinned-text-message-text::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+  }
+
+  

package/style/repliedMessage/style/msg.scss

@@ -37,6 +37,7 @@ $reply-msg-prefix-cls: #{$cui-prefix}-reply-message;
         background-color: $gray-95;
         border-radius: $msg-bubble-square-border-radius;
         position: relative;
+        cursor: pointer;
         &:hover {
             background-color: $gray-98;
         }

package/style/repliedMessage/style/style.scss

@@ -31,6 +31,7 @@ $reply-prefix-cls: #{$cui-prefix}-message-reply;
             white-space: nowrap;
             text-overflow: ellipsis;
             flex:none;
+            width: 100%;
             .cui-icon{
                 float: left;
             }

package/style/tooltip/style/mixin.scss

@@ -32,7 +32,7 @@
       left: -$width;
       width: $width * 3;
       height: $width * 3;
-      background: $tooltip-bg;
+      // background: $tooltip-bg;
       // Hack firefox: https://github.com/ant-design/ant-design/pull/33710#issuecomment-1015287825
       background-repeat: no-repeat;
       background-position: ceil(-$width + 1px) ceil(-$width + 1px);

package/style/tooltip/style/style.scss

@@ -67,6 +67,8 @@ $tooltip-arrow-offset-horizontal: 13px; // 16 - 3px
         background-color: $tooltip-bg;
         border-radius: $border-radius-base;
         box-shadow: $box-shadow-base;
+        display: flex;
+        align-items: center;
     }
 
     // Arrows
@@ -82,7 +84,7 @@ $tooltip-arrow-offset-horizontal: 13px; // 16 - 3px
         // right: 0;
         // bottom: 0;
         // left: 0;
-        // background-color: $tooltip-bg;
+        // background-color: $gray-1;
         // transform: translateY(50%) translateX(-50%) rotate(45deg)!important;
         // z-index: 0;
         background: transparent;
@@ -100,6 +102,7 @@ $tooltip-arrow-offset-horizontal: 13px; // 16 - 3px
             content: '';
             pointer-events: auto;
             background-color: $tooltip-bg;
+            // background-color: $gray-1;
             @include roundedArrow($tooltip-arrow-width, 5px);
         }
     }
@@ -179,6 +182,17 @@ $tooltip-arrow-offset-horizontal: 13px; // 16 - 3px
         right: $tooltip-arrow-offset-horizontal;
     }
 
+    // arrow placement right
+    &-placement-right &-arrow{
+        top: 50%;
+        transform: translate(-100%) translateY(-50%);
+        left: 0;
+    }
+    &-placement-right &-arrow-content{
+        box-shadow: 3px 3px 7px #00000012;
+        transform: translate(11px) rotate(135deg);
+    }
+
 }
 
 .#{$tooltip-prefix-cls}-dark{
@@ -187,6 +201,12 @@ $tooltip-arrow-offset-horizontal: 13px; // 16 - 3px
         background-color: $gray-1;
         border: 1px solid $gray-2
     }
+
+    .#{$tooltip-prefix-cls}-arrow {
+        &-content {
+            background-color: $gray-1;
+        }
+    }
 }
 
 @function sqrt($num) {