public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added animations for dialog and tooltip (#2648) 

* added animations for dialog and tooltip

* Update .env.example
pull/2674/head
Peer Richelsen 2022-04-29 19:17:34 +02:00 committed by Omar López
parent e4f7e26ad5
commit 7e57c192ee
8 changed files with 60 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/api

@ -1 +1 @@
Subproject commit 9239b27216d04f60870186b69c5e1bb1642d5d44
Subproject commit 2449d90bcbbf4c0a379f4d766aee299caad488a2

4
apps/web/components/Tooltip.tsx
View File

@ -17,13 +17,13 @@ export function Tooltip({
}) {
return (
<TooltipPrimitive.Root
delayDuration={150}
delayDuration={50}
open={open}
defaultOpen={defaultOpen}
onOpenChange={onOpenChange}>
<TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
<TooltipPrimitive.Content
className="-mt-2 rounded-sm bg-black px-1 py-0.5 text-xs text-white shadow-lg"
className="slideInBottom -mt-2 rounded-sm bg-black px-1 py-0.5 text-xs text-white shadow-lg"
side="top"
align="center"
{...props}>

1
apps/web/pages/bookings/[status].tsx
View File

@ -75,6 +75,7 @@ export default function Bookings() {
</div>
<div className="p-4 text-center" ref={buttonInView.ref}>
<Button
color="minimal"
loading={query.isFetchingNextPage}
disabled={!query.hasNextPage}
onClick={() => query.fetchNextPage()}>

4
apps/web/pages/event-types/index.tsx
View File

@ -232,7 +232,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
)}
<MemoizedItem type={type} group={group} readOnly={readOnly} />
<div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 sm:flex">
<div className="flex justify-between rtl:space-x-reverse">
<div className="flex justify-between space-x-2 rtl:space-x-reverse">
{type.users?.length > 1 && (
<AvatarGroup
border="border-2 border-white"
@ -269,7 +269,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
</Tooltip>
<Dropdown>
<DropdownMenuTrigger
className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900"
className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900 focus:border-gray-300"
data-testid={"event-type-options-" + type.id}>
<DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
</DropdownMenuTrigger>

49
apps/web/styles/globals.css
View File

@ -398,3 +398,52 @@ hr {
.react-date-picker__wrapper {
border: none !important;
}
/* animations */
.slideInBottom {
animation-duration: .3s;
animation-fill-mode: both;
animation-name: slideInBottom
}
@keyframes slideInBottom {
from {
opacity: 0;
transform: translateY(30%);
}
to { opacity: 1 }
}
/* animations */
.slideInTop {
animation-duration: .3s;
animation-fill-mode: both;
animation-name: slideInTop
}
@keyframes slideInTop {
from {
opacity: 0;
transform: translateY(-20%);
}
to {
opacity: 1;
transform: translateY(0%);
}
}
.fadeIn {
animation-duration: .3s;
animation-fill-mode: both;
animation-name: fadeIn;
animation-timing-function: ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to { opacity: 1 }
}

2
apps/website

@ -1 +1 @@
Subproject commit 300d090ebe5772b2b22432931ba1a837b4e5e759
Subproject commit 797f725d982988ec7c2767ee2250b6fb83a82086

6
packages/ui/Dialog.tsx
View File

@ -50,7 +50,7 @@ export function Dialog(props: DialogProps) {
return (
<DialogPrimitive.Root {...dialogProps}>
<DialogPrimitive.Overlay className="fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity" />
<DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 bg-black bg-opacity-50 transition-opacity" />
{children}
</DialogPrimitive.Root>
);
@ -60,10 +60,10 @@ type DialogContentProps = React.ComponentProps<typeof DialogPrimitive["Content"]
export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
({ children, ...props }, forwardedRef) => (
<DialogPrimitive.Portal>
<DialogPrimitive.Overlay className="fixed inset-0 z-40 bg-gray-500 bg-opacity-75 transition-opacity" />
<DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 bg-black bg-opacity-50 transition-opacity" />
<DialogPrimitive.Content
{...props}
className="fixed left-1/2 top-1/2 z-[9999999999] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white p-6 text-left shadow-xl focus-visible:outline-none sm:w-full sm:max-w-[35rem] sm:align-middle"
className="fadeIn fixed left-1/2 top-1/2 z-[9999999999] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white p-6 text-left shadow-xl focus-visible:outline-none sm:w-full sm:max-w-[35rem] sm:align-middle"
ref={forwardedRef}>
{children}
</DialogPrimitive.Content>

2
packages/ui/Dropdown.tsx
View File

@ -29,7 +29,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
<DropdownMenuPrimitive.Content
portalled={props.portalled}
{...props}
className={`w-50 z-10 mt-1 -ml-0 origin-top-right rounded-sm bg-white text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
className={`w-50 slideInTop relative z-10 mt-1 -ml-0 origin-top-right rounded-sm bg-white text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none`}
ref={forwardedRef}>
{children}
</DropdownMenuPrimitive.Content>