From d9642f1ee8b773560696d0004328780b4e9a15cc Mon Sep 17 00:00:00 2001
From: NullVoxPopuli <199018+NullVoxPopuli@users.noreply.github.com>
Date: Sat, 8 Mar 2025 13:05:48 -0500
Subject: [PATCH] Improve share dialog
---
apps/repl/app/components/limber/share.css | 13 ++++++++++++-
apps/repl/app/components/limber/share.gts | 21 ++++++++++++++++-----
2 files changed, 28 insertions(+), 6 deletions(-)
diff --git a/apps/repl/app/components/limber/share.css b/apps/repl/app/components/limber/share.css
index 5588b4b83..c1de8976b 100644
--- a/apps/repl/app/components/limber/share.css
+++ b/apps/repl/app/components/limber/share.css
@@ -68,10 +68,21 @@ button[data-share-button] {
}
}
dialog.preem {
- border-radius: 0.25rem;
+ width: 100dvw;
+ background: transparent;
+ display: flex;
+ justify-content: center;
+ overflow: hidden;
+
animation: var(--animation-slide-in-up), var(--animation-fade-in);
animation-timing-function: var(--ease-out-5);
animation-duration: 0.2s;
+
+ > .modal-facade {
+ background: white;
+ border-radius: 0.25rem;
+ width: max-content;
+ }
}
dialog.preem::backdrop {
backdrop-filter: blur(1px);
diff --git a/apps/repl/app/components/limber/share.gts b/apps/repl/app/components/limber/share.gts
index 7311b8786..3bd0e6de2 100644
--- a/apps/repl/app/components/limber/share.gts
+++ b/apps/repl/app/components/limber/share.gts
@@ -33,8 +33,12 @@ export const Share = <template>
</button>
<m.Dialog class="preem" {{focusTrap isActive=m.isOpen}}>
+ <SaveBanner @isShowing={{isShowing.current}} />
+
{{#if m.isOpen}}
- <ShareModal @onCancel={{m.close}} />
+ <div class="modal-facade">
+ <ShareModal @onCancel={{m.close}} />
+ </div>
{{/if}}
</m.Dialog>
</Modal>
@@ -42,8 +46,6 @@ export const Share = <template>
class ShareModal extends Component<{ onCancel: () => void }> {
<template>
- <SaveBanner @isShowing={{isShowing.current}} />
-
<header><h2>Share</h2>
<FlatButton {{on "click" @onCancel}} aria-label="close this share modal">
<FaIcon @size="xs" @icon={{faXmark}} class="aspect-square" />
@@ -127,8 +129,17 @@ class ShareModal extends Component<{ onCancel: () => void }> {
try {
await this.toClipboard();
- } catch {
- // TODO: Toast message
+ } catch (e) {
+ if (typeof e === 'object' && e !== null) {
+ if ('message' in e && typeof e.message === 'string') {
+ this.error = e.message;
+
+ return;
+ }
+ }
+
+ console.error(e);
+ this.error = `An unknown error occurred. Details in the console. If you have time, a bug report would be appreciated <3`;
}
};
}