shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: inline setting input fields with buttons

Browse Source
This commit is contained in:
Henry
2025-02-01 11:51:21 +00:00
parent e321aa2f5d
commit 2882a3da2a
4 changed files with 58 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/web/src/views/settings/components/UpdateDisplayNameForm.tsx
View File

@@ -64,19 +64,21 @@ const UpdateDisplayNameForm = ({ displayName }: { displayName: string }) => {
};
return (
<>
<div className="mb-4 flex max-w-[350px] items-center gap-2">
<div className="flex gap-2">
<div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
<Input {...register("name")} errorMessage={errors.name?.message} />
</div>
<Button
onClick={handleSubmit(onSubmit)}
variant="primary"
disabled={!isDirty || updateDisplayName.isPending}
isLoading={updateDisplayName.isPending}
>
Update
</Button>
</>
<div>
<Button
onClick={handleSubmit(onSubmit)}
variant="primary"
disabled={!isDirty || updateDisplayName.isPending}
isLoading={updateDisplayName.isPending}
>
Update
</Button>
</div>
</div>
);
};

24
apps/web/src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx
View File

@@ -71,22 +71,24 @@ const UpdateWorkspaceDescriptionForm = ({
};
return (
<>
<div className="mb-4 flex max-w-[350px] items-center gap-2">
<div className="flex gap-2">
<div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
<Input
{...register("description")}
errorMessage={errors.description?.message}
/>
</div>
<Button
onClick={handleSubmit(onSubmit)}
variant="primary"
disabled={!isDirty || updateWorkspaceDescription.isPending}
isLoading={updateWorkspaceDescription.isPending}
>
Update
</Button>
</>
<div>
<Button
onClick={handleSubmit(onSubmit)}
variant="primary"
disabled={!isDirty || updateWorkspaceDescription.isPending}
isLoading={updateWorkspaceDescription.isPending}
>
Update
</Button>
</div>
</div>
);
};

24
apps/web/src/views/settings/components/UpdateWorkspaceNameForm.tsx
View File

@@ -67,19 +67,21 @@ const UpdateWorkspaceNameForm = ({
};
return (
<>
<div className="mb-4 flex max-w-[350px] items-center gap-2">
<div className="flex gap-2">
<div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
<Input {...register("name")} errorMessage={errors.name?.message} />
</div>
<Button
onClick={handleSubmit(onSubmit)}
variant="primary"
disabled={!isDirty || updateWorkspaceName.isPending}
isLoading={updateWorkspaceName.isPending}
>
Update
</Button>
</>
<div>
<Button
onClick={handleSubmit(onSubmit)}
variant="primary"
disabled={!isDirty || updateWorkspaceName.isPending}
isLoading={updateWorkspaceName.isPending}
>
Update
</Button>
</div>
</div>
);
};

36
apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
View File

@@ -102,8 +102,8 @@ const UpdateWorkspaceUrlForm = ({
};
return (
<>
<div className="mb-4 flex max-w-[350px] items-center gap-2">
<div className="flex gap-2">
<div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
<Input
{...register("slug")}
className={`${
@@ -129,21 +129,23 @@ const UpdateWorkspaceUrlForm = ({
}
/>
</div>
<Button
onClick={handleSubmit(onSubmit)}
variant="primary"
disabled={
!isDirty ||
updateWorkspaceSlug.isPending ||
checkWorkspaceSlugAvailability.isPending ||
isWorkspaceSlugAvailable?.isAvailable === false ||
isTyping
}
isLoading={updateWorkspaceSlug.isPending}
>
Update
</Button>
</>
<div>
<Button
onClick={handleSubmit(onSubmit)}
variant="primary"
disabled={
!isDirty ||
updateWorkspaceSlug.isPending ||
checkWorkspaceSlugAvailability.isPending ||
isWorkspaceSlugAvailable?.isAvailable === false ||
isTyping
}
isLoading={updateWorkspaceSlug.isPending}
>
Update
</Button>
</div>
</div>
);
};