[T-4933] Create Project - Mobile modal layout (#151)
* feat: create project mobile modal layout * style: make dialog content stretch full height
This commit is contained in:
Zachery
GitHub
parent
409b654f9b
commit
4fc654f763
@ -8,6 +8,7 @@
|
||||
"@material-tailwind/react": "^2.1.7",
|
||||
"@radix-ui/react-avatar": "^1.0.4",
|
||||
"@radix-ui/react-checkbox": "^1.0.4",
|
||||
"@radix-ui/react-dialog": "^1.0.5",
|
||||
"@radix-ui/react-popover": "^1.0.7",
|
||||
"@radix-ui/react-radio-group": "^1.1.3",
|
||||
"@radix-ui/react-switch": "^1.0.3",
|
||||
|
||||
@ -6,6 +6,7 @@ import { WavyBorder } from 'components/shared/WavyBorder';
|
||||
import { Button } from 'components/shared/Button';
|
||||
import { CrossIcon } from 'components/shared/CustomIcon';
|
||||
import { cn } from 'utils/classnames';
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
|
||||
export interface CreateProjectLayoutProps
|
||||
extends ComponentPropsWithoutRef<'section'> {}
|
||||
@ -16,24 +17,77 @@ export const CreateProjectLayout = ({
|
||||
}: CreateProjectLayoutProps) => {
|
||||
const { orgSlug } = useParams();
|
||||
|
||||
const closeBtnLink = `/${orgSlug}`;
|
||||
|
||||
const heading = (
|
||||
<Heading as="h2" className="flex-1 text-xl md:text-2xl font-medium">
|
||||
Create new project
|
||||
</Heading>
|
||||
);
|
||||
|
||||
return (
|
||||
<section {...props} className={cn('h-full flex flex-col', className)}>
|
||||
<div className="sticky top-0">
|
||||
<div className="flex px-6 py-4 bg-base-bg items-center gap-4">
|
||||
<Heading as="h2" className="flex-1 text-[24px] font-medium">
|
||||
Create new project
|
||||
</Heading>
|
||||
<Link to={`/${orgSlug}`}>
|
||||
<Button iconOnly variant="tertiary">
|
||||
<CrossIcon size={18} />
|
||||
</Button>
|
||||
</Link>
|
||||
<>
|
||||
{/* Desktop */}
|
||||
<section
|
||||
{...props}
|
||||
className={cn('h-full flex-col hidden md:flex', className)}
|
||||
>
|
||||
<div className="sticky top-0">
|
||||
<div className="flex px-6 py-4 bg-base-bg items-center gap-4">
|
||||
{heading}
|
||||
|
||||
{/* Cannot save btn as variable since responsive variant don't work with compoundVariant */}
|
||||
<Link to={closeBtnLink}>
|
||||
<Button
|
||||
iconOnly
|
||||
variant="tertiary"
|
||||
leftIcon={<CrossIcon />}
|
||||
aria-label="close"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<WavyBorder />
|
||||
</div>
|
||||
<WavyBorder />
|
||||
</div>
|
||||
<section className="px-6 h-full flex-1 py-6 overflow-y-auto">
|
||||
<Outlet />
|
||||
|
||||
<section className="px-6 h-full flex-1 py-6 overflow-y-auto">
|
||||
<Outlet />
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
{/* Mobile */}
|
||||
{/* Setting modal={false} so even if modal is active on desktop, it doesn't block clicks */}
|
||||
<Dialog.Root modal={false} open={true}>
|
||||
<Dialog.Portal>
|
||||
{/* Not using <Dialog.Overlay> since modal={false} disables it and its content will not show */}
|
||||
<div className="bg-base-canvas fixed inset-0 md:hidden overflow-y-auto p-1">
|
||||
<Dialog.Content className="min-h-full overflow-hidden rounded-2xl bg-base-bg shadow-card focus:outline-none">
|
||||
{/* Heading */}
|
||||
<div className="flex px-6 py-4 h-20 items-center gap-4">
|
||||
{heading}
|
||||
<Dialog.Close asChild>
|
||||
<Link to={closeBtnLink}>
|
||||
<Button
|
||||
iconOnly
|
||||
variant="tertiary"
|
||||
leftIcon={<CrossIcon />}
|
||||
aria-label="close"
|
||||
size="sm"
|
||||
/>
|
||||
</Link>
|
||||
</Dialog.Close>
|
||||
</div>
|
||||
|
||||
{/* Border */}
|
||||
<WavyBorder />
|
||||
|
||||
{/* Page content */}
|
||||
<div className="px-4 py-6">
|
||||
<Outlet />
|
||||
</div>
|
||||
</Dialog.Content>
|
||||
</div>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -87,6 +87,7 @@ export default withMT({
|
||||
900: '#0a3a5c',
|
||||
},
|
||||
base: {
|
||||
canvas: '#ECF6FE',
|
||||
bg: '#ffffff',
|
||||
'bg-alternate': '#f8fafc',
|
||||
'bg-emphasized': '#f1f5f9',
|
||||
|
||||
21
yarn.lock
21
yarn.lock
@ -3786,6 +3786,27 @@
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-dialog@^1.0.5":
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300"
|
||||
integrity sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/primitive" "1.0.1"
|
||||
"@radix-ui/react-compose-refs" "1.0.1"
|
||||
"@radix-ui/react-context" "1.0.1"
|
||||
"@radix-ui/react-dismissable-layer" "1.0.5"
|
||||
"@radix-ui/react-focus-guards" "1.0.1"
|
||||
"@radix-ui/react-focus-scope" "1.0.4"
|
||||
"@radix-ui/react-id" "1.0.1"
|
||||
"@radix-ui/react-portal" "1.0.4"
|
||||
"@radix-ui/react-presence" "1.0.1"
|
||||
"@radix-ui/react-primitive" "1.0.3"
|
||||
"@radix-ui/react-slot" "1.0.2"
|
||||
"@radix-ui/react-use-controllable-state" "1.0.1"
|
||||
aria-hidden "^1.1.1"
|
||||
react-remove-scroll "2.5.5"
|
||||
|
||||
"@radix-ui/react-direction@1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.1.tgz#9cb61bf2ccf568f3421422d182637b7f47596c9b"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user