Merge pull request #2049 from HarshMN2345/fix-PRO-1882-modal-focus-fix

This commit is contained in:
Darshan
2025-06-30 18:51:37 +05:30
committed by GitHub
23 changed files with 78 additions and 68 deletions
@@ -58,6 +58,7 @@
placeholder="Promo code"
id="code"
label="Add promo code"
autofocus
bind:value={coupon} />
<svelte:fragment slot="footer">
@@ -10,7 +10,12 @@
style="padding-block: 0.13rem">
{#each Array(11) as _, i}
<li>
<Tag size="m" selected={value === i} on:click={() => (value = i)}>
<Tag
size="m"
selected={value === i}
autofocus={i === 0}
data-rating={i}
on:click={() => (value = i)}>
{i}
</Tag>
</li>
@@ -6,6 +6,7 @@
<InputTextarea
required
id="feedback"
autofocus
bind:value={$feedbackData.message}
label="Tell us more about your experience"
placeholder="Share your suggestions and feature requests..." />
+17 -15
View File
@@ -51,7 +51,7 @@
import { base } from '$app/paths';
import { logout } from '$lib/helpers/logout';
import { app } from '$lib/stores/app';
import { isTabletViewport } from '$lib/stores/viewport';
import { isTabletViewport, isSmallViewport } from '$lib/stores/viewport';
import { isCloud } from '$lib/system.js';
import { user } from '$lib/stores/user';
import { Click, trackEvent } from '$lib/actions/analytics';
@@ -166,20 +166,22 @@
>Upgrade</Button.Anchor>
{/if}
<DropList show={$feedback.show} class="extended-width">
<Button.Button
type="button"
variant="compact"
on:click={() => {
toggleFeedback();
trackEvent(Click.FeedbackSubmitClick, { source: 'top_nav' });
}}
>Feedback
</Button.Button>
<svelte:fragment slot="other">
<Feedback />
</svelte:fragment>
</DropList>
{#if !$isSmallViewport}
<DropList show={$feedback.show} class="extended-width">
<Button.Button
type="button"
variant="compact"
on:click={() => {
toggleFeedback();
trackEvent(Click.FeedbackSubmitClick, { source: 'top_nav' });
}}
>Feedback
</Button.Button>
<svelte:fragment slot="other">
<Feedback />
</svelte:fragment>
</DropList>
{/if}
<DropList
noArrow
scrollable
+28 -39
View File
@@ -35,7 +35,7 @@
import MobileSupportModal from '$routes/(console)/wizard/support/mobileSupportModal.svelte';
import MobileFeedbackModal from '$routes/(console)/wizard/feedback/mobileFeedbackModal.svelte';
import { getSidebarState, updateSidebarState } from '$lib/helpers/sidebar';
import { isTabletViewport } from '$lib/stores/viewport';
import { isTabletViewport, isSmallViewport } from '$lib/stores/viewport';
import { Click, trackEvent } from '$lib/actions/analytics';
import type { HTMLAttributes } from 'svelte/elements';
@@ -255,7 +255,7 @@
</Tooltip>
</div>
</Layout.Stack>
{:else}
{:else if $isSmallViewport}
<div class="action-buttons">
<Layout.Stack direction="column" gap="s">
<DropList show={$feedback.show} scrollable>
@@ -282,7 +282,6 @@
trackEvent(Click.SupportOpenClick, { source: 'side_nav' });
}}>
<span>Support</span>
<svelte:fragment slot="other">
<MobileSupportModal bind:show={$showSupportModal}
></MobileSupportModal>
@@ -314,43 +313,33 @@
</div>
{/if}
{#if project}
<div class="only-mobile">
<div class="action-buttons">
<Layout.Stack direction="column" gap="s">
<DropList show={$feedback.show} scrollable>
<Button.Button
variant="secondary"
size="s"
on:click={() => {
toggleFeedback();
trackEvent('click_menu_feedback', { source: 'side_nav' });
}}
><span>Feedback</span>
</Button.Button>
<svelte:fragment slot="other">
<MobileFeedbackModal />
</svelte:fragment>
</DropList>
{#if project && $isSmallViewport}
<div class="action-buttons">
<Layout.Stack direction="column" gap="s">
<DropList show={$feedback.show} scrollable>
<Button.Button
variant="secondary"
size="s"
on:click={() => {
toggleFeedback();
trackEvent('click_menu_feedback', { source: 'side_nav' });
}}
><span>Feedback</span>
</Button.Button>
</DropList>
<DropList show={$showSupportModal} scrollable>
<Button.Button
variant="secondary"
size="s"
on:click={() => {
$showSupportModal = true;
trackEvent(Click.SupportOpenClick, { source: 'side_nav' });
}}>
<span>Support</span>
<svelte:fragment slot="other">
<MobileSupportModal bind:show={$showSupportModal}
></MobileSupportModal>
</svelte:fragment>
</Button.Button>
</DropList>
</Layout.Stack>
</div>
<DropList show={$showSupportModal} scrollable>
<Button.Button
variant="secondary"
size="s"
on:click={() => {
$showSupportModal = true;
trackEvent(Click.SupportOpenClick, { source: 'side_nav' });
}}>
<span>Support</span>
</Button.Button>
</DropList>
</Layout.Stack>
</div>
{/if}
</div>
+1
View File
@@ -34,6 +34,7 @@
label="Name"
placeholder="Project name"
required
autofocus
bind:value={projectName} />
{#if !showCustomId}
<div>
@@ -186,6 +186,7 @@
bind:value={name}
label="Organization name"
placeholder="Enter organization name"
autofocus
id="name"
required />
</Fieldset>
@@ -70,6 +70,7 @@
<Input.Text
required
autofocus
disabled={isLoading}
label="Organization name"
bind:value={organizationName}
@@ -102,7 +102,7 @@
on:submit={createProject}>
<svelte:fragment slot="submit">
<Layout.Stack direction="row" justifyContent="flex-end">
<Button.Button autofocus type="submit" variant="primary" size="s">
<Button.Button type="submit" variant="primary" size="s">
Create
</Button.Button>
</Layout.Stack>
@@ -70,7 +70,7 @@
id="email"
label="Email"
placeholder="Enter email"
autofocus={true}
autofocus
bind:value={email} />
<InputText id="member-name" label="Name" placeholder="Enter name" bind:value={name} />
{#if isCloud}
@@ -50,6 +50,7 @@
name="domain"
bind:value={domainName}
required
autofocus
placeholder="example.com" />
<Divider />
@@ -84,7 +84,13 @@
DNS records map domain names to IP addresses or other resources.
</span>
<Layout.Stack gap="l">
<InputText id="name" label="Name" placeholder="subdomain" bind:value={name} required />
<InputText
id="name"
label="Name"
placeholder="subdomain"
bind:value={name}
required
autofocus />
<Layout.Stack gap="xs">
<InputSelect options={recordTypes} bind:value={type} id="type" label="Type" required />
<Input.Helper state="default">
@@ -73,7 +73,7 @@
<ConsoleButton
size="s"
event="create_user"
on:mousedown={() => newMemberModal.set(true)}
on:click={() => newMemberModal.set(true)}
disabled={isCloud ? !$currentPlan?.addons?.seats?.supported : false}>
<Icon size="s" icon={IconPlus} slot="start" />
<span class="text">Invite</span>
@@ -60,7 +60,7 @@
</Layout.Stack>
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
<ViewSelector view={View.Table} {columns} hideView />
<Button on:mousedown={() => ($showCreateUser = true)} event="create_user" size="s">
<Button on:click={() => ($showCreateUser = true)} event="create_user" size="s">
<Icon size="s" icon={IconPlus} slot="start" />
<span class="text">Create user</span>
</Button>
@@ -173,7 +173,7 @@
href="https://appwrite.io/docs/references/cloud/server-nodejs/users"
target="user"
allowCreate={$canWriteUsers}
on:mousedown={() => showCreateUser.set(true)} />
on:click={() => showCreateUser.set(true)} />
{/if}
</Container>
@@ -56,7 +56,7 @@
</script>
<Modal title="Create user" {error} bind:show={showCreate} onSubmit={create}>
<InputText id="name" label="Name" placeholder="Enter name" autofocus={true} bind:value={name} />
<InputText autofocus id="name" label="Name" placeholder="Enter name" bind:value={name} />
<InputEmail id="email" label="Email" placeholder="Enter email" bind:value={mail} />
<InputPhone id="phone" label="Phone" placeholder="Enter phone" bind:value={phone} />
<InputPassword id="password" label="Password" placeholder="Enter password" bind:value={pass} />
@@ -52,7 +52,7 @@
label="Email"
placeholder="Enter email"
required={true}
autofocus={true}
autofocus
bind:value={email} />
<InputText id="name" label="Name" placeholder="Enter name" bind:value={name} />
<Alert.Inline status="info">
@@ -106,6 +106,7 @@
id="subject"
label="Subject"
required
autofocus={true}
placeholder="Enter subject"
bind:value={subject}>
</InputText>
@@ -116,6 +116,7 @@
id="title"
label="Title"
required
autofocus
placeholder="Enter title"
bind:value={title}>
</InputText>
@@ -96,6 +96,7 @@
id="message"
label="Message"
required
autofocus
maxlength={900}
placeholder="Type here..."
bind:value={content}>
@@ -235,6 +235,7 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
id="hostname"
label="Hostname"
placeholder="localhost"
autofocus
error={hostnameError && 'Please enter a valid hostname'}
bind:value={hostname}>
<Tooltip slot="info">
@@ -77,6 +77,7 @@
id="domain"
bind:value={domainName}
required
autofocus
placeholder="appwrite.example.com" />
</Form>
@@ -88,7 +88,7 @@
<Layout.Stack>
<Layout.Stack gap="s">
<InputText id="domain" placeholder="my-domain" bind:value={domain}>
<InputText id="domain" placeholder="my-domain" bind:value={domain} autofocus>
<svelte:fragment slot="end">
<Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
.{$regionalConsoleVariables._APP_DOMAIN_SITES}
@@ -44,10 +44,7 @@
hideColumns={!data.buckets.total}
hideView={!data.buckets.total} />
{#if $canWriteBuckets}
<Button
on:mousedown={() => ($showCreateBucket = true)}
event="create_bucket"
size="s">
<Button on:click={() => ($showCreateBucket = true)} event="create_bucket" size="s">
<Icon icon={IconPlus} slot="start" size="s" />
Create bucket
</Button>