From 9c300d40f6fcdc825beeed7e33e74309c165c5cf Mon Sep 17 00:00:00 2001 From: Jon Staab Date: Tue, 15 Oct 2024 15:52:30 -0700 Subject: [PATCH] Maybe get dialogs behaving properly --- src/app.css | 4 -- src/app/components/AppContainer.svelte | 14 ++--- src/app/components/ChannelMessage.svelte | 12 ++-- src/app/components/ChannelThread.svelte | 2 +- src/app/components/ChatMessage.svelte | 13 ++-- src/app/components/ChatMessageMenu.svelte | 8 +-- src/app/components/EventCreate.svelte | 3 +- src/app/components/EventInfo.svelte | 6 +- src/app/components/Landing.svelte | 41 +++++++------ src/app/components/LogIn.svelte | 4 +- src/app/components/ModalContainer.svelte | 68 ++++++++------------- src/app/components/PeopleItem.svelte | 4 +- src/app/components/SignUp.svelte | 4 +- src/app/components/SpaceJoin.svelte | 4 +- src/app/components/ThreadCreate.svelte | 3 +- src/app/modal.ts | 25 +++++--- src/app/state.ts | 4 +- src/lib/components/Dialog.svelte | 18 ++++++ src/lib/components/Drawer.svelte | 42 ++++--------- src/lib/components/ModalFooter.svelte | 2 +- src/lib/transition.ts | 72 ++++++++++++----------- src/routes/+layout.svelte | 5 -- 22 files changed, 169 insertions(+), 189 deletions(-) create mode 100644 src/lib/components/Dialog.svelte diff --git a/src/app.css b/src/app.css index 09bf279f..d46f322f 100644 --- a/src/app.css +++ b/src/app.css @@ -140,10 +140,6 @@ @apply shadow-[0_20px_25px_-5px_rgb(0,0,0,0.1)_0_8px_10px_-6px_rgb(0,0,0,0.1)]; } -.modal-box .z-feature { - @apply z-modal-feature; -} - /* tiptap */ .input-editor, diff --git a/src/app/components/AppContainer.svelte b/src/app/components/AppContainer.svelte index 6de12224..8f1d5ab6 100644 --- a/src/app/components/AppContainer.svelte +++ b/src/app/components/AppContainer.svelte @@ -1,17 +1,17 @@
- - {#if $pubkey} + {#if $pubkey} + - {:else} - - {/if} - + + {:else} + + {/if}
diff --git a/src/app/components/ChannelMessage.svelte b/src/app/components/ChannelMessage.svelte index e555f9d5..d400445a 100644 --- a/src/app/components/ChannelMessage.svelte +++ b/src/app/components/ChannelMessage.svelte @@ -14,7 +14,6 @@ import type {PublishStatusData} from "@welshman/app" import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util" import {repository} from "@welshman/app" - import {slideAndFade} from '@lib/transition' import Icon from "@lib/components/Icon.svelte" import Avatar from "@lib/components/Avatar.svelte" import Button from "@lib/components/Button.svelte" @@ -41,7 +40,10 @@ const rootHints = [rootTag?.[2]].filter(Boolean) as string[] const rootEvent = rootId ? deriveEvent(rootId, rootHints) : readable(null) const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length] - const ps = throttled(300, derived(publishStatusData, $m => Object.values($m[event.id] || {}))) + const ps = throttled( + 300, + derived(publishStatusData, $m => Object.values($m[event.id] || {})), + ) const showInfo = () => pushModal(EventInfo, {event}) @@ -94,7 +96,7 @@

{/if} -
+
{#if showPubkey} {:else} @@ -128,7 +130,7 @@
{#if $reactions.length > 0 || $zaps.length > 0}
- {#each groupBy(e => e.content, uniqBy(e => e.pubkey + e.content, $reactions)).entries() as [content, events]} + {#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]} {@const isOwn = events.some(e => e.pubkey === $pubkey)} {@const onClick = () => onReactionClick(content, events)}
-
+
{#if showPubkey}
{#if $reactions.length > 0 || $zaps.length > 0} -
+
{#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]} {@const isOwn = events.some(e => e.pubkey === $pubkey)} {@const onClick = () => onReactionClick(content, events)} diff --git a/src/app/components/ChatMessageMenu.svelte b/src/app/components/ChatMessageMenu.svelte index c1dd01e2..7ef7a334 100644 --- a/src/app/components/ChatMessageMenu.svelte +++ b/src/app/components/ChatMessageMenu.svelte @@ -1,9 +1,9 @@ -
-
-

Welcome to Flotilla!

-

The chat app built for sovereign communities.

+ +
+
+

Welcome to Flotilla!

+

The chat app built for sovereign communities.

+
+ +
- - -
+ diff --git a/src/app/components/LogIn.svelte b/src/app/components/LogIn.svelte index 2ed492ed..7ad11dc1 100644 --- a/src/app/components/LogIn.svelte +++ b/src/app/components/LogIn.svelte @@ -9,7 +9,7 @@ import SignUp from "@app/components/SignUp.svelte" import InfoNostr from "@app/components/InfoNostr.svelte" import LogInInfoRemoteSigner from "@app/components/LogInInfoRemoteSigner.svelte" - import {pushModal, clearModal} from "@app/modal" + import {pushModal, clearModals} from "@app/modal" import {pushToast} from "@app/toast" import {loadUserData} from "@app/commands" @@ -31,7 +31,7 @@ await loadUserData(session.pubkey, {relays}) pushToast({message: "Successfully logged in!"}) - clearModal() + clearModals() } const loginWithNip46 = withLoading(async () => { diff --git a/src/app/components/ModalContainer.svelte b/src/app/components/ModalContainer.svelte index c1726973..8b9ec74e 100644 --- a/src/app/components/ModalContainer.svelte +++ b/src/app/components/ModalContainer.svelte @@ -1,56 +1,34 @@ - - {#if modal && !modal.options?.drawer} - {#key hash} -
- -
- {/key} - - {/if} -
-
- - {#if modal && modal.options?.drawer} - {#key hash} + + +{#if hashIsValid && modal?.options?.drawer} + + {#key modal.id} {/key} - {/if} - + +{:else if hashIsValid && modal} + + {#key modal.id} + + {/key} + +{/if} diff --git a/src/app/components/PeopleItem.svelte b/src/app/components/PeopleItem.svelte index 70b5b261..c379108d 100644 --- a/src/app/components/PeopleItem.svelte +++ b/src/app/components/PeopleItem.svelte @@ -54,9 +54,9 @@ {@const following = getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)}
diff --git a/src/lib/components/Drawer.svelte b/src/lib/components/Drawer.svelte index 5a432cc5..c1102171 100644 --- a/src/lib/components/Drawer.svelte +++ b/src/lib/components/Drawer.svelte @@ -1,37 +1,17 @@ -
- -
-
-
- -
- -
+
+
diff --git a/src/lib/components/ModalFooter.svelte b/src/lib/components/ModalFooter.svelte index 00262122..927beacb 100644 --- a/src/lib/components/ModalFooter.svelte +++ b/src/lib/components/ModalFooter.svelte @@ -1,3 +1,3 @@ -
+
diff --git a/src/lib/transition.ts b/src/lib/transition.ts index fe8e6444..d3084f4c 100644 --- a/src/lib/transition.ts +++ b/src/lib/transition.ts @@ -1,5 +1,5 @@ // @ts-nocheck -import {cubicOut} from 'svelte/easing' +import {cubicOut} from "svelte/easing" import type {FlyParams} from "svelte/transition" import {fly as baseFly} from "svelte/transition" @@ -9,38 +9,40 @@ export const fly = (node: Element, params?: FlyParams | undefined) => baseFly(node, {y: 20, ...params}) // Copy-pasted and tweaked from slide source code -export function slideAndFade(node: any, { delay = 0, duration = 400, easing = cubicOut, axis = 'y' } = {}) { - const style = getComputedStyle(node) - const opacity = +style.opacity - const primary_property = axis === 'y' ? 'height' : 'width' - const primary_property_value = parseFloat(style[primary_property]) - const secondary_properties = axis === 'y' ? ['top', 'bottom'] : ['left', 'right'] - const capitalized_secondary_properties = secondary_properties.map( - (e: string) => `${e[0].toUpperCase()}${e.slice(1)}` - ) - const padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`]) - const padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`]) - const margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`]) - const margin_end_value = parseFloat(style[`margin${capitalized_secondary_properties[1]}`]) - const border_width_start_value = parseFloat( - style[`border${capitalized_secondary_properties[0]}Width`] - ) - const border_width_end_value = parseFloat( - style[`border${capitalized_secondary_properties[1]}Width`] - ) - return { - delay, - duration, - easing, - css: (t: number) => - 'overflow: hidden;' + - `opacity: ${t};` + - `${primary_property}: ${t * primary_property_value}px;` + - `padding-${secondary_properties[0]}: ${t * padding_start_value}px;` + - `padding-${secondary_properties[1]}: ${t * padding_end_value}px;` + - `margin-${secondary_properties[0]}: ${t * margin_start_value}px;` + - `margin-${secondary_properties[1]}: ${t * margin_end_value}px;` + - `border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` + - `border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;` - } +export function slideAndFade( + node: any, + {delay = 0, duration = 400, easing = cubicOut, axis = "y"} = {}, +) { + const style = getComputedStyle(node) + const primary_property = axis === "y" ? "height" : "width" + const primary_property_value = parseFloat(style[primary_property]) + const secondary_properties = axis === "y" ? ["top", "bottom"] : ["left", "right"] + const capitalized_secondary_properties = secondary_properties.map( + (e: string) => `${e[0].toUpperCase()}${e.slice(1)}`, + ) + const padding_start_value = parseFloat(style[`padding${capitalized_secondary_properties[0]}`]) + const padding_end_value = parseFloat(style[`padding${capitalized_secondary_properties[1]}`]) + const margin_start_value = parseFloat(style[`margin${capitalized_secondary_properties[0]}`]) + const margin_end_value = parseFloat(style[`margin${capitalized_secondary_properties[1]}`]) + const border_width_start_value = parseFloat( + style[`border${capitalized_secondary_properties[0]}Width`], + ) + const border_width_end_value = parseFloat( + style[`border${capitalized_secondary_properties[1]}Width`], + ) + return { + delay, + duration, + easing, + css: (t: number) => + "overflow: hidden;" + + `opacity: ${t};` + + `${primary_property}: ${t * primary_property_value}px;` + + `padding-${secondary_properties[0]}: ${t * padding_start_value}px;` + + `padding-${secondary_properties[1]}: ${t * padding_end_value}px;` + + `margin-${secondary_properties[0]}: ${t * margin_start_value}px;` + + `margin-${secondary_properties[1]}: ${t * margin_end_value}px;` + + `border-${secondary_properties[0]}-width: ${t * border_width_start_value}px;` + + `border-${secondary_properties[1]}-width: ${t * border_width_end_value}px;`, + } } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 350e24ee..282f5261 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -2,9 +2,6 @@ import "@src/app.css" import {onMount} from "svelte" import {get} from "svelte/store" - import {page} from "$app/stores" - import {goto} from "$app/navigation" - import {browser} from "$app/environment" import {sleep, take, sortBy, ago, now, HOUR} from "@welshman/lib" import type {TrustedEvent} from "@welshman/util" import { @@ -26,7 +23,6 @@ db, initStorage, repository, - session, pubkey, publishStatusData, plaintext, @@ -39,7 +35,6 @@ import * as app from "@welshman/app" import AppContainer from "@app/components/AppContainer.svelte" import ModalContainer from "@app/components/ModalContainer.svelte" - import {modals, clearModal} from "@app/modal" import {theme} from "@app/theme" import {INDEXER_RELAYS} from "@app/state" import {loadUserData} from "@app/commands"