easemob-chat-uikit 1.1.0 → 1.2.0

package/README.md

@@ -66,9 +66,6 @@ UIKIt 由三部分组成：UI 组件，管理数据的 mobx store, chat SDK。UI
       <td style=font-size:10px>点击头像显示好友名片，可以发送好友的个人名片信息</td>
    </tr>
    <tr>
-   <td colspan="3">
-     更多功能开发中 ...
-	 </td>
    </tr>
 
 </table>

package/package.json

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

package/style/avatar/style/style.scss

@@ -54,7 +54,7 @@ $presence-tag-cls: #{$cui-prefix}-presence-tag;
     line-height: $line-height-base;
     list-style: none;
     font-feature-settings: 'tnum';
-    cursor: pointer;
+    // cursor: pointer;
     user-select: none;
 
     display: inline-block;

package/style/badge/style/style.scss

@@ -6,10 +6,9 @@ $number-prefix-cls: #{$cui-prefix}-scroll-number;
     position: relative;
     display: inline-block;
     line-height: 1;
-
     &-count {
         z-index: $zindex-badge;
-        min-width: $badge-height;
+        // min-width: $badge-height;
         height: $badge-height;
         padding: 0 6px;
         color: $badge-text-color;
@@ -109,7 +108,12 @@ $number-prefix-cls: #{$cui-prefix}-scroll-number;
       }
 
 }
-
+.#{$number-prefix-cls}{
+  &-only{
+    width: 8px;
+    display: inline-block;
+  }
+}
 @keyframes cuiZoomBadgeIn {
     0% {
       transform: scale(0) translate(50%, -50%);

package/style/baseMessage/style/style.scss

@@ -141,7 +141,7 @@ $moreAction-prefix-cls: #{$cui-prefix}-moreAction;
         display: flex;
         align-items: flex-end;
         gap: 8px;
-        margin: 0 8px;
+        margin: 0 12px;
 
         &-action {
             fill: $gray-6;
@@ -155,6 +155,7 @@ $moreAction-prefix-cls: #{$cui-prefix}-moreAction;
     &-content {
         // flex: 1;
         display: flex;
+        flex-direction: column;
         max-width: calc(100% - 120px);
         // margin: $msg-base-content-margin;
         padding: $msg-base-content-padding;
@@ -219,6 +220,9 @@ $moreAction-prefix-cls: #{$cui-prefix}-moreAction;
         .#{$status-prefix-cls}-content {
             border-radius: $msg-bubble-square-border-radius;
         }
+        .#{$status-prefix-cls}-body{
+            margin: 0 17px;
+        }
     }
 
     &-info {
@@ -235,6 +239,10 @@ $moreAction-prefix-cls: #{$cui-prefix}-moreAction;
         color: $msg-nickname-font-color;
     }
 
+    &-time-and-status-box{
+        display: flex;
+        align-items: center;
+    }
     &-time {
         display: inline-block;
         // width: $msg-time-width;
@@ -289,6 +297,7 @@ $moreAction-prefix-cls: #{$cui-prefix}-moreAction;
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
+                
             }
             // 当前元素下第二个div（child(2)）里面的span字号是12px
            
@@ -304,7 +313,7 @@ $moreAction-prefix-cls: #{$cui-prefix}-moreAction;
 
             }
 
-            &-icon{
+            &-icon svg{
                 fill: $gray-98;
             }
         }
@@ -321,13 +330,18 @@ $moreAction-prefix-cls: #{$cui-prefix}-moreAction;
             }
             &>span:nth-child(3){
                 // flex: none;
-                    /* flex: 1; */
+                flex: 1;
                 overflow: hidden;
                 /* flex-wrap: nowrap; */
                 /* display: flex; */
                 height: 16px;
-                text-overflow: ellipsis;
-                white-space: nowrap;
+                // 会把容器撑开
+                // text-overflow: ellipsis;
+                // white-space: nowrap;
+
+                display: -webkit-box;
+                -webkit-line-clamp: 1;
+                -webkit-box-orient: vertical;
             }
         }
         
