Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement new inner modal

Browse Source
This commit is contained in:
Arman
2022-07-08 11:53:30 +02:00
parent b509c2c823
commit 1e8d15c706
2 changed files with 51 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/console/[project]/users/_createTeam.svelte
+25 -19
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Modal, CardDrop } from '$lib/components';
import { Modal, InnerModal } from '$lib/components';
import { Pill } from '$lib/elements';
import { InputText, Button, Form, FormList } from '$lib/elements/forms';
import { addNotification } from '$lib/stores/notifications';
@@ -31,6 +31,9 @@
$: if (!showDropdown) {
id = null;
}
$: if (!showCreate) {
showDropdown = false;
}
</script>
<Form on:submit={create}>
@@ -49,26 +52,29 @@
>Team ID <i class="icon-pencil" /></Pill>
</div>
{:else}
<CardDrop bind:show={showDropdown}>
<svelte:fragment slot="header">Team ID</svelte:fragment>
<p>Enter a custom team ID. Leave blank for a randomly generated team ID.</p>
<svelte:fragment slot="footer">
<input
class="input-text "
type="text"
name="id"
id="id"
placeholder="Enter ID"
bind:value={id} />
<div class="u-flex u-gap-12">
<div class="icon-info u-block" />
<p class="u-small">
Allowed characters: alphanumeric, hyphen, non-leading underscore,
period
</p>
<InnerModal bind:show={showDropdown}>
<svelte:fragment slot="title">Team ID</svelte:fragment>
Enter a custom team ID. Leave blank for a randomly generated team ID.
<svelte:fragment slot="content">
<div class="form">
<InputText
id="id"
label="Custom ID"
showLabel={false}
placeholder="Enter ID"
autofocus={true}
bind:value={name} />
<div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
<span
class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
aria-hidden="true" />
<span class="text u-line-height-1-5"
>Allowed characters: alphanumeric, hyphen, non-leading
underscore, period</span>
</div>
</div>
</svelte:fragment>
</CardDrop>
</InnerModal>
{/if}
</FormList>
<svelte:fragment slot="footer">
src/routes/console/[project]/users/_createUser.svelte
+26 -19
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Modal, CardDrop } from '$lib/components';
import { Modal, InnerModal } from '$lib/components';
import { Pill } from '$lib/elements/';
import {
Button,
@@ -38,6 +38,9 @@
$: if (!showDropdown) {
id = null;
}
$: if (!showCreate) {
showDropdown = false;
}
</script>
<Form on:submit={create}>
@@ -69,26 +72,30 @@
>User ID <i class="icon-pencil" /></Pill>
</div>
{:else}
<CardDrop bind:show={showDropdown}>
<svelte:fragment slot="header">User ID</svelte:fragment>
<p>Enter a custom user ID. Leave blank for a randomly generated user ID.</p>
<svelte:fragment slot="footer">
<input
class="input-text "
type="text"
name="id"
id="id"
placeholder="Enter ID"
bind:value={id} />
<div class="u-flex u-gap-12">
<div class="icon-info u-block" />
<p class="u-small">
Allowed characters: alphanumeric, hyphen, non-leading underscore,
period
</p>
<InnerModal bind:show={showDropdown}>
<svelte:fragment slot="title">User ID</svelte:fragment>
Enter a custom user ID. Leave blank for a randomly generated user ID.
<svelte:fragment slot="content">
<div class="form">
<InputText
id="id"
label="Custom ID"
showLabel={false}
placeholder="Enter ID"
autofocus={true}
bind:value={name} />
<div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
<span
class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
aria-hidden="true" />
<span class="text u-line-height-1-5"
>Allowed characters: alphanumeric, hyphen, non-leading
underscore, period</span>
</div>
</div>
</svelte:fragment>
</CardDrop>
</InnerModal>
{/if}
</FormList>
<svelte:fragment slot="footer">