fix: improve calculation of when to hide comments button, to account …

…for changes in sidebar style
SuperViz · Feb 25, 2024 · cef92bd · cef92bd
1 parent cade90a
commit cef92bd
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 15 deletions.
diff --git a/src/web-components/comments/components/float-button.ts b/src/web-components/comments/components/float-button.ts
@@ -83,21 +83,46 @@ export class CommentsFloatButton extends WebComponentsBaseElement {
       if (!floatButton) return;
 
       floatButton.setAttribute('style', this.positionStyles);
-
-      const windowSize = window.document.body.getBoundingClientRect().width;
-      const buttonPosition = floatButton.getBoundingClientRect();
-      const sideBarWidth = 320;
-
-      if (!this.commentsPosition || this.commentsPosition === 'left') {
-        this.shouldHide = buttonPosition.x < sideBarWidth;
-        return;
-      }
-
-      this.shouldHide = windowSize - buttonPosition.right < sideBarWidth;
     });
   }
 
+  private calculateIfShouldHide() {
+    const sidebar = document
+      .getElementsByTagName('superviz-comments')[0]
+      ?.shadowRoot.querySelector('.superviz-comments');
+
+    const floatButton = this.shadowRoot.querySelector('.comments__floating-button');
+
+    if (!sidebar || !floatButton) return;
+
+    const {
+      left: sbLeft,
+      right: sbRight,
+      top: sbTop,
+      bottom: sbBottom,
+    } = sidebar.getBoundingClientRect();
+    const {
+      left: fbLeft,
+      right: fbRight,
+      top: fbTop,
+      bottom: fbBottom,
+    } = floatButton.getBoundingClientRect();
+
+    console.log(sbLeft, sbRight, sbTop, sbBottom);
+    console.log(fbLeft, fbRight, fbTop, fbBottom);
+
+    const sidebarHidesTop = sbBottom > fbTop && fbBottom > sbTop;
+    const sidebarHidesBottom = sbTop < fbBottom && fbTop < sbBottom;
+    const sidebarHidesLeft = sbRight > fbLeft && fbRight > sbLeft;
+    const sidebarHidesRight = sbLeft < fbRight && fbLeft < sbRight;
+
+    this.shouldHide =
+      (sidebarHidesBottom || sidebarHidesTop) && (sidebarHidesLeft || sidebarHidesRight);
+  }
+
   protected render() {
+    this.calculateIfShouldHide();
+
     const floatButtonClasses = {
       'comments__floating-button': true,
       'hide-button': !this.isHidden && this.shouldHide,

diff --git a/src/web-components/comments/css/comments.style.ts b/src/web-components/comments/css/comments.style.ts
@@ -8,12 +8,12 @@ export const commentsStyle = css`
     position: fixed;
     color: rgb(var(--sv-gray-700));
     background: rgb(var(--sv-white));
-    top: 0;
+    top: 0px;
     bottom: 0;
     box-shadow: -2px 0 4px 0 rgba(0, 0, 0, 0.1);
     height: 100%;
 
-    z-index: 99;
+    z-index: 100;
   }
 
   .container-close {

diff --git a/src/web-components/dropdown/index.style.ts b/src/web-components/dropdown/index.style.ts
@@ -3,6 +3,7 @@ import { css } from 'lit';
 export const dropdownStyle = css`
   .dropdown {
     position: relative;
+    z-index: 100;
   }
 
   .dropdown-content {

diff --git a/src/web-components/who-is-online/css/dropdown.style.ts b/src/web-components/who-is-online/css/dropdown.style.ts
@@ -62,7 +62,7 @@ export const dropdownStyle = css`
     position: relative;
     display: flex;
     flex-direction: column;
-    z-index: 10;
+    z-index: 100;
   }
 
   .dropdown-list > div {

diff --git a/src/web-components/who-is-online/css/who-is-online-style.ts b/src/web-components/who-is-online/css/who-is-online-style.ts
@@ -12,7 +12,7 @@ export const whoIsOnlineStyle = css`
     display: flex;
     flex-direction: column;
     position: fixed;
-    z-index: 100;
+    z-index: 99;
   }
 
   .who-is-online__presence-control-message__text {