@@ -344,7 +358,7 @@ $moreAction-prefix-cls: #{$cui-prefix}-moreAction;
                 border-top: 1px solid $special-8;
             }
             &-name{
-                &-icon{
+                &-icon svg{
                     fill: $special-5;
                 }
             }
@@ -355,6 +369,35 @@ $moreAction-prefix-cls: #{$cui-prefix}-moreAction;
             }
         }
     }
+    // dark mode primary style
+    &-dark.#{$status-prefix-cls}-secondly {
+            .#{$status-prefix-cls}-content {
+                background: $blue-2;
+                color: $msg-bubble-font-color-primary;
+
+                &::after {
+                    border-left: $msg-bubble-arrow-border-size solid $blue-2 !important;
+                }
+    
+                &::before {
+                    border-right: $msg-bubble-arrow-border-size solid $blue-2 !important;
+                }
+        }
+    }
+    &-dark.#{$status-prefix-cls}-primary {
+        .#{$status-prefix-cls}-content {
+            background: $blue-6;
+            color: $msg-bubble-font-color-secondly;
+
+            &::after {
+                border-left: $msg-bubble-arrow-border-size solid $blue-6 !important;
+            }
+
+            &::before {
+                border-right: $msg-bubble-arrow-border-size solid $blue-6 !important;
+            }
+    }
+}
 }
 
 .#{$moreAction-prefix-cls} {
@@ -376,7 +419,8 @@ $moreAction-prefix-cls: #{$cui-prefix}-moreAction;
         font-style: normal;
         font-weight: 500;
         line-height: 20px;
-
+        min-width: 188px;
+        text-align: left;
         >div{
             margin-right: 8px;
         }

package/style/button/style/mixin.scss

@@ -120,15 +120,17 @@
     @include button-variant-other($btn-ghost-bg, unset, $btn-ghost-bg);
     text-align: center;
     padding: 6px;
+    box-shadow: none!important;
+    border: none;
     &:hover,
     &:focus{
         background: $gray-95;
-        border: 1px solid transparent;
+        // border: 1px solid transparent;
     };
     &:active {
         text-decoration: none;
         background: $gray-9;
-        border: 1px solid transparent;
+        // border: 1px solid transparent;
     }
 }
 
@@ -158,7 +160,7 @@
             &:hover,
             &:focus,
             &:active {
-                @include button-color($gray-2, $gray-1, $gray-3);
+                @include button-color($gray-4, $gray-2, $gray-2);
                 text-shadow: none;
                 box-shadow: none;
             }
@@ -225,4 +227,31 @@
 
 @mixin btn-dark() {
     @include button-variant-primary($gray-95, $gray-1, $gray-4, $primary-color-active, dark);
+}
+
+@mixin btn-primary-dark(){
+    @include button-variant-primary($gray-95, $blue-6,$blue-6, $blue-7, dark);
+    &:hover,
+    &:focus {
+            @include button-color($gray-95, $blue-7, $blue-7)
+    }
+
+    &:active {
+        @include button-color($gray-98, $blue-5, $blue-5)
+    }
+    
+}
+
+@mixin btn-text-dark(){
+    @include button-variant-other($blue-6, unset, $btn-ghost-bg);
+    &:hover,
+    &:focus{
+        background: $blue-1;
+        // border: 1px solid transparent;
+    };
+    &:active {
+        text-decoration: none;
+        background: $blue-2;
+        // border: 1px solid transparent;
+    }
 }

package/style/button/style/style.scss

@@ -5,9 +5,16 @@ $btn-prefix-cls: #{$cui-prefix}-button;
 .#{$btn-prefix-cls} {
     @include btn();
     @include btn-default();
-
+    &-default{
+            &.#{$btn-prefix-cls}-dark{
+                @include btn-dark();
+            }
+        }
     &-primary {
-        @include btn-primary()
+        @include btn-primary();
+        &.#{$btn-prefix-cls}-dark{
+            @include btn-primary-dark();
+        }
     }
 
     &-ghost {
@@ -16,6 +23,9 @@ $btn-prefix-cls: #{$cui-prefix}-button;
 
     &-text {
         @include btn-text();
+        &.#{$btn-prefix-cls}-dark{
+            @include btn-text-dark();
+        }
     }
 
     &-round {
@@ -26,7 +36,7 @@ $btn-prefix-cls: #{$cui-prefix}-button;
         @include btn-circle($btn-prefix-cls);
     }
 
