vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 2.2k Packages Projects Releases Wiki Activity

#4133 fixed tooltip positioning (#4136)

Browse Source 
* fixed tooltip positioning

* fixed right side tooltip and z-index

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
This commit is contained in:
Peer Richelsen
2022-09-05 12:49:20 +02:00
committed by GitHub
co-authored by kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
parent b0a1902ca3
commit 7b0d4f0f78
2 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/pages/v2/event-types/index.tsx
+14 -12
View File
@@ -232,7 +232,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
const connectedCalendarsQuery = trpc.useQuery(["viewer.connectedCalendars"]);
return (
<div className="mb-16 flex overflow-hidden rounded-md border border-gray-200 bg-white">
<div className="flex mb-16 overflow-hidden rounded-md border border-gray-200 bg-white">
<ul className="w-full divide-y divide-neutral-200" data-testid="event-types">
{types.map((type, index) => {
const embedLink = `${group.profile.slug}/${type.slug}`;
@@ -249,7 +249,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
)}>
<div
className={classNames(
"group flex w-full items-center justify-between px-4 py-4 pr-0 hover:bg-neutral-50 sm:px-6",
"flex group w-full items-center justify-between px-4 py-4 pr-0 hover:bg-neutral-50 sm:px-6",
type.$disabled && "hover:bg-white"
)}>
{types.length > 1 && !type.$disabled && (
@@ -294,14 +294,16 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
type.$disabled && "pointer-events-none cursor-not-allowed"
)}>
<Tooltip content={t("show_eventtype_on_profile") as string}>
<div className="self-center border-r-2 border-gray-300 pr-4">
<Switch
name="Hidden"
checked={!type.hidden}
onCheckedChange={() => {
setHiddenMutation.mutate({ id: type.id, hidden: !type.hidden });
}}
/>
<div className="py-4">
<div className="-my-2 self-center border-r-2 border-gray-300 pr-4">
<Switch
name="Hidden"
checked={!type.hidden}
onCheckedChange={() => {
setHiddenMutation.mutate({ id: type.id, hidden: !type.hidden });
}}
/>
</div>
</div>
</Tooltip>
<Tooltip content={t("preview") as string}>
@@ -388,7 +390,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
</div>
</div>
</div>
<div className="mr-5 flex flex-shrink-0 sm:hidden">
<div className="flex mr-5 flex-shrink-0 sm:hidden">
<Dropdown>
<DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
<Button
@@ -511,7 +513,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
const EventTypeListHeading = ({ profile, membershipCount }: EventTypeListHeadingProps): JSX.Element => {
console.log(profile.slug);
return (
<div className="mb-4 flex">
<div className="flex mb-4">
<Link href="/settings/teams">
<a>
<Avatar
packages/ui/v2/core/Tooltip.tsx
+7 -1
View File
@@ -1,6 +1,8 @@
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import React from "react";
import { classNames } from "@calcom/lib";
export function Tooltip({
children,
content,
@@ -25,7 +27,11 @@ export function Tooltip({
onOpenChange={onOpenChange}>
<TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
<TooltipPrimitive.Content
className="-mt-2 rounded-md bg-gray-900 px-2 py-1 text-xs font-semibold text-white shadow-lg"
className={classNames(
side === "top" && "-mt-7 -ml-4",
side === "right" && "ml-2",
"relative z-40 rounded-md bg-gray-900 px-2 py-1 text-xs font-semibold text-white shadow-lg"
)}
side={side}
align="center"
{...props}>