mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
Fix provider wizard aside
This commit is contained in:
ernstmul
+1
-1
@@ -27,7 +27,7 @@
|
||||
"@appwrite.io/pink-icons": "0.25.0",
|
||||
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bd21ff7f",
|
||||
"@appwrite.io/pink-legacy": "^1.0.3",
|
||||
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@504c653",
|
||||
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@247c120",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@sentry/sveltekit": "^8.38.0",
|
||||
"@stripe/stripe-js": "^3.5.0",
|
||||
|
||||
Generated
+9
-9
@@ -27,8 +27,8 @@ importers:
|
||||
specifier: ^1.0.3
|
||||
version: 1.0.3
|
||||
'@appwrite.io/pink-svelte':
|
||||
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@504c653
|
||||
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@504c653(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)
|
||||
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@247c120
|
||||
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@247c120(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)
|
||||
'@popperjs/core':
|
||||
specifier: ^2.11.8
|
||||
version: 2.11.8
|
||||
@@ -258,8 +258,8 @@ packages:
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@f76aff1}
|
||||
version: 1.2.1
|
||||
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@504c653542de13ba8b4815805806f301df92790a':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@504c653542de13ba8b4815805806f301df92790a}
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@247c1201ec78ba5756af404269f6f97f24acc9e5':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@247c1201ec78ba5756af404269f6f97f24acc9e5}
|
||||
version: 1.0.0-next.7
|
||||
peerDependencies:
|
||||
svelte: ^4.0.0
|
||||
@@ -279,8 +279,8 @@ packages:
|
||||
'@appwrite.io/pink-legacy@1.0.3':
|
||||
resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
|
||||
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@504c653':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@504c653}
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@247c120':
|
||||
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@247c120}
|
||||
version: 1.0.0-next.85
|
||||
peerDependencies:
|
||||
react-dom: ^18.0.0
|
||||
@@ -3627,7 +3627,7 @@ snapshots:
|
||||
|
||||
'@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@f76aff1': {}
|
||||
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@504c653542de13ba8b4815805806f301df92790a(svelte@5.25.3)':
|
||||
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@247c1201ec78ba5756af404269f6f97f24acc9e5(svelte@5.25.3)':
|
||||
dependencies:
|
||||
svelte: 5.25.3
|
||||
|
||||
@@ -3644,9 +3644,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@504c653(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)':
|
||||
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@247c120(react-dom@18.3.1(react@18.3.1))(svelte@5.25.3)':
|
||||
dependencies:
|
||||
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@504c653542de13ba8b4815805806f301df92790a(svelte@5.25.3)
|
||||
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@247c1201ec78ba5756af404269f6f97f24acc9e5(svelte@5.25.3)
|
||||
'@floating-ui/dom': 1.6.13
|
||||
'@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3)
|
||||
'@melt-ui/svelte': 0.86.6(svelte@5.25.3)
|
||||
|
||||
@@ -10,11 +10,24 @@
|
||||
import { base } from '$app/paths';
|
||||
import { project } from '../../store';
|
||||
import { wizard } from '$lib/stores/wizard';
|
||||
import { provider, providerParams } from './wizard/store';
|
||||
import { ID, type Models } from '@appwrite.io/console';
|
||||
import { provider, providerParams, providerType } from './wizard/store';
|
||||
import { ID, MessagingProviderType, type Models } from '@appwrite.io/console';
|
||||
import { Providers } from '../provider.svelte';
|
||||
import { Button, Form } from '$lib/elements/forms';
|
||||
import { Fieldset, Layout } from '@appwrite.io/pink-svelte';
|
||||
import { Fieldset, Layout, Typography, ActionList, Accordion } from '@appwrite.io/pink-svelte';
|
||||
import { providers } from '$routes/(console)/project-[project]/messaging/providers/store';
|
||||
import { getProviderText } from '$routes/(console)/project-[project]/messaging/helper';
|
||||
import {
|
||||
ClickableList,
|
||||
ClickableListItem,
|
||||
Collapsible,
|
||||
CollapsibleItem
|
||||
} from '$lib/components';
|
||||
import { newMemberModal } from '$lib/stores/organization';
|
||||
import CreateMember from '$routes/(console)/organization-[organization]/createMember.svelte';
|
||||
import { IconBookOpen, IconInfo, IconUserGroup } from '@appwrite.io/pink-icons-svelte';
|
||||
|
||||
let open = false;
|
||||
|
||||
async function create() {
|
||||
try {
|
||||
@@ -167,7 +180,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<Wizard title="Create provider">
|
||||
<Wizard title="Create provider" columnSize="l">
|
||||
<Form onSubmit={create} isModal={false}>
|
||||
<Layout.Stack gap="xxl">
|
||||
<Fieldset legend="Provider">
|
||||
@@ -181,4 +194,119 @@
|
||||
</Layout.Stack>
|
||||
</Layout.Stack>
|
||||
</Form>
|
||||
<svelte:fragment slot="aside">
|
||||
<Typography.Text variant="m-500">Need a hand?</Typography.Text>
|
||||
{console.log('match', $providerType == MessagingProviderType.Push)}
|
||||
<ActionList.Root>
|
||||
{#if providers[$providerType].providers[$provider].needAHand}
|
||||
{@const needAHand = providers[$providerType].providers[$provider].needAHand}
|
||||
<ActionList.Item.Accordion
|
||||
title={`How to enable ${getProviderText($provider)} ${
|
||||
$providerType == MessagingProviderType.Push
|
||||
? 'notifications'
|
||||
: getProviderText($provider)
|
||||
}?`}
|
||||
icon={IconInfo}>
|
||||
<Layout.Stack>
|
||||
{#each needAHand as p}
|
||||
<p>
|
||||
{@html p}
|
||||
</p>
|
||||
{/each}
|
||||
</Layout.Stack>
|
||||
</ActionList.Item.Accordion>
|
||||
{/if}
|
||||
<ActionList.Item.Anchor
|
||||
href={`https://appwrite.io/docs/products/messaging/${$provider}`}
|
||||
title="Read the full guide in the documentation"
|
||||
icon={IconBookOpen} />
|
||||
<ActionList.Item.Button
|
||||
on:click={() => {
|
||||
$newMemberModal = true;
|
||||
}}
|
||||
title="Invite a team member to complete this step"
|
||||
icon={IconUserGroup} />
|
||||
</ActionList.Root>
|
||||
<!-- <div class="need-a-hand u-flex-vertical u-gap-8">-->
|
||||
<!-- <p class="body-text-2 u-bold u-margin-block-start-48">Need a hand?</p>-->
|
||||
|
||||
<!-- <div>-->
|
||||
<!-- <!–{#if providers[$providerType].providers[$provider].needAHand}–>-->
|
||||
<!-- <!– {@const needAHand = providers[$providerType].providers[$provider].needAHand}–>-->
|
||||
<!-- <!– <div–>-->
|
||||
<!-- <!– class="how-to-enable u-padding-inline-8 u-padding-0"–>-->
|
||||
<!-- <!– style={!open ? '' : 'background-color: hsl(var(--p-bg-color-hover));'}>–>-->
|
||||
<!-- <!– <Collapsible>–>-->
|
||||
<!-- <!– <CollapsibleItem withIndentation bind:open>–>-->
|
||||
<!-- <!– <svelte:fragment slot="beforetitle">–>-->
|
||||
<!-- <!– <div class="u-flex u-cross-center u-gap-16">–>-->
|
||||
<!-- <!– <div class="avatar is-size-small">–>-->
|
||||
<!-- <!– <span–>-->
|
||||
<!-- <!– class="icon-info"–>-->
|
||||
<!-- <!– style:--p-text-size="1.25rem"–>-->
|
||||
<!-- <!– aria-hidden="true"></span>–>-->
|
||||
<!-- <!– </div>–>-->
|
||||
<!-- <!– <span class="title body-text-2 u-small" class:u-bold={open}–>-->
|
||||
<!-- <!– >How to enable {getProviderText($provider)}–>-->
|
||||
<!-- <!– {#if $providerType == MessagingProviderType.Push}notifications{:else}{getProviderText(–>-->
|
||||
<!-- <!– $provider–>-->
|
||||
<!-- <!– )}{/if} service?</span>–>-->
|
||||
<!-- <!– </div>–>-->
|
||||
<!-- <!– </svelte:fragment>–>-->
|
||||
<!-- <!– <div class="u-flex-vertical u-gap-16">–>-->
|
||||
<!-- <!– {#each needAHand as p}–>-->
|
||||
<!-- <!– <p>–>-->
|
||||
<!-- <!– {@html p}–>-->
|
||||
<!-- <!– </p>–>-->
|
||||
<!-- <!– {/each}–>-->
|
||||
<!-- <!– </div>–>-->
|
||||
<!-- <!– </CollapsibleItem>–>-->
|
||||
<!-- <!– </Collapsible>–>-->
|
||||
<!-- <!– </div>–>-->
|
||||
<!-- <!– <div class="u-margin-block-start-4 u-sep-block-end"></div>–>-->
|
||||
<!-- <!–{/if}–>-->
|
||||
|
||||
<!-- <ClickableList>-->
|
||||
<!-- <ClickableListItem-->
|
||||
<!-- href={`https://appwrite.io/docs/products/messaging/${$provider}`}-->
|
||||
<!-- external>-->
|
||||
<!-- <div class="u-flex u-cross-center u-main-space-between">-->
|
||||
<!-- <div class="u-flex u-cross-center u-gap-16">-->
|
||||
<!-- <div class="avatar is-size-small">-->
|
||||
<!-- <span-->
|
||||
<!-- class="icon-book-open"-->
|
||||
<!-- style:--p-text-size="1.25rem"-->
|
||||
<!-- aria-hidden="true"></span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <p>Read the full guide in the documentation</p>-->
|
||||
<!-- </div>-->
|
||||
<!-- <span class="icon-arrow-sm-right u-font-size-20" aria-hidden="true"-->
|
||||
<!-- ></span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </ClickableListItem>-->
|
||||
<!-- <ClickableListItem-->
|
||||
<!-- on:click={() => {-->
|
||||
<!-- $newMemberModal = true;-->
|
||||
<!-- }}>-->
|
||||
<!-- <div class="u-flex u-cross-center u-main-space-between">-->
|
||||
<!-- <div class="u-flex u-cross-center u-gap-16">-->
|
||||
<!-- <div class="avatar is-size-small">-->
|
||||
<!-- <span-->
|
||||
<!-- class="icon-user-group"-->
|
||||
<!-- style:--p-text-size="1.25rem"-->
|
||||
<!-- aria-hidden="true"></span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <p>Invite a team member to complete this step</p>-->
|
||||
<!-- </div>-->
|
||||
<!-- <span class="icon-arrow-sm-right u-font-size-20" aria-hidden="true"-->
|
||||
<!-- ></span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </ClickableListItem>-->
|
||||
<!-- </ClickableList>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</svelte:fragment>
|
||||
{#if $newMemberModal}
|
||||
<CreateMember bind:showCreate={$newMemberModal} />
|
||||
{/if}
|
||||
</Wizard>
|
||||
|
||||
@@ -4,8 +4,7 @@
|
||||
import { providers } from '../store';
|
||||
import { providerType, provider, providerParams } from './store';
|
||||
import SettingsFormList from '../settingsFormList.svelte';
|
||||
import { newMemberModal } from '$lib/stores/organization';
|
||||
import CreateMember from '$routes/(console)/organization-[organization]/createMember.svelte';
|
||||
|
||||
import { MessagingProviderType } from '@appwrite.io/console';
|
||||
import {
|
||||
Collapsible,
|
||||
@@ -17,7 +16,6 @@
|
||||
|
||||
let files: Record<string, FileList> = {};
|
||||
$: inputs = providers[$providerType].providers[$provider].configure;
|
||||
let open = false;
|
||||
|
||||
$: {
|
||||
files;
|
||||
@@ -65,7 +63,6 @@
|
||||
</script>
|
||||
|
||||
<WizardStep {beforeSubmit}>
|
||||
<svelte:fragment slot="title">Settings</svelte:fragment>
|
||||
<svelte:fragment slot="subtitle">
|
||||
Set up the credentials below to enable {providers[$providerType].providers[$provider].title}
|
||||
for sending
|
||||
@@ -73,122 +70,4 @@
|
||||
</svelte:fragment>
|
||||
|
||||
<SettingsFormList bind:files {inputs} bind:params={$providerParams[$provider]} />
|
||||
|
||||
<div class="need-a-hand u-flex-vertical u-gap-8">
|
||||
<p class="body-text-2 u-bold u-margin-block-start-48">Need a hand?</p>
|
||||
|
||||
<div>
|
||||
{#if providers[$providerType].providers[$provider].needAHand}
|
||||
{@const needAHand = providers[$providerType].providers[$provider].needAHand}
|
||||
<div
|
||||
class="how-to-enable u-padding-inline-8 u-padding-0"
|
||||
style={!open ? '' : 'background-color: hsl(var(--p-bg-color-hover));'}>
|
||||
<Collapsible>
|
||||
<CollapsibleItem withIndentation bind:open>
|
||||
<svelte:fragment slot="beforetitle">
|
||||
<div class="u-flex u-cross-center u-gap-16">
|
||||
<div class="avatar is-size-small">
|
||||
<span
|
||||
class="icon-info"
|
||||
style:--p-text-size="1.25rem"
|
||||
aria-hidden="true"></span>
|
||||
</div>
|
||||
<span class="title body-text-2 u-small" class:u-bold={open}
|
||||
>How to enable {getProviderText($provider)}
|
||||
{#if $providerType == MessagingProviderType.Push}notifications{:else}{getProviderText(
|
||||
$provider
|
||||
)}{/if} service?</span>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
<div class="u-flex-vertical u-gap-16">
|
||||
{#each needAHand as p}
|
||||
<p>
|
||||
{@html p}
|
||||
</p>
|
||||
{/each}
|
||||
</div>
|
||||
</CollapsibleItem>
|
||||
</Collapsible>
|
||||
</div>
|
||||
<div class="u-margin-block-start-4 u-sep-block-end"></div>
|
||||
{/if}
|
||||
|
||||
<ClickableList>
|
||||
<ClickableListItem
|
||||
href={`https://appwrite.io/docs/products/messaging/${$provider}`}
|
||||
external>
|
||||
<div class="u-flex u-cross-center u-main-space-between">
|
||||
<div class="u-flex u-cross-center u-gap-16">
|
||||
<div class="avatar is-size-small">
|
||||
<span
|
||||
class="icon-book-open"
|
||||
style:--p-text-size="1.25rem"
|
||||
aria-hidden="true"></span>
|
||||
</div>
|
||||
<p>Read the full guide in the documentation</p>
|
||||
</div>
|
||||
<span class="icon-arrow-sm-right u-font-size-20" aria-hidden="true"></span>
|
||||
</div>
|
||||
</ClickableListItem>
|
||||
<ClickableListItem on:click={() => ($newMemberModal = true)}>
|
||||
<div class="u-flex u-cross-center u-main-space-between">
|
||||
<div class="u-flex u-cross-center u-gap-16">
|
||||
<div class="avatar is-size-small">
|
||||
<span
|
||||
class="icon-user-group"
|
||||
style:--p-text-size="1.25rem"
|
||||
aria-hidden="true"></span>
|
||||
</div>
|
||||
<p>Invite a team member to complete this step</p>
|
||||
</div>
|
||||
<span class="icon-arrow-sm-right u-font-size-20" aria-hidden="true"></span>
|
||||
</div>
|
||||
</ClickableListItem>
|
||||
</ClickableList>
|
||||
</div>
|
||||
</div>
|
||||
</WizardStep>
|
||||
|
||||
{#if $newMemberModal}
|
||||
<CreateMember bind:showCreate={$newMemberModal} />
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.need-a-hand {
|
||||
--p-bg-color-hover: var(--color-neutral-5);
|
||||
.how-to-enable {
|
||||
border-radius: var(--border-radius-small);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: hsl(var(--p-bg-color-hover));
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.clickable-list) {
|
||||
--border: var(--color-neutral-5);
|
||||
--p-clickable-button-bg-color-hover: var(--border);
|
||||
|
||||
:global(.theme-dark) & {
|
||||
--border: var(--color-neutral-85);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.clickable-list-button) {
|
||||
padding-inline: 0.5rem;
|
||||
}
|
||||
|
||||
:global(.theme-dark) & {
|
||||
--p-bg-color-hover: var(--color-neutral-85);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.clickable-list-button):hover p,
|
||||
:global(.clickable-list-button):focus p {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user