feat: show full-screen mobile popover

radixdlt · Sep 13, 2023 · 994de40 · 994de40
1 parent e708d96
commit 994de40
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 9 deletions.
diff --git a/src/components/connect-button.ts b/src/components/connect-button.ts
@@ -139,6 +139,10 @@ export class ConnectButton extends LitElement {
       )
   }
 
+  private closePopover() {
+    this.showPopover = false
+  }
+
   private connectButtonTemplate() {
     const buttonText = this.connected ? this.personaLabel : 'Connect'
 
@@ -213,7 +217,15 @@ export class ConnectButton extends LitElement {
       mode="${this.mode}"
       ?connected=${this.connected}
       ?compact=${this.compact}
-      class=${classMap({ popover: true, 'show-popover': this.showPopover })}
+      ?isMobile=${this.isMobile}
+      @onClosePopover=${() => {
+        this.closePopover()
+      }}
+      class=${classMap({
+        popover: true,
+        'show-popover': this.showPopover,
+        mobile: this.isMobile,
+      })}
     >
       ${this.connected
         ? html`
@@ -234,7 +246,7 @@ export class ConnectButton extends LitElement {
   }
 
   render() {
-    return html` ${this.connectButtonTemplate()} ${this.popoverTemplate()} `
+    return html`${this.connectButtonTemplate()} ${this.popoverTemplate()}`
   }
 
   static styles = css`
@@ -290,12 +302,24 @@ export class ConnectButton extends LitElement {
       --color-grey-4: #e2e5ed;
       --color-grey-5: #f4f5f9;
     }
+
     .popover {
       position: absolute;
       top: calc(100% + 0.5rem);
       right: 0;
     }
 
+    .mobile.popover {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: unset;
+      height: 100%;
+      width: 100%;
+      box-sizing: border-box;
+      padding: 16px;
+    }
+
     @-webkit-keyframes slide-bottom {
       0% {
         -webkit-transform: translateY(-20px);

diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts
@@ -1,9 +1,10 @@
-import { html, css, LitElement } from 'lit'
+import { html, css, LitElement, unsafeCSS } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { themeCSS } from '../../styles/theme'
 import '../tabs-menu/tabs-menu'
 import { encodeBase64 } from '../../helpers/encode-base64'
 import { RadixButtonMode } from '../../_types'
+import CloseIcon from '../../assets/icon-close.svg'
 
 @customElement('radix-popover')
 export class RadixPopover extends LitElement {
@@ -23,6 +24,11 @@ export class RadixPopover extends LitElement {
   })
   compact = false
 
+  @property({
+    type: Boolean,
+  })
+  isMobile = false
+
   @state()
   private height = 0
 
@@ -49,6 +55,15 @@ export class RadixPopover extends LitElement {
     this.resizeObserver?.unobserve(this)
   }
 
+  closePopover() {
+    this.dispatchEvent(
+      new CustomEvent('onClosePopover', {
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+
   drawPopover() {
     const fill = this.mode === 'light' ? '#D9D9D9' : '#808080'
     const height = this.height
@@ -120,12 +135,24 @@ export class RadixPopover extends LitElement {
   }
 
   render() {
-    return html`<style>
-        :host {
-          background-image: url(${this.drawPopover()});
-        }
-      </style>
-      <div id="radix-popover-content"><slot /></div>`
+    return this.isMobile
+      ? html`<div id="radix-mobile-popover-content">
+          <button
+            id="close-button"
+            @click=${() => {
+              this.closePopover()
+            }}
+          ></button>
+          <slot />
+        </div>`
+      : html`<style>
+            :host {
+              background-image: url(${this.drawPopover()});
+            }
+          </style>
+          <div id="radix-popover-content">
+            <slot />
+          </div>`
   }
 
   static styles = [
@@ -142,6 +169,11 @@ export class RadixPopover extends LitElement {
         // TODO backdrop-filter: blur(30px);
       }
 
+      :host(.mobile) {
+        background-color: var(--radix-popover-background);
+        width: 100vw;
+      }
+
       #radix-popover-content {
         width: 344px;
         display: flex;
@@ -151,6 +183,27 @@ export class RadixPopover extends LitElement {
         overflow: auto;
         min-height: 130px;
       }
+      #radix-mobile-popover-content {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: column;
+        overflow: auto;
+        min-height: 130px;
+      }
+
+      #close-button {
+        -webkit-mask-image: url(${unsafeCSS(CloseIcon)});
+        mask-image: url(${unsafeCSS(CloseIcon)});
+        background-color: var(--radix-card-text-color);
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        right: 1rem;
+      }
+      #close-button:hover {
+        opacity: 0.8;
+      }
     `,
   ]
 }