@chat21/chat21-web-widget 5.1.0-rc25 → 5.1.0-rc27

package/CHANGELOG.md

@@ -6,6 +6,14 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 5.1.0-rc27
+- **bug-fixed**: minor fix on avatar image and textarea style 
+
+# 5.1.0-rc26
+- **added**: buttons attachments aligned to bubble message
+- **changed**: enable new textarea style if width is grather than 688px
+- **bug-fixed**: fullscreenMode is not enabled (css class override fullscreen style)
+
 # 5.1.0-rc25
 - **added**: allowedUploadExtentions property from api call
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@chat21/chat21-web-widget",
   "author": "Tiledesk SRL",
-  "version": "5.1.0-rc25",
+  "version": "5.1.0-rc27",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

package/src/app/component/conversation-detail/conversation/conversation.component.scss

@@ -13,40 +13,6 @@
     bottom: var(--chat-footer-height) !important
 }
 
-@media(min-width:688px){
-    :host-context(#chat21-conversations.full-screen-mode){
-        --button-in-msg-padding: 10px 16px;
-        #chat21-footer{
-            left: 20%;
-            right: 20%;
-        }
-    
-        chat-conversation-content ::ng-deep{
-            .attachment_container,
-            .buttons-wrapper {
-                justify-content: flex-start;
-            }
-    
-            .button-in-message{
-                padding: 14px 22px !important
-            }
-    
-        }
-    
-        chat-conversation-footer ::ng-deep {
-            .textarea-container {
-                padding: 8px 24px;
-                background-color: var(--chat-footer-background-color);
-                border-radius: 28px;
-            }
-            #hiddenFooter,
-            #emoji-mart-container {
-                bottom: calc(100% + 10px)
-            }
-        }
-    }
-}
-
 // ============= CSS #chat21-conversation-component ================= //
 #chat21-conversation-component {
     // background-color: #ffffff;
@@ -215,4 +181,48 @@ dialog:-internal-dialog-in-top-layer{
             }
         }
     }
+}
+
+@media(min-width:688px){
+    
+    #chat21-footer{
+        left: 20%;
+        right: 20%;
+    }
+
+    :host-context(#chat21-conversations.full-screen-mode){
+        --button-in-msg-padding: 10px 16px;
+        
+        chat-conversation-content ::ng-deep{
+            .attachment_container,
+            .buttons-wrapper {
+                justify-content: flex-start;
+            }
+    
+            .button-in-message{
+                padding: 14px 22px !important
+            }
+
+            chat-message-attachment {
+                margin: auto 20px auto 10px; //0 20px 4px 10px;
+                margin-left: calc( var(--avatar-width) + 10px )
+
+            }
+    
+        }
+     
+    }
+
+    chat-conversation-footer ::ng-deep {
+        .textarea-container {
+            padding: 8px 24px;
+            background-color: var(--chat-footer-background-color);
+            border-radius: 28px;
+        }
+        #hiddenFooter,
+        #emoji-mart-container {
+            bottom: calc(100% + 10px)
+        }
+    }
+
 }

package/src/app/component/conversation-detail/conversation/conversation.component.ts

