thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

refactor: product updates modal layout (#2225)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-09-21 16:03:06 +05:30 committed by GitHub
parent bd077e6500
commit 1621125f6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 62 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
web/components/ui/product-updates-modal.tsx
View File

@ -1,15 +1,16 @@
import React from "react"; import React from "react";
import useSWR from "swr"; import useSWR from "swr";
// headless ui // headless ui
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// component
import { MarkdownRenderer, Spinner } from "components/ui";
// icons
import { XMarkIcon } from "@heroicons/react/20/solid";
// services // services
import workspaceService from "services/workspace.service"; import workspaceService from "services/workspace.service";
// helper // components
import { Loader, MarkdownRenderer } from "components/ui";
// icons
import { XMarkIcon } from "@heroicons/react/20/solid";
// helpers
import { renderLongDateFormat } from "helpers/date-time.helper"; import { renderLongDateFormat } from "helpers/date-time.helper";
type Props = { type Props = {
@ -34,8 +35,8 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
<div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <div className="fixed inset-0 z-20 h-full w-full">
<div className="grid place-items-center min-h-full text-center p-4"> <div className="grid place-items-center h-full w-full p-4">
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
@ -45,13 +46,11 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 text-left shadow-xl transition-all grid place-items-center sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-100 shadow-custom-shadow-rg] min-w-[100%] sm:min-w-[50%] sm:max-w-[50%]">
<div className="max-h-[90vh] overflow-y-auto p-5"> <div className="flex flex-col p-4 max-h-[90vh] w-full">
<div className="sm:flex sm:items-start">
<div className="flex w-full flex-col gap-y-4 text-center sm:text-left">
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="flex justify-between text-lg font-medium leading-6 text-custom-text-100" className="flex items-center justify-between text-lg font-semibold"
> >
<span>Product Updates</span> <span>Product Updates</span>
<span> <span>
@ -64,7 +63,8 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
</span> </span>
</Dialog.Title> </Dialog.Title>
{updates && updates.length > 0 ? ( {updates && updates.length > 0 ? (
updates.map((item, index) => ( <div className="h-full overflow-y-auto mt-4 space-y-4">
{updates.map((item, index) => (
<React.Fragment key={item.id}> <React.Fragment key={item.id}>
<div className="flex items-center gap-3 text-xs text-custom-text-200"> <div className="flex items-center gap-3 text-xs text-custom-text-200">
<span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs"> <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
@ -79,16 +79,30 @@ export const ProductUpdatesModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
</div> </div>
<MarkdownRenderer markdown={item.body} /> <MarkdownRenderer markdown={item.body} />
</React.Fragment> </React.Fragment>
)) ))}
</div>
) : ( ) : (
<div className="flex h-full w-full items-center justify-center"> <div className="grid place-items-center w-full mt-4">
<Spinner /> <Loader className="space-y-6 w-full">
Loading... <div className="space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="20px" width="80%" />
<Loader.Item height="20px" width="80%" />
</div>
<div className="space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="20px" width="80%" />
<Loader.Item height="20px" width="80%" />
</div>
<div className="space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="20px" width="80%" />
<Loader.Item height="20px" width="80%" />
</div>
</Loader>
</div> </div>
)} )}
</div> </div>
</div>
</div>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>
</div> </div>