-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: empty state revamp and loader improvement (#3448)
* chore: empty state asset added * chore: empty state asset updated and image path helper function added * chore: empty state asset updated * chore: empty state asset updated and empty state details constant added * chore: empty state component, helper function and comicbox button added * chore: draft, archived and project issue empty state * chore: cycle, module and issue layout empty state * chore: analytics, dashboard, all issues, pages and project view empty state * chore:projects empty state * chore:projects empty state improvement * chore: cycle, module, view and page loader improvement * chore: code refactor
- Loading branch information
1 parent
1a1594e
commit 87f39d7
Showing
105 changed files
with
897 additions
and
285 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import { useState } from "react"; | ||
| import { Popover } from "@headlessui/react"; | ||
| // popper | ||
| import { usePopper } from "react-popper"; | ||
| // helper | ||
| import { getButtonStyling } from "@plane/ui"; | ||
|
|
||
| type Props = { | ||
| label: string; | ||
| icon?: any; | ||
| title: string | undefined; | ||
| description: string | undefined; | ||
| onClick?: () => void; | ||
| disabled?: boolean; | ||
| }; | ||
|
|
||
| export const ComicBoxButton: React.FC<Props> = (props) => { | ||
| const { label, icon, title, description, onClick, disabled = false } = props; | ||
| const [isHovered, setIsHovered] = useState(false); | ||
|
|
||
| const handleMouseEnter = () => { | ||
| setIsHovered(true); | ||
| }; | ||
|
|
||
| const handleMouseLeave = () => { | ||
| setIsHovered(false); | ||
| }; | ||
|
|
||
| const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null); | ||
| const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(); | ||
| const { styles, attributes } = usePopper(referenceElement, popperElement, { | ||
| placement: "right-end", | ||
| modifiers: [ | ||
| { | ||
| name: "offset", | ||
| options: { | ||
| offset: [0, 10], | ||
| }, | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| return ( | ||
| <Popover> | ||
| <Popover.Button ref={setReferenceElement} onClick={onClick} disabled={disabled}> | ||
| <div className={`flex items-center gap-2.5 ${getButtonStyling("primary", "lg", disabled)}`}> | ||
| {icon} | ||
| <span className="leading-4">{label}</span> | ||
| <span className="relative h-2 w-2"> | ||
| <div | ||
| onMouseEnter={handleMouseEnter} | ||
| onMouseLeave={handleMouseLeave} | ||
| className={`absolute bg-blue-300 right-0 z-10 h-2.5 w-2.5 animate-ping rounded-full`} | ||
| /> | ||
| <div className={`absolute bg-blue-400/40 right-0 h-1.5 w-1.5 mt-0.5 mr-0.5 rounded-full`} /> | ||
| </span> | ||
| </div> | ||
| </Popover.Button> | ||
| {isHovered && ( | ||
| <Popover.Panel | ||
| as="div" | ||
| className="flex flex-col rounded border border-custom-border-200 bg-custom-background-100 p-5 relative min-w-80" | ||
| ref={setPopperElement} | ||
| style={styles.popper} | ||
| {...attributes.popper} | ||
| static | ||
| > | ||
| <div className="absolute w-2 h-2 bg-custom-background-100 border rounded-lb-sm border-custom-border-200 border-r-0 border-t-0 transform rotate-45 bottom-2 -left-[5px]" /> | ||
| <h3 className="text-lg font-semibold w-full">{title}</h3> | ||
| <h4 className="mt-1 text-sm">{description}</h4> | ||
| </Popover.Panel> | ||
| )} | ||
| </Popover> | ||
| ); | ||
| }; |
Oops, something went wrong.