mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
feat: implement grid component
This commit is contained in:
Arman
+1
-1
@@ -23,7 +23,7 @@
|
||||
"@appwrite.io/pink-icons": "0.25.0",
|
||||
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7",
|
||||
"@appwrite.io/pink-legacy": "^1.0.1",
|
||||
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7",
|
||||
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0ad1063",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@sentry/sveltekit": "^8.38.0",
|
||||
"@stripe/stripe-js": "^3.5.0",
|
||||
|
||||
Generated
+9
-9
@@ -21,8 +21,8 @@ importers:
|
||||
specifier: ^1.0.1
|
||||
version: 1.0.1
|
||||
'@appwrite.io/pink-svelte':
|
||||
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7
|
||||
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
|
||||
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0ad1063
|
||||
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0ad1063(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
|
||||
'@popperjs/core':
|
||||
specifier: ^2.11.8
|
||||
version: 2.11.8
|
||||
@@ -215,8 +215,8 @@ packages:
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08ec153}
|
||||
version: 1.2.1
|
||||
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7}
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@0ad10637d6677476315ab8b4cd0c6f168d246b98':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@0ad10637d6677476315ab8b4cd0c6f168d246b98}
|
||||
version: 1.0.0-next.7
|
||||
peerDependencies:
|
||||
svelte: ^4.0.0
|
||||
@@ -236,8 +236,8 @@ packages:
|
||||
'@appwrite.io/pink-legacy@1.0.1':
|
||||
resolution: {integrity: sha512-e5IZx2drqSxgl2WXvmr0eLfg/WiOCzuqQE8oksD+9GoFBkcL9HWvXul5GjFni3RBAN9XFRL3nUExGk4T0H8sFw==}
|
||||
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7}
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0ad1063':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0ad1063}
|
||||
version: 1.0.0-next.85
|
||||
peerDependencies:
|
||||
react-dom: ^18.0.0
|
||||
@@ -4099,7 +4099,7 @@ snapshots:
|
||||
|
||||
'@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@08ec153': {}
|
||||
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca7(svelte@4.2.19)':
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@0ad10637d6677476315ab8b4cd0c6f168d246b98(svelte@4.2.19)':
|
||||
dependencies:
|
||||
svelte: 4.2.19
|
||||
|
||||
@@ -4116,9 +4116,9 @@ snapshots:
|
||||
'@appwrite.io/pink-icons': 1.0.0
|
||||
the-new-css-reset: 1.11.3
|
||||
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@50ea3ca7(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@0ad1063(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
|
||||
dependencies:
|
||||
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@50ea3ca70a483ffd9040f8ce9cb40a8d5f1ee30e(svelte@4.2.19)
|
||||
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@0ad10637d6677476315ab8b4cd0c6f168d246b98(svelte@4.2.19)
|
||||
'@floating-ui/dom': 1.6.13
|
||||
'@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19)
|
||||
'@melt-ui/svelte': 0.86.3(svelte@4.2.19)
|
||||
|
||||
@@ -72,128 +72,149 @@
|
||||
|
||||
<Layout.Stack gap="xl">
|
||||
<Layout.Stack direction="row" alignItems="flex-start">
|
||||
<Layout.Stack direction="row" gap="xl">
|
||||
{#if deployment.status === 'failed'}
|
||||
<Layout.Stack gap="xxs" inline>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-tertiary">
|
||||
Status
|
||||
</Typography.Text>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-primary">
|
||||
<Status status={deployment.status} label={deployment.status} />
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
{:else}
|
||||
<Layout.Stack gap="xxs" inline>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-tertiary">
|
||||
Deployed
|
||||
</Typography.Text>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-primary">
|
||||
<DeploymentCreatedBy {deployment} />
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
{#if proxyRuleList?.total}
|
||||
<Layout.Stack gap="xxs">
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-tertiary">
|
||||
Domains
|
||||
</Typography.Text>
|
||||
<DeploymentDomains domains={proxyRuleList} />
|
||||
</Layout.Stack>
|
||||
{:else if deployment.domain}
|
||||
<Layout.Stack gap="xxs">
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-tertiary">
|
||||
Domains
|
||||
</Typography.Text>
|
||||
<Link
|
||||
external
|
||||
href={`${$protocol}${deployment.domain}`}
|
||||
variant="muted">
|
||||
<Layout.Stack gap="xxs" direction="row" alignItems="center">
|
||||
<Trim alternativeTrim>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-primary">
|
||||
{deployment.domain}
|
||||
</Typography.Text>
|
||||
</Trim>
|
||||
<Icon icon={IconExternalLink} size="s" />
|
||||
</Layout.Stack>
|
||||
</Link>
|
||||
</Layout.Stack>
|
||||
{/if}
|
||||
{#if siteUrl && !hideQRCode}
|
||||
<Button icon secondary on:click={() => (show = true)}>
|
||||
<Icon icon={IconQrcode} size="l" />
|
||||
</Button>
|
||||
{/if}
|
||||
</Layout.Stack>
|
||||
{#if proxyRuleList?.total}
|
||||
<Layout.Stack gap="xxs">
|
||||
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
|
||||
Domains
|
||||
</Typography.Text>
|
||||
<DeploymentDomains domains={proxyRuleList} />
|
||||
</Layout.Stack>
|
||||
{:else if deployment.domain}
|
||||
<Layout.Stack gap="xxs">
|
||||
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
|
||||
Domains
|
||||
</Typography.Text>
|
||||
<Link external href={`${$protocol}${deployment.domain}`} variant="muted">
|
||||
<Layout.Stack gap="xxs" direction="row" alignItems="center">
|
||||
<Trim alternativeTrim>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-primary">
|
||||
{deployment.domain}
|
||||
</Typography.Text>
|
||||
</Trim>
|
||||
<Icon icon={IconExternalLink} size="s" />
|
||||
</Layout.Stack>
|
||||
</Link>
|
||||
</Layout.Stack>
|
||||
{/if}
|
||||
<Layout.Stack gap="xxl" direction="row" wrap="wrap">
|
||||
{#if deployment?.buildTime}
|
||||
|
||||
<Layout.Stack direction="row" gap="xl">
|
||||
{#if deployment.status === 'failed'}
|
||||
<Layout.Stack gap="xxs" inline>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-tertiary">
|
||||
Build time
|
||||
Status
|
||||
</Typography.Text>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-primary">
|
||||
{formatTimeDetailed(deployment.buildTime)}
|
||||
<Status status={deployment.status} label={deployment.status} />
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
{:else}
|
||||
<Layout.Stack gap="xxs" inline>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-tertiary">
|
||||
Deployed
|
||||
</Typography.Text>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-primary">
|
||||
<DeploymentCreatedBy {deployment} />
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
{/if}
|
||||
<Layout.Stack gap="xxs" inline>
|
||||
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
|
||||
Total size
|
||||
</Typography.Text>
|
||||
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-primary">
|
||||
{totalSize.value}{totalSize.unit}
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
<Layout.Stack gap="xxs" inline>
|
||||
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
|
||||
<Layout.Stack direction="row" gap="xxs" alignItems="center">
|
||||
Global CDN <Tooltip>
|
||||
<Icon icon={IconInfo} size="s" />
|
||||
<span slot="tooltip">
|
||||
Optimized speed by caching content on servers closer to
|
||||
users.
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Layout.Stack>
|
||||
|
||||
<Layout.Stack gap="xxl" direction="row" wrap="wrap">
|
||||
<Layout.Stack gap="xxl" direction="row" wrap="wrap" inline>
|
||||
{#if deployment?.buildTime}
|
||||
<Layout.Stack gap="xxs" inline>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-tertiary">
|
||||
Build time
|
||||
</Typography.Text>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-primary">
|
||||
{formatTimeDetailed(deployment.buildTime)}
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Typography.Text>
|
||||
<Layout.Stack inline alignItems="flex-start">
|
||||
<Badge
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
type={isCloud ? 'success' : null}
|
||||
content={isCloud ? 'Connected' : 'Available on Cloud'} />
|
||||
{/if}
|
||||
<Layout.Stack gap="xxs" inline>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-tertiary">
|
||||
Total size
|
||||
</Typography.Text>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-primary">
|
||||
{totalSize.value}{totalSize.unit}
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Layout.Stack>
|
||||
<Layout.Stack gap="xxs" inline>
|
||||
<Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
|
||||
<Layout.Stack direction="row" gap="xxs" alignItems="center">
|
||||
DDoS protection <Tooltip>
|
||||
<Icon icon={IconInfo} size="s" />
|
||||
<span slot="tooltip">
|
||||
Safeguards your site by detecting and blocking malicious
|
||||
traffic.
|
||||
</span>
|
||||
</Tooltip>
|
||||
<Layout.Stack gap="xxl" direction="row" wrap="wrap" inline>
|
||||
<Layout.Stack gap="xxs" inline>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-tertiary">
|
||||
<Layout.Stack direction="row" gap="xxs" alignItems="center">
|
||||
Global CDN <Tooltip>
|
||||
<Icon icon={IconInfo} size="s" />
|
||||
<span slot="tooltip">
|
||||
Optimized speed by caching content on servers closer to
|
||||
users.
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Layout.Stack>
|
||||
</Typography.Text>
|
||||
<Layout.Stack inline alignItems="flex-start">
|
||||
<Badge
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
type={isCloud ? 'success' : null}
|
||||
content={isCloud ? 'Connected' : 'Available on Cloud'} />
|
||||
</Layout.Stack>
|
||||
</Layout.Stack>
|
||||
<Layout.Stack gap="xxs" inline>
|
||||
<Typography.Text
|
||||
variant="m-400"
|
||||
color="--color-fgcolor-neutral-tertiary">
|
||||
<Layout.Stack direction="row" gap="xxs" alignItems="center">
|
||||
DDoS protection <Tooltip>
|
||||
<Icon icon={IconInfo} size="s" />
|
||||
<span slot="tooltip">
|
||||
Safeguards your site by detecting and blocking malicious
|
||||
traffic.
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Layout.Stack>
|
||||
</Typography.Text>
|
||||
<Layout.Stack inline alignItems="flex-start">
|
||||
<Badge
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
type={isCloud ? 'success' : null}
|
||||
content={isCloud ? 'Connected' : 'Available on Cloud'} />
|
||||
</Layout.Stack>
|
||||
</Typography.Text>
|
||||
<Layout.Stack inline alignItems="flex-start">
|
||||
<Badge
|
||||
size="xs"
|
||||
variant="secondary"
|
||||
type={isCloud ? 'success' : null}
|
||||
content={isCloud ? 'Connected' : 'Available on Cloud'} />
|
||||
</Layout.Stack>
|
||||
</Layout.Stack>
|
||||
</Layout.Stack>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { base } from '$app/paths';
|
||||
import { page } from '$app/stores';
|
||||
import Card from '$lib/components/card.svelte';
|
||||
import { Wizard } from '$lib/layout';
|
||||
import { Layout, Typography, Icon, Lights, Step } from '@appwrite.io/pink-svelte';
|
||||
import { Layout, Typography, Icon, Lights, Step, Card } from '@appwrite.io/pink-svelte';
|
||||
import { IconArrowSmRight } from '@appwrite.io/pink-icons-svelte';
|
||||
import Check from './(components)/check.svelte';
|
||||
import type { PageData } from './$types';
|
||||
@@ -54,18 +53,20 @@
|
||||
</svelte:fragment>
|
||||
</SiteCard>
|
||||
</Layout.Stack>
|
||||
<div style="margin-block-start: var(--gap-xxl);">
|
||||
<Step.List>
|
||||
<Step.Item state="current" shortLine={true}>
|
||||
<Layout.Stack direction="row" gap="l" wrap="wrap">
|
||||
{#if !data.site.installationId && !data.site.providerRepositoryId}
|
||||
<Card
|
||||
isTile
|
||||
|
||||
<!-- To add spacing -->
|
||||
<div></div>
|
||||
|
||||
<Step.List>
|
||||
<Step.Item state="current" shortLine={true}>
|
||||
<Layout.Stack>
|
||||
<Layout.Grid columns={!data.site.providerRepositoryId ? 4 : 3} columnsS={1}>
|
||||
{#if !data.site.providerRepositoryId}
|
||||
<Card.Button
|
||||
radius="s"
|
||||
padding="s"
|
||||
isButton
|
||||
on:click={() => (showConnectRepositry = true)}>
|
||||
<Layout.Stack gap="s">
|
||||
<Layout.Stack gap="s" style="height: 100%">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
@@ -82,14 +83,13 @@
|
||||
Connect to a new repository or an existing one.
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
</Card.Button>
|
||||
{/if}
|
||||
<Card
|
||||
isTile
|
||||
<Card.Link
|
||||
radius="s"
|
||||
padding="s"
|
||||
href={`${base}/project-${$page.params.project}/sites/site-${data.site.$id}/domains`}>
|
||||
<Layout.Stack gap="s">
|
||||
<Layout.Stack gap="s" style="height: 100%">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
@@ -104,14 +104,12 @@
|
||||
Connect to an existing domain or add a new one.
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
<Card
|
||||
isTile
|
||||
</Card.Link>
|
||||
<Card.Button
|
||||
radius="s"
|
||||
isButton
|
||||
padding="s"
|
||||
on:click={() => (showInviteCollaborator = true)}>
|
||||
<Layout.Stack gap="s" justifyContent="flex-start">
|
||||
<Layout.Stack gap="s" style="height: 100%">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
@@ -126,14 +124,12 @@
|
||||
Share your progress and start collaborating with your team.
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
<Card
|
||||
isTile
|
||||
</Card.Button>
|
||||
<Card.Button
|
||||
radius="s"
|
||||
isButton
|
||||
padding="s"
|
||||
on:click={() => (showOpenOnMobile = true)}>
|
||||
<Layout.Stack gap="s">
|
||||
<Layout.Stack gap="s" style="height: 100%">
|
||||
<Layout.Stack
|
||||
direction="row"
|
||||
justifyContent="space-between"
|
||||
@@ -149,11 +145,11 @@
|
||||
device.
|
||||
</Typography.Text>
|
||||
</Layout.Stack>
|
||||
</Card>
|
||||
</Layout.Stack>
|
||||
</Step.Item>
|
||||
</Step.List>
|
||||
</div>
|
||||
</Card.Button>
|
||||
</Layout.Grid>
|
||||
</Layout.Stack>
|
||||
</Step.Item>
|
||||
</Step.List>
|
||||
</Layout.Stack>
|
||||
</div>
|
||||
|
||||
|
||||
+1
-1
@@ -134,7 +134,7 @@
|
||||
framework.buildCommand,
|
||||
framework.outputDirectory,
|
||||
framework.adapter,
|
||||
selectedInstallationId || undefined,
|
||||
connectBehaviour === 'later' ? undefined : selectedInstallationId || undefined,
|
||||
framework.fallbackFile,
|
||||
selectedRepository || undefined,
|
||||
branch || undefined,
|
||||
|
||||
Reference in New Issue
Block a user