-    &-dark{
-        @include btn-dark();
-    }
+    // &-dark{
+    //     @include btn-dark();
+    // }
 }

package/style/checkbox/style/style.scss

@@ -9,7 +9,7 @@ $checkbox-prefix-cls: #{$cui-prefix}-checkbox;
 
 .#{$checkbox-prefix-cls} {
   position: relative;
-  top: 0.1em;
+  // top: 0.1em;
 
   &+span {
     padding-right: 8px;

package/style/contactList/style/detail.scss

@@ -62,9 +62,13 @@ $contact-detail-prefix-cls: #{$cui-prefix}-contact-detail;
             display: flex;
             gap: 8px;
         }
-
-        &-btn{
+        &-btn-container{
+            display: flex;
+            color: $gray-9;
             margin-top: 16px;
+            align-items: center;
+        }
+        &-btn{
             width: fit-content;
             font-size: 16px;
             font-weight: 500;
@@ -72,9 +76,10 @@ $contact-detail-prefix-cls: #{$cui-prefix}-contact-detail;
             display: flex;
             align-items: center;
             padding: 12px 16px;
-            gap: 4px;
+            gap: 8px;
+            color: $blue-5;
             & svg{
-                fill: $gray-98;
+                fill: $blue-5;
             }
         }
         &-body{

package/style/contactList/style/group.scss

@@ -1,7 +1,7 @@
 $contact-prefix-cls: #{$cui-prefix}-contactGroup;
 
 .#{$contact-prefix-cls}{
-    padding-top: 2px;
+    padding-top: 8px;
     &-title{
         display: flex;
         justify-content: space-between;

package/style/contactList/style/list.scss

@@ -10,18 +10,23 @@ $contact-prefix-cls: #{$cui-prefix}-contactList;
     overflow-y: hidden;
     display: flex;
     flex-direction: column;
-    padding: 8px;
+    padding: 0 8px;
     gap: 8px;
     box-sizing: border-box;
     background-color: $gray-95;
     &-content{
         flex: 1;
-        overflow-y: auto;
+        overflow-y: overlay;
         overflow-x: hidden;
         position: relative;
+        scrollbar-color: $gray-8 transparent;
     }
 
     &-dark{
         background-color: $gray-1;
+
+        .#{$contact-prefix-cls}-content{
+            scrollbar-color: $gray-4 transparent;
+        }
     }
 }

package/style/conversation/style/item.scss

@@ -61,6 +61,7 @@ $conversation-prefix-cls: #{$cui-prefix}-conversationItem;
         gap: 2px;
         padding-right: 20px;
         text-overflow: ellipsis;
+        cursor: default;
         &-silent{
             position: absolute;
             right: 0;
@@ -74,6 +75,7 @@ $conversation-prefix-cls: #{$cui-prefix}-conversationItem;
         color: $font-color;
         white-space: nowrap;
         height: 20px;
+        cursor: default;
     }
 
     &-time{
@@ -86,7 +88,7 @@ $conversation-prefix-cls: #{$cui-prefix}-conversationItem;
     &-sticky{
         background-color: $gray-9;
         border-radius: 0;
-        margin: 4px 0;
+        margin: 0;
         padding: 12px 20px;
 
         .#{$conversation-prefix-cls}-info{
@@ -102,13 +104,22 @@ $conversation-prefix-cls: #{$cui-prefix}-conversationItem;
         .#{$conversation-prefix-cls}-message{
             color: $gray-8;
         }
+        
     }
     &-dark.#{$conversation-prefix-cls}-sticky{
         background-color: $blue-2;
     }
     
     &-dark:hover{
-        background: $blue-2;
+        background: $gray-3;
+    }
+
+    &-dark.#{$conversation-prefix-cls}-selected{
+        background-color: $blue-2 !important;
+        .#{$conversation-prefix-cls}-nickname{
+            color: $blue-6;
+        }
+    
     }
 }
 
