@rtsee/ngx 0.0.45 → 0.0.47

package/dist/ngx/lib/components/rtsee-messenger/message/components/message-time-and-status/message-time-and-status.component.d.ts

@@ -6,7 +6,8 @@ export declare class MessageTimeAndStatusComponent {
     timeFormatService: TimeFormatHelperService;
     message: RTSeeMessage | IMessageThumbnail;
     hideStatus?: boolean;
+    inChat?: boolean;
     constructor(timeFormatService: TimeFormatHelperService);
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageTimeAndStatusComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageTimeAndStatusComponent, "rtsee-message-time-and-status", never, { "message": { "alias": "message"; "required": false; }; "hideStatus": { "alias": "hideStatus"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageTimeAndStatusComponent, "rtsee-message-time-and-status", never, { "message": { "alias": "message"; "required": false; }; "hideStatus": { "alias": "hideStatus"; "required": false; }; "inChat": { "alias": "inChat"; "required": false; }; }, {}, never, never, false, never>;
 }

package/dist/ngx/src/lib/common/compiled-scss/styles.scss

@@ -143,15 +143,101 @@ $rts-new-default-text-size: 16px;
 
 
 
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
+
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-font-color-dbg-light: #ffffff;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+$rts-message-status-width: 69px;
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
+
+$rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
+$rtsee-chat-input-height: 40px;
+
 
 .rtsee-messenger, .rtsee-events-dashboard {
-  font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
+  font-family: "Work Sans", Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
 }
 .rts-section {
   padding: $rts-offset-sm;
   background-color: $rts-main-bg-color-light;
 }
 
+$rtsee-container-top-offset: 84px;
+$rtsee-default-component-dimension: 320px;
+
+.rtsee-container {
+  position: fixed;
+  width: $rtsee-default-component-dimension;
+  height: calc(100% - ($rtsee-container-top-offset + $rts-offset-md));
+  top: $rtsee-container-top-offset;
+  right: $rts-new-offset-md;
+
+  .rtsee-messenger {
+    height: $rtsee-default-component-dimension;
+
+    &.rtsee-messenger-folded {
+      height: $rts-messenger-header-height;
+      position: absolute;
+      border-radius: $rts-default-border-radius $rts-default-border-radius 0 0;
+      bottom: 0;
+      z-index: 1;
+    }
+  }
+
+  > :not(:first-child) {
+    .rtsee-messenger {
+      margin-top: $rts-offset-lg;
+    }
+  }
+}
+
 $rts-offset-sm: 8px;
 $rts-offset-md: 16px;
 $rts-offset-lg: 24px;
@@ -207,6 +293,7 @@ $rts-new-default-text-size: 16px;
 
 
 $rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
+$rtsee-chat-input-height: 40px;
 
 $rts-offset-sm: 8px;
 $rts-offset-md: 16px;
@@ -341,6 +428,8 @@ $control-icon-size: 18px;
         display: flex;
         align-items: center;
         margin-bottom: 18px;
+        color: $rts-font-color-dbg-light;
+        text-shadow: 1px 1px 2px black;
       }
 
       .rtsee-messenger-control-icon {
@@ -414,10 +503,7 @@ $rts-new-default-text-size: 16px;
 
 
 .rtsee-chats-list {
-  margin-top: $rts-new-offset-sm;
-
   .rtsee-chat-thumbnail-container {
-
   }
 
   .rtsee-chat-thumbnail-separator {
@@ -482,12 +568,68 @@ $rts-new-default-text-size: 16px;
 
 // end of new design-variables
 
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
+
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-font-color-dbg-light: #ffffff;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+$rts-message-status-width: 69px;
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
+
+$rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
+$rtsee-chat-input-height: 40px;
+
 
-$rtsee-chat-input-height: 50px;
 
 .rtsee-chat {
   height: 100%;
-  padding-bottom: $rtsee-chat-input-height;
+  padding-bottom: $rtsee-chat-input-height + $rts-offset-sm + $rts-offset-sm;
   background: $rts-new-secondary-bg-color-light;
 
   .rtsee-chat-body-container {
@@ -497,11 +639,11 @@ $rtsee-chat-input-height: 50px;
   .rtsee-chat-footer-container {
     position: absolute;
     height: $rtsee-chat-input-height;
-    width: calc(100% - #{$rts-new-offset-sm * 2});
-    margin: 0 $rts-new-offset-sm;
+    width: calc(100% - #{$rts-new-offset-xsm * 2});
+    margin: 0 $rts-new-offset-xsm;
     background: $rts-main-bg-color-light;
     border-radius: $rts-new-border-radius-rounded;
-    bottom: $rts-new-offset-sm;
+    bottom: $rts-new-offset-xsm;
   }
 }
 
@@ -560,6 +702,7 @@ $rts-new-default-text-size: 16px;
 
 
 $rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
+$rtsee-chat-input-height: 40px;
 
 $rts-offset-sm: 8px;
 $rts-offset-md: 16px;
@@ -623,7 +766,6 @@ $last-message-text-color: #707579;
   height: $rts-user-avatar-d-sm + $rts-offset-sm * 2;
   padding: $rts-new-offset-sm $rts-new-offset-sm $rts-new-offset-sm $rts-new-offset-sm * 2 + $rts-new-user-avatar-d-sm;
   cursor: pointer;
-  border-radius: $rts-new-default-border-radius;
 
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -653,8 +795,8 @@ $last-message-text-color: #707579;
 
     .rtsee-chat-thumbnail-name {
       position: relative;
-      height: $rts-new-user-avatar-d-sm * 0.33;
-      line-height: $rts-new-user-avatar-d-sm * 0.33;
+      height: $rts-new-user-avatar-d-sm * 0.38;
+      line-height: $rts-new-user-avatar-d-sm * 0.38;
       margin: 0;
       font-size: 16px;
       font-weight: 600;
@@ -805,6 +947,7 @@ $rts-new-default-text-size: 16px;
     background-color: $rts-main-bg-color-light;
     border-radius: $rts-new-border-radius-rounded;
     padding: $rts-new-offset-xsm $rts-new-offset-sm $rts-new-offset-sm $rts-new-offset-sm;
+    font-size: 14px;
 
 
     overflow-wrap: break-word;
@@ -980,6 +1123,7 @@ $rts-new-default-text-size: 16px;
 
 
 $rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
+$rtsee-chat-input-height: 40px;
 
 $rts-offset-sm: 8px;
 $rts-offset-md: 16px;
@@ -1042,6 +1186,7 @@ $rts-new-default-text-size: 16px;
   padding-right: $rts-messenger-header-height;
   overflow: hidden;
   background-color: $rts-main-bg-color-light;
+  border-bottom: 1px solid $rts-new-secondary-bg-color-light;
 
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -1072,6 +1217,10 @@ $rts-new-default-text-size: 16px;
     }
   }
 
+  &.rtsee-chat-header-unread {
+    padding-left: $rts-offset-lg;
+  }
+
   .rtsee-messenger-header-opened-chat-info {
     position: relative;
     padding: $rts-offset-sm $rts-messenger-header-height $rts-offset-sm $rts-offset-sm;
@@ -1100,7 +1249,7 @@ $rts-new-default-text-size: 16px;
       }
 
       .rtsee-messenger-profile-header-placeholder {
-        padding-top: 100%;
+        padding-top: 65%;
         height: unset;
         position: relative;
 
@@ -1110,6 +1259,7 @@ $rts-new-default-text-size: 16px;
           bottom: $rts-offset-sm;
           color: $rts-font-color-dbg-light;
           z-index: 2;
+          text-shadow: 1px 1px 2px black;
         }
       }
 
@@ -1136,9 +1286,10 @@ $rts-new-default-text-size: 16px;
 
     .unread-count {
       background: $rts-new-primary-color;
-      padding: $rts-new-offset-xsm / 2;
-      border-radius: $rts-new-border-radius-rounded;
-      color: $rts-main-bg-color-light;
+      padding: (($rts-new-offset-xsm) / 2 - 1) $rts-new-offset-xsm / 2 ;
+      border-radius: 50%;
+      width: 20px;
+      color: $rts-font-color-dbg-light;
       margin-left: 2px;
     }
   }
@@ -1170,10 +1321,11 @@ $rts-new-default-text-size: 16px;
 
   .rtsee-messenger-profile-data-container {
     opacity: 0;
+    position: relative;
     transition: opacity 0.2s;
   }
 
-  .rtsee-messenger-menu-toggle {
+  .rtsee-messenger-menu-toggle, .rtsee-messenger-fold-toggle {
     position: absolute;
     right: 0;
     top: 0;
@@ -1262,6 +1414,7 @@ $rts-new-default-text-size: 16px;
 
 
 $rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
+$rtsee-chat-input-height: 40px;
 
 $rts-offset-sm: 8px;
 $rts-offset-md: 16px;
@@ -1319,7 +1472,7 @@ $rts-new-default-text-size: 16px;
 
 .rtsee-chat-input {
   height: 100%;
-  padding-right: $rts-messenger-header-height;
+  padding-right: $rtsee-chat-input-height;
   position: relative;
   overflow: hidden;
 
@@ -1332,8 +1485,14 @@ $rts-new-default-text-size: 16px;
       display: none;
     }
 
+    .rtsee-chat-input-form {
+      height: 100%;
+      overflow: hidden;
+    }
+
     .rtsee-chat-input-field {
       width: 100%;
+      max-height: $rtsee-chat-input-height;
       border: none;
       outline: none;
       resize: none;
@@ -1351,7 +1510,7 @@ $rts-new-default-text-size: 16px;
     right: 0;
     top: 0;
     height: 100%;
-    width: $rts-messenger-header-height;
+    width: $rtsee-chat-input-height;
     background: none;
     border: none;
     outline: none;
@@ -1424,6 +1583,10 @@ $rts-new-default-text-size: 16px;
     width: 20px;
     float: right;
     color: $rts-new-primary-color;
+
+    &.showing-status-inside-chat {
+      color: $rts-font-color-dbg-light;
+    }
   }
 
   .rtsee-messenger-message-time {
@@ -1489,6 +1652,7 @@ $rts-new-default-text-size: 16px;
 
 
 $rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
+$rtsee-chat-input-height: 40px;
 
 $rts-offset-sm: 8px;
 $rts-offset-md: 16px;
@@ -1558,6 +1722,79 @@ $search-input-bg-color: #F8F8F8;
   }
 }
 
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
+
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-font-color-dbg-light: #ffffff;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+$rts-message-status-width: 69px;
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
+// new design-variables
+
+$rts-new-offset-xsm: 8px;
+$rts-new-offset-sm: 12px;
+$rts-new-offset-md: 18px;
+
+$rts-new-user-avatar-d-sm: 40px;
+
+$rts-new-default-border-radius: 8px;
+$rts-new-border-radius-rounded: 12px;
+
+$rts-new-primary-color: #ea7b00;
+$rts-new-active-bg-color-light: #feefe0;
+$rts-new-secondary-bg-color-light: #e8e9eb;
+
+
+$rts-new-small-text-size: 12px;
+$rts-new-default-text-size: 16px;
+
+// end of new design-variables
+
+
+$rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
+$rtsee-chat-input-height: 40px;
+
+
+.rtsee-call-widget {
+  .rtsee-join-call-btn {
+    border: none;
+    background: $rts-new-primary-color;
+    color: $rts-font-color-dbg-light;
+    border-radius: $rts-new-border-radius-rounded;
+    padding: $rts-new-offset-sm $rts-new-offset-md;
+
+    &.rtsee-join-your-call-btn {
+      background: $rts-font-color-dbg-light;
+      color: $rts-new-primary-color;
+    }
+  }
+}
+
 
 
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.45",
+  "version": "0.0.47",
   "name": "@rtsee/ngx",
   "module": "./dist/ngx/esm2022/public-api.mjs",
   "types": "./dist/ngx/index.d.ts",
@@ -34,10 +34,10 @@
     "@angular/platform-browser": "~16.2.2",
     "@angular/platform-browser-dynamic": "~16.2.2",
     "@angular/router": "~16.2.2",
-    "@rtsee/common": "^0.0.15",
-    "@rtsee/conference": "^0.0.16",
+    "@rtsee/common": "^0.0.17",
+    "@rtsee/conference": "^0.0.18",
     "@rtsee/events-dashboard": "./packages/@rtsee/events-dashboard",
-    "@rtsee/messenger": "^0.0.49",
+    "@rtsee/messenger": "^0.0.51",
     "dayjs": "^1.11.9",
     "ngx-autosize": "^2.0.4",
     "ngx-infinite-scroll": "16.0.0",
@@ -60,5 +60,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f8d01ec276d6ef7010b473e59663f98b6fb602bd"
+  "gitHead": "3edfc8fb3e8212feed94909d2d62686ec69507f2"
 }