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

package/CHANGELOG.md

@@ -6,6 +6,11 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 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-rc26",
   "license": "MIT",
   "homepage": "https://www.tiledesk.com",
   "repository": {

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

@@ -30,21 +30,30 @@
             .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)
-            }
+        
+    }
+
+    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 ================= //

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,12 +39,9 @@
 
     --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; 
@@ -52,6 +49,8 @@
 
     --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%);  
 }