@@ -130,7 +141,7 @@ $conversation-prefix-cls: #{$cui-prefix}-conversationItem;
     li{
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: left;
         list-style: none;
         height: 36px;
         border-radius: 8px;

package/style/header/style/style.scss

@@ -24,6 +24,7 @@ $header-prefix-cls: #{$cui-prefix}-header;
             text-overflow: ellipsis;
             flex: 1;
             text-align: left;
+            @include Title(large)
         }
         &-sub{
             text-align: left;
@@ -48,6 +49,9 @@ $header-prefix-cls: #{$cui-prefix}-header;
             line-height: 36px;
             border-radius: 8px;
             cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
         li:hover{
             background: #F1F2F3;

package/style/icon/style/style.scss

@@ -4,13 +4,17 @@
   height: 1em;
   line-height: 1em;
   display: inline-block;
-  fill: $gray-6;
+  fill: $gray-3;
   svg {
     width: 100%;
     height: 100%;
   }
 }
 
+.#{$cui-prefix}-icon-dark {
+  fill: $gray-8;
+}
+
 .#{$cui-prefix}-primary-icon {
-  fill: $blue-6;
+  fill: $gray-3;
 }

package/style/imageMessage/style/style.scss

@@ -8,12 +8,13 @@ $img-msg-prefix-cls: #{$cui-prefix}-message-img;
         padding: 0 8px 8px;
     }
     img{
-        // width: 100%;
+        width: 100%;
         display: block;
         max-width: 300px;
         max-height: 300px;
         object-fit: contain;
         border-radius: 16px;
+        margin: auto;
         // width: -webkit-fill-available;
     }
 

package/style/messageStatus/style/style.scss

@@ -1,7 +1,9 @@
 $status-prefix-cls: #{$cui-prefix}-message-status;
 
 .#{$status-prefix-cls} {
-    padding: 3px;
+    padding: 0 3px;
+    display: block;
+    height: 20px;
     &-icon{
         img{
             width: 20px;

package/style/modal/style/style.scss

@@ -6,14 +6,17 @@ $dialog-prefix-cls: #{$cui-prefix}-modal;
 .#{$dialog-prefix-cls} {
     @include modal-mask();
     position: relative;
-    top: 100px;
+    // top: 100px;
     width: auto;
     max-width: calc(100vw - 32px);
     margin: 0 auto;
-    padding-bottom: 24px;
+    // padding-bottom: 24px;
 
     &-wrap {
         z-index: $zindex-modal;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
     
     &-title {
@@ -107,6 +110,9 @@ $dialog-prefix-cls: #{$cui-prefix}-modal;
           margin-bottom: 0;
           margin-left: 8px;
         }
+        .#{$cui-prefix}-button{
+          padding: 8px 20px;
+        }
     }
     &-open {
         overflow: hidden;

package/style/scrollList/style/style.scss

@@ -3,5 +3,10 @@ $scrollList-prefix-cls: #{$cui-prefix}-scrollList;
 
 .#{$scrollList-prefix-cls} {
     height: 100%;
-    overflow-y: auto;
+    overflow-y: overlay;
+    overflow-anchor: none;
+    scrollbar-color: $gray-8 transparent;
+    &-dark {
+        scrollbar-color: $gray-4 transparent;
+    }
 }

package/style/style/color/color.scss

@@ -25,6 +25,7 @@
     --cui-error-color: hsla(350, 100%, 60%, 1);
     --cui-neutral-color: hsla(203, 8%, 60%, 1);
     --cui-neutral-special-color: hsla(220, 36%, 60%, 1);
+    --cui-avatar-color: hsla(203, 100%, 60%, 1);
 }
 
 $cui-primary-color: hsla(203, 100%, 60%, 1);

package/style/style/index.scss

@@ -1,3 +1,4 @@
 @import './themes/default.scss';
 // @import './themes/dark.scss';
 @import './core/index';
+@import './text/index.scss'

package/style/style/text/index.scss

