fix: flickering popover

radixdlt · Aug 8, 2023 · 2843ab4 · 2843ab4
1 parent d90e101
commit 2843ab4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 4 deletions.
diff --git a/src/components/connect-button.ts b/src/components/connect-button.ts
@@ -15,6 +15,7 @@ import {
   RadixButtonTheme,
   RequestItem,
 } from '../_types'
+import { classMap } from 'lit-html/directives/class-map.js'
 
 @customElement(config.elementTag)
 export class ConnectButton extends LitElement {
@@ -215,7 +216,7 @@ export class ConnectButton extends LitElement {
       mode="${this.mode}"
       ?connected=${this.connected}
       ?compact=${this.state.compact}
-      class="popover"
+      class=${classMap({ popover: true, 'show-popover': this.showPopover })}
     >
       ${this.connected
         ? html`
@@ -292,9 +293,41 @@ export class ConnectButton extends LitElement {
     }
     .popover {
       position: absolute;
-      top: calc(100% + 1rem);
+      top: calc(100% + 0.5rem);
       right: 0;
     }
+
+    @-webkit-keyframes slide-bottom {
+      0% {
+        -webkit-transform: translateY(-20px);
+        transform: translateY(-20px);
+      }
+      100% {
+        -webkit-transform: translateY(0px);
+        transform: translateY(0px);
+        opacity: 1;
+      }
+    }
+    @keyframes slide-bottom {
+      0% {
+        -webkit-transform: translateY(-20px);
+        transform: translateY(-20px);
+      }
+      100% {
+        -webkit-transform: translateY(0px);
+        transform: translateY(0px);
+        opacity: 1;
+      }
+    }
+
+    radix-popover {
+      opacity: 0;
+    }
+    radix-popover.show-popover {
+      -webkit-animation: slide-bottom 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)
+        both;
+      animation: slide-bottom 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+    }
   `
 }
 

diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts
@@ -51,11 +51,12 @@ export class RadixPopover extends LitElement {
 
   drawPopover() {
     const fill = this.mode === 'light' ? '#D9D9D9' : '#808080'
-    const height = this.height
+    const minHeight = this.height < 250 ? 250 : this.height
+    const height = minHeight
     const startX = 13
     const startY = 15
     const endX = 440
-    const endY = this.height
+    const endY = height
     const borderRadius = 12
     const halfBorderRadius = borderRadius / 2