Fixes the height issue for unread view

chatwoot · Aug 2, 2021 · 6f666c7 · 6f666c7
1 parent 7063cd5
commit 6f666c7
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 2 deletions.
diff --git a/app/javascript/sdk/IFrameHelper.js b/app/javascript/sdk/IFrameHelper.js
@@ -140,7 +140,10 @@ export const IFrameHelper = {
       }
     },
     onLocationChange: ({ referrerURL, referrerHost }) => {
-      IFrameHelper.sendMessage('change-url', { referrerURL, referrerHost });
+      IFrameHelper.sendMessage('change-url', {
+        referrerURL,
+        referrerHost,
+      });
     },
 
     setUnreadMode: message => {
@@ -175,6 +178,19 @@ export const IFrameHelper = {
       const holderEl = document.querySelector('.woot-widget-holder');
       removeClass(holderEl, 'has-unread-view');
     },
+
+    updateIframeHeight: message => {
+      setTimeout(() => {
+        const iframe = IFrameHelper.getAppFrame();
+        const updatedIframeHeight = message.isFixedHeight
+          ? `${iframe.contentWindow.document.body.scrollHeight}px`
+          : '100%';
+        iframe.setAttribute(
+          'style',
+          `height: ${updatedIframeHeight} !important`
+        );
+      }, 100);
+    },
   },
   pushEvent: eventName => {
     IFrameHelper.sendMessage('push-event', { eventName });

diff --git a/app/javascript/sdk/sdk.js b/app/javascript/sdk/sdk.js
@@ -132,6 +132,7 @@ export const SDK_CSS = `.woot-widget-holder {
     right: 0;
     width: auto;
     bottom: 0;
+    top: auto;
   }
  .woot-widget-holder.has-unread-view.woot-elements--left {
     left: 0;

diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue
@@ -97,6 +97,12 @@ export default {
         label: this.$t('BUBBLE.LABEL'),
       });
     },
+    setIframeHeight(isFixedHeight) {
+      IFrameHelper.sendMessage({
+        event: 'updateIframeHeight',
+        isFixedHeight,
+      });
+    },
     setLocale(locale) {
       const { enabledLanguages } = window.chatwootWebChannel;
       if (enabledLanguages.some(lang => lang.iso_639_1_code === locale)) {
@@ -155,11 +161,13 @@ export default {
           event: 'setUnreadMode',
           unreadMessageCount,
         });
+        this.setIframeHeight(this.isMobile);
       }
     },
     unsetUnreadView() {
       if (this.isIFrame) {
         IFrameHelper.sendMessage({ event: 'resetUnreadMode' });
+        this.setIframeHeight();
       }
     },
     createWidgetEvents(message) {

diff --git a/app/javascript/widget/assets/scss/woot.scss b/app/javascript/widget/assets/scss/woot.scss
@@ -20,9 +20,14 @@ body {
 
 .woot-widget-wrap {
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
 }
 
 .is-mobile {
+  display: block;
+
   .actions {
     .close-button {
       display: block !important;

diff --git a/app/javascript/widget/views/Unread.vue b/app/javascript/widget/views/Unread.vue
@@ -122,7 +122,7 @@ export default {
 
 .unread-wrap {
   width: 100%;
-  height: 100%;
+  height: auto;
   background: transparent;
   display: flex;
   flex-direction: column;