@@ -0,0 +1,69 @@
+@import '../color/color.scss';
+$default-color: $gray-1;
+@mixin Headline($size, $color: $default-color) {
+    @if $size == large{
+        font-size: 20px;
+        line-height: 28px;
+    }
+    @else if $size == medium{
+        font-size: 18px;
+        line-height: 26px;
+    }
+    @else if $size == small{
+        font-size: 16px;
+        line-height: 24px;
+    }
+    font-weight: 600;
+    color: $color;
+}
+
+@mixin Title($size, $color: $default-color) {
+    @if $size == large{
+        font-size: 18px;
+        line-height: 26px;
+    }
+    @else if $size == medium{
+        font-size: 16px;
+        line-height: 24px;
+    }
+    @else if $size == small{
+        font-size: 14px;
+        line-height: 20px;
+    }
+    font-weight: 500;
+    color: $color;
+}
+
+@mixin Label($size, $color: $default-color) {
+    @if $size == large{
+        font-size: 16px;
+        line-height: 24px;
+    }
+    @else if $size == medium{
+        font-size: 14px;
+        line-height: 20px;
+    }
+    @else if $size == small{
+        font-size: 12px;
+        line-height: 16px;
+    }
+    font-weight: 500;
+    color: $color;
+}
+
+@mixin Body($size, $color: $default-color) {
+    @if $size == large{
+        font-size: 16px;
+        line-height: 24px;
+    }
+    @else if $size == medium{
+        font-size: 14px;
+        line-height: 20px;
+    }
+    @else if $size == small{
+        font-size: 12px;
+        line-height: 16px;
+    }
+    font-weight: 400;
+    color: $color;
+}

package/style/style/themes/default.scss

@@ -1,5 +1,7 @@
 @import '../color/color.scss';
 
+
+
 $theme: light;
 // The prefix to use on all css classes from Chat UI.
 $cui-prefix: cui;
@@ -154,7 +156,7 @@ $disabled-color-dark: rgba(255, 255, 255, 0.75);
 $btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
 
 $btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
-$btn-font-weight: 40;
+$btn-font-weight: 500;
 $btn-border-width: $border-width-base;
 $btn-border-style: $border-style-base;
 $btn-border-radius-base: $border-radius-base;
@@ -168,7 +170,7 @@ $btn-default-bg: $component-background;
 $btn-default-border: $border-color-base;
 
 $btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
-$btn-primary-color: #fff;
+$btn-primary-color: $gray-98;
 $btn-primary-bg: $blue-5;
 
 $btn-height-lg: $height-lg;
@@ -200,7 +202,7 @@ $avatar-size-sm: 24px;
 $avatar-font-size-base: 18px;
 $avatar-font-size-lg: 24px;
 $avatar-font-size-sm: 14px;
-$avatar-bg: $blue-5;
+$avatar-bg: $blue-6;
 $avatar-color: #fff;
 $avatar-border-radius: $border-radius-base;
 $avatar-group-overlapping: -8px;
@@ -272,7 +274,7 @@ $tooltip-bg: #fff;
 // Tooltip arrow width
 $tooltip-arrow-width: 8px * 1.414; // sqrt(2)
 // Tooltip distance with trigger
-$tooltip-distance: $tooltip-arrow-width - 1px + 4px;
+$tooltip-distance: 4px;
 // Tooltip arrow color
 $tooltip-arrow-color: $tooltip-bg;
 $tooltip-border-radius: $border-radius-base;

package/style/thread/style/panel.scss

@@ -1,7 +1,7 @@
 $thread-prefix-cls: #{$cui-prefix}-thread-panel;
 .#{$thread-prefix-cls}{
     top: 10px;
-    right: 20px;
+    left: 50%;
     width: 540px;
     z-index: 1060;
     position: fixed;
@@ -12,7 +12,11 @@ $thread-prefix-cls: #{$cui-prefix}-thread-panel;
     border-radius: 16px;
     background-color: $gray-98;
     overflow: hidden;
-
+    top: 0;
+    left: 0;
+    opacity: 0;
+    transition: top 0.3s, left 0.3s, opacity 0.3s;
+    transform-origin: 50% 50% 0;
     &-header{
         &-title{
             font-size: 18px;