@@ -1409,9 +1409,9 @@ export class ConversationComponent implements OnInit, AfterViewInit, OnChanges {
     this.logger.log('[CONV-COMP] ----> FILE - (dragleave) drag ev ', event)
     if (event.dataTransfer && event.dataTransfer.files) {
       const files = event.dataTransfer.files;
-      const canUploadFile = checkAcceptedFile(files[0].type, this.appConfigService.getConfig().fileUploadAccept)
+      const canUploadFile = checkAcceptedFile(files[0].type, this.g.fileUploadAccept)
       if(!canUploadFile){
-        this.logger.error('[IMAGE-UPLOAD] detectFiles: can not upload current file type--> NOT ALLOWED', this.appConfigService.getConfig().fileUploadAccept)
+        this.logger.error('[IMAGE-UPLOAD] detectFiles: can not upload current file type--> NOT ALLOWED', this.g.fileUploadAccept)
         return;
       }
     }

package/src/app/component/conversation-detail/conversation-content/conversation-content.component.html

@@ -63,7 +63,7 @@
                               [ngClass]="{'slide-in-left': false}"
                               [class.no-background]="(isImage(message) || isFrame(message) || isCarousel(message)) && ((message?.text && message?.text.trim() === '') || !message?.text)"  
                               [class.emoticon]="isEmojii(message?.text)"
-                              [style.margin-left]="isSameSender(message?.sender, i)? '50px': null"
+                              [style.margin-left]="isSameSender(message?.sender, i)? 'calc(var(--avatar-width) + 10px)': null"
                               [ngStyle]="{'background': stylesMap.get('bubbleReceivedBackground'), 'color': stylesMap.get('bubbleReceivedTextColor')}"
                               [isSameSender]="isSameSender(message?.sender, i)"
                               [message]="message"

package/src/app/component/message/avatar/avatar.component.scss

@@ -3,10 +3,10 @@
     position: relative;
     padding: 0;
     margin: 0;
-    height: 40px;
-    width: 40px;
-    min-height: 40px;
-    min-width: 40px;
+    height: var(--avatar-height);
+    width: var(--avatar-width);
+    min-height: var(--avatar-height);
+    min-width: var(--avatar-width);
     line-height: 40px;
     border-radius: 50%;
     overflow: hidden;

package/src/app/providers/global-settings.service.ts

@@ -367,15 +367,19 @@ export class GlobalSettingsService {
         }
         // console.log('this.globals.fullscreenMode' + this.globals.fullscreenMode);
         if (this.globals.fullscreenMode === true) {
-            // divTiledeskiframe.style.left = 0;
-            // divTiledeskiframe.style.right = 0;
-            // divTiledeskiframe.style.top = 0;
-            // divTiledeskiframe.style.bottom = 0;
-            // divTiledeskiframe.style.width = '100%';
-            // divTiledeskiframe.style.height = '100%';
-            // divTiledeskiframe.style.maxHeight = 'none';
-            // divTiledeskiframe.style.maxWidth = 'none';
-            divTiledeskiframe.classList.add('fullscreen')
+            divTiledeskiframe.style.left = 0;
+            divTiledeskiframe.style.right = 0;
+            divTiledeskiframe.style.top = 0;
+            divTiledeskiframe.style.bottom = 0;
+            divTiledeskiframe.style.width = '100%';
+            divTiledeskiframe.style.height = '100%';
+            divTiledeskiframe.style.maxHeight = 'none';
+            divTiledeskiframe.style.maxWidth = 'none';
+            // divTiledeskiframe.classList.add('fullscreen')
+            divTiledeskiframe.classList.remove('min-size')
+            divTiledeskiframe.classList.remove('max-size')
+            divTiledeskiframe.classList.remove('top-size')
+
         }
     }
 

package/src/app/sass/_variables.scss

@@ -39,19 +39,18 @@
 
     --icon-fill-color: #5f6368;
 
-
     --content-background-color: #fff;
     --content-text-color: var(--black);
 
-
-
     --font-family: 'Roboto','Google Sans', Helvetica, Arial, sans-serif; //Mulish, sans-serif;
     --font-family-bubble-message: 'Roboto','Google Sans', Helvetica, Arial, sans-serif;
     --font-family-callout: 'Helvetica Neue', 'Apple Color Emoji', Helvetica, Arial, sans-serif; 
     --font-family-powered-by: Mulish, sans-serif;
 
-    --font-size-bubble-message: 1.4em
+    --font-size-bubble-message: 1.4em;
 
+    --avatar-height: 40px;
+    --avatar-width: 40px;
 }
 
 $trasp-black:rgba(0,0,0,0.8);

package/src/app/utils/globals.ts

@@ -614,8 +614,8 @@ export class Globals {
       this.align === 'left'?  divTiledeskWidget.style.left = this.mobileMarginX : divTiledeskWidget.style.right = this.mobileMarginX; 
     }
 
-    //customize position for 'tiledeskdiv' for desktop
-    if(isOpen && !this.isMobile && divTiledeskWidget && this.size){
+    //customize position for 'tiledeskdiv' for desktop if fullscreenMode is not active
+    if(isOpen && !this.isMobile && !this.fullscreenMode && divTiledeskWidget && this.size){
       divTiledeskWidget.classList.add(this.size + '-size')
     }
 

package/src/iframe-style.css

@@ -45,10 +45,11 @@
 
 #tiledeskdiv.top-size {
     position: fixed;
-    /* top: 50%; */
+    top: 0;
+    bottom: 0;
     left: 50%;
-    width: var(--iframeMaxWidth);
-    height: var(--iframeMaxHeight);
+    width: calc( var(--iframeMaxWidth) + 180px);
+    height: 100%; /*var(--iframeMaxHeight);*/
     /* transform: translate(-50%, -50%);   */
     transform: translate(-50%, 0%);  
 }