sixside/flotilla
1
0
Fork 0
forked from coracle/flotilla
Code Pull Requests Activity

Re work modal scrolling

Browse Source
This commit is contained in:
Jon Staab
2026-01-30 14:14:12 -08:00
parent 4169db33e6
commit 38c0a9d403
75 changed files with 2340 additions and 2030 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/SpaceJoin.svelte
+36 -28
View File
@@ -12,14 +12,20 @@
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import Spinner from "@lib/components/Spinner.svelte"
import ModalHeader from "@lib/components/ModalHeader.svelte"
import Modal from "@lib/components/Modal.svelte"
import ModalBody from "@lib/components/ModalBody.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte"
import FieldInline from "@lib/components/FieldInline.svelte"
import StatusIndicator from "@lib/components/StatusIndicator.svelte"
import RelaySummary from "@app/components/RelaySummary.svelte"
import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
import SpaceAccessRequest from "@app/components/SpaceAccessRequest.svelte"
import {attemptRelayAccess, addSpaceMembership, broadcastUserData, setSpaceNotifications} from "@app/core/commands"
import {
attemptRelayAccess,
addSpaceMembership,
broadcastUserData,
setSpaceNotifications,
} from "@app/core/commands"
import {relaysMostlyRestricted, deriveSpaceMembers, notificationSettings} from "@app/core/state"
import {pushModal} from "@app/util/modal"
import {pushToast} from "@app/util/toast"
@@ -83,45 +89,47 @@
})
</script>
<form class="column gap-4" onsubmit={preventDefault(join)}>
<RelaySummary {url} />
<div class="card2 card2-sm bg-alt">
<div class="flex justify-between gap-12">
<div class="col-1">
<strong>Enable notifications for this space</strong>
<p class="text-xs opacity-75">
Get notified about new activity in this space. You can change this later in settings.
</p>
<Modal tag="form" onsubmit={preventDefault(join)}>
<ModalBody>
<RelaySummary {url} />
<div class="card2 card2-sm bg-alt">
<div class="flex justify-between gap-12">
<div class="col-1">
<strong>Enable notifications for this space</strong>
<p class="text-xs opacity-75">
Get notified about new activity in this space. You can change this later in settings.
</p>
</div>
<input type="checkbox" class="toggle toggle-primary" bind:checked={notifications} />
</div>
<input type="checkbox" class="toggle toggle-primary" bind:checked={notifications} />
</div>
</div>
<div class="card2 card2-sm bg-alt flex flex-col gap-2">
<div class="flex justify-between">
<strong>Connection Status</strong>
<div class="card2 card2-sm bg-alt flex flex-col gap-2">
<div class="flex justify-between">
<strong>Connection Status</strong>
{#if error}
<StatusIndicator class="bg-error">Error</StatusIndicator>
{:else}
<SocketStatusIndicator {url} />
{/if}
</div>
{#if error}
<StatusIndicator class="bg-error">Error</StatusIndicator>
{:else}
<SocketStatusIndicator {url} />
<div class="flex items-center gap-2">
<Icon icon={DangerTriangle} />
<p class="text-sm opacity-75">{error}</p>
</div>
{/if}
</div>
{#if error}
<div class="flex items-center gap-2">
<Icon icon={DangerTriangle} />
<p class="text-sm opacity-75">{error}</p>
</div>
{/if}
</div>
</ModalBody>
<ModalFooter>
<Button class="btn btn-link" onclick={back} disabled={loading}>
<Icon icon={AltArrowLeft} />
Go back
</Button>
<Button type="submit" class="btn btn-primary" disabled={loading}>
<Spinner loading={loading}>
<Spinner {loading}>
{error ? "Request Access" : "Join Space"}
</Spinner>
<Icon icon={AltArrowRight} />
</Button>
</ModalFooter>
</form>
</Modal>